aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorhwc4872012-03-06 11:41:28 -0800
committerhwc4872012-03-06 11:41:28 -0800
commit5e640e24c3b4658b8060cde837ae98dabd3ba5bf (patch)
tree527f183b5e485282ce1efe15d96b6b8ddc26801e /js/panels/Timeline
parent182f05f2f7a8f43f1589c9b8c15bf00d6e983676 (diff)
parent2815adfd7c19b3dff89dc3e1bda9af8d30dca8d6 (diff)
downloadninja-5e640e24c3b4658b8060cde837ae98dabd3ba5bf.tar.gz
Merge branch 'TimelineUber' of github.com:imix23ways/ninja-internal into integration
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js31
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html14
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js163
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css73
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html19
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js389
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html5
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js199
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js24
10 files changed, 665 insertions, 254 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 5de884a9..d161cdd7 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -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() {
@@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage,
169 } 169 }
170 }, 170 },
171 171
172 _isToggling: {
173 serializable: true,
174 value: true
175 },
176 isToggling: {
177 serializable: true,
178 get: function() {
179 return this._isToggling;
180 },
181 set: function(newVal) {
182 if (newVal !== this._isToggling) {
183 this._isToggling = newVal;
184
185 if (this.bypassAnimation) {
186 this.isAnimated = false;
187 }
188 this.myContent.classList.remove(this.transitionClass);
189 this.handleCollapserLabelClick();
190 }
191 }
192 },
193
172 /* === END: Models === */ 194 /* === END: Models === */
173 195
174 /* === BEGIN: Draw cycle === */ 196 /* === BEGIN: Draw cycle === */
@@ -184,6 +206,10 @@ var Montage = require("montage/core/core").Montage,
184 // Get the original value of the overflow property: 206 // Get the original value of the overflow property:
185 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); 207 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
186 208
209 /*
210 * Removed because of expense. This disables the feature of having the
211 * component dynamically expand/collapse the content on init based on properties;
212 * Now default state of component must be set in CSS.
187 // If the content area is supposed to start out collapsed: 213 // If the content area is supposed to start out collapsed:
188 if (this.isCollapsed) { 214 if (this.isCollapsed) {
189 this.myContent.style.height = "0px"; 215 this.myContent.style.height = "0px";
@@ -198,6 +224,7 @@ var Montage = require("montage/core/core").Montage,
198 this.myContent.classList.remove(this.collapsedClass); 224 this.myContent.classList.remove(this.collapsedClass);
199 this.clicker.classList.remove(this.collapsedClass); 225 this.clicker.classList.remove(this.collapsedClass);
200 } 226 }
227 */
201 } 228 }
202 }, 229 },
203 draw: { 230 draw: {
@@ -316,7 +343,7 @@ var Montage = require("montage/core/core").Montage,
316 } 343 }
317 344
318 if (this.bypassAnimation) { 345 if (this.bypassAnimation) {
319 this.bypassAnimation = false; 346 this.bypassAnimation = true;
320 this.isAnimated = true; 347 this.isAnimated = true;
321 } 348 }
322 } 349 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 0bd448f7..14315f8d 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -226,6 +226,8 @@
226 } 226 }
227 } 227 }
228 } 228 }
229
230
229 } 231 }
230 </script> 232 </script>
231 </head> 233 </head>
@@ -241,9 +243,9 @@
241 <div class="collapsible-content content-layer collapsible-collapsed"> 243 <div class="collapsible-content content-layer collapsible-collapsed">
242 <div class="label-position"> 244 <div class="label-position">
243 <span class="collapsible-label">Position</span> 245 <span class="collapsible-label">Position</span>
244 <span class="collapsible-clicker clicker-position"></span> 246 <span class="collapsible-clicker clicker-position collapsible-collapsed"></span>
245 </div> 247 </div>
246 <div class="content-position collapsible-content"> 248 <div class="content-position collapsible-content collapsible-collapsed">
247 <div class="layout-table"> 249 <div class="layout-table">
248 <div class="layout-row"> 250 <div class="layout-row">
249 <div class="layout-cell">X</div> 251 <div class="layout-cell">X</div>
@@ -257,9 +259,9 @@
257 </div> 259 </div>
258 <div class="label-transform"> 260 <div class="label-transform">
259 <span class="collapsible-label">Transform</span> 261 <span class="collapsible-label">Transform</span>
260 <span class="clicker-transform collapsible-clicker"></span> 262 <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span>
261 </div> 263 </div>
262 <div class="content-transform collapsible-content"> 264 <div class="content-transform collapsible-content collapsible-collapsed">
263 <div class="layout-table"> 265 <div class="layout-table">
264 <div class="layout-row"> 266 <div class="layout-row">
265 <div class="layout-cell">Scale X</div> 267 <div class="layout-cell">Scale X</div>
@@ -286,11 +288,11 @@
286 </div> 288 </div>
287 <div class="label-style"> 289 <div class="label-style">
288 <span class="collapsible-label">Style</span> 290 <span class="collapsible-label">Style</span>
289 <span class="clicker-style collapsible-clicker"></span> 291 <span class="clicker-style collapsible-clicker collapsible-collapsed"></span>
290 <div class="cssbutton button-delete disabled"></div> 292 <div class="cssbutton button-delete disabled"></div>
291 <div class="cssbutton button-add"></div> 293 <div class="cssbutton button-add"></div>
292 </div> 294 </div>
293 <div class="content-style collapsible-content"> 295 <div class="content-style collapsible-content collapsible-collapsed">
294 <div class="" id="style-container"> 296 <div class="" id="style-container">
295 <div class="style-row" id="layer-style"> 297 <div class="style-row" id="layer-style">
296 </div> 298 </div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e75b4d0f..2980842f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, {
306 306
307 // Are the various collapsers collapsed or not 307 // Are the various collapsers collapsed or not
308 _isMainCollapsed : { 308 _isMainCollapsed : {
309 value: "" 309 serializable: true,
310 value: true
310 }, 311 },
311 isMainCollapsed : { 312 isMainCollapsed : {
313 serializable: true,
312 get: function() { 314 get: function() {
313 return this._isMainCollapsed; 315 return this._isMainCollapsed;
314 }, 316 },
315 set: function(newVal) { 317 set: function(newVal) {
318 this.log('layer.js: isMainCollapsed: ' + newVal);
316 if (newVal !== this._isMainCollapsed) { 319 if (newVal !== this._isMainCollapsed) {
317 this._isMainCollapsed = newVal; 320 this._isMainCollapsed = newVal;
318 this.needsDraw = true;
319 } 321 }
320 } 322 }
321 }, 323 },
322 324
323 _isTransformCollapsed : { 325 _isTransformCollapsed : {
326 serializable: true,
324 value: true 327 value: true
325 }, 328 },
326 isTransformCollapsed : { 329 isTransformCollapsed : {
330 serializable: true,
327 get: function() { 331 get: function() {
328 return this._isTransformCollapsed; 332 return this._isTransformCollapsed;
329 }, 333 },
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, {
336 }, 340 },
337 341
338 _isPositionCollapsed : { 342 _isPositionCollapsed : {
343 serializable: true,
339 value: true 344 value: true
340 }, 345 },
341 isPositionCollapsed : { 346 isPositionCollapsed : {
347 serializable: true,
342 get: function() { 348 get: function() {
343 return this._isPositionCollapsed; 349 return this._isPositionCollapsed;