Panel Toolbar - Support hiding and showing of buttons

2 files changed, 66 insertions, 2 deletions

diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
index e63b043e..b765f636 100644
--- a/js/components/toolbar.reel/toolbar.css
+++ b/js/components/toolbar.reel/toolbar.css
@@ -18,7 +18,13 @@
     width: 100%;
     -webkit-box-flex: 0;
 }
-.toolbar-container ul, .toolbar-container li {
+.toolbar-container ul {
+    padding: 0 5px;
+    margin: 0;
+}
+.toolbar-container li {
+    display: inline-block;
+    float: right;
     margin: 0;
     padding: 0;
 }
@@ -48,6 +54,9 @@
     width: 16px;
     float: right;
 }
-.left-button {
+.toolbar-container .left-button {
     float: left;
+}
+.toolbar-container .hide-button {
+    display: none;
 }
\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js
index 03edf477..dbff2db6 100644
--- a/js/components/toolbar.reel/toolbar.js
+++ b/js/components/toolbar.reel/toolbar.js
@@ -11,6 +11,8 @@ exports.Toolbar = Montage.create(Component, {
     _needsButtonProperties : {
         value: null
     },
+    leftAlignClass  : { value: "left-button" },
+    hideButtonClass : { value: "hide-button" },
     _buttons : { value: null },
     buttons : {
         get: function() {
@@ -22,6 +24,44 @@ exports.Toolbar = Montage.create(Component, {
             console.log("buttons set");
         }
     },
+
+    _buttonToHide : {
+        value: null
+    },
+    _buttonToShow : {
+        value: null
+    },
+    getButton : {
+        value: function(identifier) {
+            var buttons = this.repetition.childComponents,
+                buttonIds = buttons.map(function(component) {
+                    return component.sourceObject.identifier;
+                });
+
+            return buttons[buttonIds.indexOf(identifier)];
+        }
+    },
+    hideButton : {
+        value: function(identifier) {
+            var button = this.getButton(identifier);
+
+            if(button) {
+                this._buttonToHide = button;
+                this.needsDraw = true;
+            }
+        }
+    },
+    showButton : {
+        value: function(identifier) {
+            var button = this.getButton(identifier);
+
+            if(button) {
+                this._buttonToShow = button;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     prepareForDraw : {
         value: function() {
             console.log("toolbar - prepare for draw");
@@ -40,7 +80,14 @@ exports.Toolbar = Montage.create(Component, {
 
                 this.repetition.childComponents.forEach(function(button) {
                     button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button');
+
+                    ///// add left align class if specified in serialization
+                    if(button.sourceObject.leftAlign) {
+                        button.element.parentElement.classList.add(this.leftAlignClass);
+                    }
                 }, this);
+
+                this._needsClass = false;
             }
 
             if(this._needsButtonProperties) {
@@ -48,6 +95,14 @@ exports.Toolbar = Montage.create(Component, {
                 this._needsButtonProperties = false;
             }
 
+            if(this._buttonToHide) {
+                this._buttonToHide.element.classList.add(this.hideButtonClass);
+                this._buttonToHide = null;
+            }
+            if(this._buttonToShow) {
+                this._buttonToShow.element.classList.remove(this.hideButtonClass);
+                this._buttonToShow = null;
+            }
 
         }
     },