1 files changed, 234 insertions, 0 deletions

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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/*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