framework7/lazy-components/range.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);document,window;var A=e.$,P=(e.Template7,e.utils),X=(e.device,e.support),t=e.Class,r=(e.Modal,e.ConstructorMethods),l=(e.ModalMethods,function(L){function e(a,t){L.call(this,t,[a]);var i=this,e={el:null,inputEl:null,dual:!1,step:1,label:!1,min:0,max:100,value:0,draggableBar:!0};i.useModulesParams(e),i.params=P.extend(e,t);var n=i.params.el;if(!n)return i;var r=A(n);if(0===r.length)return i;if(r[0].f7Range)return r[0].f7Range;var l,o=r.dataset();"step min max value".split(" ").forEach(function(e){void 0===t[e]&&void 0!==o[e]&&(i.params[e]=parseFloat(o[e]))}),"dual label".split(" ").forEach(function(e){void 0===t[e]&&void 0!==o[e]&&(i.params[e]=o[e])}),i.params.value||(void 0!==o.value&&(i.params.value=o.value),void 0!==o.valueLeft&&void 0!==o.valueRight&&(i.params.value=[parseFloat(o.valueLeft),parseFloat(o.valueRight)])),i.params.dual||(i.params.inputEl?l=A(i.params.inputEl):r.find('input[type="range"]').length&&(l=r.find('input[type="range"]').eq(0)));var s=i.params,u=s.dual,d=s.step,p=s.label,v=s.min,c=s.max,g=s.value;P.extend(i,{$el:r,el:r[0],$inputEl:l,inputEl:l?l[0]:void 0,dual:u,step:d,label:p,min:v,max:c,value:g,previousValue:g}),l&&("step min max".split(" ").forEach(function(e){!t[e]&&l.attr(e)&&(i.params[e]=parseFloat(l.attr(e)),i[e]=parseFloat(l.attr(e)))}),void 0!==l.val()&&(i.params.value=parseFloat(l.val()),i.value=parseFloat(l.val()))),i.dual&&r.addClass("range-slider-dual"),i.label&&r.addClass("range-slider-label");var f=A('<div class="range-bar"></div>'),h=A('<div class="range-bar-active"></div>');f.append(h);var m,b='\n      <div class="range-knob-wrap">\n        <div class="range-knob"></div>\n        '+(i.label?'<div class="range-knob-label"></div>':"")+"\n      </div>\n    ",y=[A(b)],x=[];i.dual&&y.push(A(b)),r.append(f),y.forEach(function(e){r.append(e)}),i.label&&(x.push(y[0].find(".range-knob-label")),i.dual&&x.push(y[1].find(".range-knob-label"))),P.extend(i,{app:a,knobs:y,labels:x,$barEl:f,$barActiveEl:h}),r[0].f7Range=i;var $,E,k,M,R,C,V,W,w={};function F(){R=!0}function S(e){if(!m&&(i.params.draggableBar||0!==A(e.target).closest(".range-knob").length)){var a;R=!1,w.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,w.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,m=!0,$=void 0,E=r.offset().left;var t=(a=i.app.rtl?(E+i.rangeWidth-w.x)/i.rangeWidth:(w.x-E)/i.rangeWidth)*(i.max-i.min)+i.min;t=i.dual?Math.abs(i.value[0]-t)<Math.abs(i.value[1]-t)?(M=0,k=i.knobs[0],[t,i.value[1]]):(M=1,k=i.knobs[1],[i.value[0],t]):(k=i.knobs[0],a*(i.max-i.min)+i.min),P.nextTick(function(){m&&k.addClass("range-knob-active-state")},70),i.on("change",F),i.setValue(t,!0)}}function T(e){if(m){var a="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY;if(void 0===$&&($=!!($||Math.abs(t-w.y)>Math.abs(a-w.x))),$)m=!1;else{e.preventDefault();var n,r,l=(i.app.rtl?(E+i.rangeWidth-a)/i.rangeWidth:(a-E)/i.rangeWidth)*(i.max-i.min)+i.min;if(i.dual)0===M?(n=l,(r=i.value[1])<n&&(r=n)):(r=l)<(n=i.value[0])&&(n=r),l=[n,r];i.setValue(l,!0)}}}function z(){if(!m)return $&&k.removeClass("range-knob-active-state"),void(m=!1);i.off("change",F),m=!1,k.removeClass("range-knob-active-state"),R&&i.$inputEl&&!i.dual&&i.$inputEl.trigger("change"),R=!1,void 0!==i.previousValue&&(i.dual&&(i.previousValue[0]!==i.value[0]||i.previousValue[1]!==i.value[1])||!i.dual&&i.previousValue!==i.value)&&(i.$el.trigger("range:changed",i,i.value),i.emit("local::changed rangeChanged",i,i.value))}function B(){i.calcSize(),i.layout()}return i.attachEvents=function(){var e=!!X.passiveListener&&{passive:!0};i.$el.on(a.touchEvents.start,S,e),a.on("touchmove",T),a.on("touchend:passive",z),a.on("tabShow",B),a.on("resize",B),(C=i.$el.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast")).on("modal:open",B),(V=i.$el.parents(".panel")).on("panel:open",B),(W=i.$el.parents(".page").eq(0)).on("page:reinit",B)},i.detachEvents=function(){var e=!!X.passiveListener&&{passive:!0};i.$el.off(a.touchEvents.start,S,e),a.off("touchmove",T),a.off("touchend:passive",z),a.off("tabShow",B),a.off("resize",B),C&&C.off("modal:open",B),V&&V.off("panel:open",B),W&&W.off("page:reinit",B),W=V=C=null},i.useModules(),i.init(),i}return L&&(e.__proto__=L),((e.prototype=Object.create(L&&L.prototype)).constructor=e).prototype.calcSize=function(){var e=this.$el.outerWidth();0!==e&&(this.rangeWidth=e,this.knobWidth=this.knobs[0].outerWidth())},e.prototype.layout=function(){var e,a=this,t=a.app,r=a.knobWidth,l=a.rangeWidth,n=a.min,i=a.max,o=a.knobs,s=a.$barActiveEl,u=a.value,d=a.label,p=a.labels,v=t.rtl?"right":"left";if(a.dual){var c=[(u[0]-n)/(i-n),(u[1]-n)/(i-n)];s.css(((e={})[v]=100*c[0]+"%",e.width=100*(c[1]-c[0])+"%",e)),o.forEach(function(e,a){var t=l*c[a],n=l*c[a]-r/2;n<0&&(t=r/2),l<n+r&&(t=l-r/2),e.css(v,t+"px"),d&&p[a].text(u[a])})}else{var g=(u-n)/(i-n);s.css("width",100*g+"%");var f=l*g,h=l*g-r/2;h<0&&(f=r/2),l<h+r&&(f=l-r/2),o[0].css(v,f+"px"),d&&p[0].text(u)}a.dual&&0<=u.indexOf(n)||!a.dual&&u===n?a.$el.addClass("range-slider-min"):a.$el.removeClass("range-slider-min"),a.dual&&0<=u.indexOf(i)||!a.dual&&u===i?a.$el.addClass("range-slider-max"):a.$el.removeClass("range-slider-max")},e.prototype.setValue=function(e,a){var t,n,r=this,l=r.step,i=r.min,o=r.max;if(r.dual){n=[r.value[0],r.value[1]];var s=e;if(Array.isArray(s)||(s=[e,e]),e[0]>e[1]&&(s=[s[0],s[0]]),(s=s.map(function(e){return Math.max(Math.min(Math.round(e/l)*l,o),i)}))[0]===r.value[0]&&s[1]===r.value[1])return r;s.forEach(function(e,a){r.value[a]=e}),t=n[0]!==s[0]||n[1]!==s[1],r.layout()}else{n=r.value;var u=Math.max(Math.min(Math.round(e/l)*l,o),i);r.value=u,r.layout(),t=n!==u}return t&&(r.previousValue=n),t&&(r.$el.trigger("range:change",r,r.value),r.$inputEl&&!r.dual&&(r.$inputEl.val(r.value),a?r.$inputEl.trigger("input"):r.$inputEl.trigger("input change")),a||(r.$el.trigger("range:changed",r,r.value),r.emit("local::changed rangeChanged",r,r.value)),r.emit("local::change rangeChange",r,r.value)),r},e.prototype.getValue=function(){return this.value},e.prototype.init=function(){return this.calcSize(),this.layout(),this.attachEvents(),this},e.prototype.destroy=function(){var e=this;e.$el.trigger("range:beforedestroy",e),e.emit("local::beforeDestroy rangeBeforeDestroy",e),delete e.$el[0].f7Range,e.detachEvents(),P.deleteProps(e),e=null},e}(t)),n={name:"range",create:function(){var n=this;n.range=P.extend(r({defaultSelector:".range-slider",constructor:l,app:n,domProp:"f7Range"}),{getValue:function(e){void 0===e&&(e=".range-slider");var a=n.range.get(e);if(a)return a.getValue()},setValue:function(e,a){void 0===e&&(e=".range-slider");var t=n.range.get(e);if(t)return t.setValue(a)}})},static:{Range:l},on:{tabMounted:function(e){var t=this;A(e).find(".range-slider-init").each(function(e,a){return new l(t,{el:a})})},tabBeforeRemove:function(e){A(e).find(".range-slider-init").each(function(e,a){a.f7Range&&a.f7Range.destroy()})},pageInit:function(e){var t=this;e.$el.find(".range-slider-init").each(function(e,a){return new l(t,{el:a})})},pageBeforeRemove:function(e){e.$el.find(".range-slider-init").each(function(e,a){a.f7Range&&a.f7Range.destroy()})}},vnode:{"range-slider-init":{insert:function(e){var a=e.elm;this.range.create({el:a})},destroy:function(e){var a=e.elm;a.f7Range&&a.f7Range.destroy()}}}};if(a){if(e.prototype.modules&&e.prototype.modules[n.name])return;e.use(n),e.instance&&(e.instance.useModuleParams(n,e.instance.params),e.instance.useModule(n))}return n}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))