diff options
Diffstat (limited to 'node_modules/montage/ui/button.reel')
-rw-r--r-- | node_modules/montage/ui/button.reel/button.css | 55 | ||||
-rw-r--r-- | node_modules/montage/ui/button.reel/button.html | 14 | ||||
-rw-r--r-- | node_modules/montage/ui/button.reel/button.js | 457 |
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 | */ | ||
15 | var Montage = require("montage").Montage, | 7 | var 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><button></code> or <code><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> | ||
26 | var b1 = Button.create(); | ||
27 | b1.element = document.querySelector("btnElement"); | ||
28 | b1.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 | <button data-montage-id="btnElement"></button> | ||
51 | */ | ||
52 | var 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 | 14 | exports.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 <input> element this is taken from the element's <code>value</code> attribute. On any other element (including <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; | ||
137 | if (this._isInputElement) { | ||
138 | this._value = value; | ||
139 | } | ||
140 | |||
141 | this.needsDraw = true; | ||
142 | } | ||