luminous-color-picker.html

<!--

Material Design: Color picker inspired by <a href="http://www.google.com/design/spec/components/pickers.html">Material Design Pickers</a>

`luminous-color-picker` is a color picker dialog that can be used to pick colors.

Example:

    <luminous-color-picker id="picker"></luminous-color-picker>

and to open the dialog

    this.$.picker.open();

@demo demo/index.html
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../iron-flex-layout/iron-flex-layout.html" rel="import">
<link href="../paper-slider/paper-slider.html" rel="import">
<link href="../paper-card/paper-card.html" rel="import">
<link href="../paper-dialog/paper-dialog.html" rel="import">
<link href="../paper-button/paper-button.html" rel="import">
<link href="../paper-input/paper-input.html" rel="import">
<link href="../paper-input/paper-input-container.html" rel="import">
<link href="../neon-animation/animations/fade-out-animation.html" rel="import">
<link href="../neon-animation/animations/scale-up-animation.html" rel="import">
<script src="../whenever.js/whenever.js"></script>
<link href="luminous-color-circle.html" rel="import">

<style>
  html /deep/ .luminous-picker-dialog::shadow #scroller {

    padding:0px;
  }
</style>
<dom-module id="luminous-color-picker">
  <style>
    luminous-color-circle {
      width:200px;
      height:200px;
    }

    #container {
      margin-top: 0px;
      padding: 0px;
      /*position:absolute;
      left:0px;
      top:0px;
      right:0px;
      bottom:0px;*/
    }

    #preview {
      padding: 0px;
      position: relative;
    }

    paper-slider {
      width:100%;
    }
    paper-input {
      width:100%;
      padding:0px 24px;
      box-sizing:border-box;
      margin:-10px 0px 0px 0px;
    }
    #huePicker {
      width:255px;
      margin:15px;
      height:15px;
      border-radius:2px;
    }
    .landscapeOnly, .portraitOnly {
      display:none;
    }
    #dialog {
      display: flex;
      align-items: stretch;
    }
    paper-input {
      margin-top:-1px;
      padding: 0px;
    }
    #detail {
      min-width: 240px;
      margin: 0px;
      padding: 0px;
    }
    luminous-color-circle{
      display: block;
      margin: auto;
    }
    #title {
      position: absolute;
      text-align: left;
      color: white;
      @apply(--paper-font-common-base);
      font-size: 28px;
      font-weight: 400;
      letter-spacing: -.01em;
      line-height: 38px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 20px;
      padding-bottom: 30px;
    }
    #preview {
      margin-top: 0px;
      background-image:
              linear-gradient(45deg, #eee 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, #eee 75%),
              linear-gradient(45deg, #eee 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, #eee 75%);

      background-size:24px 24px;
      background-position:0 0, 0px 0px, 12px 12px, 12px 12px;
    }
    :host([advanced]) {

    }
    .buttons{
      margin-top:20px;
      padding-left:0px;
      padding-right:0px;
    }
    #rgb{
      display:flex;
    }
    #rgb paper-input{
      flex: 1;
      margin: 0px 5px;
    }
    #rgb paper-input:first-child{
      margin-left: 0px;
    }
    #rgb paper-input:last-child{
      margin-right: 0px;
    }
    #color{
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      z-index: 0;
    }
    @media only screen and (orientation : portrait){
      .portraitOnly {
        display:block;
      }
      #preview{
        min-height: 91px;
      }

      #dialog {
        width: 90%;
        max-width: 350px;
        flex-direction: column;
      }
      #title{
        padding-top: 40px;
        padding-bottom: 15px;
      }
      #detail{
        padding-top: 20px;
      }
      #details {
        padding: 0px 20px;
      }
    }
    @media only screen and (orientation : landscape){
      :host {
        width:480px;
      }
      #preview{
        width: 185px;
      }
      #detail {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
      }
      #container {
        display:flex;
        flex-direction: row;
      }
      .landscapeOnly {
        display:block;
      }
    }
  </style>
  <template>

  <div id="dialog"
                entry-animation="scale-up-animation"
                exit-animation="fade-out-animation"
                with-backdrop
                class="color-picker-dialog">

    <div id="preview">
      <div id="color"></div>
      <div id="title">
        <template is="dom-if" if="{{noFullNames}}">
          Color Picker
        </template>
        <template is="dom-if" if="{{!noFullNames}}">
          {{immediateColorAsString}}
        </template>
      </div>
    </div>
    <div id="detail">

      <luminous-color-circle id="picker"  shape="{{shape}}" type="{{type}}" value="{{colorValue}}" color="{{immediateColor}}" hue="{{colorHue}}" lightness="{{colorLightness}}" on-lightness-changed="_setSliders" on-value-changed="_setSliders"></luminous-color-circle>

      <div id="details">
        <template is="dom-if" if="{{_showValueSlider(shape, type)}}">
          <paper-input-container attr-for-value="immediate-value">
            <label>Value (Brightness)</label>
            <paper-slider id="valueSlider" class="paper-input-input" min="0" max="100" pin="true" value="100" immediate-value="{{sliderValue}}"></paper-slider>
          </paper-input-container>
        </template>
        <template is="dom-if" if="{{_showLightnessSlider(shape, type)}}">
          <paper-input-container attr-for-value="immediate-value">
            <label>Lightness</label>
            <paper-slider id="lightnessSlider" class="paper-input-input" min="0" max="100" pin="true" value="50" immediate-value="{{sliderLightness}}"></paper-slider>
          </paper-input-container>
        </template>
        <template is="dom-if" if="{{_showHuePicker(shape)}}">
          <paper-input-container attr-for-value="id">
            <label>Hue</label>
            <canvas id="huePicker" class="paper-input-input" on-tap="huePickerPickColor" on-track="huePickerPickColor" width="360" height="1"></canvas>
          </paper-input-container>
          <!--<paper-slider id="hueSlider" min="0" max="100" value="50" immediate-value="{{sliderHue}}"></paper-slider>-->
        </template>

        <template is="dom-if" if="{{_and(allowAlpha,_initialAlphaValueHackApplied)}}">
          <paper-input-container attr-for-value="immediate-value" hidden$="{{!_or(alwaysShowAlpha, advanced)}}">
            <label>Alpha (transparency)</label>
            <paper-slider id="alphaPicker" class="paper-input-input" min="0" max="1" step="0.01" value="{{_initialAlphaValueHack}}" immediate-value="{{immediateColor.alpha}}"></paper-slider>
          </paper-input-container>
        </template>

        <div hidden$="{{!advanced}}">
          <!--<div class="landscapeOnly">-->
          <div id="rgb">
            <paper-input id="redField" value="{{immediateColor.red}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Red"></paper-input>
            <paper-input id="greenField" value="{{immediateColor.green}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Green"></paper-input>
            <paper-input id="blueField" value="{{immediateColor.blue}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Blue"></paper-input>
          </div>
          <!--</div>-->
        </div>
      </div>

      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button on-tap="toggleAdvancedMode" hidden$="{{advanced}}">Advanced</paper-button>
        <paper-button dialog-confirm on-tap="setColor">OK</paper-button>
      </div>
    </div>

  </div>
