framework7 6.3.16 → 7.0.0-beta.12

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

@@ -1,21 +1,21 @@
 /* eslint indent: ["off"] */
-import $ from '../../../shared/dom7';
+import $ from '../../../shared/dom7.js';
 /** @jsx $jsx */
 
-import $jsx from '../../../shared/$jsx';
+import $jsx from '../../../shared/$jsx.js';
 export default {
-  render: function render(self) {
+  render(self) {
     return $jsx("div", {
       class: "color-picker-module color-picker-module-palette"
     }, $jsx("div", {
       class: "color-picker-palette"
-    }, self.params.palette.map(function (p) {
+    }, self.params.palette.map(p => {
       if (Array.isArray(p)) {
-        var row = '<div class="color-picker-palette-row">'; // prettier-ignore
+        let row = '<div class="color-picker-palette-row">'; // prettier-ignore
 
-        row += p.map(function (c) {
-          return "\n                <div class=\"color-picker-palette-value\" data-palette-color=\"" + c + "\" style=\"background-color: " + c + "\"></div>\n              ";
-        }).join('');
+        row += p.map(c => `
+                <div class="color-picker-palette-value" data-palette-color="${c}" style="background-color: ${c}"></div>
+              `).join('');
         row += '</div>';
         return row;
       }
@@ -23,15 +23,16 @@ export default {
       return $jsx("div", {
         class: "color-picker-palette-value",
         "data-palette-color": p,
-        style: "background-color: " + p
+        style: `background-color: ${p}`
       });
     })));
   },
-  init: function init(self) {
+
+  init(self) {
     function handlePaletteClick(e) {
-      var hex = $(e.target).attr('data-palette-color');
+      const hex = $(e.target).attr('data-palette-color');
       self.setValue({
-        hex: hex
+        hex
       });
     }
 
@@ -41,11 +42,13 @@ export default {
       self.$el.off('click', '.color-picker-module-hex input', handlePaletteClick);
     };
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.destroyPaletteEvents) {
       self.destroyPaletteEvents();
     }
 
     delete self.destroyPaletteEvents;
   }
+
 };

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

@@ -1,16 +1,17 @@
-import $ from '../../../shared/dom7';
+import $ from '../../../shared/dom7.js';
 /** @jsx $jsx */
 
-import $jsx from '../../../shared/$jsx';
+import $jsx from '../../../shared/$jsx.js';
 export default {
-  render: function render(self) {
-    var _self$params = self.params,
-        barLabel = _self$params.barLabel,
-        barValue = _self$params.barValue,
-        barValueEditable = _self$params.barValueEditable,
-        redLabelText = _self$params.redLabelText,
-        greenLabelText = _self$params.greenLabelText,
-        blueLabelText = _self$params.blueLabelText;
+  render(self) {
+    const {
+      barLabel,
+      barValue,
+      barValueEditable,
+      redLabelText,
+      greenLabelText,
+      blueLabelText
+    } = self.params;
     return $jsx("div", {
       class: "color-picker-module color-picker-module-rgb-bars"
     }, $jsx("div", {
@@ -66,7 +67,8 @@ export default {
       class: "color-picker-value-bar-blue"
     }))));
   },
-  init: function init(self) {
+
+  init(self) {
     self.redBar = self.app.range.create({
       el: self.$el.find('.color-picker-bar-red'),
       min: 0,
@@ -75,11 +77,12 @@ export default {
       value: 0,
       vertical: true,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             rgb: [value, self.value.rgb[1], self.value.rgb[2]]
           });
         }
+
       }
     });
     self.greenBar = self.app.range.create({
@@ -90,11 +93,12 @@ export default {
       value: 0,
       vertical: true,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             rgb: [self.value.rgb[0], value, self.value.rgb[2]]
           });
         }
+
       }
     });
     self.blueBar = self.app.range.create({
@@ -105,18 +109,19 @@ export default {
       value: 0,
       vertical: true,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             rgb: [self.value.rgb[0], self.value.rgb[1], value]
           });
         }
