From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001
From: Pierre Frisch
Date: Thu, 22 Dec 2011 07:25:50 -0800
Subject: First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 js/components/button.reel/button.js | 225 ++++++++++++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 js/components/button.reel/button.js

(limited to 'js/components/button.reel/button.js')

diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js
new file mode 100644
index 00000000..ce5ac1af
--- /dev/null
+++ b/js/components/button.reel/button.js
@@ -0,0 +1,225 @@
+/* <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> */
+
+var Montage = require("montage/core/core").Montage,
+Component = require("montage/ui/component").Component;
+
+var Button = exports.Button = Montage.create(Component, {
+    // Button state
+    _focused: {
+        value: false
+    },
+
+    _pressed: {
+        value: false
+    },
+
+    _isToggleButton: {
+        value: false
+    },
+
+    isToggleButton: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._isToggleButton;
+        },
+        set: function(value) {
+            if (value !== this._isToggleButton) {
+                this._isToggleButton = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _value: {
+        value: false
+    },
+
+    value: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._value;
+        },
+        set: function(value) {
+            if ( (value !== null) && (value !== this._value) ) {
+                this._value = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _label: {
+        value: ""
+    },
+
+    label: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._label;
+        },
+        set: function(value) {
+            if (value !== this._label) {
+                this._label = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    // TODO - Allow user to specify up, over and down states
+    _onState: {
+        value: "on"
+    },
+
+    onState: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._onState;
+        },
+        set: function(value) {
+            if (value !== this._onState) {
+                this._onState = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _offState: {
+        value: "off"
+    },
+
+    offState: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._offState;
+        },
+        set: function(value) {
+            if (value !== this._offState) {
+                this._offState = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    // Low-level event listeners
+    handleTouchstart: {
+        value: function(event) {
+            // TODO preventingDefault disables the magnifying class
+            // sadly it also disables double tapping on the button to zoom...
+            event.preventDefault();
+            this._acknowledgeIntent();
+        }
+    },
+
+    handleMousedown: {
+        value: function(event) {
+            this._acknowledgeIntent();
+        }
+    },
+
+    handleTouchend: {
+        value: function(event) {
+            this._interpretInteraction(event);
+        }
+    },
+
+    handleTouchcancel: {
+        value: function(event) {
+            console.log("cancel!")
+            // this._interpretInteraction(event);
+        }
+    },
+
+    handleMouseup: {
+        value: function(event) {
+            this._interpretInteraction(event);
+        }
+    },
+
+    // Internal state management
+    _acknowledgeIntent: {
+        value: function() {
+            this._pressed = true;
+            this.element.classList.add("pressed");
+        }
+    },
+
+    _interpretInteraction: {
+        value: function(event) {
+
+            if (!this._pressed) {
+                return;
+            }
+
+            this.value = !this.value;
+
+            this._pressed = false;
+            this._dispatchActionEvent();
+        }
+    },
+
+    _dispatchActionEvent: {
+        value: function() {
+            var actionEvent = document.createEvent("CustomEvent");
+            actionEvent.initCustomEvent("action", true, true);
+            actionEvent.type = "action";
+            this.dispatchEvent(actionEvent);
+        }
+    },
+
+    draw: {
+        enumerable: false,
+        value: function() {
+            if(this.isToggleButton)
+            {
+                if(this._value)
+                {
+                    this.element.classList.remove(this.offState);
+                    this.element.classList.add(this.onState);
+                }
+                else
+                {
+                    this.element.classList.remove(this.onState);
+                    this.element.classList.add(this.offState);
+                }
+            }
+            
+            if(this.label && this.label !== "")
+            {
+                this.element.textContent = this.label;
+            }
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+
+            // TODO only install low level event listeners for high level
+            // events others listen to us for
+
+            this.element.addEventListener("touchstart", this);
+            // TODO listen to mouseup anywhere within the app
+            document.addEventListener("touchend", this);
+            document.addEventListener("touchcancel", this);
+
+
+            this.element.addEventListener("mousedown", this);
+
+            // TODO listen to mouseup anywhere within the app
+            document.addEventListener("mouseup", this);
+
+            // TODO accept space or enter as a way to trigger action
+            // if element targeted; balancing demans of multitouch
+            // with traditional single focus model
+            document.addEventListener("keydown", this, true);
+        }
+    }
+
+});
-- 
cgit v1.2.3