</template>
  <script>
    (function(){
      var colorNamesRetrieved = new Whenever();
      var retrievingColorNames = false;
      var retrieveColorNames = function(el){
        if(!retrievingColorNames){
          var httpRequest = new XMLHttpRequest();
          httpRequest.onreadystatechange = function(){
            if (httpRequest.readyState === XMLHttpRequest.DONE) {
              if (httpRequest.status === 200) {
                colorNamesRetrieved.ready(JSON.parse(httpRequest.responseText));
              }
            }
          };
          httpRequest.open('GET', el.resolveUrl('./color-names.json'));
          httpRequest.send();
        }
        retrievingColorNames = true;
        return colorNamesRetrieved;
      };

      Polymer({
        is: 'luminous-color-picker',
        properties: {
          /**
           * The selected color as an object: `{red, green, blue}`
           *
           * @attribute color
           * @type Object
           * @default new Object()
           */
          color: {
            type: Object,
            value: {
              red: undefined,
              green: undefined,
              blue: undefined,
              alpha: 1
            },
            notify: true
          },
          colorHue: {
            type: Number,
            value: 0
          },
          colorLightness: {
            type: Number,
            value: 0.5
          },
          colorValue: {
            type: Number,
            value: 1
          },
          disableUpdate: {
            type: Boolean,
            value: false
          },
          /**
           * Show alpha slider always instead of only in the advanced settings
           */
          alwaysShowAlpha: Boolean,
          /**
           * Whether to allow changing the transparency of the picked color
           */
          allowAlpha: Boolean,
          /**
           * The selected color as an object: `{red, green, blue}`
           * even before the user clicks ok
           *
           * @attribute immediateColor
           * @type Object
           * @default {red: 50, green: 50, blue: 50}
           */
          immediateColor: {
            type: Object,
            value: {
              red: 0,
              green: 150,
              blue: 136,
              alpha: 1
            },
            notify: true
          },
          /**
           * *square*, *circle* or *huebox*
           *
           * @attribute shape
           * @type string
           * @default 'circle'
           */
          shape: {
            type: String,
            value: 'circle',
            notify: true
          },
          sliderHue: {
            type: Number,
            value: 50
          },
          sliderLightness: {
            type: Number,
            value: 50,
            observer: 'sliderLightnessChanged'
          },
          sliderValue: {
            type: Number,
            value: 100,
            observer: 'sliderValueChanged',
            notify : true
          },
          /**
           * *hsv* or *hsl*
           *
           * @attribute type
           * @type string
           * @default 'hsv'
           */
          type: {
            type: String,
            value: 'hsv',
            notify: true
          },
          noFullNames: {
            type: Boolean
          },
          immediateColorAsString: {
            type: String,
            notify: true
          },
          colorAsString: {
            type: String,
            notify: true
          },
          advanced: {
            type: Boolean,
            reflectToAttribute: true,
            observer: '_recenterDialog'
          }
        },
        observers: [
          'immediateColorChanged(immediateColor.*)'
        ],
        ready: function(){
          if(!this.advanced){
            this.set('advanced', false);
          }
          if(!this.alwaysShowAlpha){
            this.set('alwaysShowAlpha', false);
          }
          if(!this.noFullNames){
            this.set('noFullNames', false);
            retrieveColorNames(this);
          }
          this.async(function(){
            if(this._isColorDefined()){
              if(this.allowAlpha && typeof this.color.alpha !== 'undefined'){
                this._initialAlphaValueHack = this.color.alpha;
              }else{
                this._initialAlphaValueHack = 1;
              }
            }else if(this._isImmediateColorDefined()){
              if(this.allowAlpha && typeof this.immediateColor.alpha !== 'undefined'){
                this._initialAlphaValueHack = this.immediateColor.alpha;
              }else{
                this._initialAlphaValueHack = 1;
              }
            }else{
              this._initialAlphaValueHack = 1;
            }
            this._initialAlphaValueHackApplied = true;
          });
          window.addEventListener('resize', function(){
            //this.$.dialog.resetFit();
          }.bind(this));
        },
        _and: function(a,b){
          return a && b;
        },
        _or: function(a,b){
          return a || b;
        },
        _isColorDefined: function(){
          return this.color.red >= 0 && this.color.green >= 0 && this.color.blue >= 0;
        },
        _isImmediateColorDefined: function(){
          return this.immediateColor.red >= 0 && this.immediateColor.green >= 0 && this.immediateColor.blue >= 0;
        },
        setColorWheel: function(){
          if (!this.disableUpdate){
            if(this._showValueSlider()){
              this.set('colorValue', this.sliderValue / 100);
            }
            if(this._showLightnessSlider())
              this.colorLightness = this.sliderLightness / 100;

            setTimeout(function(){
              this.disableUpdate = false;
            }.bind(this), 50);
          }
          this.disableUpdate = true;
        },
        sliderValueChanged: function(){
          this.setColorWheel();
        },
        sliderLightnessChanged: function(){
          this.setColorWheel();
        },
        _calculateLuminance: function(r, g, b){
          var a = [r,g,b].map(function(v) {
            v /= 255;
            return (v <= 0.03928) ?
            v / 12.92 :
                    Math.pow( ((v+0.055)/1.055), 2.4 );
          });
          return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
        },
        immediateColorChanged: function(){
          if(typeof this.immediateColor.alpha == 'undefined'){
            this.immediateColor.alpha = 1;
          }
          this.$.color.style.backgroundColor = 'rgba(' + this.immediateColor['red'] + ',' + this.immediateColor['green'] + ',' + this.immediateColor['blue'] + ',' + this.immediateColor['alpha'] + ')';
          if(!this.noFullNames){
            colorNamesRetrieved.whenReady(function(colors){
              var closest = {
                color: undefined,
                distance: Infinity
              };
              colors.forEach((color) => {
                var distance = Math.sqrt(Math.pow(this.immediateColor['red']-color.rgb[0],2)+Math.pow(this.immediateColor['green']-color.rgb[1],2)+Math.pow(this.immediateColor['blue']-color.rgb[2],2));
                if(distance < closest.distance){
                  closest.color = color;
                  closest.distance = distance;
                }
              });
              this.immediateColorAsString = closest.color.title;

              var luminance = Math.max(this._calculateLuminance.apply(this, closest.color.rgb), Math.min(1,1-this.immediateColor.alpha+0.2));
              //shy: ­
              var opacity = Math.max(0,luminance -.5) *1.8;
              opacity = Math.round(opacity*100)/100;
              this.$.title.style.textShadow = 'rgba(0,0,0,'+ opacity +') 1px 0 60px';
              //this.$.title.style.opacity = luminance < 0.6 ? .9 : 0.5;
            }.bind(this));
          }
          //var maxZ = Math.max.bind(Math, 0);
          //this.$.title.style.backgroundColor = 'rgb(' + maxZ(this.immediateColor['red'] - 40) + ',' + maxZ(this.immediateColor['green'] - 40) + ',' + maxZ(this.immediateColor['blue'] - 40) + ')';
        },
        drawHuePicker: function(){
          this._huePickerCtx = Polymer.dom(this.root).querySelector('#huePicker').getContext('2d');
          var bitmap = this._huePickerCtx.getImageData(0, 0, 360, 30);
          for (var x = 0; x < 360; x++){
            var hue = x;
            var color = this.$.picker.hsv2rgb(hue, 1, 1);
            bitmap.data[4 * x + 0] = color[0];
            bitmap.data[4 * x + 1] = color[1];
            bitmap.data[4 * x + 2] = color[2];
            bitmap.data[4 * x + 3] = 255;
          }
          this._huePickerCtx.putImageData(bitmap, 0, 0);
        },
        huePickerPickColor: function(e){
          var rect = Polymer.dom(this.root).querySelector('#huePicker').getBoundingClientRect();
          var percentage = (e.detail.x - rect.left) / rect.width;
          if(percentage > 0 && percentage < 1)
            this.colorHue = percentage;
        },
        changeColorMixture: function(){
          var red = this.$.redField.value;
          var green = this.$.greenField.value;
          var blue = this.$.blueField.value;
          var colors = {
            red: red,
            green: green,
            blue: blue
          };
          this.set('immediateColor', colors);
        },
        setColor: function(){
          this.set('color.red', this.immediateColor.red);
          this.set('color.green', this.immediateColor.green);
          this.set('color.blue', this.immediateColor.blue);
          this.set('color.alpha', this.immediateColor.alpha);
          this.set('colorAsString', this.immediateColorAsString);
        },
        open: function(){
          if (this.color && this.color['green'])
            this.immediateColor = this.color;
          this.immediateColorChanged();
          //this.$.dialog.open();
          if (this._showHuePicker())
            this.drawHuePicker();
        },
        _computeColouredaaborder: function(){
          return {
            red: 50,
            green: 50,
            blue: 50
          };
        },
        _showValueSlider: function(){
          return this.type == 'hsv' && this.shape !== 'huebox';
        },
        _showLightnessSlider: function(){
          return this.type == 'hsl' && this.shape !== 'huebox';
        },
        _showHuePicker: function(){
          return this.shape == 'huebox';
        },
        toggleAdvancedMode: function(){
          this.advanced = !this.advanced;
        },
        _recenterDialog: function(){
         // if(this.$.dialog.opened)
            //this.$.dialog.center();
        },
        _setSliders: function(){
          this.async(function(){
            var valueSlider = Polymer.dom(this.root).querySelector('#valueSlider');
            if(valueSlider){
              valueSlider.set('value', this.colorValue*100);
            }
            var lightnessSlider = Polymer.dom(this.root).querySelector('#lightnessSlider');
            if(lightnessSlider){
              lightnessSlider.set('value', this.colorLightness*100);
            }
          });

        }
      });
    })();
  </script>
</dom-module>