First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>

1 files changed, 282 insertions, 0 deletions

diff --git a/js/components/SliderBase.js b/js/components/SliderBase.js
new file mode 100644
index 00000000..9f007456
--- /dev/null
+++ b/js/components/SliderBase.js
@@ -0,0 +1,282 @@
+/* <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> */
+
+// Slider, HotText and HotTextUnit will extend this class.
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+var SliderBase = exports.SliderBase = Montage.create(Component, {
+
+    _hasFocus: {
+        enumerable: false,
+        value: false
+    },
+
+    _touchIdentifier: {
+        enumerable: false,
+        value: null
+    },
+
+    _xStart: {
+        enumerable: false,
+        value: 0
+    },
+
+    _yStart: {
+        enumerable: false,
+        value: 0
+    },
+
+    _previousValue: {
+        enumerable: false,
+        value: null
+    },
+
+    _isMouseDown: {
+        enumerable: true,
+        value: false
+    },
+
+    // We need to calculate some metrics on the first draw after prepareForDraw because
+    // styles values are not available during prepareForDraw
+    _firstTime: {
+        enumerable: false,
+        value: true
+    },
+
+    _enabled: {
+        enumerable: true,
+        value: true
+    },
+
+    enabled: {
+        enumerable: true,
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+
+            if (value !== this._enabled) {
+                this._enabled = value;
+                if(this._enabled)
+                {
+                    this.element.classList.remove("disabled");
+                    
+                    this.element.addEventListener("blur", this);
+                    this.element.addEventListener("focus", this);
+
+                    this.element.addEventListener("touchstart", this, false);
+                    this.element.addEventListener("mousedown", this, false);
+                }
+                else
+                {
+                    this.element.classList.add("disabled");
+
+                    this.element.removeEventListener("blur", this);
+                    this.element.removeEventListener("focus", this);
+
+                    this.element.removeEventListener("touchstart", this, false);
+                    this.element.removeEventListener("mousedown", this, false);
+                }
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    // Internal flags to determine what the change/changing events will contain
+    _eventType: {
+        enumerable: false,
+        value: "change"
+    },
+
+    _wasSetByCode: {
+        enumerable: false,
+        value: true
+    },
+
+    _setEventFlags: {
+        value: function (eventType, wasSetByCode) {
+            this._eventType = eventType;
+            this._wasSetByCode = wasSetByCode;
+        }
+    },
+
+    _value: {
+        enumerable: false,
+        value: 0
+    },
+
+    value: {
+        enumerable: true,
+        get: function() {
+            return this._value;
+        },
+        set: function(value) {
+            if (isNaN(value)) {
+                return;
+            }
+
+            if (value < this._minValue) {
+                value = this._minValue;
+            }
+            else if (value > this._maxValue) {
+                value = this._maxValue;
+            }
+
+            if (value !== this._value) {
+                this._value = value;
+                this.needsDraw = true;
+                this._dispatchActionEvent();
+            }
+        }
+    },
+
+    _minValue: {
+        enumerable: false,
+        value: 0
+    },
+
+    minValue: {
+        get: function() {
+            return this._minValue;
+        },
+        set: function(value) {
+            if (value !== this._minValue) {
+                this._minValue = value;
+                this._firstTime = true;     // Force layout recalculation.
+                if (this._value < value)
+                {
+                    this.value = value;
+                }
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _maxValue: {
+        enumerable: false,
+        value: 100
+    },
+
+    maxValue: {
+        get: function() {
+            return this._maxValue;
+        },
+        set: function(value) {
+            if (value !== this._maxValue) {
+                this._maxValue = value;
+                this._firstTime = true;     // Force layout recalculation.
+                if (this._value > value)
+                {
+                    this.value = value;
+                }
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _valueCoef: {
+        value: 1
+    },
+
+    _valueFromPageOffset: {
+        value: function(offset, pageY, isShiftKeyPressed) {
+            // Implement in subclass.
+        }
+    },
+
+    handleMousedown: {
+        value: function (event) {
+//            event.preventDefault();   // Commenting out -- other elements need to blur when we are moused down
+            var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(event.pageX, event.pageY));
+            this._xStart = clickPoint.x;
+            this._yStart = clickPoint.y;
+            this._previousValue = this.value;
+            this._isMouseDown = true;
+            document.addEventListener("mousemove", this, false);
+            document.addEventListener("mouseup", this, false);
+         }
+    },
+
+    handleTouchstart: {
+        value: function (event) {
+            event.preventDefault(); // Not sure how to let other elements blur if we need to override mobile behavior
+            var touch = event.targetTouches[0];
+            this._touchIdentifier = touch.identifier;
+            var clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(touch.pageX,touch.pageY));
+            this._xStart = clickPoint.x;
+            this._yStart = clickPoint.y;
+            this._previousValue = this.value;
+            this._isMouseDown = true;
+            document.addEventListener("touchmove", this, false);
+            document.addEventListener("touchend", this, false);
+         }
+    },
+
+    handleMousemove: {
+        value: function (event) {
+            event.target.style.cursor = "pointer";
+            this._setEventFlags("changing", false);
+            this._valueFromPageOffset(event.pageX, event.pageY, event.shiftKey);
+        }
+    },
+
+    handleTouchmove: {
+        value: function (event) {
+            for(var i=0, iTouch; iTouch = event.changedTouches[i]; i++) {
+                if (iTouch.identifier === this._touchIdentifier) {
+                    this._setEventFlags("changing", false);
+                    this._valueFromPageOffset(iTouch.pageX, iTouch.pageY, false);
+                    break;
+                }
+            }
+        }
+    },
+
+    handleMouseup: {
+        value: function (event) {
+            document.removeEventListener("mousemove", this);
+            document.removeEventListener("mouseup", this);
+            this._isMouseDown = false;
+            event.target.style.cursor = "default";