aboutsummaryrefslogtreecommitdiff
path: root/js/components
diff options
context:
space:
mode:
authorEric Guzman2012-05-03 11:48:46 -0700
committerEric Guzman2012-05-03 11:48:46 -0700
commitfc104084e964023263332dbf2d916bf00d525e8b (patch)
tree127494c4f19628eb2bea1bedfef66b1892214347 /js/components
parent39ab9e427086c83661b07287328c254e0b5ba053 (diff)
downloadninja-fc104084e964023263332dbf2d916bf00d525e8b.tar.gz
Panel Toolbar - Support hiding and showing of buttons
Diffstat (limited to 'js/components')
-rw-r--r--js/components/toolbar.reel/toolbar.css13
-rw-r--r--js/components/toolbar.reel/toolbar.js55
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 @@
18 width: 100%; 18 width: 100%;
19 -webkit-box-flex: 0; 19 -webkit-box-flex: 0;
20} 20}
21.toolbar-container ul, .toolbar-container li { 21.toolbar-container ul {
22 padding: 0 5px;
23 margin: 0;
24}
25.toolbar-container li {
26 display: inline-block;
27 float: right;
22 margin: 0; 28 margin: 0;
23 padding: 0; 29 padding: 0;
24} 30}
@@ -48,6 +54,9 @@
48 width: 16px; 54 width: 16px;
49 float: right; 55 float: right;
50} 56}
51.left-button { 57.toolbar-container .left-button {
52 float: left; 58 float: left;
59}
60.toolbar-container .hide-button {
61 display: none;
53} \ No newline at end of file 62} \ 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, {
11 _needsButtonProperties : { 11 _needsButtonProperties : {
12 value: null 12 value: null
13 }, 13 },
14 leftAlignClass : { value: "left-button" },
15 hideButtonClass : { value: "hide-button" },
14 _buttons : { value: null }, 16 _buttons : { value: null },
15 buttons : { 17 buttons : {
16 get: function() { 18 get: function() {
@@ -22,6 +24,44 @@ exports.Toolbar = Montage.create(Component, {
22 console.log("buttons set"); 24 console.log("buttons set");
23 } 25 }
24 }, 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
25 prepareForDraw : { 65 prepareForDraw : {
26 value: function() { 66 value: function() {
27 console.log("toolbar - prepare for draw"); 67 console.log("toolbar - prepare for draw");
@@ -40,7 +80,14 @@ exports.Toolbar = Montage.create(Component, {
40 80
41 this.repetition.childComponents.forEach(function(button) { 81 this.repetition.childComponents.forEach(function(button) {
42 button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-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);
87 }
43 }, this); 88 }, this);
89
90 this._needsClass = false;
44 } 91 }
45 92
46 if(this._needsButtonProperties) { 93 if(this._needsButtonProperties) {
@@ -48,6 +95,14 @@ exports.Toolbar = Montage.create(Component, {
48 this._needsButtonProperties = false; 95 this._needsButtonProperties = false;
49 } 96 }
50 97
98 if(this._buttonToHide) {
99 this._buttonToHide.element.classList.add(this.hideButtonClass);
100 this._buttonToHide = null;
101 }
102 if(this._buttonToShow) {
103 this._buttonToShow.element.classList.remove(this.hideButtonClass);
104 this._buttonToShow = null;
105 }
51 106
52 } 107 }
53 }, 108 },