diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 13 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 157 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 685 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png | bin | 0 -> 1083 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png | bin | 0 -> 1397 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 370 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/config.rb | 10 |
7 files changed, 906 insertions, 329 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9eb126e0..09c1f98c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -32,7 +32,10 @@ | |||
32 | "container_tracks" : {"#" : "container-tracks"}, | 32 | "container_tracks" : {"#" : "container-tracks"}, |
33 | "end_hottext" : {"@" : "endHottext"}, | 33 | "end_hottext" : {"@" : "endHottext"}, |
34 | "container_layers" : {"#" : "container-layers"}, | 34 | "container_layers" : {"#" : "container-layers"}, |
35 | "timeline_disabler" : {"#" : "timeline-disabler"} | 35 | "timeline_disabler" : {"#" : "timeline-disabler"}, |
36 | "checkable_relative" : {"#" : "checkable_relative"}, | ||
37 | "checkable_absolute" : {"#" : "checkable_absolute"}, | ||
38 | "checkable_animated" : {"#" : "checkable_animated"} | ||
36 | } | 39 | } |
37 | }, | 40 | }, |
38 | 41 | ||
@@ -179,6 +182,14 @@ | |||
179 | <div id="user_layers" class="userlayers"> | 182 | <div id="user_layers" class="userlayers"> |
180 | <div id="master_layer" class="masterlayer"> | 183 | <div id="master_layer" class="masterlayer"> |
181 | <div>Master Layer</div> | 184 | <div>Master Layer</div> |
185 | <div class="tl-configbutton"> | ||
186 | <div class="tl-dropdown"> | ||
187 | <div class="checkable checked" data-montage-id="checkable_relative">Use relative positioning</div> | ||
188 | <div class="checkable" data-montage-id="checkable_absolute">Use absolute positioning</div> | ||
189 | <div class="nj-divider divider-horizontal"></div> | ||
190 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> | ||
191 | </div> | ||
192 | </div> | ||
182 | </div> | 193 | </div> |
183 | <div id="container-layers" style="position: relative;" class="container-layers"> | 194 | <div id="container-layers" style="position: relative;" class="container-layers"> |
184 | <div id="container-layer"></div> | 195 | <div id="container-layer"></div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d18617f7..39d1ffc6 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -294,24 +294,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
294 | if (newVal !== this._dropLayerID) { | 294 | if (newVal !== this._dropLayerID) { |
295 | this._dropLayerID = newVal; | 295 | this._dropLayerID = newVal; |
296 | 296 | ||
297 | var myNewArray = [], | 297 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), |
298 | dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), | ||
299 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 298 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), |
300 | dragLayer = myNewArray[dragLayerIndex], | 299 | dragLayer = this.arrLayers[dragLayerIndex]; |
301 | thing; | ||
302 | |||
303 | // Copy arrLayers into new array; we want to avoid referencing. | ||
304 | for (thing in this.arrLayers) { | ||
305 | myNewArray[thing] = this.arrLayers[thing]; | ||
306 | } | ||
307 | 300 | ||
308 | // Operate on new array | 301 | this.arrLayers.splice(dragLayerIndex, 1); |
309 | myNewArray.splice(dragLayerIndex, 1); | 302 | this.arrLayers.splice(dropLayerIndex, 0, dragLayer); |
310 | myNewArray.splice(dropLayerIndex, 0, dragLayer); | ||
311 | |||
312 | // Feed new array into repetition | ||
313 | this.arrLayers = myNewArray; | ||
314 | // Store reference in currentDocument. | ||
315 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | 303 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; |
316 | 304 | ||
317 | // Clear for future DnD | 305 | // Clear for future DnD |
@@ -319,7 +307,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
319 | this._dragLayerID = null; | 307 | this._dragLayerID = null; |
320 | 308 | ||
321 | // Sometimes, just to be fun, the drop and dragend events don't fire. | 309 | // Sometimes, just to be fun, the drop and dragend events don't fire. |
322 | // To avoid this, set the draw routine to delete the helper here. | 310 | // So just in case, set the draw routine to delete the helper. |
323 | this._deleteHelper = true; | 311 | this._deleteHelper = true; |
324 | this.needsDraw = true; | 312 | this.needsDraw = true; |
325 | } | 313 | } |
@@ -349,6 +337,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
349 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | 337 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); |
350 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | 338 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); |
351 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | 339 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); |
340 | |||
341 | // Bind the handlers for the config menu | ||
342 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
343 | this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); | ||
344 | this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); | ||
352 | } | 345 | } |
353 | }, | 346 | }, |
354 | 347 | ||
@@ -362,7 +355,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
362 | 355 | ||
363 | draw: { | 356 | draw: { |
364 | value: function() { | 357 | value: function() { |
365 | |||
366 | // Drag and Drop: | 358 | // Drag and Drop: |
367 | // Do we have a helper to append? | 359 | // Do we have a helper to append? |
368 | if (this._appendHelper === true) { | 360 | if (this._appendHelper === true) { |
@@ -398,8 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
398 | this._dragAndDropHelper = null; | 390 | this._dragAndDropHelper = null; |
399 | this._deleteHelper = false; | 391 | this._deleteHelper = false; |
400 | } | 392 | } |
401 | } | 393 | } |
402 | |||
403 | } | 394 | } |
404 | } | 395 | } |
405 | }, | 396 | }, |
@@ -429,8 +420,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
429 | returnObj.layerData.trackPosition = 0; | 420 | returnObj.layerData.trackPosition = 0; |
430 | returnObj.layerData.arrStyleTracks = []; | 421 | returnObj.layerData.arrStyleTracks = []; |
431 | returnObj.layerData.tweens = []; | 422 | returnObj.layerData.tweens = []; |
423 | returnObj.layerData.layerTag = ""; | ||
424 | returnObj.layerData.isVisible = true; | ||
425 | returnObj.layerData.isTrackAnimated = false; | ||
432 | returnObj.parentElementUUID = null; | 426 | returnObj.parentElementUUID = null; |
433 | returnObj.parentElement = null; | 427 | returnObj.parentElement = null; |
428 | |||
434 | return returnObj; | 429 | return returnObj; |
435 | } | 430 | } |
436 | }, | 431 | }, |
@@ -588,7 +583,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
588 | this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; | 583 | this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; |
589 | this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; | 584 | this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; |
590 | this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; | 585 | this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; |
591 | 586 | if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { | |
587 | // Fake a click. | ||
588 | var evt = document.createEvent("MouseEvents"); | ||
589 | evt.initMouseEvent("click"); | ||
590 | this.checkable_animated.dispatchEvent(evt); | ||
591 | } | ||
592 | } | 592 | } |
593 | } | 593 | } |
594 | }, | 594 | }, |
@@ -608,14 +608,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
608 | this.application.ninja.timeline.playheadmarker.style.left = "0px"; | 608 | this.application.ninja.timeline.playheadmarker.style.left = "0px"; |
609 | this.application.ninja.timeline.updateTimeText(0.00); | 609 | this.application.ninja.timeline.updateTimeText(0.00); |
610 | this.timebar.style.width = "0px"; | 610 | this.timebar.style.width = "0px"; |
611 | 611 | this.checkable_animated.classList.remove("checked"); | |
612 | this.currentLayerNumber = 0; | 612 | this.currentLayerNumber = 0; |
613 | this.currentLayerSelected = false; | 613 | this.currentLayerSelected = false; |
614 | this.selectedKeyframes = []; | 614 | this.selectedKeyframes = []; |
615 | this.selectedTweens = []; | 615 | this.selectedTweens = []; |
616 | this._captureSelection = false; | 616 | this._captureSelection = false; |
617 | this._openDoc = false; | 617 | this._openDoc = false; |
618 | // this._firstTimeLoaded = true; | ||
619 | this.end_hottext.value = 25; | 618 | this.end_hottext.value = 25; |
620 | this.updateTrackContainerWidth(); | 619 | this.updateTrackContainerWidth(); |
621 | this.masterDuration = 0; | 620 | this.masterDuration = 0; |
@@ -641,7 +640,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
641 | if (this.application.ninja.documentController._documents.length > 0) { | 640 | if (this.application.ninja.documentController._documents.length > 0) { |
642 | this.enablePanel(true); | 641 | this.enablePanel(true); |
643 | this.initTimelineForDocument(); | 642 | this.initTimelineForDocument(); |
644 | |||
645 | } else { | 643 | } else { |
646 | this.enablePanel(false); | 644 | this.enablePanel(false); |
647 | } | 645 | } |
@@ -664,6 +662,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
664 | value:function () { | 662 | value:function () { |
665 | this.user_layers.scrollTop = this.layout_tracks.scrollTop; | 663 | this.user_layers.scrollTop = this.layout_tracks.scrollTop; |
666 | this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; | 664 | this.lay |