@guardian/mobile-apps-article-templates/ArticleTemplates/assets/build/mobile-range-slider.js

Templates for articles on both iOS and Android next-gen apps

/*! For license information please see mobile-range-slider.js.LICENSE.txt */
function isDark(){return!!document.querySelector(".dark-mode-on")||!!window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches}Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,fNOP=function(){},fBound=function(){return i.apply(this instanceof fNOP?this:t||window,e.concat(Array.prototype.slice.call(arguments)))};return fNOP.prototype=this.prototype,fBound.prototype=new fNOP,fBound}),function(t){var e={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","touchcancel","mouseup"]};function MobileRangeSlider(e,i){var o;for(o in this.element=e,this.options={},i=i||{},this.defaultOptions)i[o]!==t?this.options[o]=i[o]:this.options[o]=this.defaultOptions[o];this.supportsWebkit3dTransform="WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix,"string"==typeof e&&(this.element=document.getElementById(e)),this.knob=this.element.getElementsByClassName("knob")[0],this.track=this.element.getElementsByClassName("track")[0],this.start=this.start.bind(this),this.move=this.move.bind(this),this.end=this.end.bind(this),this.addEvents("start"),this.setValue(this.options.value),window.addEventListener("resize",this.update.bind(this))}MobileRangeSlider.prototype.defaultOptions={value:0,min:0,max:100,change:null},MobileRangeSlider.prototype.addEvents=function(t){var i,o=e[t],n=this[t];for(i in o)this.element.addEventListener(o[i],n,!1)},MobileRangeSlider.prototype.removeEvents=function(t){var i,o=e[t],n=this[t];for(i in o)this.element.removeEventListener(o[i],n,!1)},MobileRangeSlider.prototype.start=function(t){this.addEvents("move"),this.addEvents("end"),this.handle(t)},MobileRangeSlider.prototype.move=function(t){this.handle(t)},MobileRangeSlider.prototype.end=function(){this.removeEvents("move"),this.removeEvents("end")},MobileRangeSlider.prototype.update=function(){this.setValue(this.value)},MobileRangeSlider.prototype.setValue=function(e){e===t&&(e=this.options.min),e=Math.min(e,this.options.max),e=Math.max(e,this.options.min);var i=this.knob.offsetWidth,o=this.track.offsetWidth,n=this.options.max-this.options.min,s=o-i,r=Math.round((e-this.options.min)*s/n);this.setKnobPosition(r),this.setTrackPosition(r),this.value=e,this.callback(e)},MobileRangeSlider.prototype.setKnobPosition=function(t){this.supportsWebkit3dTransform?this.knob.style.webkitTransform="translate3d("+t+"px, 0, 0)":this.knob.style.webkitTransform=this.knob.style.MozTransform=this.knob.style.msTransform=this.knob.style.OTransform=this.knob.style.transform="translateX("+t+"px)"},MobileRangeSlider.prototype.setTrackPosition=function(t){var e=this.track.offsetWidth,i=t<1||e<1?0:Math.ceil(t/e*100),o=isDark()?"#f3c200":"#ffe500";this.track.setAttribute("style","background: -webkit-linear-gradient(left, "+o+", "+o+" "+i+"%, #999 "+i+"%, #999); background: linear-gradient(left, "+o+", "+o+" "+i+"%, #999 "+i+"%, #999)")},MobileRangeSlider.prototype.handle=function(t){t.preventDefault(),t.targetTouches&&(t=t.targetTouches[0]);var e,i,o=t.pageX,n=this.knob.offsetWidth,s=this.track.offsetWidth,r=s-n,a=this.options.max-this.options.min;for(e=this.element;e;e=e.offsetParent)o-=e.offsetLeft;o+=n/2,o=Math.min(o,s),o=Math.max(o-n,0),this.setKnobPosition(o),this.setTrackPosition(o),i=this.options.min+Math.round(o*a/r),this.setValue(i)},MobileRangeSlider.prototype.callback=function(t){this.options.change&&this.options.change(t)},window.MobileRangeSlider=MobileRangeSlider}();