aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Panel.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/panels/Panel.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/panels/Panel.reel')
-rw-r--r--js/panels/Panel.reel/Panel.html62
-rw-r--r--js/panels/Panel.reel/Panel.js233
2 files changed, 295 insertions, 0 deletions
diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html
new file mode 100644
index 00000000..dc76d871
--- /dev/null
+++ b/js/panels/Panel.reel/Panel.html
@@ -0,0 +1,62 @@
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 <script type="text/montage-serialization">
10 {
11 "resizer1": {
12 "module": "js/panels/Resizer",
13 "name": "Resizer",
14 "properties": {
15 "element": {"#": "resizeBar"},
16 "panel": {"#": "panel"},
17 "isVertical": true
18 }
19 },
20
21 "slot1": {
22 "module": "montage/ui/slot.reel",
23 "name": "Slot",
24 "properties": {
25 "element": {"#": "panelObject"}
26 }
27 },
28
29 "owner": {
30 "module": "js/panels/Panel.reel",
31 "name": "Panel",
32 "properties": {
33 "element": {"#": "panel"},
34 "resizer": {"@": "resizer1"},
35 "panelContent": {"@": "slot1"}
36
37 }
38 }
39 }
40 </script>
41
42 </head>
43<body>
44
45<article id="panel">
46 <div id="head" class="head">
47 <span class="arrowIcon"></span>
48 <span class="panelTitle">Panel</span>
49 <span class="closeBtn"></span>
50 </div>
51 <div class="panelBody">
52 <div class="panelBodyContent">
53 <div id="panelObject" class="panelObjects">
54
55 </div>
56 </div>
57 </div>
58 <div id="resizeBar" class="resizeBar"></div>
59</article>
60
61</body>
62</html> \ No newline at end of file
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
new file mode 100644
index 00000000..efa287c5
--- /dev/null
+++ b/js/panels/Panel.reel/Panel.js
@@ -0,0 +1,233 @@
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
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9
10exports.Panel = Montage.create(Component, {
11
12
13 reelDidLoad: {
14 value: function() {
15 }
16 },
17
18 collapsedHeight: {
19 value:26
20 },
21
22 _isFirstDraw: {
23 value:false
24 },
25
26 _panelBase: {
27 value: null
28 },
29
30 panelBase: {
31 get: function()
32 {
33 return this._panelBase;
34 },
35 set: function(value)
36 {
37 this._panelBase = value;
38 this.needsDraw = true;
39 }
40 },
41
42 _panelContent: {
43 value: null
44 },
45
46 panelContent: {
47 get: function()
48 {
49 return this._panelContent;
50 },
51 set: function(value)
52 {
53 if (this._panelContent === value) {
54 return;
55 }
56 this._panelContent = value;
57 this.needsDraw = true;
58 }
59 },
60
61 collapseToggle: {
62 value: function() {
63 if (this.panelBase.forcedCollapse) {
64 this.panelBase.forcedCollapse = false;
65 this.panelBase.collapsed = false;
66 this.needsDraw = true;
67
68 } else {
69 this.panelBase.collapsed = !this.panelBase.collapsed;
70 this.needsDraw = true;
71 }
72 NJevent("panelCollapsed", this);
73 }
74},
75
76 closePanel: {
77 value: function() {
78 NJevent("panelClose", this);
79 }
80 },
81
82 handleMouseover: {
83 value: function() {
84 this.element.draggable = true;
85 }
86 },
87
88 handleMouseout: {
89 value: function() {
90 this.element.draggable = false;
91 }
92 },
93
94 _resizer: {
95 value: null
96 },
97
98 resizer: {
99 get: function() {
100 return this._resizer;
101 },
102 set: function(val) {
103 this._resizer = val;
104 }
105 },
106
107
108 resized: {
109 value: function() {
110 this.panelBase.contentHeight = parseInt(this.element.style.height);
111 this.needsDraw = true;
112 }
113 },
114
115 //TODO: Find out why without This following function drop event wont fire ???
116 handleEvent: {
117 value:function(e) {
118 e.preventDefault();
119 e.stopImmediatePropagation();
120
121 }
122 },
123
124 captureDragover: {
125 value:function(e) {
126 e.preventDefault();
127 e.stopImmediatePropagation();
128 this.element.style.backgroundColor = "#917B56";
129 }
130 },
131
132 captureDragleave: {
133 value: function() {
134 this.element.style.backgroundColor = "";
135 }
136 },
137
138 handleDrop: {
139 value:function(e) {
140 e.stopPropagation(); // Stops some browsers from redirecting.
141 e.preventDefault();
142 this.element.style.backgroundColor = "";
143 NJevent("panelOrderChanged", this);
144 }
145 },
146
147 handleDragstart: {
148 value:function(e) {
149 e.dataTransfer.effectAllowed = 'move';
150 e.dataTransfer.setData('text/html', this.element.innerHTML);
151 NJevent("panelSelected", this);
152 }
153 },
154
155 handleDragEnter: {
156 value: function(e) {
157 this.element.classList.add("over");
158 }
159 },
160
161 handleDragend: {
162 value:function() {
163
164 }
165 },
166
167
168 prepareForDraw: {
169 value:function() {
170 if (!this._isFirstDraw) {
171 this._isFirstDraw = true;
172
173 // Initialize Panel
174 // Drag Drop Functions
175 this.element.addEventListener("drop", this, false);
176 this.element.addEventListener("dragover", this, true);
177 this.element.addEventListener("dragleave", this, true);
178 this.element.addEventListener("dragenter", this, false);
179 this.element.addEventListener("dragstart", this, false);