diff options
Diffstat (limited to 'js/panels')
19 files changed, 1593 insertions, 9 deletions
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 15eb4da9..16643813 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js | |||
@@ -13,6 +13,10 @@ exports.Panel = Montage.create(Component, { | |||
13 | value: "Panel" | 13 | value: "Panel" |
14 | }, | 14 | }, |
15 | 15 | ||
16 | groups: { | ||
17 | value: [] | ||
18 | }, | ||
19 | |||
16 | panelContent: { | 20 | panelContent: { |
17 | value: null, | 21 | value: null, |
18 | serializable: true | 22 | serializable: true |
@@ -154,6 +158,12 @@ exports.Panel = Montage.create(Component, { | |||
154 | this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); | 158 | this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); |
155 | } | 159 | } |
156 | 160 | ||
161 | if(this.groups) { | ||
162 | this.groups.forEach(function(className) { | ||
163 | this.element.classList.add(className); | ||
164 | }.bind(this)); | ||
165 | } | ||
166 | |||
157 | if(this.modulePath && this.moduleName) { | 167 | if(this.modulePath && this.moduleName) { |
158 | // Load the slot content | 168 | // Load the slot content |
159 | var that = this; | 169 | var that = this; |
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index b22b3609..820348d2 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html | |||
@@ -74,8 +74,7 @@ | |||
74 | }, | 74 | }, |
75 | 75 | ||
76 | "panel_6": { | 76 | "panel_6": { |
77 | "module": "js/panels/Panel.reel", | 77 | "prototype": "js/panels/Panel.reel", |
78 | "name": "Panel", | ||
79 | "properties": { | 78 | "properties": { |
80 | "element": {"#": "panel_6"} | 79 | "element": {"#": "panel_6"} |
81 | }, | 80 | }, |
@@ -84,6 +83,16 @@ | |||
84 | } | 83 | } |
85 | }, | 84 | }, |
86 | 85 | ||
86 | "panel_7": { | ||
87 | "prototype": "js/panels/Panel.reel", | ||
88 | "properties": { | ||
89 | "element": {"#": "panel_7"} | ||
90 | }, | ||
91 | "bindings": { | ||
92 | "currentDocument": {"<-": "@owner.currentDocument"} | ||
93 | } | ||
94 | }, | ||
95 | |||
87 | "owner": { | 96 | "owner": { |
88 | "prototype": "js/panels/PanelContainer.reel", | 97 | "prototype": "js/panels/PanelContainer.reel", |
89 | "properties": { | 98 | "properties": { |
@@ -95,7 +104,8 @@ | |||
95 | "panel_3": {"@": "panel_3"}, | 104 | "panel_3": {"@": "panel_3"}, |
96 | "panel_4": {"@": "panel_4"}, | 105 | "panel_4": {"@": "panel_4"}, |
97 | "panel_5": {"@": "panel_5"}, | 106 | "panel_5": {"@": "panel_5"}, |
98 | "panel_6": {"@": "panel_6"} | 107 | "panel_6": {"@": "panel_6"}, |
108 | "panel_7": {"@": "panel_7"} | ||
99 | }, | 109 | }, |
100 | "listeners": [ | 110 | "listeners": [ |
101 | { | 111 | { |
@@ -126,6 +136,7 @@ | |||
126 | <article data-montage-id="panel_4"></article> | 136 | <article data-montage-id="panel_4"></article> |
127 | <article data-montage-id="panel_5"></article> | 137 | <article data-montage-id="panel_5"></article> |
128 | <article data-montage-id="panel_6"></article> | 138 | <article data-montage-id="panel_6"></article> |
139 | <article data-montage-id="panel_7"></article> | ||
129 | </article> | 140 | </article> |
130 | </section> | 141 | </section> |
131 | </body> | 142 | </body> |
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 5c733b92..e0e547f9 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js | |||
@@ -84,6 +84,18 @@ exports.PanelContainer = Montage.create(Component, { | |||
84 | value: [] | 84 | value: [] |
85 | }, | 85 | }, |
86 | 86 | ||
87 | panelsAvailable: { | ||
88 | value: function() { | ||
89 | var pAvail = []; | ||
90 | this.panels.forEach(function(obj) { | ||
91 | if (window.getComputedStyle(obj.element).display !== "none") { | ||
92 | pAvail.push(obj); | ||
93 | } | ||
94 | }); | ||
95 | return pAvail; | ||
96 | } | ||
97 | }, | ||
98 | |||
87 | currentPanelState: { | 99 | currentPanelState: { |
88 | value: {} | 100 | value: {} |
89 | }, | 101 | }, |
@@ -112,6 +124,8 @@ exports.PanelContainer = Montage.create(Component, { | |||
112 | this['panel_'+i].modulePath = p.modulePath; | 124 | this['panel_'+i].modulePath = p.modulePath; |
113 | this['panel_'+i].moduleName = p.moduleName; | 125 | this['panel_'+i].moduleName = p.moduleName; |
114 | this['panel_'+i].disabled = true; | 126 | this['panel_'+i].disabled = true; |
127 | this['panel_'+i].groups = p.groups; | ||
128 | |||
115 | 129 | ||
116 | this.currentPanelState[p.name] = {}; | 130 | this.currentPanelState[p.name] = {}; |
117 | this.currentPanelState.version = "1.0"; | 131 | this.currentPanelState.version = "1.0"; |
@@ -185,15 +199,17 @@ exports.PanelContainer = Montage.create(Component, { | |||
185 | 199 | ||
186 | _setPanelsSizes: { | 200 | _setPanelsSizes: { |
187 | value: function(panelActivated) { | 201 | value: function(panelActivated) { |
188 | var len = this.panels.length, setLocked = true; | 202 | var availablePanels = this.panelsAvailable(); |
203 | var len = availablePanels.length; | ||
204 | var setLocked = true; | ||
189 | 205 | ||
190 | for(var i = 0; i < len; i++) { | 206 | for(var i = 0; i < len; i++) { |
191 | if(this.panels[i] === panelActivated || panelActivated === null) { | 207 | if(availablePanels[i] === panelActivated || panelActivated === null) { |
192 | setLocked = false; | 208 | setLocked = false; |
193 | } | 209 | } |
194 | 210 | ||
195 | this.panels[i].locked = setLocked; | 211 | availablePanels[i].locked = setLocked; |
196 | this.panels[i].needsDraw = true; | 212 | availablePanels[i].needsDraw = true; |
197 | } | 213 | } |
198 | } | 214 | } |
199 | }, | 215 | }, |
@@ -201,7 +217,8 @@ exports.PanelContainer = Montage.create(Component, { | |||
201 | _redrawPanels: { | 217 | _redrawPanels: { |
202 | value: function(panelActivated, unlockPanels) { | 218 | value: function(panelActivated, unlockPanels) { |
203 | var maxHeight = this.element.offsetHeight, setLocked = true; | 219 | var maxHeight = this.element.offsetHeight, setLocked = true; |
204 | var len = this.panels.length; | 220 | var availablePanels = this.panelsAvailable(); |
221 | var len = availablePanels.length; | ||
205 | 222 | ||
206 | if(unlockPanels === true) { | 223 | if(unlockPanels === true) { |
207 | setLocked = false; | 224 | setLocked = false; |
@@ -215,7 +232,7 @@ exports.PanelContainer = Montage.create(Component, { | |||
215 | } | 232 | } |
216 | 233 | ||
217 | for(var i = 0; i < len; i++) { | 234 | for(var i = 0; i < len; i++) { |
218 | var obj = this['panel_'+i]; | 235 | var obj = availablePanels[i]; |
219 | 236 | ||
220 | if(obj === panelActivated) { | 237 | if(obj === panelActivated) { |
221 | setLocked = false; | 238 | setLocked = false; |
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css new file mode 100644 index 00000000..787cf114 --- /dev/null +++ b/js/panels/binding-panel.reel/binding-panel.css | |||
@@ -0,0 +1,27 @@ | |||
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 | .binding-panel { | ||
8 | position: relative; | ||
9 | height: 100%; | ||
10 | display: -webkit-box; | ||
11 | overflow: hidden; | ||
12 | -webkit-box-orient: vertical; | ||
13 | } | ||
14 |