aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Panel.reel/Panel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Panel.reel/Panel.js')
-rwxr-xr-xjs/panels/Panel.reel/Panel.js279
1 files changed, 113 insertions, 166 deletions
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index c8dd0456..e0bf3f18 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -9,227 +9,174 @@ var Component = require("montage/ui/component").Component;
9 9
10exports.Panel = Montage.create(Component, { 10exports.Panel = Montage.create(Component, {
11 11
12 12 name: { value: "Panel" },
13 reelDidLoad: { 13 collapsedHeight: {value: 26},
14 value: function() { 14 _collapsed: {value: false},
15 } 15 _height: { value: 200 },
16 }, 16 minHeight: {value: 200 },
17 17 maxHeight: { value: null},
18 collapsedHeight: { 18 flexible: {value: true},
19 value:26 19 _locked: { value: false},
20 }, 20 isResizing: {value: false },
21 21 resizer: {value: null },
22 _isFirstDraw: { 22 modulePath: {value: null},
23 value:false 23 moduleName: {value: null},
24 }, 24 _contentComponent: {value: null},
25 25
26 _panelBase: { 26 contentComponent: {
27 value: null 27 get: function() {
28 }, 28 return this._contentComponent;
29
30 panelBase: {
31 get: function()
32 {
33 return this._panelBase;
34 }, 29 },
35 set: function(value) 30 set: function(val) {
36 { 31 if (val !== null && val !== this._contentComponent) {
37 this._panelBase = value; 32 this.panelContent.content = val;
38 this.needsDraw = true; 33 this.panelContent.needsDraw = true;
34 this._contentComponent = val;
35 }
39 } 36 }
40 }, 37 },
41 38
42 _panelContent: { 39 collapsed: {
43 value: null 40 get: function() {
44 }, 41 return this._collapsed;
45
46 panelContent: {
47 get: function()
48 {
49 return this._panelContent;
50 }, 42 },
51 set: function(value) 43 set: function(val) {
52 { 44 if (this._collapsed !== val) {
53 if (this._panelContent === value) { 45 this._collapsed = val;
54 return; 46 this.needsDraw = true;
55 } 47 }
56 this._panelContent = value;
57 this.needsDraw = true;
58 } 48 }
59 }, 49 },
60 50
61 collapseToggle: { 51 height: {
62 value: function() { 52 get: function() {
63 if (this.panelBase.forcedCollapse) { 53 if (this._height < this.minHeight) {
64 this.panelBase.forcedCollapse = false; 54 this._height = this.minHeight;
65 this.panelBase.collapsed = false; 55 }
66 this.needsDraw = true; 56 return this._height;
67 57 },
68 } else { 58 set: function(val) {
69 this.panelBase.collapsed = !this.panelBase.collapsed; 59 if(this._height !== val) {
60 this._height = val;
70 this.needsDraw = true; 61 this.needsDraw = true;
71 } 62 }
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 } 63 }
92 }, 64 },
93 65
94 _resizer: { 66 _resizedHeight: {
95 value: null 67 value: 0
96 }, 68 },
97 69
98 resizer: { 70 locked: {
99 get: function() { 71 get: function() {
100 return this._resizer; 72 return this._locked;
101 }, 73 },
102 set: function(val) { 74 set: function(val) {
103 this._resizer = val; 75 if (this.flexible) {
76 this._locked = val;
77 this.needsDraw = true;
78 }
104 } 79 }
105 }, 80 },
106 81
107 82 handleBtnCollapseAction: {
108 resized: {
109 value: function() { 83 value: function() {
110 this.panelBase.contentHeight = parseInt(this.element.style.height); 84 this.collapsed = !this.collapsed;
111 this.needsDraw = true; 85 this.needsDraw = true;
112 } 86 }
113 }, 87 },
114 88
115 //TODO: Find out why without This following function drop event wont fire ??? 89 handleBtnCloseAction: {
116 handleEvent: { 90 value: function() {
117 value:function(e) { 91 this.panelContent.content = null;
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 } 92 }
130 }, 93 },
131 94
132 captureDragleave: { 95 prepareForDraw: {
133 value: function() { 96 value: function() {
134 this.element.style.backgroundColor = ""; 97 //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call;
98 this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create();
99 var myContent;
100 var that = this;
101
102 myContent = require.async(this.modulePath)
103 .then(function(panelContent) {
104 var componentRequire = panelContent[that.moduleName];
105 that.contentComponent = componentRequire.create();
106 })
107 .end();
135 } 108 }
136 }, 109 },
137 110
138 handleDrop: { 111 handleResizeStart: {
139 value:function(e) { 112 value:function(e) {
140 e.stopPropagation(); // Stops some browsers from redirecting. 113 this.isResizing = true;
141 e.preventDefault(); 114 this.needsDraw = true;
142 this.element.style.backgroundColor = "";
143 NJevent("panelOrderChanged", this);
144 } 115 }
145 }, 116 },
146 117
147 handleDragstart: { 118 handleResizeMove: {
148 value:function(e) { 119 value:function(e) {
149 e.dataTransfer.effectAllowed = 'move'; 120 this._resizedHeight = e._event.dY;
150 e.dataTransfer.setData('text/html', this.element.innerHTML); 121 this.needsDraw = true;
151 NJevent("panelSelected", this);
152 } 122 }
153 }, 123 },
154 124
155 handleDragEnter: { 125 handleResizeEnd: {
156 value: function(e) { 126 value: function(e) {
157 this.element.classList.add("over"); 127 this.height += this._resizedHeight;
158 } 128 this._resizedHeight = 0;
159 }, 129 this.isResizing = false;
160 130 this.needsDraw = true;
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);