diff options
Diffstat (limited to 'js/panels/PanelContainer.reel/PanelContainer.js')
-rwxr-xr-x | js/panels/PanelContainer.reel/PanelContainer.js | 193 |
1 files changed, 193 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..51bd2df9 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.js | |||
@@ -0,0 +1,193 @@ | |||
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(p); | ||
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; | ||
91 | for(var i = 0; i< this.repeater.childComponents.length; i++ ) { | ||
92 | if (this.repeater.childComponents[i] === e._event.draggedComponent) { | ||
93 | draggedIndex = i; | ||
94 | } | ||
95 | |||
96 | if (this.repeater.childComponents[i] === e._event.droppedComponent) { | ||
97 | droppedIndex = i; | ||
98 | } | ||
99 | } | ||
100 | |||
101 | var panelRemoved = this.panelController.content.splice(draggedIndex,1); | ||
102 | this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); | ||
103 | //console.log(draggedIndex, droppedIndex); | ||
104 | this._setPanelsSizes(null); | ||
105 | } | ||
106 | }, | ||
107 | |||
108 | _setPanelsSizes: { | ||
109 | value: function(panelActivated) { | ||
110 | var len = this.panels.length, setLocked = true; | ||
111 | |||
112 | for(var i = 0; i < len; i++) { | ||
113 | if(this['panel_'+i] === panelActivated || panelActivated === null) { | ||
114 | setLocked = false; | ||
115 | } | ||
116 | |||
117 | this['panel_'+i].locked = setLocked; | ||
118 | this['panel_'+i].needsDraw = true; | ||
119 | } | ||
120 | } | ||
121 | }, | ||
122 | |||
123 | _redrawPanels: { | ||
124 | value: function(panelActivated, unlockPanels) { | ||
125 | var maxHeight = this.element.offsetHeight, setLocked = true; | ||
126 | var len = this.panels.length; | ||
127 | |||
128 | if(unlockPanels === true) { | ||
129 | setLocked = false; | ||
130 | } | ||
131 | |||
132 | var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; | ||
133 | |||
134 | for(var i = 0; i < len; i++) { | ||
135 | var obj = this['panel_'+i]; | ||
136 | |||
137 | if(obj === panelActivated) { | ||
138 | setLocked = false; | ||
139 | } else if(obj.collapsed) { | ||
140 | //Collapsed Ignore the rest of the code | ||
141 | } else { | ||
142 | if (setLocked) { | ||
143 | if((maxHeight - childrensMinHeights) - obj.height > 0 ) { | ||
144 | childrensMinHeights += obj.height - 26; | ||
145 | } else { | ||
146 | this.currentPanelState[obj.name].collapsed = obj.collapsed = true; | ||
147 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
148 | } | ||
149 | } else { | ||
150 | if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) { | ||
151 | childrensMinHeights += obj.minHeight - 26; | ||
152 | } else { | ||
153 | this.currentPanelState[obj.name].collapsed = obj.collapsed = true; | ||
154 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | obj.locked = setLocked; | ||
159 | } | ||
160 | } | ||
161 | }, | ||
162 | |||
163 | handleAction: { | ||
164 | value: function(e) { | ||
165 | var unlockPanels = true; | ||
166 | var afterPanel = false; | ||
167 | var panelName = e.target.parentComponent.name; | ||
168 | switch(e.target.identifier) { | ||
169 | case "btnCollapse": | ||
170 | this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed; | ||
171 | this.application.localStorage.setItem("panels", this.currentPanelState); | ||
172 | this._setPanelsSizes(e.target.parentComponent); | ||
173 | this._redrawPanels(e.target.parentComponent, unlockPanels); | ||
174 | break; | ||
175 | case "btnClose": | ||
176 | this.panelController.content.forEach(function(obj) { | ||
177 | if(afterPanel) { | ||
178 | if(obj.flexible) { | ||
179 | unlockPanels = false; | ||
180 | } | ||
181 | } | ||
182 | if (obj.name === panelName) { | ||
183 | afterPanel = true; | ||
184 | this.panelController.removeObjects(obj); | ||
185 | } | ||
186 | }); | ||
187 | this._redrawPanels(e.target.parentComponent, unlockPanels); | ||
188 | break; | ||
189 | } | ||
190 | } | ||
191 | } | ||
192 | |||
193 | }); \ No newline at end of file | ||