framework7 6.3.15 → 7.0.0-beta.11

package/cjs/components/color-picker/color-picker.js

@@ -1,105 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../shared/dom7"));
-
-var _constructorMethods = _interopRequireDefault(require("../../shared/constructor-methods"));
-
-var _colorPickerClass = _interopRequireDefault(require("./color-picker-class"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  name: 'colorPicker',
-  static: {
-    ColorPicker: _colorPickerClass.default
-  },
-  create: function create() {
-    var app = this;
-    app.colorPicker = (0, _constructorMethods.default)({
-      defaultSelector: '.color-picker',
-      constructor: _colorPickerClass.default,
-      app: app,
-      domProp: 'f7ColorPicker'
-    });
-
-    app.colorPicker.close = function close(el) {
-      if (el === void 0) {
-        el = '.color-picker';
-      }
-
-      var $el = (0, _dom.default)(el);
-      if ($el.length === 0) return;
-      var colorPicker = $el[0].f7ColorPicker;
-      if (!colorPicker || colorPicker && !colorPicker.opened) return;
-      colorPicker.close();
-    };
-  },
-  params: {
-    colorPicker: {
-      // Color picker settings
-      value: null,
-      modules: ['wheel'],
-      palette: [['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'], ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'], ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'], ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'], ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'], ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'], ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'], ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100']],
-      groupedModules: false,
-      centerModules: true,
-      sliderLabel: false,
-      sliderValue: false,
-      sliderValueEdiable: false,
-      barLabel: false,
-      barValue: false,
-      barValueEdiable: false,
-      hexLabel: false,
-      hexValueEditable: false,
-      redLabelText: 'R',
-      greenLabelText: 'G',
-      blueLabelText: 'B',
-      hueLabelText: 'H',
-      saturationLabelText: 'S',
-      brightnessLabelText: 'B',
-      hexLabelText: 'HEX',
-      alphaLabelText: 'A',
-      // Common opener settings
-      containerEl: null,
-      openIn: 'popover',
-      // or 'popover' or 'sheet' or 'popup' or 'page' or 'auto'
-      openInPhone: 'popup',
-      // or 'popover' or 'sheet' or 'popup' or 'page'
-      popupPush: false,
-      popupSwipeToClose: undefined,
-      sheetPush: false,
-      sheetSwipeToClose: undefined,
-      formatValue: null,
-      targetEl: null,
-      targetElSetBackgroundColor: false,
-      inputEl: null,
-      inputReadOnly: true,
-      closeByOutsideClick: true,
-      scrollToInput: true,
-      toolbarSheet: true,
-      toolbarPopover: false,
-      toolbarCloseText: 'Done',
-      navbarPopup: true,
-      navbarCloseText: 'Done',
-      navbarTitleText: 'Color',
-      navbarBackLinkText: 'Back',
-      cssClass: null,
-      routableModals: false,
-      view: null,
-      url: 'color/',
-      backdrop: null,
-      closeByBackdropClick: true,
-      // Render functions
-      renderToolbar: null,
-      renderNavbar: null,
-      renderInline: null,
-      renderPopover: null,
-      renderSheet: null,
-      renderPopup: null,
-      render: null
-    }
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/alpha-slider.js

@@ -1,101 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        alphaLabelText = _self$params.alphaLabelText;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-alpha-slider"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, alphaLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-alpha"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "0.01",
-      min: "0",
-      max: "1",
-      class: "color-picker-value-alpha"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-alpha"
-    }))));
-  },
-  init: function init(self) {
-    self.alphaRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-alpha'),
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: 1,
-      on: {
-        change: function change(range, value) {
-          var alpha = Math.floor(value * 100) / 100;
-          self.setValue({
-            alpha: alpha
-          });
-        }
-      }
-    });
-
-    function handleInputChange(e) {
-      var alpha = self.value.alpha;
-      var value = parseFloat(e.target.value);
-
-      if (Number.isNaN(value)) {
-        e.target.value = alpha;
-        return;
-      }
-
-      value = Math.max(0, Math.min(1, value));
-      self.setValue({
-        alpha: value
-      });
-    }
-
-    self.$el.on('change', '.color-picker-module-alpha-slider input', handleInputChange);
-
-    self.destroyAlphaSliderEvents = function destroyAlphaSliderEvents() {
-      self.$el.off('change', '.color-picker-module-alpha-slider input', handleInputChange);
-    };
-  },
-  update: function update(self) {
-    var value = self.value;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var alpha = value.alpha;
-    self.alphaRangeSlider.value = alpha;
-    self.alphaRangeSlider.layout();
-
-    if (sliderValue && sliderValueEditable) {
-      self.$el.find('input.color-picker-value-alpha').val(alpha);
-    } else {
-      self.$el.find('span.color-picker-value-alpha').text(alpha);
-    }
-  },
-  destroy: function destroy(self) {
-    if (self.alphaRangeSlider && self.alphaRangeSlider.destroy) {
-      self.alphaRangeSlider.destroy();
-    }
-
-    delete self.alphaRangeSlider;
-    if (self.destroyAlphaSliderEvents) self.destroyAlphaSliderEvents();
-    delete self.destroyAlphaSliderEvents;
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/brightness-slider.js

@@ -1,86 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _utils = require("../../../shared/utils");
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _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;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-brightness-slider"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, brightnessLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-brightness"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "0.1",
-      min: "0",
-      max: "100",
-      class: "color-picker-value-brightness"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-brightness"
-    }))));
-  },
-  init: function init(self) {
-    self.brightnessRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-brightness'),
-      min: 0,
-      max: 1,
-      step: 0.001,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          var 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;
-    self.brightnessRangeSlider.value = hsb[2];
-    self.brightnessRangeSlider.layout();
-    var hslCurrent = (0, _utils.colorHsbToHsl)(hsb[0], hsb[1], hsb[2]);
-    var hslLeft = (0, _utils.colorHsbToHsl)(hsb[0], hsb[1], 0);
-    var hslRight = (0, _utils.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);
-    } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-brightness').text("" + hsb[2] * 1000 / 10);
-    }
-  },
-  destroy: function destroy(self) {
-    if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) {
-      self.brightnessRangeSlider.destroy();
-    }
-
-    delete self.brightnessRangeSlider;
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/current-color.js

