Toolbar - Add buttons to toolbar component

3 files changed, 115 insertions, 7 deletions

diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
index 1ffae912..e63b043e 100644
--- a/js/components/toolbar.reel/toolbar.css
+++ b/js/components/toolbar.reel/toolbar.css
@@ -3,12 +3,51 @@
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
+
+/*---------------------
+   Toolbar Container
+-----------------------*/
+
 .toolbar-container {
     background-color: #474747;
     border-bottom: 1px solid #333;
     border-top: 1px solid #505050;
     box-shadow:  0 4px 8px 0px rgba(0,0,0,0.75);
     height: 22px;
+    overflow: hidden;
     width: 100%;
     -webkit-box-flex: 0;
+}
+.toolbar-container ul, .toolbar-container li {
+    margin: 0;
+    padding: 0;
+}
+
+/*---------------------
+   Button Types
+-----------------------*/
+
+.toolbar-add-button {
+    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);
+}
+
+/*---------------------
+ Generic button styles
+-----------------------*/
+
+.toolbar-container .toolbar-button {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border-style: none;
+    border-radius: 4px;
+    height: 16px;
+    margin: 3px 5px 0 0;
+    padding: 0 2px;
+    opacity: .85;
+    text-indent: -9999999px;
+    width: 16px;
+    float: right;
+}
+.left-button {
+    float: left;
 }
\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
index 69eba194..53c6627a 100644
--- a/js/components/toolbar.reel/toolbar.html
+++ b/js/components/toolbar.reel/toolbar.html
@@ -14,14 +14,50 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module" : "js/panels/css-panel/style-sheet.reel",
                 "name" : "StyleSheet",
                 "properties" : {
-                    "element" : {"#" : "toolbar-container"}
+                    "element" : {"#" : "toolbar-container"},
+                    "repetition": {"@": "buttonList" }
                 }
             },
+            
+            "buttonList": {
+                "module": "montage/ui/repetition.reel",
+                "name": "Repetition",
+                "properties": {
+                    "element": {"#": "repetition"}
+                },
+                "bindings": {
+                    "objects" : {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "buttons",
+                        "oneway": true
+                    }
+
+                }
+            },
+            
             "button": {
                 "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
-
+                    "element": {"#": "button" },
+                    "label": " "
+                },
+                "bindings": {
+                    "label" : {
+                        "boundObject": {"@": "buttonList"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.title",
+                        "oneway": true
+                    },
+                    "identifier": {
+                        "boundObject": {"@": "buttonList"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.identifier",
+                        "oneway": true
+                    },
+                    "sourceObject": {
+                        "boundObject": {"@": "buttonList"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                        "oneway": true
+                    }
                 }
             }
         }
@@ -29,6 +65,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </head>
 <body>
 <div id="toolbar-container" class="toolbar-container">
+    <ul data-montage-id="repetition">
+        <li><button data-montage-id="button" class="toolbar-button"></button></li>
+    </ul>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js
index 79e7ff1f..03edf477 100644
--- a/js/components/toolbar.reel/toolbar.js
+++ b/js/components/toolbar.reel/toolbar.js
@@ -8,20 +8,50 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.Toolbar = Montage.create(Component, {
-
-    deserializedFromTemplate : {
-        value: function() {
-            console.log("toolbar - deserialized");
+    _needsButtonProperties : {
+        value: null
+    },
+    _buttons : { value: null },
+    buttons : {
+        get: function() {
+            return this._buttons;
+        },
+        set: function(btns) {
+            this._buttons = btns;
+            this._needsButtonProperties = true;
+            console.log("buttons set");
         }
     },
     prepareForDraw : {
         value: function() {
             console.log("toolbar - prepare for draw");
+            if(this._needsButtonProperties) {
+                this.repetition.childComponents.forEach(function(button) {
+                    button.identifier = button.sourceObject.identifier;
+                    button.addEventListener('action', this.delegate, false);
+                }, this);
+            }
         }
     },
     draw : {
         value: function() {
-            console.log("toolbar - draw");
+            console.log("toolbar - draw - repetition ", this.repetition);
+            if(this._needsClass) {
+
+                this.repetition.childComponents.forEach(function(button) {
+                    button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button');
+                }, this);
+            }
+
+            if(this._needsButtonProperties) {
+                this._needsClass = this.needsDraw = true;
+                this._needsButtonProperties = false;
+            }
+
+
         }
+    },
+    _needsClass : {
+        value: null
     }
 });
\ No newline at end of file