framework7 6.3.15 → 7.0.0-beta.11

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

@@ -1,198 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-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,
-        redLabelText = _self$params.redLabelText,
-        greenLabelText = _self$params.greenLabelText,
-        blueLabelText = _self$params.blueLabelText;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-rgb-sliders"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, redLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-red"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "1",
-      min: "0",
-      max: "255",
-      class: "color-picker-value-red",
-      "data-color-index": "0"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-red"
-    }))), (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, greenLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-green"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "1",
-      min: "0",
-      max: "255",
-      class: "color-picker-value-green",
-      "data-color-index": "1"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-green"
-    }))), (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, blueLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-blue"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "1",
-      min: "0",
-      max: "255",
-      class: "color-picker-value-blue",
-      "data-color-index": "2"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-blue"
-    }))));
-  },
-  init: function init(self) {
-    self.redRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-red'),
-      min: 0,
-      max: 255,
-      step: 1,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            rgb: [value, self.value.rgb[1], self.value.rgb[2]]
-          });
-        }
-      }
-    });
-    self.greenRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-green'),
-      min: 0,
-      max: 255,
-      step: 1,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            rgb: [self.value.rgb[0], value, self.value.rgb[2]]
-          });
-        }
-      }
-    });
-    self.blueRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-blue'),
-      min: 0,
-      max: 255,
-      step: 1,
-      value: 0,
-      on: {
-        change: function 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((0, _dom.default)(e.target).attr('data-color-index'), 10);
-      var 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: 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: 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;
-    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))");
-
-    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]);
-      self.$el.find('input.color-picker-value-blue').val(rgb[2]);
-    } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-red').text(rgb[0]);
-      self.$el.find('span.color-picker-value-green').text(rgb[1]);
-      self.$el.find('span.color-picker-value-blue').text(rgb[2]);
-    }
-  },
-  destroy: function 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;
-  }
-};
-exports.default = _default;

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

@@ -1,137 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-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-sb-spectrum"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-sb-spectrum",
-      style: "background-color: hsl(0, 100%, 50%)"
-    }, (0, _$jsx.default)("div", {
-      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;
-
-    function setSBFromSpecterCoords(x, y) {
-      var s = (x - specterRect.left) / specterRect.width;
-      var 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({
-        hsb: [self.value.hue, s, b]
-      });
-    }
-
-    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-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);
-    }
-
-    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 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)");
-  },
-  destroy: function destroy(self) {
-    if (self.destroySpectrumEvents) self.destroySpectrumEvents();
-    delete self.destroySpectrumEvents;
-  }
-};
-exports.default = _default;

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

@@ -1,198 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-var _getSupport = require("../../../shared/get-support");
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-function svgWheelCircles() {
-  var total = 256;
-  var 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>";
-  }
-
-  return circles;
-}
-
-var _default = {
-  render: function render() {
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-wheel"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-wheel"
-    }, (0, _$jsx.default)("svg", {
-      viewBox: "0 0 300 300",
-      width: "300",
-      height: "300"
-    }, svgWheelCircles()), (0, _$jsx.default)("div", {
-      class: "color-picker-wheel-handle"
-    }), (0, _$jsx.default)("div", {
-      class: "color-picker-sb-spectrum",
-      style: "background-color: hsl(0, 100%, 50%)"
-    }, (0, _$jsx.default)("div", {
-      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;
-
-    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;
-      if (angleDeg < 0) angleDeg += 360;
-      angleDeg = 360 - angleDeg;
-      self.setValue({
-        hue: angleDeg
-      });
-    }
-
-    function setSBFromSpecterCoords(x, y) {
-      var s = (x - specterRect.left) / specterRect.width;
-      var 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({
-        hsb: [self.value.hue, s, b]
-      });
-    }
-
-    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);
-      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;
-
-      if (!specterHandleIsTouched) {
-        specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
-      }
-
-      if (wheelIsTouched) {
-        wheelRect = $el.find('.color-picker-wheel')[0].getBoundingClientRect();
-        setHueFromWheelCoords(touchStartX, touchStartY);
-      }
-
-      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 (!(wheelIsTouched || wheelHandleIsTouched) && !(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 (wheelHandleIsTouched) {
-          wheelRect = $el.find('.color-picker-wheel')[0].getBoundingClientRect();
-        }
-
-        if (specterHandleIsTouched) {
-          specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
-        }
-      }
-
-      if (wheelIsTouched || wheelHandleIsTouched) {
-        setHueFromWheelCoords(touchCurrentX, touchCurrentY);
-      }
-
-      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');
-      }
-
-      wheelIsTouched = false;
-      wheelHandleIsTouched = false;
-      specterIsTouched = false;
-      specterHandleIsTouched = false;
-    }
-
-    function handleResize() {
-      self.modules.wheel.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.destroyWheelEvents = function destroyWheelEvents() {
-      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 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)");
-  },
-  destroy: function destroy(self) {
-    if (self.destroyWheelEvents) self.destroyWheelEvents();
-    delete self.destroyWheelEvents;
-  }
-};
-exports.default = _default;

package/cjs/components/contacts-list/contacts-list.js

@@ -1,8 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-var _default = {
-  name: 'contactsList'
-};
-exports.default = _default;