framework7 7.0.9 → 8.0.0-beta.1

package/components/color-picker/modules/hs-spectrum.js

@@ -2,7 +2,6 @@ import $ from '../../../shared/dom7.js';
 import { colorHsbToHsl } from '../../../shared/utils.js';
 import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
-
 import $jsx from '../../../shared/$jsx.js';
 export default {
   render() {
@@ -14,7 +13,6 @@ export default {
       class: "color-picker-hs-spectrum-handle"
     })));
   },
-
   init(self) {
     const {
       app
@@ -31,7 +29,6 @@ export default {
     const {
       $el
     } = self;
-
     function setHSFromSpecterCoords(x, y) {
       let h = (x - specterRect.left) / specterRect.width * 360;
       let s = (y - specterRect.top) / specterRect.height;
@@ -41,7 +38,6 @@ export default {
         hsb: [h, s, self.value.hsb[2]]
       });
     }
-
     function handleTouchStart(e) {
       if (isMoved || isTouched) return;
       touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
@@ -50,56 +46,44 @@ export default {
       touchCurrentY = touchStartY;
       const $targetEl = $(e.target);
       specterHandleIsTouched = $targetEl.closest('.color-picker-hs-spectrum-handle').length > 0;
-
       if (!specterHandleIsTouched) {
         specterIsTouched = $targetEl.closest('.color-picker-hs-spectrum').length > 0;
       }
-
       if (specterIsTouched) {
         specterRect = $el.find('.color-picker-hs-spectrum')[0].getBoundingClientRect();
         setHSFromSpecterCoords(touchStartX, touchStartY);
       }
-
       if (specterHandleIsTouched || specterIsTouched) {
         $el.find('.color-picker-hs-spectrum-handle').addClass('color-picker-hs-spectrum-handle-pressed');
       }
     }
-
     function handleTouchMove(e) {
       if (!(specterIsTouched || specterHandleIsTouched)) return;
       touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
       touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
       e.preventDefault();
-
       if (!isMoved) {
         // First move
         isMoved = true;
-
         if (specterHandleIsTouched) {
           specterRect = $el.find('.color-picker-hs-spectrum')[0].getBoundingClientRect();
         }
       }
-
       if (specterIsTouched || specterHandleIsTouched) {
         setHSFromSpecterCoords(touchCurrentX, touchCurrentY);
       }
     }
-
     function handleTouchEnd() {
       isMoved = false;
-
       if (specterIsTouched || specterHandleIsTouched) {
         $el.find('.color-picker-hs-spectrum-handle').removeClass('color-picker-hs-spectrum-handle-pressed');
       }
-
       specterIsTouched = false;
       specterHandleIsTouched = false;
     }
-
     function handleResize() {
       self.modules['hs-spectrum'].update(self);
     }
-
     const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
       passive: true,
       capture: false
@@ -108,7 +92,6 @@ export default {
     app.on('touchmove:active', handleTouchMove);
     app.on('touchend:passive', handleTouchEnd);
     app.on('resize', handleResize);
-
     self.destroySpectrumEvents = function destroySpectrumEvents() {
       self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener);
       app.off('touchmove:active', handleTouchMove);
@@ -116,7 +99,6 @@ export default {
       app.off('resize', handleResize);
     };
   },
-
   update(self) {
     const {
       value
@@ -129,10 +111,8 @@ export default {
     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(self) {
     if (self.destroySpectrumEvents) self.destroySpectrumEvents();
     delete self.destroySpectrumEvents;
   }
-
 };

package/components/color-picker/modules/hsb-sliders.js

@@ -1,7 +1,6 @@
 import $ from '../../../shared/dom7.js';
 import { colorHsbToHsl } from '../../../shared/utils.js';
 /** @jsx $jsx */
-
 import $jsx from '../../../shared/$jsx.js';
 export default {
   render(self) {
@@ -68,7 +67,6 @@ export default {
       class: "color-picker-value-brightness"
     }))));
   },
-
   init(self) {
     self.hueRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-hue'),
@@ -82,7 +80,6 @@ export default {
             hue: value
           });
         }
-
       }
     });
     self.saturationRangeSlider = self.app.range.create({
@@ -98,7 +95,6 @@ export default {
             hsb: [self.value.hsb[0], s, self.value.hsb[2]]
           });
         }
