aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js3
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js83
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css428
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss7
5 files changed, 141 insertions, 402 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f62d43a4..3bc87f68 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -542,9 +542,6 @@ var Layer = exports.Layer = Montage.create(Component, {
542 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 542 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
543 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 543 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
544 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 544 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
545
546 // Bind this.layerTag to the tag
547
548 } 545 }
549 }, 546 },
550 draw: { 547 draw: {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 09c1f98c..5234b43d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -35,7 +35,8 @@
35 "timeline_disabler" : {"#" : "timeline-disabler"}, 35 "timeline_disabler" : {"#" : "timeline-disabler"},
36 "checkable_relative" : {"#" : "checkable_relative"}, 36 "checkable_relative" : {"#" : "checkable_relative"},
37 "checkable_absolute" : {"#" : "checkable_absolute"}, 37 "checkable_absolute" : {"#" : "checkable_absolute"},
38 "checkable_animated" : {"#" : "checkable_animated"} 38 "checkable_animated" : {"#" : "checkable_animated"},
39 "tl_configbutton" : {"#" : "tl-configbutton"}
39 } 40 }
40 }, 41 },
41 42
@@ -181,15 +182,18 @@
181 182
182 <div id="user_layers" class="userlayers"> 183 <div id="user_layers" class="userlayers">
183 <div id="master_layer" class="masterlayer"> 184 <div id="master_layer" class="masterlayer">
184 <div>Master Layer</div> 185 <div class="layer-master">Master Layer
185 <div class="tl-configbutton"> 186 <div class="tl-configbutton" data-montage-id="tl-configbutton">
186 <div class="tl-dropdown"> 187 <div class="tl-dropdown">
187 <div class="checkable checked" data-montage-id="checkable_relative">Use relative positioning</div> 188 <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="checkable" data-montage-id="checkable_absolute">Use absolute positioning</div>
189 <div class="nj-divider divider-horizontal"></div> 190 <div class="nj-divider divider-horizontal"></div>
190 <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> 191 <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
191 </div> 192 </div>
193 </div>
194
192 </div> 195 </div>
196
193 </div> 197 </div>
194 <div id="container-layers" style="position: relative;" class="container-layers"> 198 <div id="container-layers" style="position: relative;" class="container-layers">
195 <div id="container-layer"></div> 199 <div id="container-layer"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index eabe1a7a..191b87d5 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -342,6 +342,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
342 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); 342 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
343 this.checkable_relative.addEventListener("click", this.handleRelativeClick.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); 344 this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false);
345 this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
346 document.addEventListener("click", this.handleDocumentClick.bind(this), false);
345 } 347 }
346 }, 348 },
347 349
@@ -781,6 +783,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
781 thingToPush.layerData.isSelected = true; 783 thingToPush.layerData.isSelected = true;
782 thingToPush.layerData._isFirstDraw = true; 784 thingToPush.layerData._isFirstDraw = true;
783 thingToPush.layerData.created = true; 785 thingToPush.layerData.created = true;
786
787 if (this.checkable_animated.classList.contains("checked")) {
788 thingToPush.layerData.isVisible = false;
789 }
784 790
785 for (i = 0; i < this.arrLayersLength; i++) { 791 for (i = 0; i < this.arrLayersLength; i++) {
786 this.arrLayers[i].layerData.isSelected = false; 792 this.arrLayers[i].layerData.isSelected = false;
@@ -808,35 +814,37 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
808 restoreLayer:{ 814 restoreLayer:{
809 value:function (ele) { 815 value:function (ele) {
810 816
811 var newLayerName, thingToPush = this.createLayerTemplate(); 817 var newLayerName, thingToPush = this.createLayerTemplate();
812 818
813 this.currentLayerNumber = this.currentLayerNumber + 1; 819 this.currentLayerNumber = this.currentLayerNumber + 1;
814 newLayerName = "Layer " + this.currentLayerNumber; 820 newLayerName = "Layer " + this.currentLayerNumber;
815 821
816 if(ele.dataset.storedLayerName){ 822 if(ele.dataset.storedLayerName){
817 newLayerName = ele.dataset.storedLayerName; 823 newLayerName = ele.dataset.storedLayerName;
818 } 824 }
819 thingToPush.layerData.layerName = newLayerName; 825 thingToPush.layerData.layerName = newLayerName;
820 thingToPush.layerData.layerID = this.currentLayerNumber; 826 thingToPush.layerData.layerID = this.currentLayerNumber;
821 thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; 827 thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
822 thingToPush.parentElementUUID = this.hashKey; 828 thingToPush.parentElementUUID = this.hashKey;
823 thingToPush.parentElement = this.application.ninja.currentSelectedContainer; 829 thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
824 830 if (this.checkable_animated.classList.contains("checked")) {
825 // Are there styles to add? 831 thingToPush.layerData.isVisible = false;
826 thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); 832 }
827 thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); 833 // Are there styles to add?
834 thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
835 thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
828 836
829 if (this._openDoc) { 837 if (this._openDoc) {
830 thingToPush.layerData.elementsList.push(ele); 838 thingToPush.layerData.elementsList.push(ele);
831 } 839 }
840
841 this.temparrLayers.splice(0, 0, thingToPush);
842 thingToPush.layerData.trackPosition = this.temparrLayers.length - 1;
843 thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
832 844
833 this.temparrLayers.splice(0, 0, thingToPush); 845 this._openDoc = false;
834 thingToPush.layerData.trackPosition = this.temparrLayers.length - 1;
835 thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
836 846
837 this._openDoc = false;
838 847
839// }
840 } 848 }
841 }, 849 },
842 850
@@ -1100,8 +1108,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1100 } 1108 }
1101 } 1109 }
1102 }, 1110 },
1111 handleConfigButtonClick: {
1112 value: function(event) {
1113 event.stopPropagation();
1114 this.handleCheckableClick(event);
1115
1116 }
1117 },
1118 handleDocumentClick: {
1119 value: function(event) {
1120 if (this.tl_configbutton.classList.contains("checked")) {
1121 this.tl_configbutton.classList.remove("checked");
1122 }
1123 }
1124 },
1125
1103 handleAnimatedClick: { 1126 handleAnimatedClick: {
1104 value: function(event) { 1127 value: function(event) {
1128 if (typeof(this.application.ninja.currentDocument) === "undefined") {
1129 return;
1130 }
1131 if (this.application.ninja.currentDocument == null) {
1132 return;
1133 }
1105 this.handleCheckableClick(event); 1134 this.handleCheckableClick(event);
1106 this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); 1135 this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked");
1107 var boolHide = false, 1136 var boolHide = false,
@@ -1129,14 +1158,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1129 }, 1158 },
1130 handleRelativeClick: { 1159 handleRelativeClick: {
1131 value: function(event) { 1160 value: function(event) {
1132 this.handleCheckableClick(event); 1161 if (!event.currentTarget.classList.contains("checked")) {
1162 this.handleCheckableClick(event);
1163 }
1133 this.checkable_absolute.classList.remove("checked"); 1164 this.checkable_absolute.classList.remove("checked");
1134 // TODO: Use relative positioning 1165 // TODO: Use relative positioning
1135 } 1166 }
1136 }, 1167 },
1137 handleAbsoluteClick: { 1168 handleAbsoluteClick: {
1138 value: function(event) {