diff options
Diffstat (limited to 'js/panels/PanelContainer.reel/PanelContainer.js')
-rwxr-xr-x | js/panels/PanelContainer.reel/PanelContainer.js | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js new file mode 100755 index 00000000..dd720bd3 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.js | |||
@@ -0,0 +1,197 @@ | |||
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 | /* | ||
8 | Panel Container - A container for other panels | ||
9 | */ | ||
10 | var Montage = require("montage/core/core").Montage, | ||
11 | Component = require("montage/ui/component").Component; | ||
12 | |||
13 | exports.PanelContainer = Montage.create(Component, { | ||
14 | |||
15 | panelData: { | ||
16 | value: null | ||
17 | }, | ||
18 | |||
19 | // This will hold the current loaded panels. | ||
20 | panels: { | ||
21 | value: [] | ||
22 | }, | ||
23 | |||
24 | currentPanelState: { | ||
25 | value: {} | ||
26 | }, | ||
27 | |||
28 | templateDidLoad: { | ||
29 | value: function() { | ||
30 | |||
31 | var pLen, storedData; | ||
32 | |||
33 | // Loop through the panels to add to the repetition and get the saved state | ||
34 | pLen = this.panelData.panels.length; | ||
35 | |||
36 | // Get the saved panel state | ||
37 | storedData = this.application.localStorage.getItem("panels"); | ||
38 | |||
39 | for(var i = 0; i < pLen; i++) { | ||
40 | |||
41 | var p = this.panelData.panels[i]; | ||
42 | |||
43 | this['panel_'+i].name = p.name; | ||
44 | this['panel_'+i].height = p.height; | ||
45 | this['panel_'+i].minHeight= p.minHeight; | ||
46 | this['panel_'+i].maxHeight = p.maxHeight; | ||
47 | this['panel_'+i].flexible = p.flexible; | ||
48 | this['panel_'+i].modulePath = p.modulePath; | ||
49 | this['panel_'+i].moduleName = p.moduleName; | ||
50 | |||
51 | this.currentPanelState[p.name] = {}; | ||
52 | this.currentPanelState.version = "1.0"; | ||
53 | |||
54 | if(storedData && storedData[p.name]) { | ||
55 | this['panel_'+i].collapsed = storedData[p.name].collapsed; | ||
56 | } | ||
57 | |||
58 | this.currentPanelState[p.name].collapsed = this['panel_'+i].collapsed; | ||
59 | |||
60 | // Check if current panel is open when feature is enabled | ||
61 | this.panels.push(this['panel_'+i]); | ||
62 | } | ||
63 | |||
64 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
65 | |||
66 | |||
67 | } | ||
68 | }, | ||
69 | |||
70 | prepareForDraw: { | ||
71 | value: function() { | ||
72 | window.addEventListener("resize", this, false); | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | handlePanelResizing: { | ||
77 | value: function(e) { | ||
78 | this._setPanelsSizes(e.target); | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | handleResize: { | ||
83 | value: function(e) { | ||
84 | this._setPanelsSizes(null); | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | handleDropped: { | ||
89 | value: function(e) { | ||
90 | var draggedIndex, droppedIndex = 0, len = this.panels.length; | ||
91 | |||
92 | // console.log(e._event.draggedComponent); | ||
93 | for(var i = 0; i < len; i++) { | ||
94 | if(this.panels[i].name === e._event.draggedComponent.name) { | ||
95 | draggedIndex = i; // Actual component being dragged | ||
96 | } | ||
97 | |||
98 | if(this.panels[i].name === e._target.name) { | ||
99 | droppedIndex = i; | ||
100 | } | ||
101 | } | ||
102 | |||
103 | if(draggedIndex !== droppedIndex) { | ||
104 | // switch panels | ||
105 | this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); | ||
106 | } | ||
107 | |||
108 | this._setPanelsSizes(null); | ||
109 | } | ||
110 | }, | ||
111 | |||
112 | _setPanelsSizes: { | ||
113 | value: function(panelActivated) { | ||
114 | var len = this.panels.length, setLocked = true; | ||
115 | |||
116 | for(var i = 0; i < len; i++) { | ||
117 | if(this['panel_'+i] === panelActivated || panelActivated === null) { | ||
118 | setLocked = false; | ||
119 | } | ||
120 | |||
121 | this['panel_'+i].locked = setLocked; | ||
122 | this['panel_'+i].needsDraw = true; | ||
123 | } | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | _redrawPanels: { | ||
128 | value: function(panelActivated, unlockPanels) { | ||
129 | var maxHeight = this.element.offsetHeight, setLocked = true; | ||
130 | var len = this.panels.length; | ||
131 | |||
132 | if(unlockPanels === true) { | ||
133 | setLocked = false; | ||
134 | } | ||
135 | |||
136 | var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; | ||
137 | |||
138 | for(var i = 0; i < len; i++) { | ||
139 | var obj = this['panel_'+i]; | ||
140 | |||
141 | if(obj === panelActivated) { | ||
142 | setLocked = false; | ||
143 | } else if(obj.collapsed) { | ||
144 | //Collapsed Ignore the rest of the code | ||
145 | } else { | ||
146 | if (setLocked) { | ||
147 | if((maxHeight - childrensMinHeights) - obj.height > 0 ) { | ||
148 | childrensMinHeights += obj.height - 26; | ||
149 | } else { | ||
150 | this.currentPanelState[obj.name].collapsed = obj.collapsed = true; | ||
151 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
152 | } | ||
153 | } else { | ||
154 | if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) { | ||
155 | childrensMinHeights += obj.minHeight - 26; | ||
156 | } else { | ||
157 | this.currentPanelState[obj.name].collapsed = obj.collapsed = true; | ||
158 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
159 | } | ||
160 | } | ||
161 | } | ||
162 | obj.locked = setLocked; | ||
163 | } | ||
164 | } | ||
165 | }, | ||
166 | |||
167 | handleAction: { | ||
168 | value: function(e) { | ||
169 | var unlockPanels = true; | ||
170 | var afterPanel = false; | ||
171 | var panelName = e.target.parentComponent.name; | ||
172 | switch(e.target.identifier) { | ||
173 | case "btnCollapse": | ||
174 | this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed; | ||
175 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
176 | this._setPanelsSizes(e.target.parentComponent); | ||
177 | this._redrawPanels(e.target.parentComponent, unlockPanels); | ||
178 | break; | ||
179 | case "btnClose": | ||
180 | this.panelController.content.forEach(function(obj) { | ||
181 | if(afterPanel) { | ||
182 | if(obj.flexible) { | ||
183 | unlockPanels = false; | ||
184 | } | ||
185 | } | ||
186 | if (obj.name === panelName) { | ||
187 | afterPanel = true; | ||
188 | this.panelController.removeObjects(obj); | ||
189 | } | ||
190 | }); | ||
191 | this._redrawPanels(e.target.parentComponent, unlockPanels); | ||
192 | break; | ||
193 | } | ||
194 | } | ||
195 | } | ||
196 | |||
197 | }); \ No newline at end of file | ||