framework7 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/color-picker/modules/brightness-slider.js

@@ -3,12 +3,13 @@ import { colorHsbToHsl } from '../../../shared/utils';
 
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        brightnessLabelText = _self$params.brightnessLabelText;
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      brightnessLabelText
+    } = self.params;
     return $jsx("div", {
       class: "color-picker-module color-picker-module-brightness-slider"
     }, $jsx("div", {
@@ -29,7 +30,8 @@ export default {
       class: "color-picker-value-brightness"
     }))));
   },
-  init: function init(self) {
+
+  init(self) {
     self.brightnessRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-brightness'),
       min: 0,
@@ -37,41 +39,50 @@ export default {
       step: 0.001,
       value: 0,
       on: {
-        change: function change(range, value) {
-          var b = Math.floor(value * 1000) / 1000;
+        change(range, value) {
+          const b = Math.floor(value * 1000) / 1000;
           self.setValue({
             hsb: [self.value.hsb[0], self.value.hsb[1], b]
           });
         }
+
       }
     });
   },
-  update: function update(self) {
-    var value = self.value,
-        app = self.app;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var hsb = value.hsb;
+
+  update(self) {
+    const {
+      value,
+      app
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      hsb
+    } = value;
     self.brightnessRangeSlider.value = hsb[2];
     self.brightnessRangeSlider.layout();
-    var hslCurrent = colorHsbToHsl(hsb[0], hsb[1], hsb[2]);
-    var hslLeft = colorHsbToHsl(hsb[0], hsb[1], 0);
-    var hslRight = colorHsbToHsl(hsb[0], hsb[1], 1);
-    self.brightnessRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hslCurrent[0] + ", " + hslCurrent[1] * 100 + "%, " + hslCurrent[2] * 100 + "%)");
-    self.brightnessRangeSlider.$el.find('.range-bar').css('background-image', "linear-gradient(" + (app.rtl ? 'to left' : 'to right') + ", hsl(" + hslLeft[0] + ", " + hslLeft[1] * 100 + "%, " + hslLeft[2] * 100 + "%), hsl(" + hslRight[0] + ", " + hslRight[1] * 100 + "%, " + hslRight[2] * 100 + "%))");
+    const hslCurrent = colorHsbToHsl(hsb[0], hsb[1], hsb[2]);
+    const hslLeft = colorHsbToHsl(hsb[0], hsb[1], 0);
+    const hslRight = colorHsbToHsl(hsb[0], hsb[1], 1);
+    self.brightnessRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `hsl(${hslCurrent[0]}, ${hslCurrent[1] * 100}%, ${hslCurrent[2] * 100}%)`);
+    self.brightnessRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${app.rtl ? 'to left' : 'to right'}, hsl(${hslLeft[0]}, ${hslLeft[1] * 100}%, ${hslLeft[2] * 100}%), hsl(${hslRight[0]}, ${hslRight[1] * 100}%, ${hslRight[2] * 100}%))`);
 
     if (sliderValue && sliderValueEditable) {
-      self.$el.find('input.color-picker-value-brightness').val("" + hsb[2] * 1000 / 10);
+      self.$el.find('input.color-picker-value-brightness').val(`${hsb[2] * 1000 / 10}`);
     } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-brightness').text("" + hsb[2] * 1000 / 10);
+      self.$el.find('span.color-picker-value-brightness').text(`${hsb[2] * 1000 / 10}`);
     }
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) {
       self.brightnessRangeSlider.destroy();
     }
 
     delete self.brightnessRangeSlider;
   }
+
 };

package/{esm/components → components}/color-picker/modules/current-color.js

@@ -1,14 +1,16 @@
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render() {
+  render() {
     return $jsx("div", {
       class: "color-picker-module color-picker-module-current-color"
     }, $jsx("div", {
       class: "color-picker-current-color"
     }));
   },
-  update: function update(self) {
+
+  update(self) {
     self.$el.find('.color-picker-module-current-color .color-picker-current-color').css('background-color', self.value.hex);
   }
+
 };

package/{esm/components → components}/color-picker/modules/hex.js

@@ -1,11 +1,12 @@
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render(self) {
-    var _self$params = self.params,
-        hexLabel = _self$params.hexLabel,
-        hexLabelText = _self$params.hexLabelText,
-        hexValueEditable = _self$params.hexValueEditable;
+  render(self) {
+    const {
+      hexLabel,
+      hexLabelText,
+      hexValueEditable
+    } = self.params;
     return $jsx("div", {
       class: "color-picker-module color-picker-module-hex"
     }, $jsx("div", {
@@ -21,19 +22,20 @@ export default {
       class: "color-picker-value-hex"
     }))));
   },
-  init: function init(self) {
+
+  init(self) {
     function handleInputChange(e) {
-      var hex = self.value.hex;
-      var value = e.target.value.replace(/#/g, '');
+      const hex = self.value.hex;
+      let value = e.target.value.replace(/#/g, '');
 
       if (Number.isNaN(value) || !value || value.length !== 3 && value.length !== 6) {
         e.target.value = hex;
         return;
       }
 
-      var min = 0;
-      var current = parseInt(value, 16);
-      var max = parseInt('ffffff', 16); // eslint-disable-line
+      const min = 0;
+      const current = parseInt(value, 16);
+      const max = parseInt('ffffff', 16); // eslint-disable-line
 
       if (current > max) {
         value = 'fff';
@@ -54,10 +56,17 @@ export default {
       self.$el.off('change', '.color-picker-module-hex input', handleInputChange);
     };
   },
-  update: function update(self) {
-    var value = self.value;
-    var hexValueEditable = self.params.hexValueEditable;
-    var hex = value.hex;
+
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      hexValueEditable
+    } = self.params;
+    const {
+      hex
+    } = value;
 
     if (hexValueEditable) {
       self.$el.find('input.color-picker-value-hex').val(hex);
@@ -65,8 +74,10 @@ export default {
       self.$el.find('span.color-picker-value-hex').text(hex);
     }
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.destroyHexEvents) self.destroyHexEvents();
     delete self.destroyHexEvents;
   }
+
 };

package/{esm/components → components}/color-picker/modules/hs-spectrum.js

@@ -5,7 +5,7 @@ import { getSupport } from '../../../shared/get-support';
 
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render() {
+  render() {
     return $jsx("div", {
       class: "color-picker-module color-picker-module-hs-spectrum"
     }, $jsx("div", {
@@ -14,22 +14,27 @@ export default {
       class: "color-picker-hs-spectrum-handle"
     })));
   },
-  init: function init(self) {
-    var app = self.app;
-    var isTouched;
-    var isMoved;
-    var touchStartX;
-    var touchStartY;
-    var touchCurrentX;
-    var touchCurrentY;
-    var specterRect;
-    var specterIsTouched;
-    var specterHandleIsTouched;
-    var $el = self.$el;
+
+  init(self) {
+    const {
+      app
+    } = self;
+    let isTouched;
+    let isMoved;
+    let touchStartX;
+    let touchStartY;
+    let touchCurrentX;
+    let touchCurrentY;
+    let specterRect;
+    let specterIsTouched;
+    let specterHandleIsTouched;
+    const {
+      $el
+    } = self;
 
     function setHSFromSpecterCoords(x, y) {
-      var h = (x - specterRect.left) / specterRect.width * 360;
-      var s = (y - specterRect.top) / specterRect.height;
+      let h = (x - specterRect.left) / specterRect.width * 360;
+      let s = (y - specterRect.top) / specterRect.height;
       h = Math.max(0, Math.min(360, h));
       s = 1 - Math.max(0, Math.min(1, s));
       self.setValue({
@@ -43,7 +48,7 @@ export default {
       touchCurrentX = touchStartX;
       touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
       touchCurrentY = touchStartY;
-      var $targetEl = $(e.target);
+      const $targetEl = $(e.target);
       specterHandleIsTouched = $targetEl.closest('.color-picker-hs-spectrum-handle').length > 0;
 
       if (!specterHandleIsTouched) {
@@ -95,7 +100,7 @@ export default {
       self.modules['hs-spectrum'].update(self);
     }
 
-    var passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
+    const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
       passive: true,
       capture: false
     } : false;
@@ -111,16 +116,23 @@ export default {
       app.off('resize', handleResize);
     };
   },
-  update: function update(self) {
-    var value = self.value;
-    var hsb = value.hsb;
-    var specterWidth = self.$el.find('.color-picker-hs-spectrum')[0].offsetWidth;
-    var specterHeight = self.$el.find('.color-picker-hs-spectrum')[0].offsetHeight;
-    var hslBright = colorHsbToHsl(hsb[0], hsb[1], 1);
-    self.$el.find('.color-picker-hs-spectrum-handle').css('background-color', "hsl(" + hslBright[0] + ", " + hslBright[1] * 100 + "%, " + hslBright[2] * 100 + "%)").transform("translate(" + specterWidth * (hsb[0] / 360) + "px, " + specterHeight * (1 - hsb[1]) + "px)");
+
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      hsb
+    } = value;
+    const specterWidth = self.$el.find('.color-picker-hs-spectrum')[0].offsetWidth;
+    const specterHeight = self.$el.find('.color-picker-hs-spectrum')[0].offsetHeight;
+    const hslBright = colorHsbToHsl(hsb[0], hsb[1], 1);
+    self.$el.find('.color-picker-hs-spectrum-handle').css('background-color', `hsl(${hslBright[0]}, ${hslBright[1] * 100}%, ${hslBright[2] * 100}%)`).transform(`translate(${specterWidth * (hsb[0] / 360)}px, ${specterHeight * (1 - hsb[1])}px)`);
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.destroySpectrumEvents) self.destroySpectrumEvents();
     delete self.destroySpectrumEvents;
   }
+
 };

package/{esm/components → components}/color-picker/modules/hsb-sliders.js

@@ -4,14 +4,15 @@ import { colorHsbToHsl } from '../../../shared/utils';
 
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        hueLabelText = _self$params.hueLabelText,
-        saturationLabelText = _self$params.saturationLabelText,
-        brightnessLabelText = _self$params.brightnessLabelText;
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      hueLabelText,
+      saturationLabelText,
+      brightnessLabelText
+    } = self.params;
     return $jsx("div", {
       class: "color-picker-module color-picker-module-hsb-sliders"
     }, $jsx("div", {
@@ -67,7 +68,8 @@ export default {
       class: "color-picker-value-brightness"
     }))));
   },
-  init: function init(self) {
+
+  init(self) {
     self.hueRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-hue'),
       min: 0,
@@ -75,11 +77,12 @@ export default {
       step: 0.1,
       value: 0,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             hue: value
           });
         }
+
       }
     });
     self.saturationRangeSlider = self.app.range.create({
@@ -89,12 +92,13 @@ export default {
       step: 0.001,
       value: 0,
       on: {
-        change: function change(range, value) {
-          var s = Math.floor(value * 1000) / 1000;
+        change(range, value) {
+          const s = Math.floor(value * 1000) / 1000;
           self.setValue({
             hsb: [self.value.hsb[0], s, self.value.hsb[2]]
           });
         }
+
       }
     });
     self.brightnessRangeSlider = self.app.range.create({
@@ -104,19 +108,20 @@ export default {
       step: 0.001,
       value: 0,
       on: {
-        change: function change(range, value) {
-          var b = Math.floor(value * 1000) / 1000;
+        change(range, value) {
+          const b = Math.floor(value * 1000) / 1000;
           self.setValue({
             hsb: [self.value.hsb[0], self.value.hsb[1], b]
           });
         }
+
       }
     });
 
     function handleInputChange(e) {
-      var hsb = [].concat(self.value.hsb);
-      var index = parseInt($(e.target).attr('data-color-index'), 10);
-      var value = parseFloat(e.target.value);
+      const hsb = [...self.value.hsb];
+      const index = parseInt($(e.target).attr('data-color-index'), 10);
+      let value = parseFloat(e.target.value);
 
       if (Number.isNaN(value)) {
         e.target.value = hsb[index];
@@ -131,7 +136,7 @@ export default {
 
       hsb[index] = value;
       self.setValue({
-        hsb: hsb
+        hsb
       });
     }
 
@@ -141,40 +146,47 @@ export default {
       self.$el.off('change', '.color-picker-module-hsb-sliders input', handleInputChange);
     };
   },
-  update: function update(self) {
-    var app = self.app,
-        value = self.value;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var hsb = value.hsb,
-        hue = value.hue;
+
+  update(self) {
+    const {
+      app,
+      value
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      hsb,
+      hue
+    } = value;
     self.hueRangeSlider.value = hue;
     self.saturationRangeSlider.value = hsb[1];
     self.brightnessRangeSlider.value = hsb[2];
     self.hueRangeSlider.layout();
     self.saturationRangeSlider.layout();
     self.brightnessRangeSlider.layout();
-    var hslCurrent = colorHsbToHsl(hsb[0], hsb[1], 1);
-    var hslLeft = colorHsbToHsl(hsb[0], 0, 1);
-    var hslRight = colorHsbToHsl(hsb[0], 1, 1);
-    var brightness = hsb[2];
-    self.hueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hue + ", 100%, 50%)");
-    self.saturationRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hslCurrent[0] + ", " + hslCurrent[1] * 100 + "%, " + hslCurrent[2] * 100 + "%)");
-    self.brightnessRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "rgb(" + brightness * 255 + ", " + brightness * 255 + ", " + brightness * 255 + ")");
-    self.saturationRangeSlider.$el.find('.range-bar').css('background-image', "linear-gradient(" + (app.rtl ? 'to left' : 'to right') + ", hsl(" + hslLeft[0] + ", " + hslLeft[1] * 100 + "%, " + hslLeft[2] * 100 + "%), hsl(" + hslRight[0] + ", " + hslRight[1] * 100 + "%, " + hslRight[2] * 100 + "%))");
+    const hslCurrent = colorHsbToHsl(hsb[0], hsb[1], 1);
+    const hslLeft = colorHsbToHsl(hsb[0], 0, 1);
+    const hslRight = colorHsbToHsl(hsb[0], 1, 1);
+    const brightness = hsb[2];
+    self.hueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `hsl(${hue}, 100%, 50%)`);
+    self.saturationRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `hsl(${hslCurrent[0]}, ${hslCurrent[1] * 100}%, ${hslCurrent[2] * 100}%)`);
+    self.brightnessRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${brightness * 255}, ${brightness * 255}, ${brightness * 255})`);
+    self.saturationRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${app.rtl ? 'to left' : 'to right'}, hsl(${hslLeft[0]}, ${hslLeft[1] * 100}%, ${hslLeft[2] * 100}%), hsl(${hslRight[0]}, ${hslRight[1] * 100}%, ${hslRight[2] * 100}%))`);
 
     if (sliderValue && sliderValueEditable) {
-      self.$el.find('input.color-picker-value-hue').val("" + hue);
-      self.$el.find('input.color-picker-value-saturation').val("" + hsb[1] * 1000 / 10);
-      self.$el.find('input.color-picker-value-brightness').val("" + hsb[2] * 1000 / 10);
+      self.$el.find('input.color-picker-value-hue').val(`${hue}`);
+      self.$el.find('input.color-picker-value-saturation').val(`${hsb[1] * 1000 / 10}`);
+      self.$el.find('input.color-picker-value-brightness').val(`${hsb[2] * 1000 / 10}`);
     } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-hue').text("" + hue);
-      self.$el.find('span.color-picker-value-saturation').text("" + hsb[1] * 1000 / 10);
-      self.$el.find('span.color-picker-value-brightness').text("" + hsb[2] * 1000 / 10);
+      self.$el.find('span.color-picker-value-hue').text(`${hue}`);
+      self.$el.find('span.color-picker-value-saturation').text(`${hsb[1] * 1000 / 10}`);
+      self.$el.find('span.color-picker-value-brightness').text(`${hsb[2] * 1000 / 10}`);
     }
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.hueRangeSlider && self.hueRangeSlider.destroy) {
       self.hueRangeSlider.destroy();
     }
@@ -193,4 +205,5 @@ export default {
     if (self.destroyHsbSlidersEvents) self.destroyHsbSlidersEvents();
     delete self.destroyHsbSlidersEvents;
   }
+
 };

package/{esm/components → components}/color-picker/modules/hue-slider.js

@@ -1,12 +1,13 @@
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        hueLabelText = _self$params.hueLabelText;
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      hueLabelText
+    } = self.params;
     return $jsx("div", {
       class: "color-picker-module color-picker-module-hue-slider"
     }, $jsx("div", {
@@ -27,7 +28,8 @@ export default {
       class: "color-picker-value-hue"
     }))));
   },
-  init: function init(self) {
+
+  init(self) {
     self.hueRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-hue'),
       min: 0,
@@ -35,35 +37,44 @@ export default {
       step: 0.1,
       value: 0,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             hue: value
           });
         }
+
       }
     });
   },
-  update: function update(self) {
-    var value = self.value;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var hue = value.hue;
+
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      hue
+    } = value;
     self.hueRangeSlider.value = hue;
     self.hueRangeSlider.layout();
-    self.hueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hue + ", 100%, 50%)");
+    self.hueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `hsl(${hue}, 100%, 50%)`);
 
     if (sliderValue && sliderValueEditable) {
-      self.$el.find('input.color-picker-value-hue').val("" + hue);
+      self.$el.find('input.color-picker-value-hue').val(`${hue}`);
     } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-hue').text("" + hue);
+      self.$el.find('span.color-picker-value-hue').text(`${hue}`);
     }
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.hueRangeSlider && self.hueRangeSlider.destroy) {
       self.hueRangeSlider.destroy();
     }
 
     delete self.hueRangeSlider;
   }
+
 };

package/{esm/components → components}/color-picker/modules/initial-current-colors.js

@@ -1,7 +1,7 @@
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx';
 export default {
-  render: function render() {
+  render() {
     return $jsx("div", {
       class: "color-picker-module color-picker-module-initial-current-colors"
     }, $jsx("div", {
@@ -12,15 +12,17 @@ export default {
       class: "color-picker-current-color"
     })));
   },
-  init: function init(self) {
+
+  init(self) {
     function handleInitialColorClick() {
       if (self.initialValue) {
-        var _self$initialValue = self.initialValue,
-            hex = _self$initialValue.hex,
-            alpha = _self$initialValue.alpha;
+        const {
+          hex,
+          alpha
+        } = self.initialValue;
         self.setValue({
-          hex: hex,
-          alpha: alpha
+          hex,
+          alpha
         });
       }
     }
@@ -31,15 +33,18 @@ export default {
       self.$el.off('click', '.color-picker-initial-color', handleInitialColorClick);
     };
   },
-  update: function update(self) {
+
+  update(self) {
     self.$el.find('.color-picker-module-initial-current-colors .color-picker-initial-color').css('background-color', self.initialValue.hex);
     self.$el.find('.color-picker-module-initial-current-colors .color-picker-current-color').css('background-color', self.value.hex);
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.destroyInitialCurrentEvents) {
       self.destroyInitialCurrentEvents();
     }
 
     delete self.destroyInitialCurrentEvents;
   }
+
 };