diff options
author | Jose Antonio Marquez | 2012-05-23 13:37:15 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-05-23 13:37:15 -0700 |
commit | 16decc5726eafbb25675c61be6df85a378ac1fac (patch) | |
tree | 5590c4a20a5d9297d3e66a1d290db32f028047eb /js/components/toolbar.reel | |
parent | 27e6e1238ec1adb34aa396074e2559801c7e4314 (diff) | |
parent | 108764dbdaa0c040de9146c2d722b6e53830cd54 (diff) | |
download | ninja-16decc5726eafbb25675c61be6df85a378ac1fac.tar.gz |
Merge branch 'refs/heads/Ninja-DOM-Architecture' into Document
Diffstat (limited to 'js/components/toolbar.reel')
-rw-r--r-- | js/components/toolbar.reel/toolbar.css | 62 | ||||
-rw-r--r-- | js/components/toolbar.reel/toolbar.html | 53 | ||||
-rw-r--r-- | js/components/toolbar.reel/toolbar.js | 123 |
3 files changed, 238 insertions, 0 deletions
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css new file mode 100644 index 00000000..b765f636 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.css | |||
@@ -0,0 +1,62 @@ | |||
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 | /*--------------------- | ||
8 | Toolbar Container | ||
9 | -----------------------*/ | ||
10 | |||
11 | .toolbar-container { | ||
12 | background-color: #474747; | ||
13 | border-bottom: 1px solid #333; | ||
14 | border-top: 1px solid #505050; | ||
15 | box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75); | ||
16 | height: 22px; | ||
17 | overflow: hidden; | ||
18 | width: 100%; | ||
19 | -webkit-box-flex: 0; | ||
20 | } | ||
21 | .toolbar-container ul { | ||
22 | padding: 0 5px; | ||
23 | margin: 0; | ||
24 | } | ||
25 | .toolbar-container li { | ||
26 | display: inline-block; | ||
27 | float: right; | ||
28 | margin: 0; | ||
29 | padding: 0; | ||
30 | } | ||
31 | |||
32 | /*--------------------- | ||
33 | Button Types | ||
34 | -----------------------*/ | ||
35 | |||
36 | .toolbar-add-button { | ||
37 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADPSURBVHjadNC7TQNREIXh75oNCIlWG0JC7BJoAmrAIVAAIkRCog9ThFtwCYTrtS2vBBKbDcG%2BbLD%2F5GpGc885M8nAItZga5YcYx4tD6Fw3ncn40Aa36mLIwM94YRC%2FFHqqkVshCRwCz6QhGRjloZo%2F1nFYygmTlC1ptNsbOTgy7czsJYosq2nLuK1e%2Fx4o0u1Qza7cuMS5s%2BVXC68v4xWmUbZFzkqiUatAWWmtmzPkrpoqC27b82BQoU1NEqfvcXeJV%2FB7mDdvYG7Ie4%2BvwMA%2BFNeHV16KUYAAAAASUVORK5CYII%3D); | ||
38 | } | ||
39 | |||
40 | /*--------------------- | ||
41 | Generic button styles | ||
42 | -----------------------*/ | ||
43 | |||
44 | .toolbar-container .toolbar-button { | ||
45 | background-color: transparent; | ||
46 | background-repeat: no-repeat; | ||
47 | border-style: none; | ||
48 | border-radius: 4px; | ||
49 | height: 16px; | ||
50 | margin: 3px 5px 0 0; | ||
51 | padding: 0 2px; | ||
52 | opacity: .85; | ||
53 | text-indent: -9999999px; | ||
54 | width: 16px; | ||
55 | float: right; | ||
56 | } | ||
57 | .toolbar-container .left-button { | ||
58 | float: left; | ||
59 | } | ||
60 | .toolbar-container .hide-button { | ||
61 | display: none; | ||
62 | } \ No newline at end of file | ||
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html new file mode 100644 index 00000000..d2c5972a --- /dev/null +++ b/js/components/toolbar.reel/toolbar.html | |||
@@ -0,0 +1,53 @@ | |||
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 lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link href="toolbar.css" rel="stylesheet" type="text/css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "prototype" : "js/components/toolbar.reel", | ||
15 | "properties" : { | ||
16 | "element" : {"#" : "toolbar-container"}, | ||
17 | "repetition": {"@": "buttonList" } | ||
18 | } | ||
19 | }, | ||
20 | |||
21 | "buttonList": { | ||
22 | "module": "montage/ui/repetition.reel", | ||
23 | "name": "Repetition", | ||
24 | "properties": { | ||
25 | "element": {"#": "repetition"} | ||
26 | }, | ||
27 | "bindings": { | ||
28 | "objects": {"<-": "@owner.buttons"} | ||
29 | } | ||
30 | }, | ||
31 | |||
32 | "button": { | ||
33 | "prototype": "montage/ui/button.reel", | ||
34 | "properties": { | ||
35 | "element": {"#": "button" }, | ||
36 | "label": " " | ||
37 | }, | ||
38 | "bindings": { | ||
39 | "label": {"<-": "@buttonList.objectAtCurrentIteration.title"}, | ||
40 | "sourceObject": {"<-": "@buttonList.objectAtCurrentIteration"} | ||
41 | } | ||
42 | } | ||
43 | } | ||
44 | </script> | ||
45 | </head> | ||
46 | <body> | ||
47 | <div data-montage-id="toolbar-container" class="toolbar-container"> | ||
48 | <ul data-montage-id="repetition"> | ||
49 | <li><button data-montage-id="button" class="toolbar-button"></button></li> | ||
50 | </ul> | ||
51 | </div> | ||
52 | </body> | ||
53 | </html> \ No newline at end of file | ||
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js new file mode 100644 index 00000000..2ccdb2c5 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.js | |||
@@ -0,0 +1,123 @@ | |||
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 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.Toolbar = Montage.create(Component, { | ||
11 | _needsButtonProperties : { | ||
12 | value: null | ||
13 | }, | ||
14 | _sourceObject : { | ||
15 | value: null | ||
16 | }, | ||
17 | sourceObject : { | ||
18 | get: function() { | ||
19 | return this._sourceObject; | ||
20 | }, | ||
21 | set: function(value) { | ||
22 | if(value === this._sourceObject) { return; } | ||
23 | this._sourceObject = value; | ||
24 | }, | ||
25 | serializable: true | ||
26 | }, | ||
27 | leftAlignClass : { value: "left-button" }, | ||
28 | hideButtonClass : { value: "hide-button" }, | ||
29 | _buttons : { value: [], distinct: true }, | ||
30 | buttons : { | ||
31 | get: function() { | ||
32 | return this._buttons; | ||
33 | }, | ||
34 | set: function(btns) { | ||
35 | this._buttons = btns; | ||
36 | this._needsButtonProperties = this.needsDraw = true; | ||
37 | }, | ||
38 | serializable: true | ||
39 | }, | ||
40 | |||
41 | _buttonToHide : { | ||
42 | value: null | ||
43 | }, | ||
44 | _buttonToShow : { | ||
45 | value: null | ||
46 | }, | ||
47 | getButton : { | ||
48 | value: function(identifier) { | ||
49 | var buttons = this.repetition.childComponents, | ||
50 | buttonIds = buttons.map(function(component) { | ||
51 | return component.sourceObject.identifier; | ||
52 | }); | ||
53 | |||
54 | return buttons[buttonIds.indexOf(identifier)]; | ||
55 | } | ||
56 | }, | ||
57 | hideButton : { | ||
58 | value: function(identifier) { | ||
59 | var button = this.getButton(identifier); | ||
60 | |||
61 | if(button) { | ||
62 | this._buttonToHide = button; | ||
63 | this.needsDraw = true; | ||
64 | } | ||
65 | } | ||
66 | }, | ||
67 | showButton : { | ||
68 | value: function(identifier) { | ||
69 | var button = this.getButton(identifier); | ||
70 | |||
71 | if(button) { | ||
72 | this._buttonToShow = button; | ||
73 | this.needsDraw = true; | ||
74 | } | ||
75 | } | ||
76 | }, | ||
77 | |||
78 | prepareForDraw : { | ||
79 | value: function() { | ||
80 | if(this._needsButtonProperties) { | ||
81 | this.repetition.childComponents.forEach(function(button) { | ||
82 | button.identifier = button.sourceObject.identifier; | ||
83 | button.addEventListener('action', this.delegate, false); | ||
84 | }, this); | ||
85 | } | ||
86 | } | ||
87 | }, | ||
88 | draw : { | ||
89 | value: function() { | ||
90 | if(this._needsClass) { | ||
91 | |||
92 | this.repetition.childComponents.forEach(function(button) { | ||
93 | button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button'); | ||
94 | |||
95 | ///// add left align class if specified in serialization | ||
96 | if(button.sourceObject.leftAlign) { | ||
97 | button.element.parentElement.classList.add(this.leftAlignClass); | ||
98 | } | ||
99 | }, this); | ||
100 | |||
101 | this._needsClass = false; | ||
102 | } | ||
103 | |||