diff options
author | Nivesh Rajbhandari | 2012-03-09 09:28:08 -0800 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-03-09 09:28:08 -0800 |
commit | c792c7a82a6247524d3c5bfab5eaa1258931a401 (patch) | |
tree | df06b94977920daa6450406b1edca380f8731b90 /js/panels/Timeline | |
parent | 86784888a98a05523dbedcbe32fd4dea336878e7 (diff) | |
parent | 3a9c7a57a227a36ec47c6635fc6a0bd4c4b7f9c3 (diff) | |
download | ninja-c792c7a82a6247524d3c5bfab5eaa1258931a401.tar.gz |
Merge branch 'refs/heads/ninja-internal' into WebGLFixes
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 70 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 129 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 190 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 14 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 560 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 136 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 138 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 10 |
8 files changed, 675 insertions, 572 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index ad490c2e..88314c8b 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js | |||
@@ -22,7 +22,7 @@ | |||
22 | * the transition will not work. Subsequent collapses (and expansions) will transition as expected. | 22 | * the transition will not work. Subsequent collapses (and expansions) will transition as expected. |
23 | * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to | 23 | * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to |
24 | * false for collapsers that will only be operated remotely. | 24 | * false for collapsers that will only be operated remotely. |
25 | * toggle(): Manually toggle the expand/collapse of the content. | 25 | * isToggling: Set this anually toggle the expand/collapse of the content. |
26 | * | 26 | * |
27 | */ | 27 | */ |
28 | var Montage = require("montage/core/core").Montage, | 28 | var Montage = require("montage/core/core").Montage, |
@@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage, | |||
68 | }, | 68 | }, |
69 | 69 | ||
70 | _bypassAnimation : { | 70 | _bypassAnimation : { |
71 | value: false | 71 | value: true |
72 | }, | 72 | }, |
73 | bypassAnimation: { | 73 | bypassAnimation: { |
74 | get: function() { | 74 | get: function() { |
@@ -76,8 +76,12 @@ var Montage = require("montage/core/core").Montage, | |||
76 | }, | 76 | }, |
77 | set: function(newVal) { | 77 | set: function(newVal) { |
78 | this._bypassAnimation= newVal; | 78 | this._bypassAnimation= newVal; |
79 | //console.log('bypassAnimation setter ' + newVal) | ||
79 | } | 80 | } |
80 | }, | 81 | }, |
82 | _oldAnimated : { | ||
83 | value: false | ||
84 | }, | ||
81 | 85 | ||
82 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. | 86 | // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. |
83 | // Note that this CSS class must be defined in your style sheet with the desired transitions. | 87 | // Note that this CSS class must be defined in your style sheet with the desired transitions. |
@@ -104,7 +108,7 @@ var Montage = require("montage/core/core").Montage, | |||
104 | set: function(newVal) { | 108 | set: function(newVal) { |
105 | if (newVal !== this._isCollapsed) { | 109 | if (newVal !== this._isCollapsed) { |
106 | this._isCollapsed = newVal; | 110 | this._isCollapsed = newVal; |
107 | this.needsDraw = true; | 111 | //this.needsDraw = true; |
108 | } | 112 | } |
109 | 113 | ||
110 | } | 114 | } |
@@ -144,28 +148,28 @@ var Montage = require("montage/core/core").Montage, | |||
144 | this._isLabelClickable = newVal; | 148 | this._isLabelClickable = newVal; |
145 | } | 149 | } |
146 | }, | 150 | }, |
147 | 151 | ||
148 | // labelClickEvent: an event to fire when the label is clicked. | 152 | // isToggling: Bindable property. Set this (to anything) to trigger a toggle. |
149 | _labelClickEvent: { | 153 | _isToggling: { |
150 | value: false | 154 | serializable: true, |
155 | value: true | ||
151 | }, | 156 | }, |
152 | labelClickEvent: { | 157 | isToggling: { |
158 | serializable: true, | ||
153 | get: function() { | 159 | get: function() { |
154 | return this._labelClickEvent; | 160 | return this._isToggling; |
155 | }, | 161 | }, |
156 | set: function(newVal) { | 162 | set: function(newVal) { |
157 | this._labelClickEvent = newVal; | 163 | if (newVal !== this._isToggling) { |
158 | } | 164 | this._isToggling = newVal; |
159 | }, | 165 | |
160 | 166 | if (this.bypassAnimation === true) { | |
161 | // toggle: manually toggle the collapser. | 167 | this._oldAnimated = this.isAnimated; |
162 | toggle: { | 168 | this.isAnimated = false; |
163 | value: function() { | 169 | } |
164 | if (this.bypassAnimation) { | 170 | this.myContent.classList.remove(this.transitionClass); |
165 | this.isAnimated = false; | 171 | this.handleCollapserLabelClick(); |
166 | } | 172 | } |
167 | this.myContent.classList.remove(this.transitionClass); | ||
168 | this.handleCollapserLabelClick(); | ||
169 | } | 173 | } |
170 | }, | 174 | }, |
171 | 175 | ||
@@ -175,19 +179,14 @@ var Montage = require("montage/core/core").Montage, | |||
175 | 179 | ||
176 | prepareForDraw: { | 180 | prepareForDraw: { |
177 | value: function() { | 181 | value: function() { |
178 | // Add a click listener to the label for expand/collapse | ||
179 | if (this.isLabelClickable) { | ||
180 | this.clicker.identifier = "collapserLabel"; | ||
181 | this.clicker.addEventListener("click", this, false); | ||
182 | } | ||
183 | 182 | ||
184 | // Get the original value of the overflow property: | 183 | // Get the original value of the overflow property: |
185 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); | 184 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); |
185 | if (this.isCollapsed === false) { | ||
186 | this.myContent.style.height = "auto"; | ||
187 | } | ||
186 | 188 | ||
187 | /* | 189 | |
188 | * Removed because of expense. This disables the feature of having the | ||
189 | * component dynamically expand/collapse the content on init based on properties; | ||
190 | * Now default state of component must be set in CSS. | ||
191 | // If the content area is supposed to start out collapsed: | 190 | // If the content area is supposed to start out collapsed: |
192 | if (this.isCollapsed) { | 191 | if (this.isCollapsed) { |
193 | this.myContent.style.height = "0px"; | 192 | this.myContent.style.height = "0px"; |
@@ -202,7 +201,6 @@ var Montage = require("montage/core/core").Montage, | |||
202 | this.myContent.classList.remove(this.collapsedClass); | 201 | this.myContent.classList.remove(this.collapsedClass); |
203 | this.clicker.classList.remove(this.collapsedClass); | 202 | this.clicker.classList.remove(this.collapsedClass); |
204 | } | 203 | } |
205 | */ | ||
206 | } | 204 | } |
207 | }, | 205 | }, |
208 | draw: { | 206 | draw: { |
@@ -285,11 +283,6 @@ var Montage = require("montage/core/core").Montage, | |||
285 | 283 | ||
286 | // Set the component to run its draw cycle. | 284 | // Set the component to run its draw cycle. |
287 | this.needsDraw = true; | 285 | this.needsDraw = true; |
288 | |||
289 | // Dispatch my labelClick event | ||
290 | if (this.labelClickEvent) { | ||
291 | this.labelClickEvent(this.bypassAnimation); | ||
292 | } | ||
293 | 286 | ||
294 | } | 287 | } |
295 | }, | 288 | }, |
@@ -320,9 +313,10 @@ var Montage = require("montage/core/core").Montage, | |||
320 | 313 | ||
321 | } | 314 | } |
322 | 315 | ||
323 | if (this.bypassAnimation) { | 316 | if (this.bypassAnimation === true) { |
324 | this.bypassAnimation = false; | 317 | this.isAnimated = this._oldAnimated; |
325 | this.isAnimated = true; | 318 | } else { |
319 | this.bypassAnimation = true; | ||
326 | } | 320 | } |
327 | } | 321 | } |
328 | } | 322 | } |
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 14315f8d..79b522ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -17,7 +17,12 @@ | |||
17 | "element": {"#": "layer"}, | 17 | "element": {"#": "layer"}, |
18 | "styleRepetition" : {"@":"repetition1"}, | 18 | "styleRepetition" : {"@":"repetition1"}, |
19 | "dynamicLayerName" : {"@":"dtext1"}, | 19 | "dynamicLayerName" : {"@":"dtext1"}, |
20 | "slotStyle" : {"@":"slot1"} | 20 | "slotStyle" : {"@":"slot1"}, |
21 | "mainCollapser" : {"@" : "mainCollapser"}, | ||
22 | "positionCollapser" : {"@" : "positionCollapser"}, | ||
23 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
24 | "styleCollapser" : {"@" : "styleCollapser"}, | ||
25 | "clickerMain" : {"#" : "clicker-main"} | ||
21 | } | 26 | } |
22 | }, | 27 | }, |
23 | "dtext1" : { | 28 | "dtext1" : { |
@@ -225,6 +230,90 @@ | |||
225 | "oneway": false | 230 | "oneway": false |
226 | } | 231 | } |
227 | } | 232 | } |
233 | }, | ||
234 | |||
235 | "mainCollapser" : { | ||
236 | "module" : "js/panels/timeline/Collapser.js", | ||
237 | "name" : "Collapser", | ||
238 | "properties" : { | ||
239 | "element" : {"#" : "content-main"}, | ||
240 | "myContent" : {"#" : "content-main"}, | ||
241 | "contentHeight" : 60, | ||
242 | "isLabelClickable" : true, | ||
243 | "clicker" : {"#" : "clicker-main"}, | ||
244 | "isCollapsed" : true, | ||
245 | "isAnimated" : true |