paper-swatch-picker.html

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="paper-swatch-picker-icon.html">

<!--
This is a simple color picker element that will allow you to choose one
of the Material Design colors from a list of available swatches.

Example:

    <paper-swatch-picker></paper-swatch-picker>

    <paper-swatch-picker color="{{selectedColor}}"></paper-swatch-picker>

You can configure the color palette being used using the `colorList` array and
the `columnCount` property, which specifies how many "generic" colours (i.e. columns
in the picker) you want to display.

    <paper-swatch-picker column-count=5 color-list='["#65a5f2", "#83be54", "#f0d551", "#e5943c", "#a96ddb"]'></paper-swatch-picker>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-swatch-picker-color-size` | The size of each of the color boxes | `20px`
`--paper-swatch-picker-icon-size` | The size of the color picker icon | `24px`
`--paper-swatch-picker-icon` | Mixin applied to the color picker icon | `{}`

@element paper-swatch-picker
@demo demo/index.html
-->

<dom-module id="paper-swatch-picker">
  <template>
    <style>
      :host {
        display: inline-block;
        position: relative;
      }

      :host(:focus) {
        outline: none;
      }

      .color {
        box-sizing: border-box;
        width: var(--paper-swatch-picker-color-size, 20px);
        height: var(--paper-swatch-picker-color-size, 20px);
        display: inline-block;
        padding: 0;
        margin: 0;
        cursor: pointer;
        font-size: 0;
        position: relative;
      }

      /* If we just scale the paper-item when hovering, this will end up
       * adding scrollbars to the paper-listbox that are hard to get rid of.
       * An easy workaround is to use an :after pseudo element instead. */
      .color:after {
        @apply(--layout-fit);
        background: currentColor;
        content: '';
        -webkit-transition: -webkit-transform 0.2s;
        transition: transform .2s;
        z-index: 0;
      }

      .color:hover:after, .color:focus:after {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
        outline: none;
        z-index: 1;
      }

      paper-icon-button {
        @apply(--paper-swatch-picker-icon);
      }

      paper-item {
        --paper-item: {
          margin: 0;
          padding: 0;
          min-height: 0;
        };

        --paper-item-focused-before: {
          opacity: 0;
        };
      }

      paper-listbox {
        padding: 0;
        font-size: 0;
        overflow: hidden;
        @apply(--layout-vertical);
        @apply(--layout-wrap);
      }
    </style>

    <paper-menu-button vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]">
      <paper-icon-button
          id="iconButton"
          icon="swatch:format-color-fill"
          class="dropdown-trigger" alt="color picker"
          noink$="[[noink]]">
      </paper-icon-button>
      <paper-listbox class="dropdown-content" id="container">
        <template is="dom-repeat" items="{{colorList}}">
          <paper-item class="color">{{item}}</paper-item>
        </template>
      </paper-listbox>
    </paper-menu-button>
  </template>

  <script>
    Polymer({
      is: 'paper-swatch-picker',

      hostAttributes: {
        'tabindex': 0
      },

      listeners: {
        'paper-dropdown-open': '_onOpen',
        'iron-select': '_onColorTap'
      },

      /**
       * Fired when a color has been selected
       *
       * @event color-picker-selected
       */

      properties: {
        /**
         * The selected color, as hex (i.e. #ffffff).
         * value.
         */
        color: {
          type: String,
          notify: true,
          observer: '_colorChanged'
        },

        /**
         * The colors to be displayed. By default, these are the Material Design
         * colors. This array is arranged by "generic color", so for example,
         * all the reds (from light to dark), then the pinks, then the blues, etc.
         * Depending on how many of these generic colors you have, you should
         * update the `columnCount` property.
         */
        colorList: {
          type: Array,
          value: function() {
            return ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121'];
          }
        },

        /* The number of columns to display in the picker. This corresponds to
         * the number of generic colors (i.e. not counting the light/dark) variants
         * of a specific color) you are using in your `colorList`. For example,
         * the Material Design palette has 18 colors */
        columnCount: {
          type: Number,
          value: 18
        },

        /**
         * The orientation against which to align the menu dropdown
         * horizontally relative to the dropdown trigger.
         */
        horizontalAlign: {
          type: String,
          value: 'left',
          reflectToAttribute: true
        },

        /**
         * The orientation against which to align the menu dropdown
         * vertically relative to the dropdown trigger.
         */
        verticalAlign: {
          type: String,
          value: 'top',
          reflectToAttribute: true
        },

        /**
         * If true, the color picker button will not produce a ripple effect when interacted
         * with via the pointer.
         */
        noink: {
          type: Boolean
        }
      },

      created: function() {
        // Note: we won't actually render these color boxes unless the menu is
        // actually tapped.
        this._renderedColors = false;
      },

      attached: function() {
        // Fit the color boxes in columns. We first need to get the width of
        // a color box (which is customizable), and then change the box's
        // width to fit all the columns.
        var sizeOfAColorDiv = this.getComputedStyleValue('--paper-swatch-picker-color-size');
        if (!sizeOfAColorDiv || sizeOfAColorDiv == '') {  // Default value case
          sizeOfAColorDiv = 20;
        } else {
          sizeOfAColorDiv = sizeOfAColorDiv.replace('px', '');
        }

        var rowCount = this.colorList.length / this.columnCount;
        this.$.container.style.height = rowCount * sizeOfAColorDiv + 'px';
        this.$.container.style.width = this.columnCount * sizeOfAColorDiv + 'px';
      },

      _onOpen: function() {
        // Fill in the colors if we haven't already.
        if (this._renderedColors)
          return;

        var colorBoxes = this.$.container.querySelectorAll('.color');
        for (var i = 0; i < colorBoxes.length; i++) {
          colorBoxes[i].style.color = colorBoxes[i].innerHTML;
          colorBoxes[i].innerHTML = '';
        }
        this._renderedColors = true;
      },

      _addOverflowClass: function() {
        this.$.container.toggleClass('opened', true);
      },

      _removeOverflowClass: function() {
        this.$.container.toggleClass('opened', false);
      },

      _onColorTap: function(event) {
        var item = event.detail.item;
        // The inner `span` element has the background color;
        var color = item.style.color;

        // If it's in rgb format, convert it first.
        this.color = color.indexOf('rgb') === -1 ? color : this._rgbToHex(color);
        this.fire('color-picker-selected', {color: this.color});
      },

      _colorChanged: function() {
        this.$.iconButton.style.color = this.color;
      },

      /**
       * Takes an rgb(r, g, b) style string and converts it to a #ffffff hex value.
       */
      _rgbToHex: function(rgb) {
        // Split the rgb(r, g, b) string up.
        var split = rgb.split('(')[1].split(')')[0].split(',');

        if (split.length != 3)
          return '';

        // From https://gist.github.com/lrvick/2080648.
        var bin = split[0] << 16 | split[1] << 8 | split[2];
        return (function(h) {
          return '#' + new Array(7 - h.length).join('0') + h;
        })(bin.toString(16).toLowerCase());
      }
    });
  </script>
</dom-module>