diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
3 files changed, 493 insertions, 277 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 8fec1d7d..f218868a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -349,6 +349,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
349 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | 349 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); |
350 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | 350 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); |
351 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | 351 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); |
352 | |||
353 | // Bind the handlers for the config menu | ||
354 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
355 | this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); | ||
356 | this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); | ||
352 | } | 357 | } |
353 | }, | 358 | }, |
354 | 359 | ||
@@ -431,8 +436,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
431 | returnObj.layerData.trackPosition = 0; | 436 | returnObj.layerData.trackPosition = 0; |
432 | returnObj.layerData.arrStyleTracks = []; | 437 | returnObj.layerData.arrStyleTracks = []; |
433 | returnObj.layerData.tweens = []; | 438 | returnObj.layerData.tweens = []; |
439 | returnObj.layerData.layerTag = ""; | ||
440 | returnObj.layerData.isVisible = true; | ||
441 | returnObj.layerData.isTrackAnimated = false; | ||
434 | returnObj.parentElementUUID = null; | 442 | returnObj.parentElementUUID = null; |
435 | returnObj.parentElement = null; | 443 | returnObj.parentElement = null; |
444 | |||
436 | return returnObj; | 445 | return returnObj; |
437 | } | 446 | } |
438 | }, | 447 | }, |
@@ -590,7 +599,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
590 | this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; | 599 | this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; |
591 | this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; | 600 | this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; |
592 | this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; | 601 | this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; |
593 | 602 | if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { | |
603 | // Fake a click. | ||
604 | var evt = document.createEvent("MouseEvents"); | ||
605 | evt.initMouseEvent("click"); | ||
606 | this.checkable_animated.dispatchEvent(evt); | ||
607 | } | ||
594 | } | 608 | } |
595 | } | 609 | } |
596 | }, | 610 | }, |
@@ -610,7 +624,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
610 | this.application.ninja.timeline.playheadmarker.style.left = "0px"; | 624 | this.application.ninja.timeline.playheadmarker.style.left = "0px"; |
611 | this.application.ninja.timeline.updateTimeText(0.00); | 625 | this.application.ninja.timeline.updateTimeText(0.00); |
612 | this.timebar.style.width = "0px"; | 626 | this.timebar.style.width = "0px"; |
613 | 627 | this.checkable_animated.classList.remove("checked"); | |
614 | this.currentLayerNumber = 0; | 628 | this.currentLayerNumber = 0; |
615 | this.currentLayerSelected = false; | 629 | this.currentLayerSelected = false; |
616 | this.selectedKeyframes = []; | 630 | this.selectedKeyframes = []; |
@@ -773,6 +787,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
773 | this.currentLayerNumber = this.currentLayerNumber + 1; | 787 | this.currentLayerNumber = this.currentLayerNumber + 1; |
774 | newLayerName = "Layer " + this.currentLayerNumber; | 788 | newLayerName = "Layer " + this.currentLayerNumber; |
775 | thingToPush.layerData.layerName = newLayerName; | 789 | thingToPush.layerData.layerName = newLayerName; |
790 | thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; | ||
776 | thingToPush.layerData.layerID = this.currentLayerNumber; | 791 | thingToPush.layerData.layerID = this.currentLayerNumber; |
777 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; | 792 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; |
778 | thingToPush.layerData.isSelected = true; | 793 | thingToPush.layerData.isSelected = true; |
@@ -815,6 +830,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
815 | } | 830 | } |
816 | thingToPush.layerData.layerName = newLayerName; | 831 | thingToPush.layerData.layerName = newLayerName; |
817 | thingToPush.layerData.layerID = this.currentLayerNumber; | 832 | thingToPush.layerData.layerID = this.currentLayerNumber; |
833 | thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; | ||
818 | thingToPush.parentElementUUID = this.hashKey; | 834 | thingToPush.parentElementUUID = this.hashKey; |
819 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; | 835 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; |
820 | 836 | ||
@@ -880,7 +896,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
880 | 896 | ||
881 | handleElementAdded:{ | 897 | handleElementAdded:{ |
882 | value:function() { | 898 | value:function() { |
883 | this.createNewLayer(); | 899 | this.createNewLayer(this.application.ninja.selectedElements[0]); |
884 | this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); | 900 | this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]); |
885 | this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; | 901 | this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; |
886 | } | 902 | } |
@@ -1096,6 +1112,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1096 | } | 1112 | } |
1097 | } | 1113 | } |
1098 | }, | 1114 | }, |
1115 | handleAnimatedClick: { | ||
1116 | value: function(event) { | ||
1117 | this.handleCheckableClick(event); | ||
1118 | this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); | ||
1119 | var boolHide = false, | ||
1120 | i = 0, | ||
1121 | arrLayersLength = this.arrLayers.length; | ||
1122 | if (event.currentTarget.classList.contains("checked")) { | ||
1123 | // Hide layers with isAnimated = false; | ||
1124 | boolHide = true; | ||
1125 | } | ||
1126 | |||
1127 | for (i = 0; i < arrLayersLength; i++) { | ||
1128 | if (boolHide) { | ||
1129 | // Hide layers with isAnimated = false | ||
1130 | if (this.arrLayers[i].layerData.isTrackAnimated === false) { | ||
1131 | this.arrLayers[i].layerData.isVisible = false; | ||
1132 | this.triggerLayerBinding(i); | ||
1133 | } | ||
1134 | } else { | ||
1135 | this.arrLayers[i].layerData.isVisible = true; | ||
1136 | this.triggerLayerBinding(i); | ||
1137 | } | ||
1138 | } | ||
1139 | |||
1140 | } | ||
1141 | }, | ||
1142 | handleRelativeClick: { | ||
1143 | value: function(event) { | ||
1144 | this.handleCheckableClick(event); | ||
1145 | this.checkable_absolute.classList.remove("checked"); | ||
1146 | // TODO: Use relative positioning | ||
1147 | } | ||
1148 | }, | ||
1149 | handleAbsoluteClick: { | ||
1150 | value: function(event) { | ||
1151 | this.handleCheckableClick(event); | ||
1152 | this.checkable_relative.classList.remove("checked"); | ||
1153 | // TODO: Use absolute positioning. | ||
1154 | } | ||
1155 | }, | ||
1156 | handleCheckableClick: { | ||
1157 | value: function(event) { | ||
1158 | if (event.currentTarget.classList.contains("checked")) { | ||
1159 | event.currentTarget.classList.remove("checked"); | ||
1160 | } else { | ||
1161 | event.currentTarget.classList.add("checked"); | ||
1162 | } | ||
1163 | } | ||
1164 | }, | ||
1099 | // Trigger the layer/track data binding | 1165 | // Trigger the layer/track data binding |
1100 | triggerLayerBinding : { | 1166 | triggerLayerBinding : { |
1101 | value: function(intIndex) { | 1167 | value: function(intIndex) { |
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 2e420b98..d2a31033 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | |||
@@ -1,297 +1,436 @@ | |||
1 | @charset "UTF-8"; | ||
1 | /* <copyright> | 2 | /* <copyright> |
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 4 | No rights, exp |