framework7 6.3.15 → 7.0.0-beta.11

package/{esm/components → components}/range/range-class.js

@@ -1,26 +1,14 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import $ from '../../shared/dom7';
-import { extend, nextTick, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-import { getSupport } from '../../shared/get-support';
-
-var Range = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Range, _Framework7Class);
-
-  function Range(app, params) {
-    var _this;
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var range = _assertThisInitialized(_this);
-
-    var support = getSupport();
-    var defaults = {
+import $ from '../../shared/dom7.js';
+import { extend, nextTick, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import { getSupport } from '../../shared/get-support.js';
+
+class Range extends Framework7Class {
+  constructor(app, params) {
+    super(params, [app]);
+    const range = this;
+    const support = getSupport();
+    const defaults = {
       el: null,
       inputEl: null,
       dual: false,
@@ -42,18 +30,18 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     range.useModulesParams(defaults);
     range.params = extend(defaults, params);
-    var el = range.params.el;
-    if (!el) return range || _assertThisInitialized(_this);
-    var $el = $(el);
-    if ($el.length === 0) return range || _assertThisInitialized(_this);
-    if ($el[0].f7Range) return $el[0].f7Range || _assertThisInitialized(_this);
-    var dataset = $el.dataset();
-    'step min max value scaleSteps scaleSubSteps'.split(' ').forEach(function (paramName) {
+    const el = range.params.el;
+    if (!el) return range;
+    const $el = $(el);
+    if ($el.length === 0) return range;
+    if ($el[0].f7Range) return $el[0].f7Range;
+    const dataset = $el.dataset();
+    'step min max value scaleSteps scaleSubSteps'.split(' ').forEach(paramName => {
       if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {
         range.params[paramName] = parseFloat(dataset[paramName]);
       }
     });
-    'dual label vertical verticalReversed scale'.split(' ').forEach(function (paramName) {
+    'dual label vertical verticalReversed scale'.split(' ').forEach(paramName => {
       if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {
         range.params[paramName] = dataset[paramName];
       }
@@ -67,7 +55,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var $inputEl;
+    let $inputEl;
 
     if (!range.params.dual) {
       if (range.params.inputEl) {
@@ -77,42 +65,43 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var _range$params = range.params,
-        dual = _range$params.dual,
-        step = _range$params.step,
-        label = _range$params.label,
-        min = _range$params.min,
-        max = _range$params.max,
-        value = _range$params.value,
-        vertical = _range$params.vertical,
-        verticalReversed = _range$params.verticalReversed,
-        scale = _range$params.scale,
-        scaleSteps = _range$params.scaleSteps,
-        scaleSubSteps = _range$params.scaleSubSteps,
-        limitKnobPosition = _range$params.limitKnobPosition;
+    const {
+      dual,
+      step,
+      label,
+      min,
+      max,
+      value,
+      vertical,
+      verticalReversed,
+      scale,
+      scaleSteps,
+      scaleSubSteps,
+      limitKnobPosition
+    } = range.params;
     extend(range, {
-      app: app,
-      $el: $el,
+      app,
+      $el,
       el: $el[0],
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl ? $inputEl[0] : undefined,
-      dual: dual,
-      step: step,
-      label: label,
-      min: min,
-      max: max,
-      value: value,
+      dual,
+      step,
+      label,
+      min,
+      max,
+      value,
       previousValue: value,
-      vertical: vertical,
-      verticalReversed: verticalReversed,
-      scale: scale,
-      scaleSteps: scaleSteps,
-      scaleSubSteps: scaleSubSteps,
-      limitKnobPosition: limitKnobPosition
+      vertical,
+      verticalReversed,
+      scale,
+      scaleSteps,
+      scaleSubSteps,
+      limitKnobPosition
     });
 
     if ($inputEl) {
-      'step min max'.split(' ').forEach(function (paramName) {
+      'step min max'.split(' ').forEach(paramName => {
         if (!params[paramName] && $inputEl.attr(paramName)) {
           range.params[paramName] = parseFloat($inputEl.attr(paramName));
           range[paramName] = parseFloat($inputEl.attr(paramName));
@@ -146,24 +135,29 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     } // Check for layout
 
 
-    var $barEl = $('<div class="range-bar"></div>');
-    var $barActiveEl = $('<div class="range-bar-active"></div>');
+    const $barEl = $('<div class="range-bar"></div>');
+    const $barActiveEl = $('<div class="range-bar-active"></div>');
     $barEl.append($barActiveEl); // Create Knobs
     // prettier-ignore
 
-    var knobHTML = "\n      <div class=\"range-knob-wrap\">\n        <div class=\"range-knob\"></div>\n        " + (range.label ? '<div class="range-knob-label"></div>' : '') + "\n      </div>\n    ";
-    var knobs = [$(knobHTML)];
+    const knobHTML = `
+      <div class="range-knob-wrap">
+        <div class="range-knob"></div>
+        ${range.label ? '<div class="range-knob-label"></div>' : ''}
+      </div>
+    `;
+    const knobs = [$(knobHTML)];
 
     if (range.dual) {
       knobs.push($(knobHTML));
     }
 
     $el.append($barEl);
-    knobs.forEach(function ($knobEl) {
+    knobs.forEach($knobEl => {
       $el.append($knobEl);
     }); // Labels
 
-    var labels = [];
+    const labels = [];
 
     if (range.label) {
       labels.push(knobs[0].find('.range-knob-label'));
@@ -174,32 +168,36 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     } // Scale
 
 
-    var $scaleEl;
+    let $scaleEl;
 
     if (range.scale && range.scaleSteps >= 1) {
-      $scaleEl = $("\n        <div class=\"range-scale\">\n          " + range.renderScale() + "\n        </div>\n      ");
+      $scaleEl = $(`
+        <div class="range-scale">
+          ${range.renderScale()}
+        </div>
+      `);
       $el.append($scaleEl);
     }
 
     extend(range, {
-      knobs: knobs,
-      labels: labels,
-      $barEl: $barEl,
-      $barActiveEl: $barActiveEl,
-      $scaleEl: $scaleEl
+      knobs,
+      labels,
+      $barEl,
+      $barActiveEl,
+      $scaleEl
     });
     $el[0].f7Range = range; // Touch Events
 
-    var isTouched;
-    var touchesStart = {};
-    var isScrolling;
-    var rangeOffset;
-    var rangeOffsetLeft;
-    var rangeOffsetTop;
-    var $touchedKnobEl;
-    var dualValueIndex;
-    var valueChangedByTouch;
-    var targetTouchIdentifier;
+    let isTouched;
+    const touchesStart = {};
+    let isScrolling;
+    let rangeOffset;
+    let rangeOffsetLeft;
+    let rangeOffsetTop;
+    let $touchedKnobEl;
+    let dualValueIndex;
+    let valueChangedByTouch;
+    let targetTouchIdentifier;
 
     function onTouchChange() {
       valueChangedByTouch = true;
@@ -227,7 +225,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       rangeOffset = $el.offset();
       rangeOffsetLeft = rangeOffset.left;
       rangeOffsetTop = rangeOffset.top;
-      var progress;
+      let progress;
 
       if (range.vertical) {
         progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight;
@@ -238,7 +236,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
         progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth;
       }
 
-      var newValue = progress * (range.max - range.min) + range.min;
+      let newValue = progress * (range.max - range.min) + range.min;
 
       if (range.dual) {
         if (Math.abs(range.value[0] - newValue) < Math.abs(range.value[1] - newValue)) {
@@ -255,7 +253,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
         newValue = progress * (range.max - range.min) + range.min;
       }
 
-      nextTick(function () {
+      nextTick(() => {
         if (isTouched) $touchedKnobEl.addClass('range-knob-active-state');
       }, 70);
       range.on('change', onTouchChange);
@@ -264,11 +262,11 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     function handleTouchMove(e) {
       if (!isTouched) return;
-      var pageX;
-      var pageY;
+      let pageX;
+      let pageY;
 
       if (e.type === 'touchmove') {
-        for (var i = 0; i < e.targetTouches.length; i += 1) {
+        for (let i = 0; i < e.targetTouches.length; i += 1) {
           if (e.targetTouches[i].identifier === targetTouchIdentifier) {
             pageX = e.targetTouches[i].pageX;
             pageY = e.targetTouches[i].pageY;
@@ -291,7 +289,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       }
 
       e.preventDefault();
-      var progress;
+      let progress;
 
       if (range.vertical) {
         progress = (pageY - rangeOffsetTop) / range.rangeHeight;
@@ -302,11 +300,11 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
         progress = (pageX - rangeOffsetLeft) / range.rangeWidth;
       }
 
-      var newValue = progress * (range.max - range.min) + range.min;
+      let newValue = progress * (range.max - range.min) + range.min;
 
       if (range.dual) {
-        var leftValue;
-        var rightValue;
+        let leftValue;
+        let rightValue;
 
         if (dualValueIndex === 0) {
           leftValue = newValue;
@@ -332,9 +330,9 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     function handleTouchEnd(e) {
       if (e.type === 'touchend') {
-        var touchEnded;
+        let touchEnded;
 
-        for (var i = 0; i < e.changedTouches.length; i += 1) {
+        for (let i = 0; i < e.changedTouches.length; i += 1) {
           if (e.changedTouches[i].identifier === targetTouchIdentifier) touchEnded = true;
         }
 
@@ -370,12 +368,12 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       range.layout();
     }
 
-    var parentModals;
-    var parentPanel;
-    var parentPage;
+    let parentModals;
+    let parentPanel;
+    let parentPage;
 
     range.attachEvents = function attachEvents() {
-      var passive = support.passiveListener ? {
+      const passive = support.passiveListener ? {
         passive: true
       } : false;
       range.$el.on(app.touchEvents.start, handleTouchStart, passive);
@@ -392,7 +390,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     };
 
     range.detachEvents = function detachEvents() {
-      var passive = support.passiveListener ? {
+      const passive = support.passiveListener ? {
         passive: true
       } : false;
       range.$el.off(app.touchEvents.start, handleTouchStart, passive);
@@ -422,79 +420,79 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     range.useModules(); // Init
 
     range.init();
-    return range || _assertThisInitialized(_this);
+    return range;
   }
 
-  var _proto = Range.prototype;
-
-  _proto.calcSize = function calcSize() {
-    var range = this;
+  calcSize() {
+    const range = this;
 
     if (range.vertical) {
-      var height = range.$el.outerHeight();
+      const height = range.$el.outerHeight();
       if (height === 0) return;
       range.rangeHeight = height;
       range.knobHeight = range.knobs[0].outerHeight();
     } else {
-      var width = range.$el.outerWidth();
+      const width = range.$el.outerWidth();
       if (width === 0) return;
       range.rangeWidth = width;
       range.knobWidth = range.knobs[0].outerWidth();
     }
-  };
-
-  _proto.layout = function layout() {
-    var range = this;
-    var app = range.app,
-        knobWidth = range.knobWidth,
-        knobHeight = range.knobHeight,
-        rangeWidth = range.rangeWidth,
-        rangeHeight = range.rangeHeight,
-        min = range.min,
-        max = range.max,
-        knobs = range.knobs,
-        $barActiveEl = range.$barActiveEl,
-        value = range.value,
-        label = range.label,
-        labels = range.labels,
-        vertical = range.vertical,
-        verticalReversed = range.verticalReversed,
-        limitKnobPosition = range.limitKnobPosition;
-    var knobSize = vertical ? knobHeight : knobWidth;
-    var rangeSize = vertical ? rangeHeight : rangeWidth; // eslint-disable-next-line
-
-    var positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
+  }
 
-    if (range.dual) {
-      var _$barActiveEl$css;
+  layout() {
+    const range = this;
+    const {
+      app,
+      knobWidth,
+      knobHeight,
+      rangeWidth,
+      rangeHeight,
+      min,
+      max,
+      knobs,
+      $barActiveEl,
+      value,
+      label,
+      labels,
+      vertical,
+      verticalReversed,
+      limitKnobPosition
+    } = range;
+    const knobSize = vertical ? knobHeight : knobWidth;
+    const rangeSize = vertical ? rangeHeight : rangeWidth; // eslint-disable-next-line
+
+    const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
 
-      var progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
-      $barActiveEl.css((_$barActiveEl$css = {}, _$barActiveEl$css[positionProperty] = progress[0] * 100 + "%", _$barActiveEl$css[vertical ? 'height' : 'width'] = (progress[1] - progress[0]) * 100 + "%", _$barActiveEl$css));
-      knobs.forEach(function ($knobEl, knobIndex) {
-        var startPos = rangeSize * progress[knobIndex];
+    if (range.dual) {
+      const progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
+      $barActiveEl.css({
+        [positionProperty]: `${progress[0] * 100}%`,
+        [vertical ? 'height' : 'width']: `${(progress[1] - progress[0]) * 100}%`
+      });
+      knobs.forEach(($knobEl, knobIndex) => {
+        let startPos = rangeSize * progress[knobIndex];
 
         if (limitKnobPosition) {
-          var realStartPos = rangeSize * progress[knobIndex] - knobSize / 2;
+          const realStartPos = rangeSize * progress[knobIndex] - knobSize / 2;
           if (realStartPos < 0) startPos = knobSize / 2;
           if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
         }
 
-        $knobEl.css(positionProperty, startPos + "px");
+        $knobEl.css(positionProperty, `${startPos}px`);
         if (label) labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0]));
       });
     } else {
-      var _progress = (value - min) / (max - min);
-
-      $barActiveEl.css(vertical ? 'height' : 'width', _progress * 100 + "%");
-      var startPos = rangeSize * _progress;
+      const progress = (value - min) / (max - min);
+      $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100}%`);
+      let startPos = rangeSize * progress;
 
       if (limitKnobPosition) {
-        var realStartPos = rangeSize * _progress - knobSize / 2;
+        const realStartPos = rangeSize * progress - knobSize / 2;
         if (realStartPos < 0) startPos = knobSize / 2;
         if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
       }
 
-      knobs[0].css(positionProperty, startPos + "px");
+      knobs[0].css(positionProperty, `${startPos}px`);
       if (label) labels[0].text(range.formatLabel(value, labels[0][0]));
     }
 
@@ -509,41 +507,41 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     } else {
       range.$el.removeClass('range-slider-max');
     }
-  };
+  }
 
-  _proto.setValue = function setValue(newValue, byTouchMove) {
-    var range = this;
-    var step = range.step,
-        min = range.min,
-        max = range.max;
-    var valueChanged;
-    var oldValue;
+  setValue(newValue, byTouchMove) {
+    const range = this;
+    const {
+      step,
+      min,
+      max
+    } = range;
+    let valueChanged;
+    let oldValue;
 
     if (range.dual) {
       oldValue = [range.value[0], range.value[1]];
-      var newValues = newValue;
+      let newValues = newValue;
       if (!Array.isArray(newValues)) newValues = [newValue, newValue];
 
       if (newValue[0] > newValue[1]) {
         newValues = [newValues[0], newValues[0]];
       }
 
-      newValues = newValues.map(function (value) {
-        return Math.max(Math.min(Math.round(value / step) * step, max), min);
-      });
+      newValues = newValues.map(value => Math.max(Math.min(Math.round(value / step) * step, max), min));
 
       if (newValues[0] === range.value[0] && newValues[1] === range.value[1]) {
         return range;
       }
 
-      newValues.forEach(function (value, valueIndex) {
+      newValues.forEach((value, valueIndex) => {
         range.value[valueIndex] = value;
       });
       valueChanged = oldValue[0] !== newValues[0] || oldValue[1] !== newValues[1];
       range.layout();
     } else {
       oldValue = range.value;
-      var value = Math.max(Math.min(Math.round(newValue / step) * step, max), min);
+      const value = Math.max(Math.min(Math.round(newValue / step) * step, max), min);
       range.value = value;
       range.layout();
       valueChanged = oldValue !== value;
@@ -574,56 +572,58 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     range.emit('local::change rangeChange', range, range.value);
     return range;
-  };
+  }
 
-  _proto.getValue = function getValue() {
+  getValue() {
     return this.value;
-  };
+  }
 
-  _proto.formatLabel = function formatLabel(value, labelEl) {
-    var range = this;
+  formatLabel(value, labelEl) {
+    const range = this;
     if (range.params.formatLabel) return range.params.formatLabel.call(range, value, labelEl);
     return value;
-  };
+  }
 
-  _proto.formatScaleLabel = function formatScaleLabel(value) {
-    var range = this;
+  formatScaleLabel(value) {
+    const range = this;
     if (range.params.formatScaleLabel) return range.params.formatScaleLabel.call(range, value);
     return value;
-  };
+  }
 
-  _proto.renderScale = function renderScale() {
-    var range = this;
-    var app = range.app,
-        verticalReversed = range.verticalReversed,
-        vertical = range.vertical; // eslint-disable-next-line
+  renderScale() {
+    const range = this;
+    const {
+      app,
+      verticalReversed,
+      vertical
+    } = range; // eslint-disable-next-line
 
-    var positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
-    var html = '';
+    const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
+    let html = '';
     Array.from({
       length: range.scaleSteps + 1
-    }).forEach(function (scaleEl, index) {
-      var scaleStepValue = (range.max - range.min) / range.scaleSteps;
-      var scaleValue = range.min + scaleStepValue * index;
-      var progress = (scaleValue - range.min) / (range.max - range.min);
-      html += "<div class=\"range-scale-step\" style=\"" + positionProperty + ": " + progress * 100 + "%\">" + range.formatScaleLabel(scaleValue) + "</div>";
+    }).forEach((scaleEl, index) => {
+      const scaleStepValue = (range.max - range.min) / range.scaleSteps;
+      const scaleValue = range.min + scaleStepValue * index;
+      const progress = (scaleValue - range.min) / (range.max - range.min);
+      html += `<div class="range-scale-step" style="${positionProperty}: ${progress * 100}%">${range.formatScaleLabel(scaleValue)}</div>`;
 
       if (range.scaleSubSteps && range.scaleSubSteps > 1 && index < range.scaleSteps) {
         Array.from({
           length: range.scaleSubSteps - 1
-        }).forEach(function (subStepEl, subIndex) {
-          var subStep = scaleStepValue / range.scaleSubSteps;
-          var scaleSubValue = scaleValue + subStep * (subIndex + 1);
-          var subProgress = (scaleSubValue - range.min) / (range.max - range.min);
-          html += "<div class=\"range-scale-step range-scale-substep\" style=\"" + positionProperty + ": " + subProgress * 100 + "%\"></div>";
+        }).forEach((subStepEl, subIndex) => {
+          const subStep = scaleStepValue / range.scaleSubSteps;
+          const scaleSubValue = scaleValue + subStep * (subIndex + 1);
+          const subProgress = (scaleSubValue - range.min) / (range.max - range.min);
+          html += `<div class="range-scale-step range-scale-substep" style="${positionProperty}: ${subProgress * 100}%"></div>`;
         });
       }
     });
     return html;
-  };
+  }
 
-  _proto.updateScale = function updateScale() {
-    var range = this;
+  updateScale() {
+    const range = this;
 
     if (!range.scale || range.scaleSteps < 1) {
       if (range.$scaleEl) range.$scaleEl.remove();
@@ -637,27 +637,26 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     }
 
     range.$scaleEl.html(range.renderScale());
-  };
+  }
 
-  _proto.init = function init() {
-    var range = this;
+  init() {
+    const range = this;
     range.calcSize();
     range.layout();
     range.attachEvents();
     return range;
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var range = this;
+  destroy() {
+    let range = this;
     range.$el.trigger('range:beforedestroy');
     range.emit('local::beforeDestroy rangeBeforeDestroy', range);
     delete range.$el[0].f7Range;
     range.detachEvents();
     deleteProps(range);
     range = null;
-  };
+  }
 
-  return Range;
-}(Framework7Class);
+}
 
 export default Range;