-
       }
     });
     self.brightnessRangeSlider = self.app.range.create({
@@ -114,39 +110,31 @@ export default {
             hsb: [self.value.hsb[0], self.value.hsb[1], b]
           });
         }
-
       }
     });
-
     function handleInputChange(e) {
       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];
         return;
       }
-
       if (index === 0) {
         value = Math.max(0, Math.min(360, value));
       } else {
         value = Math.max(0, Math.min(100, value)) / 100;
       }
-
       hsb[index] = value;
       self.setValue({
         hsb
       });
     }
-
     self.$el.on('change', '.color-picker-module-hsb-sliders input', handleInputChange);
-
     self.destroyHsbSlidersEvents = function destroyHsbSlidersEvents() {
       self.$el.off('change', '.color-picker-module-hsb-sliders input', handleInputChange);
     };
   },
-
   update(self) {
     const {
       app,
@@ -174,7 +162,6 @@ export default {
     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}`);
@@ -185,25 +172,20 @@ export default {
       self.$el.find('span.color-picker-value-brightness').text(`${hsb[2] * 1000 / 10}`);
     }
   },
-
   destroy(self) {
     if (self.hueRangeSlider && self.hueRangeSlider.destroy) {
       self.hueRangeSlider.destroy();
     }
-
     if (self.saturationRangeSlider && self.saturationRangeSlider.destroy) {
       self.saturationRangeSlider.destroy();
     }
-
     if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) {
       self.brightnessRangeSlider.destroy();
     }
-
     delete self.hueRangeSlider;
     delete self.saturationRangeSlider;
     delete self.brightnessRangeSlider;
     if (self.destroyHsbSlidersEvents) self.destroyHsbSlidersEvents();
     delete self.destroyHsbSlidersEvents;
   }
-
 };

package/components/color-picker/modules/hue-slider.js

@@ -28,7 +28,6 @@ export default {
       class: "color-picker-value-hue"
     }))));
   },
-
   init(self) {
     self.hueRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-hue'),
@@ -42,11 +41,9 @@ export default {
             hue: value
           });
         }
-
       }
     });
   },
-
   update(self) {
     const {
       value
@@ -61,20 +58,16 @@ export default {
     self.hueRangeSlider.value = hue;
     self.hueRangeSlider.layout();
     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}`);
     } else if (sliderValue) {
       self.$el.find('span.color-picker-value-hue').text(`${hue}`);
     }
   },
-
   destroy(self) {
     if (self.hueRangeSlider && self.hueRangeSlider.destroy) {
       self.hueRangeSlider.destroy();
     }
-
     delete self.hueRangeSlider;
   }
-
 };

package/components/color-picker/modules/initial-current-colors.js

@@ -12,7 +12,6 @@ export default {
       class: "color-picker-current-color"
     })));
   },
-
   init(self) {
     function handleInitialColorClick() {
       if (self.initialValue) {
@@ -26,25 +25,19 @@ export default {
         });
       }
     }
-
     self.$el.on('click', '.color-picker-initial-color', handleInitialColorClick);
-
     self.destroyInitialCurrentEvents = function destroyInitialCurrentEvents() {
       self.$el.off('click', '.color-picker-initial-color', handleInitialColorClick);
     };
   },
-
   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(self) {
     if (self.destroyInitialCurrentEvents) {
       self.destroyInitialCurrentEvents();
     }
-
     delete self.destroyInitialCurrentEvents;
   }
-
 };

package/components/color-picker/modules/palette.js

@@ -1,7 +1,6 @@
 /* eslint indent: ["off"] */
 import $ from '../../../shared/dom7.js';
 /** @jsx $jsx */
-
 import $jsx from '../../../shared/$jsx.js';
 export default {
   render(self) {
@@ -11,15 +10,14 @@ export default {
       class: "color-picker-palette"
     }, self.params.palette.map(p => {
       if (Array.isArray(p)) {
-        let row = '<div class="color-picker-palette-row">'; // prettier-ignore
-
+        let row = '<div class="color-picker-palette-row">';
+        // prettier-ignore
         row += p.map(c => `
                 <div class="color-picker-palette-value" data-palette-color="${c}" style="background-color: ${c}"></div>
               `).join('');
         row += '</div>';
         return row;
       }
-
       return $jsx("div", {
         class: "color-picker-palette-value",
         "data-palette-color": p,
@@ -27,7 +25,6 @@ export default {
       });
     })));
   },
