Mercurial > code > home > repos > homeauto
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'; + } +});