diff options
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 | 73 | ||||
-rw-r--r-- | js/components/toolbar.reel/toolbar.js | 112 |
3 files changed, 247 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..53c6627a --- /dev/null +++ b/js/components/toolbar.reel/toolbar.html | |||
@@ -0,0 +1,73 @@ | |||
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 | "module" : "js/panels/css-panel/style-sheet.reel", | ||
15 | "name" : "StyleSheet", | ||
16 | "properties" : { | ||
17 | "element" : {"#" : "toolbar-container"}, | ||
18 | "repetition": {"@": "buttonList" } | ||
19 | } | ||
20 | }, | ||
21 | |||
22 | "buttonList": { | ||
23 | "module": "montage/ui/repetition.reel", | ||
24 | "name": "Repetition", | ||
25 | "properties": { | ||
26 | "element": {"#": "repetition"} | ||
27 | }, | ||
28 | "bindings": { | ||
29 | "objects" : { | ||
30 | "boundObject": {"@": "owner"}, | ||
31 | "boundObjectPropertyPath": "buttons", | ||
32 | "oneway": true | ||
33 | } | ||
34 | |||
35 | } | ||
36 | }, | ||
37 | |||
38 | "button": { | ||
39 | "module": "montage/ui/button.reel", | ||
40 | "name": "Button", | ||
41 | "properties": { | ||
42 | "element": {"#": "button" }, | ||
43 | "label": " " | ||
44 | }, | ||
45 | "bindings": { | ||
46 | "label" : { | ||
47 | "boundObject": {"@": "buttonList"}, | ||
48 | "boundObjectPropertyPath": "objectAtCurrentIteration.title", | ||
49 | "oneway": true | ||
50 | }, | ||
51 | "identifier": { | ||
52 | "boundObject": {"@": "buttonList"}, | ||
53 | "boundObjectPropertyPath": "objectAtCurrentIteration.identifier", | ||
54 | "oneway": true | ||
55 | }, | ||
56 | "sourceObject": { | ||
57 | "boundObject": {"@": "buttonList"}, | ||
58 | "boundObjectPropertyPath": "objectAtCurrentIteration", | ||
59 | "oneway": true | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | </script> | ||
65 | </head> | ||
66 | <body> | ||
67 | <div id="toolbar-container" class="toolbar-container"> | ||
68 | <ul data-montage-id="repetition"> | ||
69 | <li><button data-montage-id="button" class="toolbar-button"></button></li> | ||
70 | </ul> | ||
71 | </div> | ||
72 | </body> | ||
73 | </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..dbff2db6 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.js | |||
@@ -0,0 +1,112 @@ | |||
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 | leftAlignClass : { value: "left-button" }, | ||
15 | hideButtonClass : { value: "hide-button" }, | ||
16 | _buttons : { value: null }, | ||
17 | buttons : { | ||
18 | get: function() { | ||
19 | return this._buttons; | ||
20 | }, | ||
21 | set: function(btns) { | ||
22 | this._buttons = btns; | ||
23 | this._needsButtonProperties = true; | ||
24 | console.log("buttons set"); | ||
25 | } | ||
26 | }, | ||
27 | |||
28 | _buttonToHide : { | ||
29 | value: null | ||
30 | }, | ||
31 | _buttonToShow : { | ||
32 | value: null | ||
33 | }, | ||
34 | getButton : { | ||
35 | value: function(identifier) { | ||
36 | var buttons = this.repetition.childComponents, | ||
37 | buttonIds = buttons.map(function(component) { | ||
38 | return component.sourceObject.identifier; | ||
39 | }); | ||
40 | |||
41 | return buttons[buttonIds.indexOf(identifier)]; | ||
42 | } | ||
43 | }, | ||
44 | hideButton : { | ||
45 | value: function(identifier) { | ||
46 | var button = this.getButton(identifier); | ||
47 | |||
48 | if(button) { | ||
49 | this._buttonToHide = button; | ||
50 | this.needsDraw = true; | ||
51 | } | ||
52 | } | ||
53 | }, | ||
54 | showButton : { | ||
55 | value: function(identifier) { | ||
56 | var button = this.getButton(identifier); | ||
57 | |||
58 | if(button) { | ||
59 | this._buttonToShow = button; | ||
60 | this.needsDraw = true; | ||
61 | } | ||
62 | } | ||
63 | }, | ||
64 | |||
65 | prepareForDraw : { | ||
66 | value: function() { | ||
67 | console.log("toolbar - prepare for draw"); | ||
68 | if(this._needsButtonProperties) { | ||
69 | this.repetition.childComponents.forEach(function(button) { | ||
70 | button.identifier = button.sourceObject.identifier; | ||
71 | button.addEventListener('action', this.delegate, false); | ||
72 | }, this); | ||
73 | } | ||
74 | } | ||
75 | }, | ||
76 | draw : { | ||
77 | value: function() { | ||
78 | console.log("toolbar - draw - repetition ", this.repetition); | ||
79 | if(this._needsClass) { | ||
80 | |||
81 | this.repetition.childComponents.forEach(function(button) { | ||
82 | button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button'); | ||
83 | |||
84 | ///// add left align class if specified in serialization | ||
85 | if(button.sourceObject.leftAlign) { | ||
86 | button.element.parentElement.classList.add(this.leftAlignClass); | ||