From 22a66cb6e243a3f1c867b62e3942fd2e828019d9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 8 Mar 2012 13:56:09 -0800 Subject: integrating v0.7 montage into ninja Signed-off-by: Valerio Virgillito --- .../ui/skeleton/range-input.reel/range-input.css | 27 +++ .../ui/skeleton/range-input.reel/range-input.html | 62 ++++++ .../ui/skeleton/range-input.reel/range-input.js | 234 +++++++++++++++++++++ 3 files changed, 323 insertions(+) create mode 100644 node_modules/montage/ui/skeleton/range-input.reel/range-input.css create mode 100644 node_modules/montage/ui/skeleton/range-input.reel/range-input.html create mode 100644 node_modules/montage/ui/skeleton/range-input.reel/range-input.js (limited to 'node_modules/montage/ui/skeleton') diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.css b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css new file mode 100644 index 00000000..07e6031e --- /dev/null +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css @@ -0,0 +1,27 @@ + div.slider { + display: inline-block; + border-radius: 4px; + position: relative; + height: 5px; + background-color: #556270; + border: 1px solid #aaa; + cursor: default; +} +.slider-handle { + top: -0.6em; + position: absolute; + z-index: 2; + cursor: pointer; + + width: 1.2em; + height: 1.2em; + background-color: #ddd; + color: #fff; + padding: 2px; + border: 1px solid #333; + border-radius: 10px; +} + +.slider-handle:hover { + background-color: #999; +} \ No newline at end of file diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html new file mode 100644 index 00000000..8fc12900 --- /dev/null +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html @@ -0,0 +1,62 @@ + + + + + + + + + + + +

+ +

+ + + 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 new file mode 100644 index 00000000..5747ccd6 --- /dev/null +++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js @@ -0,0 +1,234 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/*global require,exports */ +var Montage = require("montage").Montage, + 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}, + + hasTemplate: {value: true}, + + // public API + _min: {value: null}, + min: { + get: function() { + return this._min; + }, + set: function(value) { + this._min = String.isString(value) ? parseFloat(value) : value; + this.needsDraw = true; + } + }, + + _max: {value: null}, + max: { + get: function() { + return this._max; + }, + set: function(value) { + this._max = String.isString(value) ? parseFloat(value) : value; + this.needsDraw = true; + } + }, + + _step: {value: null}, + step: { + get: function() { + return this._step; + }, + set: function(value) { + this._step = String.isString(value) ? parseFloat(value) : value; + this.needsDraw = true; + } + }, + + /** Width of the slider in px. Default = 300 */ + _width: {value: null}, + width: { + get: function() { + return this._width; + }, + set: function(value) { + this._width = String.isString(value) ? parseFloat(value) : value; + this.needsDraw = true; + } + }, + + + _sliding: {value: false}, + + percent: {value: null}, + _valueSyncedWithPosition: {value: null}, + _value: {value: null}, + value: { + get: function() { + return this._value; + }, + set: function(value, fromInput) { + this._value = String.isString(value) ? parseFloat(value) : value; + + if(fromInput) { + this._valueSyncedWithPosition = true; + } else { + this._valueSyncedWithPosition = false; + this._calculatePositionFromValue(); + this.needsDraw = true; + } + } + }, + + // 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: { + enumerable: false, + get: function() { + return this._positionX; + }, + set: function(value, fromValue) { + + if(value !== null && !isNaN(value)) { + this._positionX = value; + if(!fromValue) { + this._calculateValueFromPosition(); + this._valueSyncedWithPosition = 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); + } + + } + }, + + _calculatePositionFromValue: { + value: function() { + // unless the element is ready, we cannot position the handle + 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); + this.percent = percent; + this._valueSyncedWithPosition = true; + } else { + this._valueSyncedWithPosition = false; + } + } + }, + + deserializedFromTemplate: { + value: function() { + + // 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.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; + + if(!this._valueSyncedWithPosition) { + this._calculatePositionFromValue(); + } + } + }, + + // @todo: Without prepareForActivationEvents, the translateComposer does not work + prepareForActivationEvents: { + value: function() { + this.translateComposer.addEventListener('translateStart', this, false); + this.translateComposer.addEventListener('translateEnd', this, false); + } + }, + + handleTranslateStart: { + value: function(e) { + 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; + } + + } + + } + }, + + + surrenderPointer: { + value: function(pointer, composer) { + // If the user is sliding us then we do not want anyone using + // the pointer + return false; + } + }, + + + draw: { + value: function() { + 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)'; + } else if(el.style.MozTransform != null) { + el.style.MozTransform = 'translate(' + this.positionX + 'px)'; + } else if(el.style.transform != null) { + el.style.transform = 'translate(' + this.positionX + 'px)'; + } else { + // fallback + el.style['left'] = this.positionX + 'px'; + } + } + } +}); -- cgit v1.2.3