aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js5
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html14
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js22
-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.html5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js250
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js78
8 files changed, 273 insertions, 176 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 5de884a9..ad490c2e 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -184,6 +184,10 @@ var Montage = require("montage/core/core").Montage,
184 // Get the original value of the overflow property: 184 // Get the original value of the overflow property:
185 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); 185 this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
186 186
187 /*
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.
187 // If the content area is supposed to start out collapsed: 191 // If the content area is supposed to start out collapsed:
188 if (this.isCollapsed) { 192 if (this.isCollapsed) {
189 this.myContent.style.height = "0px"; 193 this.myContent.style.height = "0px";
@@ -198,6 +202,7 @@ var Montage = require("montage/core/core").Montage,
198 this.myContent.classList.remove(this.collapsedClass); 202 this.myContent.classList.remove(this.collapsedClass);
199 this.clicker.classList.remove(this.collapsedClass); 203 this.clicker.classList.remove(this.collapsedClass);
200 } 204 }
205 */
201 } 206 }
202 }, 207 },
203 draw: { 208 draw: {
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 e3897bbf..e76b8cc0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -403,7 +403,7 @@ var Layer = exports.Layer = Montage.create(Component, {
403 this.mainCollapser.myContent = this.myContent; 403 this.mainCollapser.myContent = this.myContent;
404 this.mainCollapser.contentHeight = 60; 404 this.mainCollapser.contentHeight = 60;
405 this.myContent.style.height = "0px"; 405 this.myContent.style.height = "0px";
406 this.mainCollapser.element = this.element; 406 this.mainCollapser.element = this.myContent;
407 //this.mainCollapser.isCollapsedAtStart = true; 407 //this.mainCollapser.isCollapsedAtStart = true;
408 this.mainCollapser.isCollapsed = this.isMainCollapsed; 408 this.mainCollapser.isCollapsed = this.isMainCollapsed;
409 this.mainCollapser.isAnimated = true; 409 this.mainCollapser.isAnimated = true;
@@ -418,12 +418,12 @@ var Layer = exports.Layer = Montage.create(Component, {
418 defaultEventManager.dispatchEvent(newEvent); 418 defaultEventManager.dispatchEvent(newEvent);
419 that.isMainCollapsed = that.mainCollapser.isCollapsed; 419 that.isMainCollapsed = that.mainCollapser.isCollapsed;
420 } 420 }
421 this.mainCollapser.needsDraw = true; 421 //this.mainCollapser.needsDraw = true;
422 422
423 this.positionCollapser.clicker = this.clickerPosition; 423 this.positionCollapser.clicker = this.clickerPosition;
424 this.positionCollapser.myContent = this.contentPosition; 424 this.positionCollapser.myContent = this.contentPosition;
425 this.positionCollapser.element = this.element; 425 this.positionCollapser.element = this.contentPosition;
426 this.positionCollapser.contentHeight = 60; 426 this.positionCollapser.contentHeight = 40;
427 // this.positionCollapser.isCollapsedAtStart = true; 427 // this.positionCollapser.isCollapsedAtStart = true;
428 this.positionCollapser.isCollapsed = this.isPositionCollapsed; 428 this.positionCollapser.isCollapsed = this.isPositionCollapsed;
429 this.positionCollapser.isAnimated = true; 429 this.positionCollapser.isAnimated = true;
@@ -437,11 +437,11 @@ var Layer = exports.Layer = Montage.create(Component, {
437 defaultEventManager.dispatchEvent(newEvent); 437 defaultEventManager.dispatchEvent(newEvent);
438 that.isPositionCollapsed = that.positionCollapser.isCollapsed; 438 that.isPositionCollapsed = that.positionCollapser.isCollapsed;
439 } 439 }
440 this.positionCollapser.needsDraw = true; 440 //this.positionCollapser.needsDraw = true;
441 441
442 this.transformCollapser.clicker = this.clickerTransform; 442 this.transformCollapser.clicker = this.clickerTransform;
443 this.transformCollapser.myContent = this.contentTransform; 443 this.transformCollapser.myContent = this.contentTransform;
444 this.transformCollapser.element = this.element; 444 this.transformCollapser.element = this.contentTransform;
445 this.transformCollapser.contentHeight = 100; 445 this.transformCollapser.contentHeight = 100;
446 // this.transformCollapser.isCollapsedAtStart = true; 446 // this.transformCollapser.isCollapsedAtStart = true;
447 this.transformCollapser.isCollapsed = this.isTransformCollapsed; 447 this.transformCollapser.isCollapsed = this.isTransformCollapsed;
@@ -456,13 +456,13 @@ var Layer = exports.Layer = Montage.create(Component, {
456 defaultEventManager.dispatchEvent(newEvent); 456 defaultEventManager.dispatchEvent(newEvent);
457 that.isTransformCollapsed = that.transformCollapser.isCollapsed; 457 that.isTransformCollapsed = that.transformCollapser.isCollapsed;
458 } 458 }
459 this.transformCollapser.needsDraw = true; 459 //this.transformCollapser.needsDraw = true;
460 460
461 this.styleCollapser.clicker = this.clickerStyle; 461 this.styleCollapser.clicker = this.clickerStyle;
462 this.styleCollapser.myContent = this.contentStyle; 462 this.styleCollapser.myContent = this.contentStyle;
463 this.styleCollapser.element = this.element; 463 this.styleCollapser.element = this.contentStyle;
464 this.styleCollapser.isCollapsed = this.isStyleCollapsed; 464 this.styleCollapser.isCollapsed = this.isStyleCollapsed;
465 this.styleCollapser.contentHeight = 20; 465 this.styleCollapser.contentHeight = 0;
466 this.styleCollapser.isAnimated = true; 466 this.styleCollapser.isAnimated = true;
467 this.styleCollapser.labelClickEvent = function(boolBypass) { 467 this.styleCollapser.labelClickEvent = function(boolBypass) {
468 var newEvent = document.createEvent("CustomEvent"); 468 var newEvent = document.createEvent("CustomEvent");
@@ -474,7 +474,7 @@ var Layer = exports.Layer = Montage.create(Component, {
474 defaultEventManager.dispatchEvent(newEvent); 474 defaultEventManager.dispatchEvent(newEvent);
475 that.isStyleCollapsed = that.styleCollapser.isCollapsed; 475 that.isStyleCollapsed = that.styleCollapser.isCollapsed;
476 } 476 }
477 this.styleCollapser.needsDraw = true; 477 //this.styleCollapser.needsDraw = true;
478 478
479 // Add event listeners to add and delete style buttons 479 // Add event listeners to add and delete style buttons
480 this.buttonAddStyle.identifier = "addStyle"; 480 this.buttonAddStyle.identifier = "addStyle";
@@ -485,7 +485,7 @@ var Layer = exports.Layer = Montage.create(Component, {
485 485
486 // Add mousedown listener to set isActive 486 // Add mousedown listener to set isActive
487 this.element.addEventListener("mousedown", this, false); 487 this.element.addEventListener("mousedown", this, false);
488 //this.element.addEventListener("click", this, false); 488 this.element.addEventListener("click", this, false);
489 489
490 } 490 }
491 }, 491 },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 18d0a5e3..8e36c2db 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -4,11 +4,10 @@
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> */ 6 </copyright> */
7
8/* Layer.scss 7/* Layer.scss
9 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.