slydr.min.js

export class Slydr{constructor(t,e){var s,a,r,i,n,l,o,d=this,f=!1,c=(t=>{let e=Object.assign({"start-at":0,image:"","color-shift":!1,disabled:!1,vertical:!1,"no-handle":!1,buttons:!1,retina:!1,"custom-range":[0,0],"key-control":!1,flag:!1},t);return e.snap=Object.assign({marks:!1,type:!1,points:0,sensitivity:2},t.snap),e})(e),h=0,u=null,p=null,y=null;const g={},v=c.vertical,m=c.snap.points>1&&c.snap.points<=11,w=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent),b=Math.round(c.snap.points),x=("hard"==c.snap.type||"soft"==c.snap.type)&&c.snap.type,k=c["color-shift"],M=m&&c.snap.marks,L=c["custom-range"],S=(0!==L[0]||0!==L[1])&&L[0]<L[1],W=1==c["key-control"],E="ctrl"===c["key-control"],V="shift"===c["key-control"],T=t=>{t&&this.destroy(!0),A(),P.init(),_.general().events().keyboardControls(),D(c.image&&!c["no-handle"]).then(()=>{m&&(H.setValues(),setTimeout(()=>H.pre(),0)),v&&_.verticalTransform(),c.buttons&&B.draw(),k&&j(),c.flag&&P.flag(),S?this.set.data.unit=c["start-at"]||0:z(c["start-at"]||50),g.ready&&g.ready()}),t||Slydr.entries.push(this)},P={init(){s=Slydr.create("slydr",t),a=Slydr.create("trak",s),r=Slydr.create("knob",s),t.classList.add("slydr-container")},flag(){i=Slydr.create("slydr-flag",t,"span"),d.flag(c.vertical)}},A=()=>{if(!(t instanceof Element))throw new Error("Slydr: first param expected Element, found "+typeof t);if(!(e instanceof Object))throw new Error("Slydr: second param expected Object, found "+typeof e)},j=()=>{Slydr.create("",a).style.opacity=String(c["start-at"]/100)},C=t=>a.children[0].style.opacity=t/100,D=t=>new Promise(e=>{if(t){let t=c.image;const i=window.devicePixelRatio>1&&c.retina;if(i){const e=t.lastIndexOf(".");t=t.slice(0,e)+"@2x"+t.slice(e)}let n=new Image;function a(){i&&(n.style.width=n.offsetWidth/2+"px");var a=n.naturalHeight,l=n.naturalWidth+"px",o=a+"px",d=`url(${t}) no-repeat`;if(r.style.width=l,r.style.height=o,setTimeout(()=>{r.style.background=d,i&&(r.style.backgroundSize="100%")},0),a>s.offsetHeight){var f=(a-s.offsetHeight)/2;s.style.overflow="visible",r.style.top=`-${f}px`}e()}n.onload=a,n.src=t}else s.style.overflow="hidden",setTimeout(e,0)}),K={down:w?"touchstart":"mousedown",move:w?"touchmove":"mousemove",up:w?"touchend":"mouseup"},$={barMouseDown(e){if(!c.disabled&&(e.returnValue&&(e.returnValue=!1),f=!0,s.dataset.state="active",t.classList.add("slydr-active"),!w)){const t=s.offsetWidth,i=r.offsetWidth;let l=$.cursorRegistration(e),o=l-i/2;o<0?(o=0,r.style.left="0"):o>=t-i&&(o=t-i,r.style.left=t-i+"px"),r.style.left=o+"px",a.style.width=o+i/2+"px",x&&"hard"!==x||(n=d.getPercent("hard"===x?H.init("drag",o):o)),k&&C(n),c.flag&&d.flag(c.vertical)}},docMouseMove(t){if(f){const l=s.offsetWidth,o=r.offsetWidth;var e=$.cursorRegistration(t);const f=o/2,u=e-f;t.returnValue&&(t.returnValue=!1),e<=f&&(!m||"hard"!==x)?(r.style.left="0",a.style.width=f+"px"):e>=l-f&&(!m||"hard"!==x)?(r.style.left=l-o+"px",a.style.width=l-f+"px"):(r.style.left=e-f+"px",a.style.width=e+"px",x&&"hard"!==x||H.init("drag",u)),h=r.offsetLeft;var i=s.dataset.state;n=d.getPercent(h),c.flag&&d.flag(c.vertical),g.drag&&g.drag(d.get.data),k&&"active"===i&&C(n)}},docMouseUp(){if(f=!1,"active"===s.dataset.state){const e=r.offsetLeft;h=!m||"soft"!==x&&"hard"!==x?e<0?0:e:H.init("drop",e),n=d.getPercent(h),g.drop&&g.drop(d.get.data),s.dataset.state="inactive",t.classList.remove("slydr-active"),k&&C(n),c.flag&&d.flag(c.vertical)}B.is_down&&B.clearAction()},winResize(){const t=r.offsetWidth,e=s.offsetWidth;if(d["start-at"]=n,M){let s=null;u.style.width=e+"px";let a=[].slice.call(u.children);a.forEach((a,r)=>{s=(e-t)/(b-1)*r+t/2,a.style.left=s+"px"})}},cursorRegistration(t){const e=s.getBoundingClientRect();if(v){let a=e.top+s.offsetWidth;return Math.floor(a-(w?t.targetTouches[0].pageY:t.pageY))}return Math.floor((w?t.targetTouches[0].pageX:t.pageX)-e.left)}},_={events(){return s.addEventListener(K.down,$.barMouseDown),document.addEventListener(K.move,$.docMouseMove),document.addEventListener(K.up,$.docMouseUp),window.addEventListener("resize",$.winResize),this},general(){if(d.is={get disabled(){return c.disabled}},d.get={data:{get value(){return n},get"init-value"(){return c["start-at"]}},get"user-callbacks"(){return g},get elements(){return{knob:r,trak:a,frame:s,container:t,flag:i}}},d.set={data:{set value(t){goTo(t)}},set disabled(t){c.disabled=t}},S){const t=L[0],e=L[1]-t;Object.defineProperty(d.get.data,"unit",{get:()=>e*n/100+t}),Object.defineProperty(d.set.data,"unit",{set(t){var s=t-L[0],a=s/e*100;z(a)}})}return this},verticalTransform(){if(M){let t=[s,u];y=Slydr.create("vertical-marks"),Slydr.wrapAll(t,y)}s.classList.add("vertical")},keyboardControls(){if(!w&&(W||V||E)&&!c.disabled){let t,e=!1,s=!1,a=!1,r=v?40:37,i=v?38:39;$.docKeyDown=(n=>{e||(window.event?(t=window.event.keyCode,s=window.event.shiftKey,a=window.event.ctrlKey):n&&(t=n.which,s=n.shiftKey,a=n.ctrlKey),(V&&s&&!a||E&&a&&!s||!V&&!E)&&(t===r?(B.eventMouseDown("<"),e=!0):t===i&&(B.eventMouseDown(">"),e=!0)))}),$.docKeyUp=(()=>{e=!1,B.clearAction()}),document.addEventListener("keydown",$.docKeyDown),document.addEventListener("keyup",$.docKeyUp)}}},z=t=>{t<=0?t=0:t>=100&&(t=100),n=t;const e=s.offsetWidth,i=r.offsetWidth,l=(e-i)*t/100+i/2,o=l-i/2;r.style.left=`${o}px`,a.style.width=`${l}px`,k&&(a.children[0].style.opacity=String(t/100)),c.flag&&d.flag(c.vertical)},H={pctValues:[0],storedValue:"s-1",index:null,init(t,e){if(m){var i=c.snap.sensitivity;if(i||"hard"===x||"soft"===x){var n=r.offsetWidth,l=s.offsetWidth,o=(i&&i>0&&i<4?5*(i+1):15)-3;let d=[];for(let t of this.pctValues)d.push((l-n)*t/100);let f=null,c=0,h=0;for(let t of d)(null===f||Math.abs(t-e)<Math.abs(f-e))&&(f=t,c=this.pctValues[h],this.index=h),h++;return"drag"===t?"hard"===x?(r.style.left=f+"px",a.style.width=f+n/2+"px",this.on(f,c)):Math.round(Math.abs(f-e))<o?(r.style.left=f+"px",a.style.width=f+n/2+"px",this.on(f,c)):this.storedValue="s-1":(r.style.left=f+"px",a.style.width=f+n/2+"px"),f}}},setValues(){for(var t=r.offsetWidth,e=100/(b-1),s=e;s<=101;)this.pctValues.push(s),s+=e;M&&this.drawMarks(t)},drawMarks(t){var e=s.offsetWidth;if(s.insertAdjacentHTML("afterend",'<div class="slydr-markers"></div>'),u=s.parentNode.getElementsByClassName("slydr-markers")[0],u.style.width=e+"px",u){let s="",a=null;u.style.width=e+"px";for(let r=b-1;r>=0;r--)a=(e-t)/(b-1)*r+t/2,s+=`<div style="left:${a}px"></div>`;u.innerHTML=s}},on(t){"s"+t!==this.storedValue&&(this.storedValue="s"+t,n=d.getPercent(t),g.snap&&g.snap(d.get.data))},pre(){switch(x){case"hard":case"soft":this.init("drag",r.offsetLeft),n=d.getPercent(r.offsetLeft)}}},B={knob_adjust:0,is_down:!1,timers:null,snap:m&&("hard"===x||"soft"===x),draw(){if(this.knob_adjust=r.offsetWidth/s.offsetWidth*50,l=Slydr.create("slydr-buttons"),o=Slydr.create("slydr-buttons"),l.innerHTML="&nbsp;+&nbsp;",o.innerHTML="&nbsp;&minus;&nbsp;",o.style["font-size"]=l.style["font-size"]=s.offsetHeight+"px",M){let t=null;if(v)t=s.closest(".vertical-marks");else{s.style.cssText+=`width: ${u.offsetWidth}px !important`;let e=[s];p=Slydr.create("button-marks"),M&&e.push(u),t=Slydr.wrapAll(e,p)}t.insertBefore(l,s.nextSibling),t.prepend(o)}else s.style.display=v?"block":"inline-block",s.style.verticalAlign="middle",s.parentNode.insertBefore(l,s.nextSibling),s.parentNode.insertBefore(o,s);l.addEventListener(K.down,()=>this.eventMouseDown(">")),l.addEventListener(K.up,this.clearAction),o.addEventListener(K.down,()=>this.eventMouseDown("<")),o.addEventListener(K.up,this.clearAction)},triggers(t,e){if(!c.disabled){if(this.snap){if(null===H.index)for(let e=0;e<H.pctValues.length;e++)if(H.pctValues[e]>=n){H.index=">"===t?e-1:e;break}">"===t?b-1>H.index&&H.index++:H.index>0&&H.index--,n=H.pctValues[H.index]}else">"===t?n+=e?1:10:n-=e?1:10;var i=n;n+this.knob_adjust>100?(n=100,i=100):n-this.knob_adjust<0&&(n=0,i=0);var l=(s.offsetWidth-r.offsetWidth)*i/100+r.offsetWidth/2,o=l-r.offsetWidth/2;r.style.left=o+"px",a.style.width=l+"px",k&&C(i),n=d.getPercent(o),c.flag&&d.flag(c.vertical),g["button-press"]&&g["button-press"](d.get.data)}},hold(t){var e=setInterval(()=>{this.is_down?this.triggers(t,!0):clearInterval(e)},this.snap?101:10)},clearAction(){this.is_down=!1,clearTimeout(this.timers)},eventMouseDown(t){this.is_down=!0,this.triggers(t),this.timers=setTimeout(()=>this.hold(t),500)}};this.reset=(()=>T(!0)),T()}getPercent(t){var e=t/(this.get.elements.frame.offsetWidth-this.get.elements.knob.offsetWidth)*100;return Math.min(e,100)}on(t,e){switch(t){case"ready":case"drop":case"drag":case"snap":case"button-press":this.get["user-callbacks"][t]=(t=>e.call(this,t));break;default:console.warn('Slydr: "'+t+"\" isn't an accepted event name. See documentation.")}return this}destroy(t){const e=this.get.elements.container;for(;e.firstChild;)e.removeChild(e.firstChild);if(e.classList.remove("slydr-container"),!t){for(let t in this)delete this[t];Slydr.entries.forEach((t,e)=>{t===this&&Slydr.entries.splice(e,1)})}}flag(t){const e=this.get.data,s=this.get.elements;s.flag.textContent=e.unit?String(Math.round(100*e.unit)/100):`${Math.round(e.value)}%`,t&&!s.flag.classList.contains("vertical")?s.flag.classList.add("vertical"):t||s.flag.classList.remove("vertical"),s.flag.style.transform=t?`translateY(${s.frame.offsetWidth-s.knob.offsetLeft}px)`:`translateX(${-1*s.frame.offsetWidth+s.knob.offsetLeft}px)`}static wrapAll(t,e){t[0].parentNode.insertBefore(e,t[0]);for(let s of t)e.appendChild(s);return e}static create(t,e,s){var a=document.createElement(s||"div");return a.className=t,e&&e.appendChild(a),a}static get info(){return{author:"Daniel B. Kazmer (webshifted.com)",created:"2012-11-24",modified:"2020-05-09",version:"4.0.0 beta",github:"https://github.com/dkazmer/slydr","home-page":"https://webshifted.com/slydr"}}}Slydr.entries=[];