aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/button.reel
diff options
context:
space:
mode:
authorJonathan Duran2012-06-20 15:04:45 -0700
committerJonathan Duran2012-06-20 15:04:45 -0700
commitc6ae80c488621d4ac189cb63309b6258115f823a (patch)
treedfa26112e1830972fcb212bbb5b17c9a901c645f /node_modules/montage/ui/button.reel
parent022e714cb5d10cd8575ab9907eddfb184a990b66 (diff)
parentc9852665eadc1acb9c1c881d207c4bd9ef88805f (diff)
downloadninja-c6ae80c488621d4ac189cb63309b6258115f823a.tar.gz
Merge branch 'refs/heads/NINJAmaster' into Timeline-merge-candidate
Diffstat (limited to 'node_modules/montage/ui/button.reel')
-rw-r--r--node_modules/montage/ui/button.reel/button.css55
-rw-r--r--node_modules/montage/ui/button.reel/button.html14
-rw-r--r--node_modules/montage/ui/button.reel/button.js457
3 files changed, 77 insertions, 449 deletions
diff --git a/node_modules/montage/ui/button.reel/button.css b/node_modules/montage/ui/button.reel/button.css
new file mode 100644
index 00000000..f0f3ad60
--- /dev/null
+++ b/node_modules/montage/ui/button.reel/button.css
@@ -0,0 +1,55 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7.montage-button {
8 outline: none;
9 box-sizing: border-box;
10 font-size: 12px;
11 height: 2.5em;
12 min-width: 2.5em;
13 margin: 0 2px;
14 padding: 0 1em;
15 vertical-align: middle;
16 border-radius: 3px;
17 border: 1px solid #b3b3b3;
18 background-color: #f2f2f2;
19 cursor: pointer;
20}
21
22/* States */
23.montage-button:hover {
24 background-color: #fff;
25 color: #000;
26}
27
28.montage-button:active {
29 background-color: #e5e5e5;
30}
31
32.montage-button:focus {
33 border-color: #7f7f7f;
34}
35
36
37/* ButtonGroup ------------------------------- */
38
39.montage-buttonGroup {
40 padding-left: 5px; /* Add the negative margin back */
41}
42
43.montage-buttonGroup > .montage-button {
44 margin: 0;
45 border-radius: 0;
46 margin-left: -5px; /* Remove the space inbetween */
47}
48
49.montage-buttonGroup > .montage-button:first-child {
50 border-radius: 3px 0 0 3px;
51}
52
53.montage-buttonGroup > .montage-button:last-child {
54 border-radius: 0 3px 3px 0;
55} \ No newline at end of file
diff --git a/node_modules/montage/ui/button.reel/button.html b/node_modules/montage/ui/button.reel/button.html
new file mode 100644
index 00000000..662481ad
--- /dev/null
+++ b/node_modules/montage/ui/button.reel/button.html
@@ -0,0 +1,14 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta charset="utf-8">
10 <link rel="stylesheet" href="button.css">
11</head>
12<body>
13</body>
14</html> \ No newline at end of file
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js
index 91b6304d..46ffc3a2 100644
--- a/node_modules/montage/ui/button.reel/button.js
+++ b/node_modules/montage/ui/button.reel/button.js
@@ -3,463 +3,22 @@
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 /*global require, exports*/ 6/*global require,exports */
7
8/**
9 @module "montage/ui/button.reel"
10 @requires montage/core/core
11 @requires montage/ui/component
12 @requires montage/ui/native-control
13 @requires montage/ui/composer/press-composer
14*/
15var Montage = require("montage").Montage, 7var Montage = require("montage").Montage,
16 Component = require("ui/component").Component, 8 Component = require("ui/component").Component,
17 NativeControl = require("ui/native-control").NativeControl, 9 NativeButton = require("ui/native/button.reel/button").Button;
18 PressComposer = require("ui/composer/press-composer").PressComposer;
19
20/**
21 Wraps a native <code>&lt;button></code> or <code>&lt;input[type="button"]></code> HTML element. The element's standard attributes are exposed as bindable properties.
22 @class module:"montage/ui/button.reel".Button
23 @extends module:montage/native-control.NativeControl
24 @example
25<caption>JavaScript example</caption>
26var b1 = Button.create();
27b1.element = document.querySelector("btnElement");
28b1.addEventListener("action", function(event) {
29 console.log("Got event 'action' event");
30});
31 @example
32<caption>Serialized example</caption>
33{
34 "aButton": {
35 "prototype": "ui/button.reel",
36 "properties": {
37 "element": {"#": "btnElement"}
38 },
39 "listeners": [
40 {
41 "type": "action",
42 "listener": {"@": "appListener"}
43 }
44 ]
45 },
46 "listener": {
47 "prototype": "appListener"
48 }
49}
50&lt;button data-montage-id="btnElement"></button>
51*/
52var Button = exports.Button = Montage.create(NativeControl, /** @lends module:"montage/ui/button.reel".Button# */ {
53
54 _preventFocus: {
55 enumerable: false,
56 value: false
57 },
58 10
59/** 11/**
60 Specifies whether the button should receive focus or not. 12 * Montage Button
61 @type {boolean} 13 */
62 @default false 14exports.Button = Montage.create(NativeButton, {
63 @event longpress
64*/
65 preventFocus: {
66 get: function () {
67 return this._preventFocus;
68 },
69 set: function (value) {
70 if (value === true) {
71 this._preventFocus = true;
72 } else {
73 this._preventFocus = false;
74 }
75 }
76 },
77
78
79/**
80 Enables or disables the Button from user input. When this property is set to <code>false</code>, the "disabled" CSS style is applied to the button's DOM element during the next draw cycle. When set to <code>true</code> the "disabled" CSS class is removed from the element's class list.
81*/
82 //TODO we should prefer positive properties like enabled vs disabled, get rid of disabled
83 enabled: {
84 dependencies: ["disabled"],
85 get: function () {
86 return !this._disabled;
87 },
88 set: function (value) {
89 this.disabled = !value;
90 }
91 },
92
93 /**
94 A Montage converter object used to convert or format the label displayed by the Button instance. When a new value is assigned to <code>label</code>, the converter object's <code>convert()</code> method is invoked, passing it the newly assigned label value.
95 @type {Property}
96 @default null
97 */
98 converter: {
99 value: null
100 },
101
102 /**
103 Stores the node that contains this button's value. Only used for
104 non-`<input>` elements.
105 @private
106 */
107 _labelNode: {value:undefined, enumerable: false},
108
109 _label: { value: undefined, enumerable: false },
110
111 /**
112 The label for the button. In an &lt;input> element this is taken from the element's <code>value</code> attribute. On any other element (including &lt;button>) this is the first child node which is a text node. If one isn't found then it will be created.
113
114 If the button has a non-null <code>converter</code> property, the converter object's <code>convert()</code> method is called on the value before being assigned to the button instance.
115
116 @type {string}
117 @default undefined
118 */
119 label: {
120 get: function() {
121 return this._label;
122 },
123 set: function(value) {
124 if (value && value.length > 0 && this.converter) {
125 try {
126 value = this.converter.convert(value);
127 if (this.error) {
128 this.error = null;
129 }
130 } catch(e) {
131 // unable to convert - maybe error
132 this.error = e;
133 }
134 }
135
136 this._label = value;