aboutsummaryrefslogtreecommitdiff
path: root/js/components/toolbar.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/toolbar.reel')
-rw-r--r--js/components/toolbar.reel/toolbar.css62
-rw-r--r--js/components/toolbar.reel/toolbar.html53
-rw-r--r--js/components/toolbar.reel/toolbar.js123
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>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No 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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.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
104 if(this._needsButtonProperties) {
105 this._needsClass = this.needsDraw = true;
106 this._needsButtonProperties = false;
107 }
108
109 if(this._buttonToHide) {
110 this._buttonToHide.element.classList.add(this.hideButtonClass);