-
   init(self) {
     function handlePaletteClick(e) {
       const hex = $(e.target).attr('data-palette-color');
@@ -35,20 +32,15 @@ export default {
         hex
       });
     }
-
     self.$el.on('click', '.color-picker-module-palette .color-picker-palette-value', handlePaletteClick);
-
     self.destroyPaletteEvents = function destroyPaletteEvents() {
       self.$el.off('click', '.color-picker-module-hex input', handlePaletteClick);
     };
   },
-
   destroy(self) {
     if (self.destroyPaletteEvents) {
       self.destroyPaletteEvents();
     }
-
     delete self.destroyPaletteEvents;
   }
-
 };

package/components/color-picker/modules/rgb-bars.js

@@ -1,6 +1,5 @@
 import $ from '../../../shared/dom7.js';
 /** @jsx $jsx */
-
 import $jsx from '../../../shared/$jsx.js';
 export default {
   render(self) {
@@ -67,7 +66,6 @@ export default {
       class: "color-picker-value-bar-blue"
     }))));
   },
-
   init(self) {
     self.redBar = self.app.range.create({
       el: self.$el.find('.color-picker-bar-red'),
@@ -82,7 +80,6 @@ export default {
             rgb: [value, self.value.rgb[1], self.value.rgb[2]]
           });
         }
-
       }
     });
     self.greenBar = self.app.range.create({
@@ -98,7 +95,6 @@ export default {
             rgb: [self.value.rgb[0], value, self.value.rgb[2]]
           });
         }
-
       }
     });
     self.blueBar = self.app.range.create({
@@ -114,34 +110,27 @@ export default {
             rgb: [self.value.rgb[0], self.value.rgb[1], value]
           });
         }
-
       }
     });
-
     function handleInputChange(e) {
       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];
         return;
       }
-
       value = Math.max(0, Math.min(255, value));
       rgb[index] = value;
       self.setValue({
         rgb
       });
     }
-
     self.$el.on('change', '.color-picker-module-rgb-bars input', handleInputChange);
-
     self.destroyRgbBarsEvents = function destroyRgbBarsEvents() {
       self.$el.off('change', '.color-picker-module-rgb-bars input', handleInputChange);
     };
   },
-
   update(self) {
     const {
       value,
@@ -165,7 +154,6 @@ export default {
     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]);
       self.$el.find('input.color-picker-value-bar-green').val(rgb[1]);
@@ -176,25 +164,20 @@ export default {
       self.$el.find('span.color-picker-value-bar-blue').text(rgb[2]);
     }
   },
-
   destroy(self) {
     if (self.redBar && self.redBar.destroy) {
       self.redBar.destroy();
     }
-
     if (self.greenBar && self.greenBar.destroy) {
       self.greenBar.destroy();
     }
-
     if (self.blueBar && self.blueBar.destroy) {
       self.blueBar.destroy();
     }
-
     delete self.redBar;
     delete self.greenBar;
     delete self.blueBar;
     if (self.destroyRgbBarsEvents) self.destroyRgbBarsEvents();
     delete self.destroyRgbBarsEvents;
   }
-
 };

package/components/color-picker/modules/rgb-sliders.js

@@ -1,6 +1,5 @@
 import $ from '../../../shared/dom7.js';
 /** @jsx $jsx */
-
 import $jsx from '../../../shared/$jsx.js';
 export default {
   render(self) {
@@ -67,7 +66,6 @@ export default {
       class: "color-picker-value-blue"
     }))));
   },
-
   init(self) {
     self.redRangeSlider = self.app.range.create({
       el: self.$el.find('.color-picker-slider-red'),
@@ -81,7 +79,6 @@ export default {
             rgb: [value, self.value.rgb[1], self.value.rgb[2]]
           });
         }
-
       }
     });
     self.greenRangeSlider = self.app.range.create({
@@ -96,7 +93,6 @@ export default {
             rgb: [self.value.rgb[0], value, self.value.rgb[2]]
           });
         }
-
       }
     });
     self.blueRangeSlider = self.app.range.create({
@@ -111,34 +107,27 @@ export default {
             rgb: [self.value.rgb[0], self.value.rgb[1], value]
           });
         }
-
       }
     });
