Sha256: 38fbb8c4951f62c0b734d9e55ae0ebc488d85ff692936b951772f33aa3afb4d0

Contents?: true

Size: 1.53 KB

Versions: 27

Compression:

Stored size: 1.53 KB

Contents

import ApplicationController from "satis/controllers/application_controller"
import * as dummy from "pickr";

export default class ColorPickerComponentController extends ApplicationController {
  static targets = ["picker", "input"]
  static values = { submit: Boolean, cssVariable: String, cssScope: String }

  connect() {
    this.setupPickr();
    this.pickr.on('save', (color, _instance) => {
      this.inputTarget.value = color.toHEXA().toString();

      this.pickr.hide();

      if (this.submitValue && !this.forcedUpdate) {
        this.inputTarget.form.submit();
      }

      if (this.cssVariableValue) {
        var element = this.cssScopeValue ? document.querySelector(this.cssScopeValue) : document.documentElement;
        console.log(element, this.cssScopeValue);
        element.style.setProperty(this.cssVariableValue, this.inputTarget.value);
      }
    });
  }

  disconnect() {
    if (this.pickr) {
      this.pickr.destroyAndRemove();
    }
  }

  setupPickr() {
    this.pickr = Pickr.create({
      el: this.element.querySelector('.picker'),
      theme: 'classic',
      default: this.inputTarget.value,

      components: {
        preview: true,
        opacity: false,
        hue: true,

        interaction: {
          hex: true,
          rgba: false,
          hsla: false,
          hsva: false,
          cmyk: false,
          input: true,
          clear: false,
          save: true,
        },
      },
    });
  }

  inputUpdate() {
    if (this.pickr) {
      this.pickr.setColor(this.inputTarget.value);
    }
  }
} 

Version data entries

27 entries across 27 versions & 1 rubygems

Version Path
satis-2.1.53 app/components/satis/color_picker/component_controller.js
satis-2.1.52 app/components/satis/color_picker/component_controller.js
satis-2.1.51 app/components/satis/color_picker/component_controller.js
satis-2.1.50 app/components/satis/color_picker/component_controller.js
satis-2.1.49 app/components/satis/color_picker/component_controller.js
satis-2.1.48 app/components/satis/color_picker/component_controller.js
satis-2.1.47 app/components/satis/color_picker/component_controller.js
satis-2.1.46 app/components/satis/color_picker/component_controller.js
satis-2.1.45 app/components/satis/color_picker/component_controller.js
satis-2.1.44 app/components/satis/color_picker/component_controller.js
satis-2.1.43 app/components/satis/color_picker/component_controller.js
satis-2.1.42 app/components/satis/color_picker/component_controller.js
satis-2.1.41 app/components/satis/color_picker/component_controller.js
satis-2.1.40 app/components/satis/color_picker/component_controller.js
satis-2.1.39 app/components/satis/color_picker/component_controller.js
satis-2.1.38 app/components/satis/color_picker/component_controller.js
satis-2.1.37 app/components/satis/color_picker/component_controller.js
satis-2.1.36 app/components/satis/color_picker/component_controller.js
satis-2.1.35 app/components/satis/color_picker/component_controller.js
satis-2.1.33 app/components/satis/color_picker/component_controller.js