Reference Source

coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js

/**
 * Copyright 2021 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
import {BaseComponent} from '../../../coral-base-component';
import subView from '../templates/colorHandle';
import {validate, transform, commons, i18n} from '../../../coral-utils';
import { TinyColor } from '@ctrl/tinycolor';
import colorUtil from "./ColorUtil";

const CLASSNAME = '_coral-ColorPicker-colorHandle';

/**
 @class Coral.ColorPicker.ColorHandle
 @classdesc A ColorHandle component
 @htmltag coral-colorpicker-colorhandle
 @extends {HTMLElement}
 @extends {BaseComponent}
 */
class ColorHandle extends BaseComponent(HTMLElement) {
  /** @ignore */
  constructor() {
    super();

    this._delegateEvents(commons.extend(this._events, {
    }));

    // Templates
    this._elements = {};
    subView.call(this._elements, {commons, i18n});
    this._color = new TinyColor("hsla(0, 100%, 50%, 1)");
    this._hue = 0;
  }
  
  /** @ignore */
  render() {
    super.render();

    this.classList.add(CLASSNAME);

    const frag = document.createDocumentFragment();

    // Render template
    frag.appendChild(this._elements.colorHandleSubView);

    // Support cloneNode
    while (this.firstChild) {
      const child = this.firstChild;
      if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {
        this.removeChild(child);
      } 
      else {
        frag.appendChild(child);
      }
    }

    this.appendChild(frag);
    
    this._subView = this.querySelector("._coral-ColorPicker-colorHandle-color");
    this.color = colorUtil.toHslString(this._hue, this._color.toHslString());
  }
  
  /** @ignore */
  focus() {
    this.classList.add("is-focused");
  }
  
  /** @ignore */
  blur() {
    this.classList.remove("is-focused");
  }
  
  /**
   Whether this field is disabled or not.
   @type {Boolean}
   @default false
   @htmlattribute disabled
   @htmlattributereflected
   */
  get disabled() {
    return this._disabled || false;
  }

  set disabled(value) {
    this._disabled = transform.booleanAttr(value);
    this._reflectAttribute('disabled', this._disabled);

    this.classList.toggle('is-disabled', this._disabled);
    this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);
  }

  /**   
   The ColorSlider color.
   @default hsla(0, 100%, 50%, 1)
   @type {String}
   @htmlattribute label
   @htmlattributereflected
   */   
  get color() {
    return this._color.toHslString();
  }
  
  set color(value) {
    let color = new TinyColor(value);
    if(!color.isValid) {
      color = new TinyColor("hsla(0, 100%, 50%, 1)");
      value = color.toHslString();
    }
    this._color = color;
    this._hue = colorUtil.getHue(value);
    this._reflectAttribute('color', colorUtil.toHslString(this._hue, this._color.toHslString()));  
    if(this._subView){
     this._subView.style["background-color"] =  colorUtil.toHslString(this._hue, this._color.toHslString());
    }
  }

  /** @ignore */
  static get observedAttributes() {
    return super.observedAttributes.concat([
      'disabled',
      'color'
    ]);
  }
    
}
export default ColorHandle;