From 13ae16997d4bbca14e255d5989d1c44a76eac72c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 15:23:48 -0700 Subject: montage v.0.10 integration Signed-off-by: Valerio Virgillito --- .../ui/skeleton/range-input.reel/range-input.js | 159 ++++++++++++--------- 1 file changed, 91 insertions(+), 68 deletions(-) (limited to 'node_modules/montage/ui/skeleton/range-input.reel/range-input.js') diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js index 5747ccd6..bb14ffc9 100644 --- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js @@ -5,13 +5,13 @@ */ /*global require,exports */ var Montage = require("montage").Montage, - Component = require("ui/component").Component; + Component = require("ui/component").Component; /** * The input type="range" field */ var RangeInput = exports.RangeInput = Montage.create(Component, { - + DEFAULT_WIDTH: {value: 300}, HANDLE_ADJUST: {value: 5}, @@ -50,7 +50,7 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { this.needsDraw = true; } }, - + /** Width of the slider in px. Default = 300 */ _width: {value: null}, width: { @@ -62,11 +62,9 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { this.needsDraw = true; } }, - - _sliding: {value: false}, - percent: {value: null}, + _valueSyncedWithPosition: {value: null}, _value: {value: null}, value: { @@ -87,120 +85,145 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { }, // private - sliderEl: {value: null, enumerable: false}, - handleEl: {value: null, enumerable: false}, - sliderLeft: {value: null, enumerable: false}, - sliderWidth: {value: null, enumerable: false}, - minX: {value: null, enumerable: false}, - maxX: {value: null, enumerable: false}, - - _positionX: {value: null}, - positionX: { + _handleEl: {value: null, enumerable: false}, + _sliderLeft: {value: null, enumerable: false}, + _sliderWidth: {value: null, enumerable: false}, + + + __positionX: {value: null}, + _positionX: { enumerable: false, get: function() { - return this._positionX; + return this.__positionX; }, set: function(value, fromValue) { - + if(value !== null && !isNaN(value)) { - this._positionX = value; + this.__positionX = value; if(!fromValue) { this._calculateValueFromPosition(); this._valueSyncedWithPosition = true; - } - this.needsDraw = true; + } + this.needsDraw = true; } - + } }, _calculateValueFromPosition: { value: function() { - if(this.sliderWidth > 0) { - var percent = this.percent = (this.positionX / this.sliderWidth) * 100; - var value = (this.min + ((percent/100) * (this.max - this.min))); - Object.getPropertyDescriptor(this, "value").set.call(this, value, true); + if(this._sliderWidth > 0) { + var percent = this.percent = (this._positionX / this._sliderWidth) * 100; + var value = (this.min + ((percent/100) * (this.max - this.min))); + Object.getPropertyDescriptor(this, "value").set.call(this, value, true); } } }, - + _calculatePositionFromValue: { value: function() { // unless the element is ready, we cannot position the handle - if(this.sliderWidth) { + if(this._sliderWidth) { var percent, value = this.value; var range = (this.max - this.min); - percent = ((this.value-this.min)/range) * 100; - var positionX = (percent/100)*this.sliderWidth; - Object.getPropertyDescriptor(this, "positionX").set.call(this, positionX, true); + percent = ((this.value-this.min)/range) * 100; + var positionX = (percent/100)*this._sliderWidth; + Object.getPropertyDescriptor(this, "_positionX").set.call(this, positionX, true); + this.percent = percent; - this._valueSyncedWithPosition = true; + this._valueSyncedWithPosition = true; } else { this._valueSyncedWithPosition = false; - } + } } }, deserializedFromTemplate: { value: function() { - - // read initial values from the input type=range - + // read initial values from the input type=range this.min = this.min || this.element.getAttribute('min') || 0; - this.max = this.max || this.element.getAttribute('max') || 100; + this.max = this.max || this.element.getAttribute('max') || 100; this.step = this.step || this.element.getAttribute('step') || 1; this.value = this.value || this.element.getAttribute('value') || 0; - - } }, prepareForDraw: { value: function() { - this.minX = this.sliderLeft = this.element.offsetLeft; - this.sliderWidth = (this.width || RangeInput.DEFAULT_WIDTH); //this.element.offsetWidth || 300; - this.element.style.width = (this.sliderWidth + RangeInput.HANDLE_ADJUST) + 'px'; - - this.maxX = this.sliderLeft + this.sliderWidth; - + this._sliderLeft = this.element.offsetLeft; + this._sliderWidth = (this.width || RangeInput.DEFAULT_WIDTH); //this.element.offsetWidth || 300; + this.element.style.width = (this._sliderWidth + RangeInput.HANDLE_ADJUST) + 'px'; + if(!this._valueSyncedWithPosition) { this._calculatePositionFromValue(); } } }, - // @todo: Without prepareForActivationEvents, the translateComposer does not work + // @todo: Without prepareForActivationEvents, the _translateComposer does not work prepareForActivationEvents: { value: function() { - this.translateComposer.addEventListener('translateStart', this, false); - this.translateComposer.addEventListener('translateEnd', this, false); + this._translateComposer.addEventListener('translateStart', this, false); + this._translateComposer.addEventListener('translateEnd', this, false); + + this._addEventListeners(); + + } + }, + + _addEventListeners: { + value: function() { + if(window.Touch) { + this.element.addEventListener('touchend', this, false); + } else { + this.element.addEventListener('mouseup', this, false); + } } }, - + + _removeEventListeners: { + value: function() { + if(window.Touch) { + this.element.removeEventListener('touchend', this, false); + } else { + this.element.removeEventListener('mouseup', this, false); + } + } + }, + handleTranslateStart: { value: function(e) { + this._removeEventListeners(); this._valueSyncedWithPosition = false; - this._sliding = true; } }, handleTranslateEnd: { value: function(e) { - - if(this._sliding === true) { - this._sliding = false; - } else { - // do this only when the user clicks the slider directly instead of - // sliding the handle - var position = this.translateComposer._pointerX; - var positionX = ((position)- this.sliderLeft); - if(positionX > 0 && (positionX <= this.sliderWidth)) { - this.positionX = positionX; - } - + this._addEventListeners(); + } + }, + + // handle user clicking the slider scale directly instead of moving the knob + _handleClick: { + value: function(position) { + var positionX = (position - (this._sliderLeft + 2*RangeInput.HANDLE_ADJUST)); + if(positionX < 0) { + positionX = 0; } - + this._positionX = positionX; + } + }, + + handleMouseup: { + value: function(e) { + this._handleClick(e.clientX); + } + }, + handleTouchend: { + value: function(event) { + this._handleClick(event.changedTouches[0].clientX); } }, @@ -216,18 +239,18 @@ var RangeInput = exports.RangeInput = Montage.create(Component, { draw: { value: function() { - var el = this.handleEl; - + var el = this._handleEl; + if(el.style.webkitTransform != null) { // detection for webkitTransform to use Hardware acceleration where available - el.style.webkitTransform = 'translate(' + this.positionX + 'px)'; + el.style.webkitTransform = 'translate(' + this._positionX + 'px)'; } else if(el.style.MozTransform != null) { - el.style.MozTransform = 'translate(' + this.positionX + 'px)'; + el.style.MozTransform = 'translate(' + this._positionX + 'px)'; } else if(el.style.transform != null) { - el.style.transform = 'translate(' + this.positionX + 'px)'; + el.style.transform = 'translate(' + this._positionX + 'px)'; } else { // fallback - el.style['left'] = this.positionX + 'px'; + el.style['left'] = this._positionX + 'px'; } } } -- cgit v1.2.3