@@ -1,23 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render() {
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-current-color"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-current-color"
-    }));
-  },
-  update: function update(self) {
-    self.$el.find('.color-picker-module-current-color .color-picker-current-color').css('background-color', self.value.hex);
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/hex.js

@@ -1,81 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render(self) {
-    var _self$params = self.params,
-        hexLabel = _self$params.hexLabel,
-        hexLabelText = _self$params.hexLabelText,
-        hexValueEditable = _self$params.hexValueEditable;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-hex"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-hex-wrap"
-    }, hexLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-hex-label"
-    }, hexLabelText), (0, _$jsx.default)("div", {
-      class: "color-picker-hex-value"
-    }, hexValueEditable ? (0, _$jsx.default)("input", {
-      type: "text",
-      class: "color-picker-value-hex"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-hex"
-    }))));
-  },
-  init: function init(self) {
-    function handleInputChange(e) {
-      var hex = self.value.hex;
-      var 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
-
-      if (current > max) {
-        value = 'fff';
-      }
-
-      if (current < min) {
-        value = '000';
-      }
-
-      self.setValue({
-        hex: value
-      });
-    }
-
-    self.$el.on('change', '.color-picker-module-hex input', handleInputChange);
-
-    self.destroyHexEvents = function destroyHexEvents() {
-      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;
-
-    if (hexValueEditable) {
-      self.$el.find('input.color-picker-value-hex').val(hex);
-    } else {
-      self.$el.find('span.color-picker-value-hex').text(hex);
-    }
-  },
-  destroy: function destroy(self) {
-    if (self.destroyHexEvents) self.destroyHexEvents();
-    delete self.destroyHexEvents;
-  }
-};
-exports.default = _default;

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

@@ -1,137 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-var _utils = require("../../../shared/utils");
-
-var _getSupport = require("../../../shared/get-support");
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render() {
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-hs-spectrum"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-hs-spectrum"
-    }, (0, _$jsx.default)("div", {
-      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;
-
-    function setHSFromSpecterCoords(x, y) {
-      var h = (x - specterRect.left) / specterRect.width * 360;
-      var 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({
-        hsb: [h, s, self.value.hsb[2]]
-      });
-    }
-
-    function handleTouchStart(e) {
-      if (isMoved || isTouched) return;
-      touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
-      touchCurrentX = touchStartX;
-      touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-      touchCurrentY = touchStartY;
-      var $targetEl = (0, _dom.default)(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);
-    }
-
-    var passiveListener = app.touchEvents.start === 'touchstart' && (0, _getSupport.getSupport)().passiveListener ? {
-      passive: true,
-      capture: false
-    } : false;
-    self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener);
-    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);
-      app.off('touchend:passive', handleTouchEnd);
-      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 = (0, _utils.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) {
-    if (self.destroySpectrumEvents) self.destroySpectrumEvents();
-    delete self.destroySpectrumEvents;
-  }
-};
-exports.default = _default;