diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
4 files changed, 141 insertions, 399 deletions
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) { | 1169 | value: function(event) { |
1139 | this.handleCheckableClick(event); | 1170 | if (!event.currentTarget.classList.contains("checked")) { |
1171 | this.handleCheckableClick(event); | ||
1172 | } | ||
1140 | this.checkable_relative.classList.remove("checked"); | 1173 | this.checkable_relative.classList.remove("checked"); |
1141 | // TODO: Use absolute positioning. | 1174 | // TODO: Use absolute positioning. |
1142 | } | 1175 | } |
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index d2a31033..29bf8d38 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | |||
@@ -1,436 +1,138 @@ | |||
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; |
2 | /* <copyright> | 2 | /* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, express |