+
       }
     });
 
     function handleInputChange(e) {
-      var rgb = [].concat(self.value.rgb);
-      var index = parseInt($(e.target).attr('data-color-index'), 10);
-      var value = parseInt(e.target.value, 10);
+      const rgb = [...self.value.rgb];
+      const index = parseInt($(e.target).attr('data-color-index'), 10);
+      let value = parseInt(e.target.value, 10);
 
       if (Number.isNaN(value)) {
         e.target.value = rgb[index];
@@ -126,7 +131,7 @@ export default {
       value = Math.max(0, Math.min(255, value));
       rgb[index] = value;
       self.setValue({
-        rgb: rgb
+        rgb
       });
     }
 
@@ -136,24 +141,30 @@ export default {
       self.$el.off('change', '.color-picker-module-rgb-bars input', handleInputChange);
     };
   },
-  update: function update(self) {
-    var value = self.value,
-        redBar = self.redBar,
-        greenBar = self.greenBar,
-        blueBar = self.blueBar;
-    var _self$params2 = self.params,
-        barValue = _self$params2.barValue,
-        barValueEditable = _self$params2.barValueEditable;
-    var rgb = value.rgb;
+
+  update(self) {
+    const {
+      value,
+      redBar,
+      greenBar,
+      blueBar
+    } = self;
+    const {
+      barValue,
+      barValueEditable
+    } = self.params;
+    const {
+      rgb
+    } = value;
     redBar.value = rgb[0];
     greenBar.value = rgb[1];
     blueBar.value = rgb[2];
     redBar.layout();
     greenBar.layout();
     blueBar.layout();
-    redBar.$el.find('.range-bar').css('background-image', "linear-gradient(to top, rgb(0, " + rgb[1] + ", " + rgb[2] + "), rgb(255, " + rgb[1] + ", " + rgb[2] + "))");
-    greenBar.$el.find('.range-bar').css('background-image', "linear-gradient(to top, rgb(" + rgb[0] + ", 0, " + rgb[2] + "), rgb(" + rgb[0] + ", 255, " + rgb[2] + "))");
-    blueBar.$el.find('.range-bar').css('background-image', "linear-gradient(to top, rgb(" + rgb[0] + ", " + rgb[1] + ", 0), rgb(" + rgb[0] + ", " + rgb[1] + ", 255))");
+    redBar.$el.find('.range-bar').css('background-image', `linear-gradient(to top, rgb(0, ${rgb[1]}, ${rgb[2]}), rgb(255, ${rgb[1]}, ${rgb[2]}))`);
+    greenBar.$el.find('.range-bar').css('background-image', `linear-gradient(to top, rgb(${rgb[0]}, 0, ${rgb[2]}), rgb(${rgb[0]}, 255, ${rgb[2]}))`);
+    blueBar.$el.find('.range-bar').css('background-image', `linear-gradient(to top, rgb(${rgb[0]}, ${rgb[1]}, 0), rgb(${rgb[0]}, ${rgb[1]}, 255))`);
 
     if (barValue && barValueEditable) {
       self.$el.find('input.color-picker-value-bar-red').val(rgb[0]);
@@ -165,7 +176,8 @@ export default {
       self.$el.find('span.color-picker-value-bar-blue').text(rgb[2]);
     }
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.redBar && self.redBar.destroy) {
       self.redBar.destroy();
     }
@@ -184,4 +196,5 @@ export default {
     if (self.destroyRgbBarsEvents) self.destroyRgbBarsEvents();
     delete self.destroyRgbBarsEvents;
   }
+
 };

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

@@ -1,16 +1,17 @@
-import $ from '../../../shared/dom7';
+import $ from '../../../shared/dom7.js';
 /** @jsx $jsx */
 
-import $jsx from '../../../shared/$jsx';
+import $jsx from '../../../shared/$jsx.js';
 export default {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        redLabelText = _self$params.redLabelText,
-        greenLabelText = _self$params.greenLabelText,
-        blueLabelText = _self$params.blueLabelText;
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      redLabelText,
+      greenLabelText,
+      blueLabelText
+    } = self.params;
     return $jsx("div", {
       class: "color-picker-module color-picker-module-rgb-sliders"
     }, $jsx("div", {
@@ -66,7 +67,8 @@ export default {
       class: "color-picker-value-blue"
     }))));
   },
-  init: function init(self) {
+
+  init(self) {
     self.redRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-red'),
       min: 0,
@@ -74,11 +76,12 @@ export default {
       step: 1,
       value: 0,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             rgb: [value, self.value.rgb[1], self.value.rgb[2]]
           });
         }
