diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/ninja.reel/ninja.js | 53 | ||||
-rwxr-xr-x | js/panels/Splitter.js | 13 |
2 files changed, 37 insertions, 29 deletions
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index ca094936..c3e00911 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js | |||
@@ -24,7 +24,7 @@ exports.Ninja = Montage.create(Component, { | |||
24 | }, | 24 | }, |
25 | 25 | ||
26 | _isResizing: { | 26 | _isResizing: { |
27 | value: false | 27 | value: null |
28 | }, | 28 | }, |
29 | _resizedHeight : { | 29 | _resizedHeight : { |
30 | value: 0 | 30 | value: 0 |
@@ -40,7 +40,6 @@ exports.Ninja = Montage.create(Component, { | |||
40 | set: function(val) { | 40 | set: function(val) { |
41 | if(this._height != val) { | 41 | if(this._height != val) { |
42 | this._height = val; | 42 | this._height = val; |
43 | this.needsDraw = true; | ||
44 | } | 43 | } |
45 | 44 | ||
46 | } | 45 | } |
@@ -60,7 +59,6 @@ exports.Ninja = Montage.create(Component, { | |||
60 | set: function(val) { | 59 | set: function(val) { |
61 | if(this._width != val) { | 60 | if(this._width != val) { |
62 | this._width = val; | 61 | this._width = val; |
63 | this.needsDraw = true; | ||
64 | } | 62 | } |
65 | 63 | ||
66 | } | 64 | } |
@@ -71,6 +69,8 @@ exports.Ninja = Montage.create(Component, { | |||
71 | this.isResizing = true; | 69 | this.isResizing = true; |
72 | this.height = parseInt(this.timeline.element.offsetHeight); | 70 | this.height = parseInt(this.timeline.element.offsetHeight); |
73 | this.width = parseInt(this.rightPanelContainer.offsetWidth); | 71 | this.width = parseInt(this.rightPanelContainer.offsetWidth); |
72 | this.rightPanelContainer.classList.add("disableTransition"); | ||
73 | this.timeline.element.classList.add("disableTransition"); | ||
74 | this.needsDraw = true; | 74 | this.needsDraw = true; |
75 | } | 75 | } |
76 | }, | 76 | }, |
@@ -79,7 +79,6 @@ exports.Ninja = Montage.create(Component, { | |||
79 | value:function(e) { | 79 | value:function(e) { |
80 | this._resizedHeight = e._event.dY; | 80 | this._resizedHeight = e._event.dY; |
81 | this._resizedWidth = e._event.dX; | 81 | this._resizedWidth = e._event.dX; |
82 | console.log("resizing"); | ||
83 | this.stage.resizeCanvases = true; | 82 | this.stage.resizeCanvases = true; |
84 | this.needsDraw = true; | 83 | this.needsDraw = true; |
85 | } | 84 | } |
@@ -87,13 +86,17 @@ exports.Ninja = Montage.create(Component, { | |||
87 | 86 | ||
88 | handleResizeEnd: { | 87 | handleResizeEnd: { |
89 | value: function(e) { | 88 | value: function(e) { |
90 | this.height -= this._resizedHeight; | 89 | // this.height -= this._resizedHeight; |
91 | this.width -= this._resizedWidth; | 90 | // this.width -= this._resizedWidth; |
92 | this.stage.resizeCanvases = true; | 91 | this.stage.resizeCanvases = true; |
93 | this._resizedHeight = 0; | 92 | this._resizedHeight = 0; |
94 | this._resizedWidth = 0; | 93 | this._resizedWidth = 0; |
95 | this.isResizing = false; | 94 | this.isResizing = false; |
96 | this.needsDraw = true; | 95 | this.needsDraw = true; |
96 | this.rightPanelContainer.classList.remove("disableTransition"); | ||
97 | this.timeline.element.classList.remove("disableTransition"); | ||
98 | this.height = this.timeline.element.offsetHeight; | ||
99 | this.width = this.rightPanelContainer.offsetWidth; | ||
97 | } | 100 | } |
98 | }, | 101 | }, |
99 | 102 | ||
@@ -106,6 +109,7 @@ exports.Ninja = Montage.create(Component, { | |||
106 | this.needsDraw = true; | 109 | this.needsDraw = true; |
107 | this.timelineSplitter.collapsed = false; | 110 | this.timelineSplitter.collapsed = false; |
108 | this.panelSplitter.collapsed = false; | 111 | this.panelSplitter.collapsed = false; |
112 | this.stage.resizeCanvases = true; | ||
109 | } | 113 | } |
110 | }, | 114 | }, |
111 | 115 | ||
@@ -167,30 +171,28 @@ exports.Ninja = Montage.create(Component, { | |||
167 | 171 | ||
168 | willDraw: { | 172 | willDraw: { |
169 | value: function() { | 173 | value: function() { |
170 | if (this.height === null) { | 174 | |
171 | this.height = parseInt(this.timeline.element.offsetHeight); | ||
172 | } | ||
173 | if (this.width === null) { | ||
174 | this.width = parseInt(this.rightPanelContainer.offsetWidth); | ||
175 | } | ||
176 | } | 175 | } |
177 | }, | 176 | }, |
178 | 177 | ||
179 | draw: { | 178 | draw: { |
180 | value: function() { | 179 | value: function() { |
181 | if (this.height - this._resizedHeight < 46) { | 180 | if(this.isResizing) { |
182 | this.timelineSplitter.collapsed = true; | 181 | if (this.height - this._resizedHeight < 46) { |
183 | } else { | 182 | this.timelineSplitter.collapsed = true; |
184 | this.timelineSplitter.collapsed = false; | 183 | } else { |
185 | } | 184 | this.timelineSplitter.collapsed = false; |
186 | if (this.width - this._resizedWidth < 30) { | 185 | } |
187 | this.panelSplitter.collapsed = true; | 186 | this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; |
188 | } else { | 187 | |
189 | this.panelSplitter.collapsed = false; | 188 | if (this.width - this._resizedWidth < 30) { |
189 | this.panelSplitter.collapsed = true; | ||
190 | } else { | ||
191 | this.panelSplitter.collapsed = false; | ||
192 | } | ||
193 | this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; | ||
190 | } | 194 | } |
191 | 195 | ||
192 | this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; | ||
193 | this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; | ||
194 | } | 196 | } |
195 | }, | 197 | }, |
196 | 198 | ||
@@ -200,10 +202,7 @@ exports.Ninja = Montage.create(Component, { | |||
200 | 202 | ||
201 | didDraw: { | 203 | didDraw: { |
202 | value: function() { | 204 | value: function() { |
203 | if (!this.isResizing) { | 205 | |
204 | this.height = this.timeline.element.offsetHeight; | ||
205 | this.width = this.rightPanelContainer.offsetWidth; | ||
206 | } | ||
207 | if(!this._didDraw) { | 206 | if(!this._didDraw) { |
208 | if (!this.application.ninja.coreIoApi.ioServiceDetected) { | 207 | if (!this.application.ninja.coreIoApi.ioServiceDetected) { |
209 | var check = this.application.ninja.coreIoApi.cloudAvailable(); | 208 | var check = this.application.ninja.coreIoApi.cloudAvailable(); |
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 6791e0d5..ac45b4ba 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js | |||
@@ -94,7 +94,11 @@ exports.Splitter = Montage.create(Component, { | |||
94 | handleClick : { | 94 | handleClick : { |
95 | value: function() { | 95 | value: function() { |
96 | if (!this.disabled) { | 96 | if (!this.disabled) { |
97 | this.panel.addEventListener("webkitTransitionEnd", this, false); | 97 | if(this.panel.element) { |
98 | this.panel.element.addEventListener("webkitTransitionEnd", this, false); | ||
99 | } else { | ||
100 | this.panel.addEventListener("webkitTransitionEnd", this, false); | ||
101 | } | ||
98 | this.collapsed = !this.collapsed; | 102 | this.collapsed = !this.collapsed; |
99 | this.needsDraw = true; | 103 | this.needsDraw = true; |
100 | } | 104 | } |
@@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, { | |||
103 | 107 | ||
104 | handleWebkitTransitionEnd: { | 108 | handleWebkitTransitionEnd: { |
105 | value: function() { | 109 | value: function() { |
106 | this.panel.removeEventListener("webkitTransitionEnd", this, false); | 110 | if(this.panel.element) { |
111 | this.panel.element.removeEventListener("webkitTransitionEnd", this, false); | ||
112 | } else { | ||
113 | this.panel.removeEventListener("webkitTransitionEnd", this, false); | ||
114 | } | ||
115 | |||
107 | this.application.ninja.stage.resizeCanvases = true; | 116 | this.application.ninja.stage.resizeCanvases = true; |
108 | } | 117 | } |
109 | }, | 118 | }, |