diff service/pilight/static/input-rgb/input-rgb.js @ 140:89bc300e1419

add input-rgb polymer element Ignore-this: 2ba2ef39af2ef4f6c14036c5ac188e97
author drewp@bigasterisk.com
date Sat, 12 Jul 2014 11:32:50 -0700
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/service/pilight/static/input-rgb/input-rgb.js	Sat Jul 12 11:32:50 2014 -0700
@@ -0,0 +1,76 @@
+Polymer({
+
+  __doc__: {
+    element: 'input-rgb',
+    description: 'Input element for color data type.',
+    status: 'alpha',
+    url: 'https://github.com/arodic/input-rgb/',
+    demo: 'http://arodic.github.com/input-rgb/',
+    attributes: [
+      { name: 'r', type: 'number', description: 'Red value.' },
+      { name: 'g', type: 'number', description: 'Green value.' },
+      { name: 'b', type: 'number', description: 'Blue value.' },
+      { name: 'hex', type: 'string', description: 'Hexadecimal value of rgb components.' },
+      { name: 'editable', type: 'boolean', description: 'Determines if the input can be edited.' }
+    ],
+    properties: [],
+    methods: [],
+    events: [
+      {
+        name: 'input-changed',
+        description: 'Fires when value attribute is changed.'
+      }
+    ]
+  },
+
+  r: 1,
+  g: 1,
+  b: 1,
+  hex: '#ffffff',
+  observe: {
+    'r g b': 'updateHex'
+  },
+  ready: function() {
+    this.setAttribute('horizontal', true);
+    this.setAttribute('layout', true);
+    this.shadowRoot.addEventListener('input-changed', this.onInputChanged.bind(this));
+  },
+  attached: function() {
+    this.setSwatchSize();
+    this.updateHex();
+  },
+  updateHex: function() {
+    var hex = (this.r * 255) << 16 ^ (this.g * 255) << 8 ^ (this.b * 255) << 0;
+    this.hex = '#' + ('000000' + hex.toString(16)).slice(- 6);
+    this.$.swatch.style.background = this.hex;
+  },
+  onInputChanged: function(event) {
+    event.stopPropagation();
+    this.hold = true;
+    setTimeout(function() { this.hold = false; }, 100);
+    this.fire('input-changed', { input: this, component: event.detail.input.id.replace('_', '') });
+  },
+  hexChanged: function() {
+
+    var hex = parseInt(this.hex.replace(/^#/, ''), 16);
+    hex = hex.toString();
+
+    hex = Math.floor(hex);
+    if (!this.hold) this.fire('input-changed', { input: this });
+
+    this.r = (hex >> 16 & 255) / 255;
+    this.g = (hex >> 8 & 255) / 255;
+    this.b = (hex & 255) / 255;
+
+  },
+  setSwatchSize: function() {
+    var rect = this.$.swatch.getBoundingClientRect();
+    this.$.swatch.style.width = rect.height + 'px';
+    this.$.picker.style.width = rect.height + 'px';
+    this.$.picker.style.height = rect.height + 'px';
+  },
+  editableChanged: function() {
+    if (this.editable) this.$.picker.style.display = 'block';
+    else this.$.picker.style.display = 'none';
+  }
+});