+
       }
     });
     self.greenRangeSlider = self.app.range.create({
@@ -88,11 +91,12 @@ export default {
       step: 1,
       value: 0,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             rgb: [self.value.rgb[0], value, self.value.rgb[2]]
           });
         }
+
       }
     });
     self.blueRangeSlider = self.app.range.create({
@@ -102,18 +106,19 @@ export default {
       step: 1,
       value: 0,
       on: {
-        change: function change(range, value) {
+        change(range, value) {
           self.setValue({
             rgb: [self.value.rgb[0], self.value.rgb[1], value]
           });
         }
+
       }
     });
 
     function handleInputChange(e) {
-      var rgb = [].concat(self.value.rgb);
-      var index = parseInt($(e.target).attr('data-color-index'), 10);
-      var value = parseInt(e.target.value, 10);
+      const rgb = [...self.value.rgb];
+      const index = parseInt($(e.target).attr('data-color-index'), 10);
+      let value = parseInt(e.target.value, 10);
 
       if (Number.isNaN(value)) {
         e.target.value = rgb[index];
@@ -123,7 +128,7 @@ export default {
       value = Math.max(0, Math.min(255, value));
       rgb[index] = value;
       self.setValue({
-        rgb: rgb
+        rgb
       });
     }
 
@@ -133,29 +138,35 @@ export default {
       self.$el.off('change', '.color-picker-module-rgb-sliders input', handleInputChange);
     };
   },
-  update: function update(self) {
-    var app = self.app,
-        value = self.value,
-        redRangeSlider = self.redRangeSlider,
-        greenRangeSlider = self.greenRangeSlider,
-        blueRangeSlider = self.blueRangeSlider;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var rgb = value.rgb;
+
+  update(self) {
+    const {
+      app,
+      value,
+      redRangeSlider,
+      greenRangeSlider,
+      blueRangeSlider
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      rgb
+    } = value;
     redRangeSlider.value = rgb[0];
     greenRangeSlider.value = rgb[1];
     blueRangeSlider.value = rgb[2];
     redRangeSlider.layout();
     greenRangeSlider.layout();
     blueRangeSlider.layout();
-    redRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")");
-    greenRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")");
-    blueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")");
-    var direction = app.rtl ? 'to left' : 'to right';
-    redRangeSlider.$el.find('.range-bar').css('background-image', "linear-gradient(" + direction + ", rgb(0, " + rgb[1] + ", " + rgb[2] + "), rgb(255, " + rgb[1] + ", " + rgb[2] + "))");
-    greenRangeSlider.$el.find('.range-bar').css('background-image', "linear-gradient(" + direction + ", rgb(" + rgb[0] + ", 0, " + rgb[2] + "), rgb(" + rgb[0] + ", 255, " + rgb[2] + "))");
-    blueRangeSlider.$el.find('.range-bar').css('background-image', "linear-gradient(" + direction + ", rgb(" + rgb[0] + ", " + rgb[1] + ", 0), rgb(" + rgb[0] + ", " + rgb[1] + ", 255))");
+    redRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+    greenRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+    blueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+    const direction = app.rtl ? 'to left' : 'to right';
+    redRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${direction}, rgb(0, ${rgb[1]}, ${rgb[2]}), rgb(255, ${rgb[1]}, ${rgb[2]}))`);
+    greenRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${direction}, rgb(${rgb[0]}, 0, ${rgb[2]}), rgb(${rgb[0]}, 255, ${rgb[2]}))`);
+    blueRangeSlider.$el.find('.range-bar').css('background-image', `linear-gradient(${direction}, rgb(${rgb[0]}, ${rgb[1]}, 0), rgb(${rgb[0]}, ${rgb[1]}, 255))`);
 
     if (sliderValue && sliderValueEditable) {
       self.$el.find('input.color-picker-value-red').val(rgb[0]);
@@ -167,7 +178,8 @@ export default {
       self.$el.find('span.color-picker-value-blue').text(rgb[2]);
     }
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.redRangeSlider && self.redRangeSlider.destroy) {
       self.redRangeSlider.destroy();
     }
@@ -186,4 +198,5 @@ export default {
     if (self.destroyRgbSlidersEvents) self.destroyRgbSlidersEvents();
     delete self.destroyRgbSlidersEvents;
   }
+
 };

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

