@xenknight/framework7 0.0.2

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

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

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

@@ -0,0 +1,71 @@
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    const {
+      hexLabel,
+      hexLabelText,
+      hexValueEditable
+    } = self.params;
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-hex"
+    }, $jsx("div", {
+      class: "color-picker-hex-wrap"
+    }, hexLabel && $jsx("div", {
+      class: "color-picker-hex-label"
+    }, hexLabelText), $jsx("div", {
+      class: "color-picker-hex-value"
+    }, hexValueEditable ? $jsx("input", {
+      type: "text",
+      class: "color-picker-value-hex"
+    }) : $jsx("span", {
+      class: "color-picker-value-hex"
+    }))));
+  },
+  init(self) {
+    function handleInputChange(e) {
+      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;
+      }
+      const min = 0;
+      const current = parseInt(value, 16);
+      const 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(self) {
+    const {
+      value
+    } = self;
+    const {
+      hexValueEditable
+    } = self.params;
+    const {
+      hex
+    } = value;
+    if (hexValueEditable) {
+      self.$el.find('input.color-picker-value-hex').val(hex);
+    } else {
+      self.$el.find('span.color-picker-value-hex').text(hex);
+    }
+  },
+  destroy(self) {
+    if (self.destroyHexEvents) self.destroyHexEvents();
+    delete self.destroyHexEvents;
+  }
+};

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

@@ -0,0 +1,118 @@
+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() {
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-hs-spectrum"
+    }, $jsx("div", {
+      class: "color-picker-hs-spectrum"
+    }, $jsx("div", {
+      class: "color-picker-hs-spectrum-handle"
+    })));
+  },
+  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) {
+      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({
+        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;
+      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
+    } : 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(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(self) {
+    if (self.destroySpectrumEvents) self.destroySpectrumEvents();
+    delete self.destroySpectrumEvents;
+  }
+};

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

@@ -0,0 +1,191 @@
+import $ from '../../../shared/dom7.js';
+import { colorHsbToHsl } from '../../../shared/utils.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  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", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, hueLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-hue"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "0.1",
+      min: "0",
+      max: "360",
+      class: "color-picker-value-hue",
+      "data-color-index": "0"
+    }) : $jsx("span", {
+      class: "color-picker-value-hue"
+    }))), $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, saturationLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-saturation"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "0.1",
+      min: "0",
+      max: "100",
+      class: "color-picker-value-saturation",
+      "data-color-index": "1"
+    }) : $jsx("span", {
+      class: "color-picker-value-saturation"
+    }))), $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, brightnessLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-brightness"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "0.1",
+      min: "0",
+      max: "100",
+      class: "color-picker-value-brightness",
+      "data-color-index": "2"
+    }) : $jsx("span", {
+      class: "color-picker-value-brightness"
+    }))));
+  },
+  init(self) {
+    self.hueRangeSlider = self.app.range.create({
+      el: self.$el.find('.color-picker-slider-hue'),
+      min: 0,
+      max: 360,
+      step: 0.1,
+      value: 0,
+      on: {
+        change(range, value) {
+          self.setValue({
+            hue: value
+          });
+        }
+      }
+    });
+    self.saturationRangeSlider = self.app.range.create({
+      el: self.$el.find('.color-picker-slider-saturation'),
+      min: 0,
+      max: 1,
+      step: 0.001,
+      value: 0,
+      on: {
+        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({
+      el: self.$el.find('.color-picker-slider-brightness'),
+      min: 0,
+      max: 1,
+      step: 0.001,
+      value: 0,
+      on: {
+        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) {
+      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,
+      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();
+    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}`);
+    } 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}`);
+    }
+  },
+  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

@@ -0,0 +1,73 @@
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      hueLabelText
+    } = self.params;
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-hue-slider"
+    }, $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, hueLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-hue"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "0.1",
+      min: "0",
+      max: "360",
+      class: "color-picker-value-hue"
+    }) : $jsx("span", {
+      class: "color-picker-value-hue"
+    }))));
+  },
+  init(self) {
+    self.hueRangeSlider = self.app.range.create({
+      el: self.$el.find('.color-picker-slider-hue'),
+      min: 0,
+      max: 360,
+      step: 0.1,
+      value: 0,
+      on: {
+        change(range, value) {
+          self.setValue({
+            hue: value
+          });
+        }
+      }
+    });
+  },
+  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%)`);
+    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

@@ -0,0 +1,43 @@
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render() {
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-initial-current-colors"
+    }, $jsx("div", {
+      class: "color-picker-initial-current-colors"
+    }, $jsx("div", {
+      class: "color-picker-initial-color"
+    }), $jsx("div", {
+      class: "color-picker-current-color"
+    })));
+  },
+  init(self) {
+    function handleInitialColorClick() {
+      if (self.initialValue) {
+        const {
+          hex,
+          alpha
+        } = self.initialValue;
+        self.setValue({
+          hex,
+          alpha
+        });
+      }
+    }
+    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

@@ -0,0 +1,46 @@
+/* eslint indent: ["off"] */
+import $ from '../../../shared/dom7.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-palette"
+    }, $jsx("div", {
+      class: "color-picker-palette"
+    }, self.params.palette.map(p => {
+      if (Array.isArray(p)) {
+        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,
+        style: `background-color: ${p}`
+      });
+    })));
+  },
+  init(self) {
+    function handlePaletteClick(e) {
+      const hex = $(e.target).attr('data-palette-color');
+      self.setValue({
+        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;
+  }
+};