-
     function handleInputChange(e) {
       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];
         return;
       }
-
       value = Math.max(0, Math.min(255, value));
       rgb[index] = value;
       self.setValue({
         rgb
       });
     }
-
     self.$el.on('change', '.color-picker-module-rgb-sliders input', handleInputChange);
-
     self.destroyRgbSlidersEvents = function destroyRgbSlidersEvents() {
       self.$el.off('change', '.color-picker-module-rgb-sliders input', handleInputChange);
     };
   },
-
   update(self) {
     const {
       app,
@@ -167,7 +156,6 @@ export default {
     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]);
       self.$el.find('input.color-picker-value-green').val(rgb[1]);
@@ -178,25 +166,20 @@ export default {
       self.$el.find('span.color-picker-value-blue').text(rgb[2]);
     }
   },
-
   destroy(self) {
     if (self.redRangeSlider && self.redRangeSlider.destroy) {
       self.redRangeSlider.destroy();
     }
-
     if (self.greenRangeSlider && self.greenRangeSlider.destroy) {
       self.greenRangeSlider.destroy();
     }
-
     if (self.blueRangeSlider && self.blueRangeSlider.destroy) {
       self.blueRangeSlider.destroy();
     }
-
     delete self.redRangeSlider;
     delete self.greenRangeSlider;
     delete self.blueRangeSlider;
     if (self.destroyRgbSlidersEvents) self.destroyRgbSlidersEvents();
     delete self.destroyRgbSlidersEvents;
   }
-
 };

package/components/color-picker/modules/sb-spectrum.js

@@ -1,7 +1,6 @@
 import $ from '../../../shared/dom7.js';
 import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
-
 import $jsx from '../../../shared/$jsx.js';
 export default {
   render() {
@@ -14,7 +13,6 @@ export default {
       class: "color-picker-sb-spectrum-handle"
     })));
   },
-
   init(self) {
     const {
       app
@@ -31,7 +29,6 @@ export default {
     const {
       $el
     } = self;
-
     function setSBFromSpecterCoords(x, y) {
       let s = (x - specterRect.left) / specterRect.width;
       let b = (y - specterRect.top) / specterRect.height;
@@ -41,7 +38,6 @@ export default {
         hsb: [self.value.hue, s, b]
       });
     }
-
     function handleTouchStart(e) {
       if (isMoved || isTouched) return;
       touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
@@ -50,56 +46,44 @@ export default {
       touchCurrentY = touchStartY;
       const $targetEl = $(e.target);
       specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
-
       if (!specterHandleIsTouched) {
         specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
       }
-
       if (specterIsTouched) {
         specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
         setSBFromSpecterCoords(touchStartX, touchStartY);
       }
-
       if (specterHandleIsTouched || specterIsTouched) {
         $el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed');
       }
     }
-
     function handleTouchMove(e) {
       if (!(specterIsTouched || specterHandleIsTouched)) return;
       touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
       touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
       e.preventDefault();
-
       if (!isMoved) {
         // First move
         isMoved = true;
-
         if (specterHandleIsTouched) {
           specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
         }
       }
-
       if (specterIsTouched || specterHandleIsTouched) {
         setSBFromSpecterCoords(touchCurrentX, touchCurrentY);
       }
     }
-
     function handleTouchEnd() {
       isMoved = false;
-
       if (specterIsTouched || specterHandleIsTouched) {
         $el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed');
       }
-
       specterIsTouched = false;
       specterHandleIsTouched = false;
     }
-
     function handleResize() {
       self.modules['sb-spectrum'].update(self);
     }
-
     const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
       passive: true,
       capture: false
@@ -108,7 +92,6 @@ export default {
     app.on('touchmove:active', handleTouchMove);
     app.on('touchend:passive', handleTouchEnd);
     app.on('resize', handleResize);
-
     self.destroySpectrumEvents = function destroySpectrumEvents() {
       self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener);
       app.off('touchmove:active', handleTouchMove);
@@ -116,7 +99,6 @@ export default {
       app.off('resize', handleResize);
     };
   },
-
   update(self) {
     const {
       value
@@ -130,10 +112,8 @@ export default {
     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(self) {
     if (self.destroySpectrumEvents) self.destroySpectrumEvents();
     delete self.destroySpectrumEvents;
   }
-
 };