@@ -1,10 +1,10 @@
-import $ from '../../../shared/dom7';
-import { getSupport } from '../../../shared/get-support';
+import $ from '../../../shared/dom7.js';
+import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
 
-import $jsx from '../../../shared/$jsx';
+import $jsx from '../../../shared/$jsx.js';
 export default {
-  render: function render() {
+  render() {
     return $jsx("div", {
       class: "color-picker-module color-picker-module-sb-spectrum"
     }, $jsx("div", {
@@ -14,22 +14,27 @@ export default {
       class: "color-picker-sb-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 setSBFromSpecterCoords(x, y) {
-      var s = (x - specterRect.left) / specterRect.width;
-      var b = (y - specterRect.top) / specterRect.height;
+      let s = (x - specterRect.left) / specterRect.width;
+      let b = (y - specterRect.top) / specterRect.height;
       s = Math.max(0, Math.min(1, s));
       b = 1 - Math.max(0, Math.min(1, b));
       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-sb-spectrum-handle').length > 0;
 
       if (!specterHandleIsTouched) {
@@ -95,7 +100,7 @@ export default {
       self.modules['sb-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,17 +116,24 @@ export default {
       app.off('resize', handleResize);
     };
   },
-  update: function update(self) {
-    var value = self.value;
-    var hsl = value.hsl,
-        hsb = value.hsb;
-    var specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth;
-    var specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight;
-    self.$el.find('.color-picker-sb-spectrum').css('background-color', "hsl(" + hsl[0] + ", 100%, 50%)");
-    self.$el.find('.color-picker-sb-spectrum-handle').css('background-color', "hsl(" + hsl[0] + ", " + hsl[1] * 100 + "%, " + hsl[2] * 100 + "%)").transform("translate(" + specterWidth * hsb[1] + "px, " + specterHeight * (1 - hsb[2]) + "px)");
+
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      hsl,
+      hsb
+    } = value;
+    const specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth;
+    const specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight;
+    self.$el.find('.color-picker-sb-spectrum').css('background-color', `hsl(${hsl[0]}, 100%, 50%)`);
+    self.$el.find('.color-picker-sb-spectrum-handle').css('background-color', `hsl(${hsl[0]}, ${hsl[1] * 100}%, ${hsl[2] * 100}%)`).transform(`translate(${specterWidth * hsb[1]}px, ${specterHeight * (1 - hsb[2])}px)`);
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.destroySpectrumEvents) self.destroySpectrumEvents();
     delete self.destroySpectrumEvents;
   }
+
 };

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

@@ -1,24 +1,24 @@
-import $ from '../../../shared/dom7';
-import { getSupport } from '../../../shared/get-support';
+import $ from '../../../shared/dom7.js';
+import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
 
-import $jsx from '../../../shared/$jsx';
+import $jsx from '../../../shared/$jsx.js';
 
 function svgWheelCircles() {
-  var total = 256;
-  var circles = '';
+  const total = 256;
+  let circles = '';
 
-  for (var i = total; i > 0; i -= 1) {
-    var angle = i * Math.PI / (total / 2);
-    var hue = 360 / total * i;
-    circles += "<circle cx=\"" + (150 - Math.sin(angle) * 125) + "\" cy=\"" + (150 - Math.cos(angle) * 125) + "\" r=\"25\" fill=\"hsl(" + hue + ", 100%, 50%)\"></circle>";
+  for (let i = total; i > 0; i -= 1) {
+    const angle = i * Math.PI / (total / 2);
+    const hue = 360 / total * i;
+    circles += `<circle cx="${150 - Math.sin(angle) * 125}" cy="${150 - Math.cos(angle) * 125}" r="25" fill="hsl(${hue}, 100%, 50%)"></circle>`;
   }
 
   return circles;
 }
 
 export default {
-  render: function render() {
+  render() {
     return $jsx("div", {
       class: "color-picker-module color-picker-module-wheel"
     }, $jsx("div", {
@@ -36,27 +36,32 @@ export default {
       class: "color-picker-sb-spectrum-handle"
     }))));
   },
-  init: function init(self) {
-    var app = self.app;
-    var isTouched;
-    var isMoved;
-    var touchStartX;
-    var touchStartY;
-    var touchCurrentX;
-    var touchCurrentY;
-    var wheelRect;
-    var wheelIsTouched;
-    var wheelHandleIsTouched;
-    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 wheelRect;
+    let wheelIsTouched;
+    let wheelHandleIsTouched;
+    let specterRect;
+    let specterIsTouched;
+    let specterHandleIsTouched;
+    const {
+      $el
+    } = self;
 
     function setHueFromWheelCoords(x, y) {
-      var wheelCenterX = wheelRect.left + wheelRect.width / 2;
-      var wheelCenterY = wheelRect.top + wheelRect.height / 2;
-      var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX);
-      var angleDeg = angleRad * 180 / Math.PI + 90;
+      const wheelCenterX = wheelRect.left + wheelRect.width / 2;
+      const wheelCenterY = wheelRect.top + wheelRect.height / 2;
+      const angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX);
+      let angleDeg = angleRad * 180 / Math.PI + 90;
       if (angleDeg < 0) angleDeg += 360;
       angleDeg = 360 - angleDeg;
       self.setValue({
@@ -65,8 +70,8 @@ export default {
     }
 
     function setSBFromSpecterCoords(x, y) {
-      var s = (x - specterRect.left) / specterRect.width;
-      var b = (y - specterRect.top) / specterRect.height;
+      let s = (x - specterRect.left) / specterRect.width;
+      let b = (y - specterRect.top) / specterRect.height;
       s = Math.max(0, Math.min(1, s));
       b = 1 - Math.max(0, Math.min(1, b));
       self.setValue({
@@ -80,7 +85,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);
       wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0;
       wheelIsTouched = $targetEl.closest('circle').length > 0;
       specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
@@ -149,7 +154,7 @@ export default {
       self.modules.wheel.update(self);
     }
 
-    var passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
+    const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
       passive: true,
       capture: false
     } : false;
@@ -165,25 +170,32 @@ export default {
       app.off('resize', handleResize);
     };
   },
-  update: function update(self) {
-    var value = self.value;
-    var hsl = value.hsl,
-        hsb = value.hsb;
-    var specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth;
-    var specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight;
-    var wheelSize = self.$el.find('.color-picker-wheel')[0].offsetWidth;
-    var wheelHalfSize = wheelSize / 2;
-    var angleRad = value.hue * Math.PI / 180;
-    var handleSize = wheelSize / 6;
-    var handleHalfSize = handleSize / 2;
-    var tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
-    var tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
-    self.$el.find('.color-picker-wheel-handle').css('background-color', "hsl(" + hsl[0] + ", 100%, 50%)").transform("translate(" + tX + "px, " + tY + "px)");
-    self.$el.find('.color-picker-sb-spectrum').css('background-color', "hsl(" + hsl[0] + ", 100%, 50%)");
-    self.$el.find('.color-picker-sb-spectrum-handle').css('background-color', "hsl(" + hsl[0] + ", " + hsl[1] * 100 + "%, " + hsl[2] * 100 + "%)").transform("translate(" + specterWidth * hsb[1] + "px, " + specterHeight * (1 - hsb[2]) + "px)");
+
+  update(self) {
+    const {
+      value
+    } = self;
+    const {
+      hsl,
+      hsb
+    } = value;
+    const specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth;
+    const specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight;
+    const wheelSize = self.$el.find('.color-picker-wheel')[0].offsetWidth;
+    const wheelHalfSize = wheelSize / 2;
+    const angleRad = value.hue * Math.PI / 180;
+    const handleSize = wheelSize / 6;
+    const handleHalfSize = handleSize / 2;
+    const tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
+    const tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
+    self.$el.find('.color-picker-wheel-handle').css('background-color', `hsl(${hsl[0]}, 100%, 50%)`).transform(`translate(${tX}px, ${tY}px)`);
+    self.$el.find('.color-picker-sb-spectrum').css('background-color', `hsl(${hsl[0]}, 100%, 50%)`);
+    self.$el.find('.color-picker-sb-spectrum-handle').css('background-color', `hsl(${hsl[0]}, ${hsl[1] * 100}%, ${hsl[2] * 100}%)`).transform(`translate(${specterWidth * hsb[1]}px, ${specterHeight * (1 - hsb[2])}px)`);
   },
-  destroy: function destroy(self) {
+
+  destroy(self) {
     if (self.destroyWheelEvents) self.destroyWheelEvents();
     delete self.destroyWheelEvents;
   }
+
 };