diff options
Diffstat (limited to 'js/panels')
18 files changed, 1295 insertions, 7 deletions
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 0c5f0b4b..3783459e 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 | _collapsed: { | 20 | _collapsed: { |
17 | value: false | 21 | value: false |
18 | }, | 22 | }, |
@@ -148,6 +152,12 @@ exports.Panel = Montage.create(Component, { | |||
148 | this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); | 152 | this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); |
149 | } | 153 | } |
150 | 154 | ||
155 | if(this.groups) { | ||
156 | this.groups.forEach(function(className) { | ||
157 | this.element.classList.add(className); | ||
158 | }.bind(this)); | ||
159 | } | ||
160 | |||
151 | if(this.modulePath && this.moduleName) { | 161 | if(this.modulePath && this.moduleName) { |
152 | // Load the slot content | 162 | // Load the slot content |
153 | var that = this; | 163 | var that = this; |
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index b22b3609..7d7444c5 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html | |||
@@ -84,6 +84,20 @@ | |||
84 | } | 84 | } |
85 | }, | 85 | }, |
86 | 86 | ||
87 | "panel_7": { | ||
88 | "prototype": "js/panels/Panel.reel", | ||
89 | "properties": { | ||
90 | "element": {"#": "panel_7"} | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | "panel_8": { | ||
95 | "prototype": "js/panels/Panel.reel", | ||
96 | "properties": { | ||
97 | "element": {"#": "panel_8"} | ||
98 | } | ||
99 | }, | ||
100 | |||
87 | "owner": { | 101 | "owner": { |
88 | "prototype": "js/panels/PanelContainer.reel", | 102 | "prototype": "js/panels/PanelContainer.reel", |
89 | "properties": { | 103 | "properties": { |
@@ -95,7 +109,9 @@ | |||
95 | "panel_3": {"@": "panel_3"}, | 109 | "panel_3": {"@": "panel_3"}, |
96 | "panel_4": {"@": "panel_4"}, | 110 | "panel_4": {"@": "panel_4"}, |
97 | "panel_5": {"@": "panel_5"}, | 111 | "panel_5": {"@": "panel_5"}, |
98 | "panel_6": {"@": "panel_6"} | 112 | "panel_6": {"@": "panel_6"}, |
113 | "panel_7": {"@": "panel_7"}, | ||
114 | "panel_8": {"@": "panel_8"} | ||
99 | }, | 115 | }, |
100 | "listeners": [ | 116 | "listeners": [ |
101 | { | 117 | { |
@@ -126,6 +142,8 @@ | |||
126 | <article data-montage-id="panel_4"></article> | 142 | <article data-montage-id="panel_4"></article> |
127 | <article data-montage-id="panel_5"></article> | 143 | <article data-montage-id="panel_5"></article> |
128 | <article data-montage-id="panel_6"></article> | 144 | <article data-montage-id="panel_6"></article> |
145 | <article data-montage-id="panel_7"></article> | ||
146 | <article data-montage-id="panel_8"></article> | ||
129 | </article> | 147 | </article> |
130 | </section> | 148 | </section> |
131 | </body> | 149 | </body> |
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 7cb03255..82069146 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js | |||
@@ -38,6 +38,18 @@ exports.PanelContainer = Montage.create(Component, { | |||
38 | value: [] | 38 | value: [] |
39 | }, | 39 | }, |
40 | 40 | ||
41 | panelsAvailable: { | ||
42 | value: function() { | ||
43 | var pAvail = []; | ||
44 | this.panels.forEach(function(obj) { | ||
45 | if (window.getComputedStyle(obj.element).display !== "none") { | ||
46 | pAvail.push(obj); | ||
47 | } | ||
48 | }); | ||
49 | return pAvail; | ||
50 | } | ||
51 | }, | ||
52 | |||
41 | currentPanelState: { | 53 | currentPanelState: { |
42 | value: {} | 54 | value: {} |
43 | }, | 55 | }, |
@@ -66,6 +78,8 @@ exports.PanelContainer = Montage.create(Component, { | |||
66 | this['panel_'+i].modulePath = p.modulePath; | 78 | this['panel_'+i].modulePath = p.modulePath; |
67 | this['panel_'+i].moduleName = p.moduleName; | 79 | this['panel_'+i].moduleName = p.moduleName; |
68 | this['panel_'+i].disabled = true; | 80 | this['panel_'+i].disabled = true; |
81 | this['panel_'+i].groups = p.groups; | ||
82 | |||
69 | 83 | ||
70 | this.currentPanelState[p.name] = {}; | 84 | this.currentPanelState[p.name] = {}; |
71 | this.currentPanelState.version = "1.0"; | 85 | this.currentPanelState.version = "1.0"; |
@@ -139,15 +153,17 @@ exports.PanelContainer = Montage.create(Component, { | |||
139 | 153 | ||
140 | _setPanelsSizes: { | 154 | _setPanelsSizes: { |
141 | value: function(panelActivated) { | 155 | value: function(panelActivated) { |
142 | var len = this.panels.length, setLocked = true; | 156 | var availablePanels = this.panelsAvailable(); |
157 | var len = availablePanels.length; | ||
158 | var setLocked = true; | ||
143 | 159 | ||
144 | for(var i = 0; i < len; i++) { | 160 | for(var i = 0; i < len; i++) { |
145 | if(this.panels[i] === panelActivated || panelActivated === null) { | 161 | if(availablePanels[i] === panelActivated || panelActivated === null) { |
146 | setLocked = false; | 162 | setLocked = false; |
147 | } | 163 | } |
148 | 164 | ||
149 | this.panels[i].locked = setLocked; | 165 | availablePanels[i].locked = setLocked; |
150 | this.panels[i].needsDraw = true; | 166 | availablePanels[i].needsDraw = true; |
151 | } | 167 | } |
152 | } | 168 | } |
153 | }, | 169 | }, |
@@ -155,7 +171,8 @@ exports.PanelContainer = Montage.create(Component, { | |||
155 | _redrawPanels: { | 171 | _redrawPanels: { |
156 | value: function(panelActivated, unlockPanels) { | 172 | value: function(panelActivated, unlockPanels) { |
157 | var maxHeight = this.element.offsetHeight, setLocked = true; | 173 | var maxHeight = this.element.offsetHeight, setLocked = true; |
158 | var len = this.panels.length; | 174 | var availablePanels = this.panelsAvailable(); |
175 | var len = availablePanels.length; | ||
159 | 176 | ||
160 | if(unlockPanels === true) { | 177 | if(unlockPanels === true) { |
161 | setLocked = false; | 178 | setLocked = false; |
@@ -169,7 +186,7 @@ exports.PanelContainer = Montage.create(Component, { | |||
169 | } | 186 | } |
170 | 187 | ||
171 | for(var i = 0; i < len; i++) { | 188 | for(var i = 0; i < len; i++) { |
172 | var obj = this['panel_'+i]; | 189 | var obj = availablePanels[i]; |
173 | 190 | ||
174 | if(obj === panelActivated) { | 191 | if(obj === panelActivated) { |
175 | setLocked = false; | 192 | 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..a1d5be0f --- /dev/null +++ b/js/panels/binding-panel.reel/binding-panel.css | |||
@@ -0,0 +1,22 @@ | |||
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 | |||
15 | .bindings-list { | ||
16 | -webkit-box-flex: 1; | ||
17 | padding: 0; | ||
18 | margin: 0; | ||
19 | } | ||
20 | .binding-panel-toolbar-container { | ||
21 | -webkit-box-flex: 0; | ||
22 | } | ||
diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html new file mode 100644 index 00000000..9a2834c7 --- /dev/null +++ b/js/panels/binding-panel.reel/binding-panel.html | |||
@@ -0,0 +1,80 @@ | |||
1 | <!DOCTYPE h |