aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js65
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html131
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js192
-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.js722
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html136
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js192
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js10
10 files changed, 872 insertions, 670 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 5de884a9..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 */
28var Montage = require("montage/core/core").Montage, 28var 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,15 +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
189
187 // If the content area is supposed to start out collapsed: 190 // If the content area is supposed to start out collapsed:
188 if (this.isCollapsed) { 191 if (this.isCollapsed) {
189 this.myContent.style.height = "0px"; 192 this.myContent.style.height = "0px";
@@ -280,11 +283,6 @@ var Montage = require("montage/core/core").Montage,
280 283
281 // Set the component to run its draw cycle. 284 // Set the component to run its draw cycle.
282 this.needsDraw = true; 285 this.needsDraw = true;
283
284 // Dispatch my labelClick event
285 if (this.labelClickEvent) {
286 this.labelClickEvent(this.bypassAnimation);
287 }
288 286
289 } 287 }
290 }, 288 },
@@ -315,9 +313,10 @@ var Montage = require("montage/core/core").Montage,
315 313
316 } 314 }
317 315
318 if (this.bypassAnimation) { 316 if (this.bypassAnimation === true) {
319 this.bypassAnimation = false; 317 this.isAnimated = this._oldAnimated;
320 this.isAnimated = true; 318 } else {
319 this.bypassAnimation = true;
321 } 320 }
322 } 321 }
323 } 322 }
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 0bd448f7..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,74 +230,160 @@
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
246 },
247 "bindings" : {
248 "isToggling" : {
249 "boundObject" : {"@" : "owner" },
250 "boundObjectPropertyPath" : "isMainCollapsed",
251 "oneway" : false
252 }
253 }
254 },
255
256 "positionCollapser" : {
257 "module" : "js/panels/timeline/Collapser.js",
258 "name" : "Collapser",