@xenknight/framework7 0.0.2

package/components/color-picker/color-picker.less

@@ -0,0 +1,557 @@
+/* === Color Picker === */
+@import './color-picker-vars.less';
+.color-picker {
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  &.color-picker-inline,
+  .color-picker-popover &,
+  .color-picker-popup & {
+    position: relative;
+  }
+}
+.color-picker-sheet-modal {
+  background: var(--f7-color-picker-sheet-bg-color);
+  &:before {
+    z-index: 600;
+  }
+  .sheet-modal-inner {
+    margin-bottom: var(--f7-safe-area-bottom);
+  }
+}
+.color-picker-popup {
+  .page {
+    background: var(--f7-color-picker-popup-bg-color);
+  }
+  .page-content {
+    padding-bottom: var(--f7-safe-area-bottom);
+  }
+}
+.color-picker-popover,
+.color-picker-popup,
+.color-picker-page {
+  .color-picker {
+    height: 100%;
+    .toolbar {
+      position: absolute;
+    }
+  }
+}
+.color-picker-popover {
+  width: var(--f7-color-picker-popover-width);
+  max-width: 90vw;
+  max-height: 80vh;
+  .md & {
+    .popover-inner {
+      padding: 8px;
+    }
+  }
+  .color-picker {
+    max-height: 80vh;
+  }
+  .toolbar-top {
+    border-top-left-radius: var(--f7-popover-border-radius);
+    border-top-right-radius: var(--f7-popover-border-radius);
+  }
+  .color-picker-module-palette {
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .color-picker-module-palette:first-child {
+    border-top-left-radius: var(--f7-popover-border-radius);
+    border-top-right-radius: var(--f7-popover-border-radius);
+  }
+  .color-picker-module-palette:last-child {
+    border-bottom-left-radius: var(--f7-popover-border-radius);
+    border-bottom-right-radius: var(--f7-popover-border-radius);
+  }
+  .color-picker-module-palette:first-child:last-child {
+    border-radius: var(--f7-popover-border-radius);
+  }
+  .toolbar ~ .page-content .color-picker-module-palette:first-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.color-picker-popup .page-content,
+.color-picker-popover .page-content,
+.color-picker-sheet-modal .page-content,
+.color-picker-page .page-content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.color-picker-module {
+  margin-top: 5px;
+  &:last-child {
+    margin-bottom: 5px;
+  }
+}
+// Spectrum
+.color-picker-module-sb-spectrum,
+.color-picker-module-hs-spectrum {
+  margin-left: 10px;
+  margin-right: 10px;
+  &:first-child {
+    margin-top: 10px;
+  }
+  .color-picker-sb-spectrum,
+  .color-picker-hs-spectrum {
+    height: var(--f7-color-picker-sb-spectrum-height);
+    .ios & {
+      border-radius: 4px;
+    }
+    .md & {
+      border-radius: 12px;
+      &::after {
+        border-radius: inherit;
+      }
+    }
+  }
+}
+.color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%),
+    linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+}
+.color-picker-hs-spectrum {
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    hsl(0, 100%, 50%),
+    hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%),
+    hsl(360, 100%, 50%)
+  );
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+  }
+}
+.color-picker-sb-spectrum-handle,
+.color-picker-hs-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+  &:after {
+    background-color: inherit;
+    content: '';
+    position: absolute;
+    width: var(--f7-color-picker-sb-spectrum-handle-size);
+    height: var(--f7-color-picker-sb-spectrum-handle-size);
+    border: 1px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: 150ms;
+    transition-property: transform;
+    transform-origin: center;
+  }
+  &.color-picker-sb-spectrum-handle-pressed:after,
+  &.color-picker-hs-spectrum-handle-pressed:after {
+    transform: scale(1.5) translate(-33.333%, -33.333%);
+  }
+}
+// Wheel
+.color-picker-module-wheel {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.color-picker-wheel {
+  position: relative;
+  width: var(--f7-color-picker-wheel-width);
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+  margin-left: auto;
+  margin-right: auto;
+  svg {
+    width: 100%;
+    height: auto;
+  }
+  .color-picker-wheel-handle {
+    width: (100% / 6);
+    height: (100% / 6);
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+    background: red;
+    border-radius: 50%;
+    left: 0;
+    top: 0;
+  }
+  .color-picker-sb-spectrum {
+    width: 45%;
+    height: 45%;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    position: absolute;
+  }
+}
+// Slider
+.color-picker-slider-wrap {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2px;
+  + .color-picker-slider-wrap {
+    margin-top: 5px;
+  }
+}
+.color-picker-hex-wrap {
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+}
+.color-picker-slider-label,
+.color-picker-hex-label {
+  font-size: var(--f7-color-picker-label-font-size);
+  width: var(--f7-color-picker-label-size);
+  flex-shrink: 0;
+  .ltr({
+    margin-right: 12px;
+  });
+  .rtl({
+    margin-left: 12px;
+  });
+}
+.color-picker-hex-label {
+  width: auto;
+}
+.color-picker-bar-value,
+.color-picker-slider-value,
+.color-picker-hex-value {
+  width: var(--f7-color-picker-value-width);
+  height: var(--f7-color-picker-value-height);
+  background: var(--f7-color-picker-value-bg-color);
+  border-radius: var(--f7-color-picker-value-border-radius);
+  text-align: center;
+  font-size: var(--f7-color-picker-value-font-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  .ltr({
+    margin-left: 10px;
+  });
+  .rtl({
+    margin-right: 10px;
+  });
+  input {
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    border: none;
+    outline: 0;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: center;
+    display: block;
+    border-radius: 4px;
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      margin: 0;
+      display: none;
+    }
+  }
+}
+
+.color-picker-hex-value {
+  width: var(--f7-color-picker-hex-value-width);
+  &:first-child {
+    .ltr({
+      margin-left: auto;
+    });
+    .rtl({
+      margin-right: auto;
+    });
+  }
+}
+.color-picker-slider {
+  --f7-range-bar-active-bg-color: transparent;
+  --f7-range-bar-size: var(--f7-color-picker-slider-size);
+  --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
+  --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
+  --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  .range-knob {
+    transition-duration: 200ms;
+    transition-property: transform;
+    &:after {
+      width: 30px;
+      height: 30px;
+      margin-left: -16px;
+      margin-top: -16px;
+    }
+  }
+  .range-knob-active-state .range-knob {
+    transform: scale(1.5);
+  }
+}
+.md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
+  background: var(--f7-range-knob-color) !important;
+  border: none;
+}
+
+// Bars
+.color-picker-module-rgb-bars {
+  display: flex;
+  justify-content: space-around;
+  justify-content: space-evenly;
+  align-items: stretch;
+  height: 100%;
+  min-height: var(--f7-color-picker-bar-min-height);
+  padding-bottom: 10px;
+  padding-top: 10px;
+  box-sizing: border-box;
+}
+.color-picker-bar-wrap {
+  display: flex;
+  align-items: center;
+  flex-direction: column-reverse;
+}
+.color-picker-bar {
+  --f7-range-bar-active-bg-color: transparent;
+  --f7-range-bar-size: var(--f7-color-picker-bar-size);
+  --f7-range-bar-border-radius: 2px;
+  --f7-range-knob-size: 6px;
+  --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
+  --f7-range-knob-color: #fff;
+  .range-knob {
+    transition-duration: 0ms;
+    transition-property: transform;
+    border-radius: 3px;
+  }
+  .range-knob-wrap {
+    height: 6px;
+    width: calc(var(--f7-color-picker-bar-size) - 4px);
+    margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
+  }
+  .range-knob-active-state .range-knob {
+    transform: scale(1);
+  }
+}
+.md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
+  background: var(--f7-range-knob-color) !important;
+  border: none;
+}
+
+.color-picker-bar-label {
+  font-size: var(--f7-color-picker-label-size);
+  margin-top: 12px;
+  line-height: 1;
+  height: var(--f7-color-picker-label-height);
+  flex-shrink: 0;
+}
+.color-picker-bar-value {
+  margin-left: 0;
+  margin-bottom: 10px;
+}
+
+// Specific Sliders
+.color-picker-slider-alpha {
+  --f7-range-knob-color: #fff;
+  .range-bar {
+    .ltr({
+      background-image: linear-gradient(to right, rgba(0,0,0,0), #000),
+        linear-gradient(to right, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.2) 50%),
+        linear-gradient(to left, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.2) 50%);
+    });
+    .rtl({
+      background-image: linear-gradient(to left, rgba(0,0,0,0), #000),
+        linear-gradient(to right, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.2) 50%),
+        linear-gradient(to left, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.2) 50%);
+    });
+
+    background-size:
+      100% 100%,
+      6px 3px,
+      6px 3px;
+    background-position:
+      0 0,
+      0px 3px,
+      0 0;
+    background-repeat: repeat-y, repeat-x, repeat-x;
+  }
+}
+.color-picker-slider-hue {
+  .range-bar {
+    .ltr({
+      background-image: linear-gradient(to right,
+        hsl(0, 100%, 50%),
+        hsl(60, 100%, 50%),
+        hsl(120, 100%, 50%),
+        hsl(180, 100%, 50%),
+        hsl(240, 100%, 50%),
+        hsl(300, 100%, 50%),
+        hsl(360, 100%, 50%)
+      );
+    });
+    .rtl({
+      background-image: linear-gradient(to left,
+        hsl(0, 100%, 50%),
+        hsl(60, 100%, 50%),
+        hsl(120, 100%, 50%),
+        hsl(180, 100%, 50%),
+        hsl(240, 100%, 50%),
+        hsl(300, 100%, 50%),
+        hsl(360, 100%, 50%)
+      );
+    });
+  }
+}
+.color-picker-slider-brightness {
+  .range-bar {
+    .ltr({
+      background-image: linear-gradient(to right, #000, #fff);
+    });
+    .rtl({
+      background-image: linear-gradient(to left, #000, #fff);
+    });
+  }
+}
+// Palette
+.color-picker-module-palette {
+  margin-top: 16px;
+  &:first-child {
+    margin-top: 0;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &:first-child:last-child {
+    margin: 0;
+  }
+}
+.color-picker-palette {
+  display: flex;
+  flex-wrap: wrap;
+}
+.color-picker-palette-row {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  .color-picker-palette-value {
+    width: 100%;
+  }
+}
+.color-picker-palette-value {
+  width: var(--f7-color-picker-palette-value-width);
+  height: var(--f7-color-picker-palette-value-height);
+  cursor: pointer;
+}
+// Initial-Current Colors
+.color-picker-module-initial-current-colors,
+.color-picker-module-current-color {
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: var(--f7-color-picker-initial-current-color-border-radius);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.color-picker-initial-color,
+.color-picker-current-color {
+  height: var(--f7-color-picker-initial-current-color-height);
+}
+.color-picker-initial-current-colors {
+  display: flex;
+  .color-picker-initial-color,
+  .color-picker-current-color {
+    width: 50%;
+  }
+}
+// Grouped Modules
+.color-picker-module-rgb-sliders,
+.color-picker-module-hsb-sliders,
+.color-picker-module-alpha-slider,
+.color-picker-module-hue-slider,
+.color-picker-module-brightness-slider,
+.color-picker-module-hex {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.color-picker-grouped-modules {
+  .color-picker-module-rgb-sliders,
+  .color-picker-module-hsb-sliders,
+  .color-picker-module-alpha-slider,
+  .color-picker-module-hue-slider,
+  .color-picker-module-brightness-slider,
+  .color-picker-module-hex {
+    background: var(--f7-color-picker-group-bg-color);
+    padding: 8px;
+    border-radius: 8px;
+    margin-top: 16px;
+    margin-left: 8px;
+    margin-right: 8px;
+    &:last-child {
+      margin-bottom: 16px;
+    }
+  }
+  .color-picker-slider-value,
+  .color-picker-hex-value {
+    background: var(--f7-color-picker-group-value-bg-color);
+  }
+  .color-picker-slider-label,
+  .color-picker-hex-label {
+    .ltr({
+      margin-left: 5px;
+    });
+    .rtl({
+      margin-right: 5px;
+    });
+  }
+  .color-picker-module-rgb-sliders,
+  .color-picker-module-hsb-sliders,
+  .color-picker-module-alpha-slider,
+  .color-picker-module-hue-slider,
+  .color-picker-module-brightness-slider {
+    .range-slider:first-child {
+      .ltr({
+        margin-left: 5px;
+      });
+      .rtl({
+        margin-right: 5px;
+      });
+    }
+    .range-slider:last-child {
+      .ltr({
+        margin-right: 5px;
+      });
+      .rtl({
+        margin-left: 5px;
+      });
+    }
+  }
+}
+
+.if-ios-theme({
+  @import './color-picker-ios.less';
+});
+.if-md-theme({
+  @import './color-picker-md.less';
+});

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

@@ -0,0 +1,91 @@
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      alphaLabelText
+    } = self.params;
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-alpha-slider"
+    }, $jsx("div", {
+      class: "color-picker-slider-wrap"
+    }, sliderLabel && $jsx("div", {
+      class: "color-picker-slider-label"
+    }, alphaLabelText), $jsx("div", {
+      class: "range-slider color-picker-slider color-picker-slider-alpha"
+    }), sliderValue && $jsx("div", {
+      class: "color-picker-slider-value"
+    }, sliderValueEditable ? $jsx("input", {
+      type: "number",
+      step: "0.01",
+      min: "0",
+      max: "1",
+      class: "color-picker-value-alpha"
+    }) : $jsx("span", {
+      class: "color-picker-value-alpha"
+    }))));
+  },
+  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(range, value) {
+          const alpha = Math.floor(value * 100) / 100;
+          self.setValue({
+            alpha
+          });
+        }
+      }
+    });
+    function handleInputChange(e) {
+      const alpha = self.value.alpha;
+      let 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(self) {
+    const {
+      value
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      alpha
+    } = value;
+    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(self) {
+    if (self.alphaRangeSlider && self.alphaRangeSlider.destroy) {
+      self.alphaRangeSlider.destroy();
+    }
+    delete self.alphaRangeSlider;
+    if (self.destroyAlphaSliderEvents) self.destroyAlphaSliderEvents();
+    delete self.destroyAlphaSliderEvents;
+  }
+};

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

@@ -0,0 +1,80 @@
+import { colorHsbToHsl } from '../../../shared/utils.js';
+/** @jsx $jsx */
+import $jsx from '../../../shared/$jsx.js';
+export default {
+  render(self) {
+    const {
+      sliderLabel,
+      sliderValue,
+      sliderValueEditable,
+      brightnessLabelText
+    } = self.params;
+    return $jsx("div", {
+      class: "color-picker-module color-picker-module-brightness-slider"
+    }, $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"
+    }) : $jsx("span", {
+      class: "color-picker-value-brightness"
+    }))));
+  },
+  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(range, value) {
+          const b = Math.floor(value * 1000) / 1000;
+          self.setValue({
+            hsb: [self.value.hsb[0], self.value.hsb[1], b]
+          });
+        }
+      }
+    });
+  },
+  update(self) {
+    const {
+      value,
+      app
+    } = self;
+    const {
+      sliderValue,
+      sliderValueEditable
+    } = self.params;
+    const {
+      hsb
+    } = value;
+    self.brightnessRangeSlider.value = hsb[2];
+    self.brightnessRangeSlider.layout();
+    const hslCurrent = colorHsbToHsl(hsb[0], hsb[1], hsb[2]);
+    const hslLeft = colorHsbToHsl(hsb[0], hsb[1], 0);
+    const hslRight = 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(self) {
+    if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) {
+      self.brightnessRangeSlider.destroy();
+    }
+    delete self.brightnessRangeSlider;
+  }
+};