framework7/components/range/range.lazy.js

Full featured mobile HTML framework for building iOS & Android apps

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