From a3024011a91d3941f81481dd4d600e9684eb0fd4 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 2 Feb 2012 00:11:51 -0800
Subject: upgrading to Montage v0.6

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 node_modules/montage/ui/button.reel/button.css  | 386 --------------
 node_modules/montage/ui/button.reel/button.html |  26 -
 node_modules/montage/ui/button.reel/button.js   | 655 ++++++------------------
 3 files changed, 165 insertions(+), 902 deletions(-)
 delete mode 100755 node_modules/montage/ui/button.reel/button.css
 delete mode 100755 node_modules/montage/ui/button.reel/button.html
 mode change 100755 => 100644 node_modules/montage/ui/button.reel/button.js

(limited to 'node_modules/montage/ui/button.reel')

diff --git a/node_modules/montage/ui/button.reel/button.css b/node_modules/montage/ui/button.reel/button.css
deleted file mode 100755
index acf938cc..00000000
--- a/node_modules/montage/ui/button.reel/button.css
+++ /dev/null
@@ -1,386 +0,0 @@
-/* <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> */
-@-webkit-keyframes montage-button-light-busy {
-    0% {
-        background-color: #ccc;
-    }
-    50% {
-        background-color: #e6e6e6;
-    }
-    100% {
-        background-color: #ccc;
-    }
-}
-@-webkit-keyframes montage-button-dark-busy {
-    0% {
-        background-color: #404040;
-        color: #a0a0a0;
-    }
-    50% {
-        background-color: #505050;
-        color: #bbb;
-    }
-    100% {
-        background-color: #404040;
-        color: #a0a0a0;
-    }
-}
-.montage-button.busy {
-    -webkit-animation-delay: 100ms !important;
-}
-
-.montage-button.text:before {
-    content: "";
-    position: absolute;
-    left: -1px;
-    right: -1px;
-    top: -1px;
-    bottom: -1px;
-    border: 1px solid rgba(0,0,0,.25);
-    border-radius: 26px;
-    -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
-}
-
-.montage-button.text {
-    outline: none;
-    position: relative;
-    left: 1px;
-    top: 1px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    display: inline-block;
-    padding: 2px 32px 0 32px;
-    height: 48px;
-    border-radius: 26px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6;
-    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
-    text-align: center;
-    line-height: 48px;
-    font-size: 18px;
-    color: #000;
-    -webkit-transition: background 150ms;
-}
-
-.montage-button.text:active, .montage-button.text.busy {
-    background: #ccc;
-}
-
-.montage-button.text.busy {
-    -webkit-animation: montage-button-light-busy 1.1s infinite;
-    -webkit-animation-timing-function: ease-in-out;
-    cursor: default;
-}
-
-.montage-button.text.disabled:before {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.text.disabled {
-    background: none;
-    color: #969696;
-}
-
-.montage-button.submit:before {
-    content: "";
-    position: absolute;
-    left: -4px;
-    right: -4px;
-    top: -4px;
-    bottom: -4px;
-    border: 2px solid #0cbeff;
-    border-radius: 26px;
-    -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
-}
-
-.montage-button.submit:after {
-    content: "";
-    position: absolute;
-    left: -4px;
-    right: -4px;
-    top: -4px;
-    bottom: -4px;
-    border-radius: 26px;
-    -webkit-box-shadow: inset 0 1px 2px #066283, inset 0 1px 2px #066283;
-}
-
-.montage-button.submit {
-    outline: none;
-    position: relative;
-    left: 1px;
-    top: 1px;
-    margin: 2px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    display: inline-block;
-    padding: 2px 31px 0 31px;
-    height: 40px;
-    border: 1px solid #f3f3f3;
-    border-radius: 26px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6;
-    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
-    line-height: 40px;
-    font-size: 18px;
-    color: #0f9ed2;
-    -webkit-transition-duration: 150ms;
-    -webkit-transition-property: background, color;
-    -webkit-box-shadow: 0 1px 0 #0988b7, 0 2px 0 #0988b7, 0 -2px 0 #0988b7, -2px 0 0 #0988b7, 2px 0 0 #0988b7;
-}
-
-.montage-button.submit:active, .montage-button.submit.busy {
-    border: 1px solid #0988b7;
-    color: #666;
-    -webkit-box-shadow: 0 1px 0 #afeaff, 0 2px 0 #0cbeff, 0 -2px 0 #0cbeff, -2px 0 0 #0cbeff, 2px 0 0 #0cbeff;
-    background: #ccc;
-}
-
-.montage-button.submit.disabled:before {
-    -webkit-box-shadow: none;
-    border: 1px solid #acacac;
-}
-
-.montage-button.submit.disabled {
-    -webkit-box-shadow: none;
-    background: none;
-    color: #969696;
-    border: 1px solid transparent;
-}
-
-.montage-button.submit.disabled:after {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.submit.busy {
-    -webkit-animation: montage-button-light-busy 1.1s infinite;
-    -webkit-animation-timing-function: ease-in-out;
-    cursor: default;
-}
-
-.montage-button.cancel:before {
-    content: "";
-    position: absolute;
-    left: -4px;
-    right: -4px;
-    top: -4px;
-    bottom: -4px;
-    border: 2px solid #dc4d48;
-    border-radius: 26px;
-    -webkit-box-shadow: 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
-}
-
-.montage-button.cancel:after {
-    content: "";
-    position: absolute;
-    left: -4px;
-    right: -4px;
-    top: -4px;
-    bottom: -4px;
-    border-radius: 26px;
-    -webkit-box-shadow: inset 0 1px 2px #742b28, inset 0 1px 2px #742b28;
-    opacity: .8;
-}
-
-.montage-button.cancel {
-    outline: none;
-    position: relative;
-    left: 1px;
-    top: 1px;
-    margin: 2px;
-    cursor: pointer;
-    -webkit-user-select: none;
-    display: inline-block;
-    padding: 2px 31px 0 31px;
-    height: 40px;
-    border: 1px solid #f3f3f3;
-    border-radius: 26px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)), #E6E6E6;
-    font-family: "AG Buch BQ Regular", "AG Buch BQ", Helvetica, Arial, sans-serif;
-    line-height: 40px;
-    font-size: 18px;
-    color: #d23f3a;
-    -webkit-transition-duration: 150ms;
-    -webkit-transition-property: background, color;
-    -webkit-box-shadow: 0 1px 0 #dc4d48, 0 2px 0 #a9403a, 0 -2px 0 #a9403a, -2px 0 0 #a9403a, 2px 0 0 #a9403a;
-}
-
-.montage-button.cancel:active, .montage-button.cancel.busy {
-    border: 1px solid #a9403a;
-    color: #666;
-    -webkit-box-shadow: 0 1px 0 #f5c7c5, 0 2px 0 #dc4d48, 0 -2px 0 #dc4d48, -2px 0 0 #dc4d48, 2px 0 0 #dc4d48;
-    background: #ccc;
-}
-
-.montage-button.cancel.busy {
-    -webkit-animation: montage-button-light-busy 1.1s infinite;
-    -webkit-animation-timing-function: ease-in-out;
-    cursor: default;
-}
-
-.montage-button.cancel.disabled:before {
-    -webkit-box-shadow: none;
-    border: 1px solid #acacac;
-}
-
-.montage-button.cancel.disabled {
-    -webkit-box-shadow: none;
-    background: none;
-    color: #969696;
-    border: 1px solid transparent;
-}
-
-.montage-button.cancel.disabled:after {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.text.dark:before {
-    border: 1px solid rgba(0,0,0,.4);
-    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1);
-}
-
-.montage-button.text.dark {
-    background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#5c5c5c)), #5c5c5c;
-    color: #fff;
-    text-shadow: 0 0 2px #404040;
-    -webkit-transition-duration: 150ms;
-    -webkit-transition-property: background, color;
-}
-
-.montage-button.text.dark:active, .montage-button.text.dark.busy {
-    background: #404040;
-    color: #a0a0a0;
-}
-
-.montage-button.text.dark.busy {
-    -webkit-animation: montage-button-dark-busy 1.1s infinite;
-}
-
-.montage-button.text.dark.disabled:before {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.text.dark.disabled {
-    background: none;
-    color: #333;
-    text-shadow: none;
-}
-
-.montage-button.submit.dark:before {
-    border: 1px solid rgba(0,0,0,.4);
-    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1), inset 0 2px 0 #0aa0d8, inset 0 -2px 0 #0aa0d8;
-}
-
-.montage-button.submit.dark:after {
-    left: -3px;
-    right: -3px;
-    top: -3px;
-    bottom: -3px;
-    -webkit-box-shadow: inset 0 1px 2px #066283;
-    opacity: 1;
-}
-
-.montage-button.submit.dark {
-    margin: 3px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#616161)), #616161;
-    color: #fff;
-    border: none;
-    text-shadow: 0 0 2px #404040;
-    -webkit-box-shadow: inset 0 1px 0 #3f6d7e, inset 1px 0 0 #044259, inset -1px 0 0 #044259, inset 0 -1px 0 #044259, 0 1px 1px #087faa, 0 1px 1px #087faa, 0 1px 0 #0aa0d8, 0 3px 0 #0aa0d8, 0 -3px 0 #0aa0d8, -3px 0 0 #0aa0d8, 3px 0 0 #0aa0d8;
-}
-
-.montage-button.submit.dark:active, .montage-button.submit.dark.busy {
-    color: #a0a0a0;
-    -webkit-box-shadow: inset 0 0 1px #033040, inset 0 0 1px #033040, 0 1px 1px #45cdff, 0 1px 0 #0aa0d8, 0 3px 0 #0aa0d8, 0 -3px 0 #0aa0d8, -3px 0 0 #0aa0d8, 3px 0 0 #0aa0d8;
-    background: #404040;
-}
-
-.montage-button.submit.dark.busy {
-    -webkit-animation: montage-button-dark-busy 1.1s infinite;
-}
-
-.montage-button.submit.dark.disabled:before {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.submit.dark.disabled {
-    -webkit-box-shadow: none;
-    background: none;
-    border: none;
-    color: #333;
-    text-shadow: none;
-}
-
-.montage-button.submit.dark.disabled:after {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.cancel.dark:before {
-    border: 1px solid rgba(0,0,0,.4);
-    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1), inset 0 2px 0 #b53732, inset 0 -2px 0 #b53732;
-}
-
-.montage-button.cancel.dark:after {
-    left: -3px;
-    right: -3px;
-    top: -3px;
-    bottom: -3px;
-    -webkit-box-shadow: inset 0 1px 2px #932c29, inset 0 1px 2px #932c29;
-    opacity: 1;
-}
-
-.montage-button.cancel.dark {
-    margin: 3px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#616161)), #616161;
-    color: #fff;
-    border: none;
-    text-shadow: 0 0 2px #404040;
-    -webkit-box-shadow: inset 0 1px 0 #7c7c7c, 0 3px 0 #b53732, 0 -3px 0 #b53732, -3px 0 0 #b53732, 3px 0 0 #b53732;
-}
-
-.montage-button.cancel.dark:active, .montage-button.cancel.dark.busy {
-    color: #a0a0a0;
-    -webkit-box-shadow: inset 0 1px #852824, inset 0 -1px #852824, 0 1px #dd6c68, 0 3px 0 #b53732, 0 -3px 0 #b53732, -3px 0 0 #b53732, 3px 0 0 #b53732;
-    background: #404040;
-}
-
-.montage-button.cancel.dark.busy {
-    -webkit-animation: montage-button-dark-busy 1.1s infinite;
-}
-
-.montage-button.cancel.dark.disabled:before {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.cancel.dark.disabled {
-    -webkit-box-shadow: none;
-    background: none;
-    border: none;
-    color: #333;
-    text-shadow: none;
-}
-
-.montage-button.cancel.dark.disabled:after {
-    -webkit-box-shadow: none;
-}
-
-.montage-button.disabled {
-    cursor: default;
-}
-
-/* Buttons icons (Used in conjunction with the iconic style in Button Groups)*/
-
-.montage-button.text.icon > img,
-.montage-button.submit.icon > img,
-.montage-button.cancel.icon > img {
-    float: left;
-    margin-left: -6px;
-    margin-right: 6px;
-    margin-top: 6px;
-    height: 26px;
-    width: 26px;
-}
-
-.montage-button.text.icon > img {
-    margin-top: 8px;
-}
diff --git a/node_modules/montage/ui/button.reel/button.html b/node_modules/montage/ui/button.reel/button.html
deleted file mode 100755
index 1b35e545..00000000
--- a/node_modules/montage/ui/button.reel/button.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<!-- <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> -->
-<html>
-<head>
-    <title></title>
-    <link rel="stylesheet" type="text/css" href="button.css">
-    <script type="text/montage-serialization">
-{
-    "owner": {
-        "module": "montage/ui/button.reel",
-        "name": "Button",
-        "properties": {
-
-        }
-    }
-}
-    </script>
-
-</head>
-<body>
-</body>
-</html>
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js
old mode 100755
new mode 100644
index 60bca109..51f4c011
--- a/node_modules/montage/ui/button.reel/button.js
+++ b/node_modules/montage/ui/button.reel/button.js
@@ -3,20 +3,13 @@
  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> */
-/**
-	@module "montage/ui/button.reel"
-    @requires montage/core/core
-    @requires montage/ui/component
-*/
 var Montage = require("montage").Montage,
-    Component = require("ui/component").Component;
-
+    Component = require("ui/component").Component,
+    NativeControl = require("ui/native-control").NativeControl;
 /**
- @class module:"montage/ui/button.reel".Button
- @classdesc Button component implementation. Turns any div element into a multi-state labeled button.
- @extends module:montage/ui/component.Component
+ * The Text input
  */
-exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.reel".Button# */ {
+var Button = exports.Button = Montage.create(NativeControl, {
 
 /**
   Description TODO
@@ -45,125 +38,17 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
         }
     },
 
-/**
-  Description TODO
-  @private
-*/
-    _busy: {
-        enumerable: false,
-        value: false
-    },
-
-/**
-        Description TODO
-        @type {Function}
-        @default {Boolean} false
-    */
-    busy: {
-        get: function () {
-            return this._busy;
-        },
-        set: function (value) {
-            if ((value === true) && (!this._disabled)) {
-                this._busy = true;
-            } else {
-                this._busy = false;
-            }
-            this.needsDraw = true;
-        }
-    },
-
-/**
-  Description TODO
-  @private
-*/
-    _disabled: {
-        enumerable: false,
-        value: false
-    },
-
-/**
-        Description TODO
-        @type {Function}
-        @default {Boolean} false
-    */
-    disabled: {
-        get: function () {
-            return this._disabled;
-        },
-        set: function (value) {
-            if (value === true) {
-                this._disabled = true;
-                this.busy = false;
-            } else {
-                this._disabled = false;
-            }
-            this.needsDraw = true;
-        }
-    },
-
     //TODO we should prefer positive properties like enabled vs disabled, get rid of disabled
-
     enabled: {
         dependencies: ["disabled"],
         get: function () {
-            return !!this._disabled;
+            return !this._disabled;
         },
         set: function (value) {
             this.disabled = !value;
         }
     },
 
-    /**
-     * When behavior is toggle, @link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed
-     * the pressed property contains the equivalent of the aria-pressed attribute: "true"||"false"||"mixed"
-     * @private
-     */
-    _pressed: {
-        value: "false",
-        enumerable: false
-    },
-    /**
-        Description TODO
-        @type {Function}
-        @default {Boolean} "false"
-    */
-    pressed: {
-        get: function() {
-            return this._pressed;
-        },
-        set: function(value) {
-            if (value !== this._pressed) {
-                this._pressed = value;
-                this.needsDraw = true;
-            }
-        }
-    },
-    /**
-     * Used when a button is associated with an input tag. For buttons, the title comes from it's value attribute.
-     * If the value property is undefined, it will be initialized from the button's input element if the element is an input type.
-     * @private
-     */
-    _value: {
-        enumerable: false,
-        value: undefined
-    },
-    /**
-        Description TODO
-        @type {Function}
-        @default undefined
-    */
-    value: {
-        serializable: true,
-        get: function () {
-            return this._value;
-        },
-        set: function (value) {
-            this._value = value;
-            this.needsDraw = true;
-        }
-    },
-
     /**
         The Montage converted used to convert or format values displayed by this Button instance.
         @type {Property}
@@ -174,141 +59,63 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
     },
 
     /**
-     * @private
-     */
-    _title: {
-        enumerable: false,
-        value: undefined
-    },
-    /**
-        Description Text to show in the tooltip displayed by hovering over this button
-        @type {Function}
-        @default undefined
-    */
-    title: {
-        serializable: true,
-        get: function () {
-            return this._title;
-        },
-        set: function (value) {
-            this._title = value;
-            this.needsDraw = true;
-        }
-    },
-
-/**
-  Description TODO
-  @private
-*/
-    _valueNode: {value:undefined, enumerable: false},
-
-/**
-        Used when a button is associate with an input tag.<br>
-        For buttons, the title comes from it's value attribute.<br>
-        valueActive, if set, is used when the button is in active state (mousedown / touchstart).
-        @type {String}
-        @default undefined
+      Stores the node that contains this button's value. Only used for
+      non-`<input>` elements.
+      @private
     */
-    valueActive: {
-        serializable: true,
-        value: undefined
-    },
-
- /**
-  Description TODO
-  @private
-*/
-    _valueNodeActiveNode: {value:undefined, enumerable: false},
-
+    _labelNode: {value:undefined, enumerable: false},
 
+    _label: { value: undefined, enumerable: false },
     /**
-     Used when a button is associate with an input tag.<br>
-     For buttons, the title comes from its value attribute.<br>
-     When behavior is toggle, @link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed the button has multiple states and may need different titles for that.<br>
-     So, pressedValue would contain the value to use when pressed is true.
-     @type {String}
-     @default undefined
-     */
-    pressedValue: {
-        serializable: true,
-        value: undefined
-    },
+        The label for the button.
 
-/**
-  Description TODO
-  @private
-*/
-    _pressedValueNode: {value:undefined, enumerable: false},
+        In an `<input>` element this is the value property. On any other element
+        (including `<button>`) this is the first child node which is a text node.
+        If one isn't found it will be created.
 
-/**
-        Used when a button is associate with an input tag.<br>
-        For buttons, the title comes from its <code>value</code> attribute.<br>
-        When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.<br>
-        So, pressedValue would contain the value to use when pressed is true.
-        @type {String}
-        @default undefined
+        @type {Property}
+        @default {String} element value
     */
-    pressedValueActive: {
-        serializable: true,
-        value: undefined
-    },
+    label: {
+        get: function() {
+            return this._label;
+        },
+        set: function(value) {
+            if (value && value.length > 0 && this.converter) {
+                try {
+                    value = this.converter.convert(value);
+                    if (this.error) {
+                        this.error = null;
+                    }
+                } catch(e) {
+                    // unable to convert - maybe error
+                    this.error = e;
+                }
+            }
 
-/**
-  Description TODO
-  @private
-*/
-    _pressedValueActiveNode: {value:undefined, enumerable: false},
+            this._label = value;
+            if (this._isInputElement) {
+                this._value = value;
+            }
 
-/**
-        Used when a button is associate with an input tag.<br>
-        For buttons, the title comes from it's value attribute.<br>
-        When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.<br>
-        So, <code>mixedValue</code> would contain the value to use when pressed is mixed.
-        @type {String}
-        @default undefined
-    */
-    mixedValue: {
-        serializable: true,
-        value: undefined
+            this.needsDraw = true;
+        }
     },
 
- /**
-  Description TODO
-  @private
-*/
-    _mixedValueNode: {value:undefined, enumerable: false},
-
-/**
-        Used when a button is associated with an input tag.<br>
-        For buttons, the title comes from its <code>value</code> attribute.<br>
-        When behavior is toggle, {@link http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed} the button has multiple states and may need different titles for that.<br>
-        So, <code>mixedValue</code> would contain the value to use when pressed is mixed.
-        @type {String}
-        @default undefined
+    /**
+    True when the button is being interacted with, either through mouse click or
+    touch event.
+    @private
     */
-    mixedValueActive: {
-        serializable: true,
-        value: undefined
-    },
-
-/**
-  Description TODO
-  @private
-*/
-    _mixedValueActiveNode: {value:undefined, enumerable: false},
-
-/**
-  Description TODO
-  @private
-*/
     _active: {
+        enumerable: false,
         value: false
     },
 
-/**
-        Description TODO
-        @type {Function}
-        @default {Boolean} false
+    /**
+    Description TODO
+    @type {Function}
+    @default {Boolean} false
     */
     active: {
         get: function() {
@@ -319,58 +126,21 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
             this.needsDraw = true;
         }
     },
-/**
-  Description TODO
-  @private
-*/
-    _behavior: {
-        value: "transient",
-        enumerable: false
-    },
-
-    /**
-        Behavior describes how the button interprets events:
-        <ul>
-            <li><b>transient</b> is the default, trigger an action on click</li>
-            <li><b>toggle</b> maintains a state from off -> click -> on -> click -> off</li>
-            <li><b>mixed</b> maintains a state from off -> click -> on -> click -> mixed -> off</li>
-        </ul>
-        @type {Function}
-        @default {String} "transient"
-    */
-    behavior: {
-        serializable: true,
-        get: function() {
-            return this._behavior;
-        },
-        set: function(value) {
-            if (value !== this._behavior) {
-                //Sanity check on behavior
-                value = ((value === "transient") || (value === "toggle") || (value === "mixed")) ? value : "transient";
-                this._behavior = value;
-                this.needsDraw = true;
-            }
-        }
-    },
-/**
-  Description TODO
-  @private
-*/
-    _observedPointer: {
-        enumerable: true,
-        value: null
-    },
 
     // Low-level event listeners
- /**
+
+    /**
     Description TODO
     @function
     @param {Event} event The handleMousedown event
     */
     handleMousedown: {
         value: function(event) {
-            if (!this._disabled && !this._busy) {
-                this._acknowledgeIntent("mouse");
+            if (this._observedPointer !== null) {
+                return;
+            }
+            if (!this._disabled) {
+                this._startInteraction("mouse");
             }
 
             event.preventDefault();
@@ -380,7 +150,7 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
             }
         }
     },
-/**
+    /**
     Description TODO
     @function
     @param {Event} event The handleMouseup event
@@ -390,20 +160,19 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
             this._interpretInteraction(event);
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     @param {Event} event The handleTouchstart event
     */
     handleTouchstart: {
         value: function(event) {
-
             if (this._observedPointer !== null) {
                 return;
             }
-
-            if (!this._disabled && !this._busy) {
-                this._acknowledgeIntent(event.changedTouches[0].identifier);
+            if (!this._disabled) {
+                this._startInteraction(event.changedTouches[0].identifier);
             }
 
             // NOTE preventingDefault disables the magnifying class
@@ -415,16 +184,14 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
             }
         }
     },
-/**
+    /**
     Description TODO
     @function
     @param {Event} event The handleTouchend event
     */
     handleTouchend: {
         value: function(event) {
-
-            var i = 0,
-                changedTouchCount = event.changedTouches.length;
+            var i = 0, changedTouchCount = event.changedTouches.length;
 
             for (; i < changedTouchCount; i++) {
                 if (event.changedTouches[i].identifier === this._observedPointer) {
@@ -435,55 +202,59 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
 
         }
     },
-/**
+    /**
     Description TODO
     @function
     @param {Event} event The handleTouchcancel event
     */
     handleTouchcancel: {
         value: function(event) {
-
-            var i = 0,
-                changedTouchCount = event.changedTouches.length;
+            var i = 0, changedTouchCount = event.changedTouches.length;
 
             for (; i < changedTouchCount; i++) {
                 if (event.changedTouches[i].identifier === this._observedPointer) {
-                    this._releaseInterest();
-
-                    this.active = false;
+                    this._endInteraction();
                     return;
                 }
             }
 
         }
     },
-/**
-    Description TODO
-    @function
-    @param {String} pointer TODO
-    @param {Component} demandingComponent TODO
-    @returns {Boolean} true TODO
+
+    /**
+    If we have to surrender the pointer we are no longer active. This will
+    stop the action event being dispatched.
     */
     surrenderPointer: {
-        value: function(pointer, demandingComponent) {
-
-            this._releaseInterest();
-
-            this.active = false;
+        value: function(pointer, component) {
+            if (pointer === this._observedPointer) {
+                this._endInteraction();
+            }
             return true;
         }
     },
 
     // Internal state management
-/**
-  Description TODO
-  @private
-*/
-    _acknowledgeIntent: {
-        value: function(pointer) {
 
-            this._observedPointer = pointer;
+    /**
+    Stores the pointer that pressed down the button. Needed for multitouch.
+    @private
+    */
+    _observedPointer: {
+        enumerable: true,
+        value: null
+    },
+
+    /**
+    Called when the user starts interacting with the component. Adds release
+    (touch and mouse) listeners.
+    @private
+    */
+    _startInteraction: {
+        value: function(pointer) {
             this.eventManager.claimPointer(pointer, this);
+            this._observedPointer = pointer;
+            this.active = true;
 
             if (window.Touch) {
                 document.addEventListener("touchend", this);
@@ -491,19 +262,18 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
             } else {
                 document.addEventListener("mouseup", this);
             }
-
-            this.active = true;
         },
         enumerable: false
     },
-/**
-  Description TODO
-  @private
-*/
+
+    /**
+    Called when the user has interacted with the button. Decides whether to
+    dispatch an action event.
+    @private
+    */
     _interpretInteraction: {
         value: function(event) {
-
-            if (!this.active) {
+            if (!this._active) {
                 return;
             }
 
@@ -513,22 +283,18 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
             }
 
             if (this.element === target) {
-                this._shouldDispatchActionEvent = true;
                 this._dispatchActionEvent();
-                this.updateState();
             }
 
-            this._releaseInterest();
-
-            this.active = false;
+            this._endInteraction();
         },
         enumerable: false
     },
-/**
-  Description TODO
-  @private
-*/
-    _releaseInterest: {
+    /**
+    Called when all interaction is over. Removes listeners.
+    @private
+    */
+    _endInteraction: {
         value: function() {
             if (window.Touch) {
                 document.removeEventListener("touchend", this);
@@ -537,98 +303,93 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
                 document.removeEventListener("mouseup", this);
             }
 
-            this.eventManager.forfeitPointer(this._observedPointer, this);
+            if (this.eventManager.isPointerClaimedByComponent(this._observedPointer, this)) {
+                this.eventManager.forfeitPointer(this._observedPointer, this);
+            }
             this._observedPointer = null;
+            this.active = false;
         }
     },
-/**
+
+    /**
     Description TODO
-    @function
+    @private
     */
-    updateState: {
-        value: function() {
-            var newState;
-
-            if (this._behavior !== "transient") {
-                switch (this._pressed) {
-                    case "false":
-                        newState = "true";
-                        break;
-                    case "true":
-                        newState = (this._behavior === "toggle") ? "false" : "mixed";
-                        break;
-                    case "mixed":
-                        newState = "false";
-                        break;
-                }
-                this.pressed = newState;
-            }
-            this.needsDraw = true;
-        }
-    },
-/**
-  Description TODO
-  @private
-*/
-    _isElementInput: {value: false},
-    prepareForDraw: {
-        value: function() {
+    _isInputElement: {value: false},
 
-            this._element.tabIndex = 0;
+    deserializedFromTemplate: {
+        value: function() {
+            var o = Object.getPrototypeOf(Button).deserializedFromTemplate.call(this);
 
             this._element.classList.add("montage-button");
             this._element.setAttribute("aria-role", "button");
 
-            if (!!(this._isElementInput = (this._element.tagName === "INPUT")) && this.value === undefined) {
-                this._valueNode = this._element.getAttributeNode("value");
-                this.value = this._element.value;
-            }
-            else {
+            this._isInputElement = (this._element.tagName === "INPUT");
+            // Only take the value from the element if it hasn't been set
+            // elsewhere (i.e. in the serialization)
+            if (this._isInputElement) {
+                // NOTE: This might not be the best way to do this
+                // With an input element value and label are one and the same
+                Object.defineProperty(this, "value", {
+                    get: function() {
+                        return this._label;
+                    },
+                    set: function(value) {
+                        this.label = value;
+                    }
+                });
+
+                if (this._label === undefined) {
+                    this._label = this._element.value;
+                }
+            } else {
                 if (!this._element.firstChild) {
                     this._element.appendChild(document.createTextNode(""));
-
                 }
-                this._valueNode = this._element.firstChild;
-                if (this.value === undefined) {
-                    this.value = this._valueNode.data;
+                this._labelNode = this._element.firstChild;
+                if (this._label === undefined) {
+                    this._label = this._labelNode.data;
                 }
             }
+
+            this.needsDraw = true;
         }
     },
-/**
+
+    /**
     Description TODO
     @function
     */
     prepareForActivationEvents: {
         value: function() {
-
             if (window.Touch) {
                 this._element.addEventListener("touchstart", this);
             } else {
-                this.element.addEventListener("mousedown", this);
+                this._element.addEventListener("mousedown", this);
             }
 
         }
     },
 
     /**
-      Retrieves the display value for the button, running it through a converter if needed
-      @private
+    Draws the label to the DOM.
+    @function
     */
-    _convertValue: {
+    _drawLabel: {
+        enumerable: false,
         value: function(value) {
-            if (this.converter) {
-                return this.converter.convert(value);
+            if (this._isInputElement) {
+                this._element.setAttribute("value", value);
+            } else {
+                this._labelNode.data = value;
             }
-            return value;
         }
     },
-/**
-    Description TODO
-    @function
-    */
+
     draw: {
         value: function() {
+            // Call super method
+            Object.getPrototypeOf(Button).draw.call(this);
 
             if (this._disabled) {
                 this._element.classList.add("disabled");
@@ -636,106 +397,20 @@ exports.Button = Montage.create(Component,/** @lends module:"montage/ui/button.r
                 this._element.classList.remove("disabled");
             }
 
-            if (this._busy) {
-                this._element.setAttribute("aria-busy", true);
-                this._element.classList.add("busy");
-            } else {
-                this._element.setAttribute("aria-busy", false);
-                this._element.classList.remove("busy");
-            }
-
-            if (this._behavior !== "transient") {
-
-                this._element.setAttribute("aria-pressed", this._pressed);
-
-                if (this._pressed === "true" && this.pressedValue) {
-                    if (this._isElementInput) {
-                        this._valueNode.value = this._convertValue(this.pressedValue);
-                    }
-                    else {
-                        if (!this._pressedValueNode) {
-                            this._pressedValueNode = document.createTextNode("");
-                            this._pressedValueNode.data = this._convertValue(this.pressedValue);
-                        }
-                        //TODO use replace now
-                        this._valueNode.data = this._convertValue(this.pressedValue);
-                    }
-                }
-                else if (this._pressed === "mixed" && this.mixedValue) {
-                    if (this._isElementInput) {
-                        this._element.setAttribute("value", this._convertValue(this.mixedValue));
-                    }
-                    else {
-                        this._element.firstChild.data = this._convertValue(this.mixedValue);
-                    }
-                }
-                else if ((this._pressed === "false") && (typeof this.value !== "undefined")) {
-                    if (this._isElementInput) {
-                        this._element.setAttribute("value", this._convertValue(this.value));
-                    }
-                    else {
-                        this._element.firstChild.data = this._convertValue(this.value);
-                    }
-                }
-            } else {
-                if (this._isElementInput) {
-                    this._element.setAttribute("value", this._convertValue(this.value));
-                } else {
-                    this._element.firstChild.data = this._convertValue(this.value);
-                }
-            }
-            if (this.valueActive) {
-                if (this.active) {
-                    if (this._behavior === "transient" || this._pressed === "false") {
-                        if (this._isElementInput) {
-                            this._element.setAttribute("value", this._convertValue(this.valueActive));
-                        }
-                        else {
-                            this._element.firstChild.data = this._convertValue(this.valueActive);
-                        }
-                    }
-                    else if (this._pressed === "true" && this.pressedValueActive) {
-                        if (this._isElementInput) {
-                            this._element.setAttribute("value", this._convertValue(this.pressedValueActive));
-                        }
-                        else {
-                            this._element.firstChild.data = this._convertValue(this.pressedValueActive);
-                        }
-                    }
-                    else if (this._pressed === "mixed" && this.mixedValueActive) {
-                        if (this._isElementInput) {
-                            this._element.setAttribute("value", this._convertValue(this.mixedValueActive));
-                        }
-                        else {
-                            this._element.firstChild.data = this._convertValue(this.mixedValueActive);
-                        }
-                    }
-                }
-                /* Right now, we don't handle active-pressed */
-                else if (this._behavior === "transient") {
-                    if (this._isElementInput) {
-                        this._element.setAttribute("value", this._convertValue(this.value));
-                    }
-                    else {
-                        this._element.firstChild.data = this._convertValue(this.value);
-                    }
-                }
-            }
-
-            this._element.setAttribute("title", this.title || "");
+            this._drawLabel(this.label);
         }
     }
+});
 
-}, module);
-/**
-    @class module:montage/ui/button.ToggleButton
-*/
-exports.ToggleButton = Montage.create(exports.Button,/** @lends module:montage/ui/button.ToggleButton# */ {
-/**
-  Description TODO
-  @private
-*/
-    _behavior: {
-        value: "toggle"
-    }
+Button.addAttributes({
+    autofocus: {value: false, dataType: 'boolean'},
+    disabled: {value: false, dataType: 'boolean'},
+    form: null,
+    formaction: null,
+    formenctype: null,
+    formmethod: null,
+    formnovalidate: null,
+    formtarget: null,
+    name: null,
+    value: null
 });
-- 
cgit v1.2.3