aboutsummaryrefslogtreecommitdiff
path: root/js/panels/PanelContainer.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/PanelContainer.reel')
-rwxr-xr-xjs/panels/PanelContainer.reel/PanelContainer.html110
-rwxr-xr-xjs/panels/PanelContainer.reel/PanelContainer.js197
2 files changed, 307 insertions, 0 deletions
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html
new file mode 100755
index 00000000..251e86e4
--- /dev/null
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -0,0 +1,110 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html lang="en">
8<head>
9
10 <script type="text/montage-serialization">
11 {
12 "panelData": {
13 "module": "js/data/panels-data",
14 "name": "PanelsData"
15 },
16
17 "panel_0": {
18 "module": "js/panels/Panel.reel",
19 "name": "Panel",
20 "properties": {
21 "element": {"#": "panel_0"}
22 }
23 },
24
25 "panel_1": {
26 "module": "js/panels/Panel.reel",
27 "name": "Panel",
28 "properties": {
29 "element": {"#": "panel_1"}
30 }
31 },
32
33 "panel_2": {
34 "module": "js/panels/Panel.reel",
35 "name": "Panel",
36 "properties": {
37 "element": {"#": "panel_2"}
38 }
39 },
40
41 "panel_3": {
42 "module": "js/panels/Panel.reel",
43 "name": "Panel",
44 "properties": {
45 "element": {"#": "panel_3"}
46 }
47 },
48
49 "panel_4": {
50 "module": "js/panels/Panel.reel",
51 "name": "Panel",
52 "properties": {
53 "element": {"#": "panel_4"}
54 }
55 },
56
57 "panel_5": {
58 "module": "js/panels/Panel.reel",
59 "name": "Panel",
60 "properties": {
61 "element": {"#": "panel_5"}
62 }
63 },
64
65 "owner": {
66 "module": "js/panels/PanelContainer.reel",
67 "name": "PanelContainer",
68 "properties": {
69 "element": {"#": "panelContainer"},
70 "panelData": {"@": "panelData" },
71 "panelController" : {"@": "PanelController"},
72 "panel_0": {"@": "panel_0"},
73 "panel_1": {"@": "panel_1"},
74 "panel_2": {"@": "panel_2"},
75 "panel_3": {"@": "panel_3"},
76 "panel_4": {"@": "panel_4"},
77 "panel_5": {"@": "panel_5"}
78 },
79 "listeners": [
80 {
81 "type": "panelResizing",
82 "listener": {"@": "owner"}
83 },
84 {
85 "type": "action",
86 "listener": {"@": "owner"}
87 },
88 {
89 "type": "dropped",
90 "listener": {"@": "owner"}
91 }
92 ]
93 }
94 }
95 </script>
96
97 </head>
98<body>
99 <section id="panelContainer">
100 <article id="panels" class="panels">
101 <article data-montage-id="panel_0"></article>
102 <article data-montage-id="panel_1"></article>
103 <article data-montage-id="panel_2"></article>
104 <article data-montage-id="panel_3"></article>
105 <article data-montage-id="panel_4"></article>
106 <article data-montage-id="panel_5"></article>
107 </article>
108 </section>
109</body>
110</html> \ No newline at end of file
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>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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/*
8Panel Container - A container for other panels
9*/
10var Montage = require("montage/core/core").Montage,
11 Component = require("montage/ui/component").Component;
12
13exports.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