@wordpress/components/build-module/color-picker/alpha.js

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * Parts of this source were derived and modified from react-color,
 * released under the MIT license.
 *
 * https://github.com/casesandberg/react-color/
 *
 * Copyright (c) 2015 Case Sandberg
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/**
 * External dependencies
 */
import { noop } from 'lodash';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import { TAB } from '@wordpress/keycodes';
import { pure } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import { calculateAlphaChange } from './utils';
import KeyboardShortcuts from '../keyboard-shortcuts';
export class Alpha extends Component {
  constructor() {
    super(...arguments);
    this.container = createRef();
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
  }

  componentWillUnmount() {
    this.unbindEventListeners();
  }

  increase(amount = 0.01) {
    const {
      hsl,
      onChange = noop
    } = this.props;
    amount = parseInt(amount * 100, 10);
    const change = {
      h: hsl.h,
      s: hsl.s,
      l: hsl.l,
      a: (parseInt(hsl.a * 100, 10) + amount) / 100,
      source: 'rgb'
    };
    onChange(change);
  }

  decrease(amount = 0.01) {
    const {
      hsl,
      onChange = noop
    } = this.props;
    const intValue = parseInt(hsl.a * 100, 10) - parseInt(amount * 100, 10);
    const change = {
      h: hsl.h,
      s: hsl.s,
      l: hsl.l,
      a: hsl.a <= amount ? 0 : intValue / 100,
      source: 'rgb'
    };
    onChange(change);
  }

  handleChange(e) {
    const {
      onChange = noop
    } = this.props;
    const change = calculateAlphaChange(e, this.props, this.container.current);

    if (change) {
      onChange(change, e);
    }
  }

  handleMouseDown(e) {
    this.handleChange(e);
    window.addEventListener('mousemove', this.handleChange);
    window.addEventListener('mouseup', this.handleMouseUp);
  }

  handleMouseUp() {
    this.unbindEventListeners();
  }

  preventKeyEvents(event) {
    if (event.keyCode === TAB) {
      return;
    }

    event.preventDefault();
  }

  unbindEventListeners() {
    window.removeEventListener('mousemove', this.handleChange);
    window.removeEventListener('mouseup', this.handleMouseUp);
  }

  render() {
    const {
      rgb
    } = this.props;
    const rgbString = `${rgb.r},${rgb.g},${rgb.b}`;
    const gradient = {
      background: `linear-gradient(to right, rgba(${rgbString}, 0) 0%, rgba(${rgbString}, 1) 100%)`
    };
    const pointerLocation = {
      left: `${rgb.a * 100}%`
    };
    const shortcuts = {
      up: () => this.increase(),
      right: () => this.increase(),
      'shift+up': () => this.increase(0.1),
      'shift+right': () => this.increase(0.1),
      pageup: () => this.increase(0.1),
      end: () => this.increase(1),
      down: () => this.decrease(),
      left: () => this.decrease(),
      'shift+down': () => this.decrease(0.1),
      'shift+left': () => this.decrease(0.1),
      pagedown: () => this.decrease(0.1),
      home: () => this.decrease(1)
    };
    return createElement(KeyboardShortcuts, {
      shortcuts: shortcuts
    }, createElement("div", {
      className: "components-color-picker__alpha"
    }, createElement("div", {
      className: "components-color-picker__alpha-gradient",
      style: gradient
    }), createElement("div", {
      className: "components-color-picker__alpha-bar",
      ref: this.container,
      onMouseDown: this.handleMouseDown,
      onTouchMove: this.handleChange,
      onTouchStart: this.handleChange
    }, createElement("div", {
      tabIndex: "0",
      role: "slider",
      "aria-valuemax": "1",
      "aria-valuemin": "0",
      "aria-valuenow": rgb.a,
      "aria-orientation": "horizontal",
      "aria-label": __('Alpha value, from 0 (transparent) to 1 (fully opaque).'),
      className: "components-color-picker__alpha-pointer",
      style: pointerLocation,
      onKeyDown: this.preventKeyEvents
    }))));
  }

}
export default pure(Alpha);
//# sourceMappingURL=alpha.js.map