Mercurial > code > home > repos > homeauto
diff service/pilight/static/input-slider/input-slider.js @ 945:752e620f1293
add input-rgb polymer element
Ignore-this: 2ba2ef39af2ef4f6c14036c5ac188e97
darcs-hash:20140712183250-312f9-dbe5a232f2d861b3088e314e2cd53ff70ce839d3
author | drewp <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-slider/input-slider.js Sat Jul 12 11:32:50 2014 -0700 @@ -0,0 +1,131 @@ +(function() { + + var style = document.createElement('style'); + style.type = 'text/css'; + var css = 'body.ew-resize, body.ew-resize * {cursor: ew-resize; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}\n'; + style.appendChild(document.createTextNode(css)); + document.getElementsByTagName('head')[0].appendChild(style); + + function linToLog(value) { + var minv = Math.log(1); + var maxv = Math.log(101); + var scale = (maxv - minv); + return (Math.exp(minv + scale * (value)) - 1) / 100; + } + + function logToLin(value) { + var minv = Math.log(1); + var maxv = Math.log(101); + var scale = (maxv - minv); + return (Math.log(value * 100 + 1) - minv) / scale; + } + + var rect, oldValue, val, displayValue; + + Polymer({ + + __doc__: { + element: 'input-slider', + description: 'Input element for numeric data type.', + status: 'alpha', + url: 'https://github.com/arodic/input-slider/', + demo: 'http://arodic.github.com/input-slider/', + attributes: [ + { name: 'value', type: 'number', description: 'Input value.' }, + { name: 'min', type: 'number', description: 'Minimum value.' }, + { name: 'max', type: 'number', description: 'Maximum value.' }, + { name: 'log', type: 'boolean', description: 'Enables logarithmic scale.' }, + { 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.' + } + ] + }, + + value: 0, + min: 0, + max: 1, + log: false, + editable: true, + observe: {'min max log': 'valueChanged'}, + ready: function() { + this.addEventListener('mousedown', this.onStartDrag.bind(this)); + this.addEventListener('touchstart', this.onStartDrag.bind(this)); + }, + domReady: function() { + this.valueChanged(); + }, + onStartDrag: function(event) { + event.preventDefault(); + event.stopPropagation(); + + rect = this.getBoundingClientRect(); + this.onDrag(event); + + event = event.changedTouches ? event.changedTouches[0] : event; + + if (!this.editable) return; + + document.body.classList.add('ew-resize'); + document.activeElement.blur(); + + this._onDrag = this.onDrag.bind(this); + this._onEndDrag = this.onEndDrag.bind(this); + document.addEventListener('mousemove', this._onDrag, false); + document.addEventListener('mouseup', this._onEndDrag, false); + this.addEventListener('touchmove', this._onDrag, false); + this.addEventListener('touchend', this._onEndDrag, false); + this.addEventListener('touchcancel', this._onEndDrag, false); + this.addEventListener('touchleave', this._onEndDrag, false); + }, + onEndDrag: function(event) { + event.preventDefault(); + event.stopPropagation(); + event = event.changedTouches ? event.changedTouches[0] : event; + + document.body.classList.remove('ew-resize'); + document.removeEventListener('mousemove', this._onDrag, false); + document.removeEventListener('mouseup', this._onEndDrag, false); + this.removeEventListener('touchmove', this._onDrag, false); + this.removeEventListener('touchend', this._onEndDrag, false); + this.removeEventListener('touchcancel', this._onEndDrag, false); + this.removeEventListener('touchleave', this._onEndDrag, false); + }, + onDrag: function(event) { + event.preventDefault(); + event.stopPropagation(); + + if (!this.editable) return; + if (event.type == 'mousemove' && event.which === 0) { + this._onEndDrag(event); + return; + } + + oldValue = this.value; + + event = event.changedTouches ? event.changedTouches[0] : event; + + val = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)); + if (this.log) val = linToLog(val); + + this.value = this.min + (this.max - this.min) * val; + if (this.value != oldValue) this.fire('input-changed', { input: this }); + + }, + + valueChanged: function() { + if (this.value < this.min) this.min = this.value; + if (this.value > this.max) this.max = this.value; + + displayValue = (this.value - this.min) / (this.max - this.min); + if (this.log) this.$.value.style.width = logToLin(displayValue) * 100 + '%'; + else this.$.value.style.width = displayValue * 100 + '%'; + } + }); + +})();