@things-factory/modeller-ui 5.0.0-alpha.5 → 5.0.0-alpha.6

package/client/editors/paper-color-picker/paper-color-input.js

@@ -1,266 +0,0 @@
-import { html } from '@polymer/polymer/polymer-element'
-
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn'
-import '@polymer/iron-form-element-behavior/iron-form-element-behavior'
-import '@polymer/paper-input/paper-input-container'
-import './paper-color-picker'
-/**
-This component contains 3 elements:
-
- - `<paper-color-circle>` : An element drawing a color space onto a canvas
- - `<paper-color-picker>` : An element containing a material design picker dialog for colors
- - `<paper-color-input>` : An element that displays an input that allows changing of the color through a color picker dialog.
-
-Shape and colour spaces
----
-There are three different main configurations all 3 elements allow: `circle`, `square`
- or `huebox`. This is called the `[shape]` of the color circle. Additionally in the case of `circle` and `square` it can
-  be specified whether the colours should be generated from the `hsv` or `hsl` colour space.
-
-    <paper-color-input shape="square" type="hsl"></paper-color-input>
-
-
-@demo demo/index.html
-*/
-Polymer({
-  is: 'paper-color-input',
-  _template: html`
-    <style>
-      :host {
-      }
-
-      #colorPreview {
-        height: 16px;
-        width: 16px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 1px;
-        margin: 2px;
-        position: relative;
-        background-image: linear-gradient(to right, #ffffff 1%, #ffffff 50%, #eee 50%, #eee 100%),
-          linear-gradient(to right, #eee 1%, #eee 50%, #ffffff 50%, #ffffff 100%);
-        background-size: 16px 8px, 16px 8px;
-        background-repeat: repeat-x, repeat;
-      }
-
-      #color {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        right: 0px;
-        bottom: 0px;
-      }
-
-      #noColor {
-        width: 22.6px;
-        height: 1px;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        transform-origin: 0px 0px;
-        transform: translateY(15.5px) rotate(-45deg);
-      }
-
-      #input {
-        cursor: pointer;
-      }
-
-      span.dark {
-        font-size: 10px;
-        color: rgba(0, 0, 0, 0.8);
-        font-family: monospace;
-      }
-
-      span.light {
-        font-size: 10px;
-        font-family: monospace;
-        color: rgba(0, 0, 0, 0.3);
-      }
-    </style>
-    <paper-input-container id="input" always-float-label="{{_isValueDefined(value.*)}}">
-      <label slot="label">{{label}}</label>
-      <div class="paper-input-input" slot="input">
-        <span>{{colorName}}</span>&nbsp;
-        <!--
-          -->
-        <template is="dom-if" if="{{withDescription}}">
-          <!--
-            -->
-          <span class="light"
-            >rgb
-            <template is="dom-if" if="{{allowAlpha}}"
-              >a</template
-            >(</span
-          >
-          <span class="dark">{{value.red}}</span> <span class="light">, </span>
-          <span class="dark">{{value.green}}</span> <span class="light">, </span>
-          <span class="dark">{{value.blue}}</span>
-          <template is="dom-if" if="{{allowAlpha}}">
-            <span class="light">, </span> <span class="dark">{{value.alpha}}</span>
-          </template>
-          <span class="light">)</span>
-        </template>
-      </div>
-      <div id="colorPreview" slot="suffix">
-        <div id="color" style$="{{_computeBackgroundColor(value.*)}}"></div>
-        <div id="noColor" hidden="{{_isValueDefined(value.*)}}"></div>
-      </div>
-    </paper-input-container>
-
-    <paper-color-picker
-      id="picker"
-      color="{{value}}"
-      color-as-string="{{colorName}}"
-      shape="{{shape}}"
-      type="{{type}}"
-      allow-alpha="{{allowAlpha}}"
-      always-show-alpha="{{alwaysShowAlpha}}"
-    ></paper-color-picker>
-  `,
-  properties: {
-    /**
-     * The currently picked color. This is an object with a `red`, `green` and `blue` property.
-     *
-     * @attribute label
-     * @type String
-     * @default ''
-     */
-    value: {
-      type: Object,
-      notify: true
-    },
-    valueAsHex: {
-      type: String,
-      notify: true,
-      observer: '_setValueFromHex'
-    },
-    /**
-     * The label for this input.
-     *
-     * @attribute label
-     * @type String
-     * @default ''
-     */
-    label: {
-      type: String,
-      value: ''
-    },
-    /**
-     * The name of the colour as shown in the input field
-     *
-     * @attribute color-name
-     * @type String
-     * @default ''
-     */
-    colorName: String,
-    /**
-     * *square*, *circle* or *huebox*
-     *
-     * @attribute shape
-     * @type string
-     * @default 'circle'
-     */
-    shape: {
-      type: String,
-      value: 'circle',
-      notify: true
-    },
-    /**
-     * *hsv* or *hsl*
-     *
-     * @attribute type
-     * @type string
-     * @default 'hsv'
-     */
-    type: {
-      type: String,
-      value: 'hsv',
-      notify: true
-    },
-    /**
-     * Whether to allow changing the transparency of the picked color
-     */
-    allowAlpha: Boolean,
-    /**
-     * Whether to show the color also as a string
-     */
-    withDescription: Boolean,
-    /**
-     * Show alpha slider always instead of only in the advanced settings
-     */
-    alwaysShowAlpha: Boolean
-  },
-  behaviors: [
-    /* Polymer.IronFormElementBehavior */
-    // disabled till https://github.com/Polymer/polymer/issues/3167 gets fixed
-  ],
-  observers: ['_setValueAsHexFromValue(value.*)'],
-  listeners: {
-    'input.tap': 'openColorPicker'
-  },
-  // Element Lifecycle
-  ready: function() {
-    if (this._isValueDefined()) {
-      this.$.picker.set('immediateColor', this.value)
-      var listenOnce
-      this.$.picker.addEventListener(
-        'immediate-color-as-string-changed',
-        (listenOnce = function() {
-          //this.colorName = this.$.picker.immediateColorAsString;
-          this.$.picker.setColor()
-          this.$.picker.removeEventListener('immediate-color-as-string-changed', listenOnce)
-        }.bind(this))
-      )
-    }
-  },
-  openColorPicker: function() {
-    this.$.picker.open()
-  },
-  _computeBackgroundColor: function() {
-    if (!this._isValueDefined()) {
-      return 'background: white'
-    }
-    if (typeof this.value.alpha === 'undefined') {
-      this.value.alpha = 1
-    }
-    return (
-      'background: rgba(' +
-      this.value.red +
-      ', ' +
-      this.value.green +
-      ',' +
-      this.value.blue +
-      ', ' +
-      this.value.alpha +
-      ')'
-    )
-  },
-  _isValueDefined: function() {
-    return this.value.red >= 0 && this.value.green >= 0 && this.value.blue >= 0
-  },
-  _setValueAsHexFromValue: function() {
-    if (this._isValueDefined()) {
-      var hex = '#'
-      var value = this.value
-      ;['red', 'green', 'blue'].forEach(function(c) {
-        var h = value[c].toString(16)
-        l = h.length
-        hex += l < 2 ? '0' : ''
-        hex += l < 1 ? '0' : ''
-        hex += h
-      })
-      this.set('valueAsHex', hex)
-    }
-  },
-  _setValueFromHex: function() {
-    var hex = this.valueAsHex
-    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
-    var hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-      return r + r + g + g + b + b
-    })
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-    if (typeof this.value === 'undefined') {
-      this.set('value', {})
-    }
-    this.set('value.red', parseInt(result[1], 16))
-    this.set('value.green', parseInt(result[2], 16))
-    this.set('value.blue', parseInt(result[3], 16))
-  }
-})