diff options
author | Pushkar Joshi | 2012-03-02 12:24:33 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-03-02 12:24:33 -0800 |
commit | 4419209a1fd850ab468209b562b66b0242b42a9c (patch) | |
tree | bd7ca04f963f5a3aeb4b3c06db6f187903307d45 /js/panels/Panel.reel/Panel.js | |
parent | 1b68bb87c458877cb850a96d8a093d6064bc41dc (diff) | |
parent | ff0a956f33df034e9a009cfcb8999e469456a4b5 (diff) | |
download | ninja-4419209a1fd850ab468209b562b66b0242b42a9c.tar.gz |
Merge branch 'master' into brushtool
Diffstat (limited to 'js/panels/Panel.reel/Panel.js')
-rwxr-xr-x | js/panels/Panel.reel/Panel.js | 279 |
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 | ||
10 | exports.Panel = Montage.create(Component, { | 10 | exports.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 |