diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
4 files changed, 122 insertions, 378 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 39d1ffc6..8d8b86c1 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 | ||
@@ -772,6 +774,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
772 | thingToPush.layerData.isSelected = true; | 774 | thingToPush.layerData.isSelected = true; |
773 | thingToPush.layerData._isFirstDraw = true; | 775 | thingToPush.layerData._isFirstDraw = true; |
774 | thingToPush.layerData.created = true; | 776 | thingToPush.layerData.created = true; |
777 | |||
778 | if (this.checkable_animated.classList.contains("checked")) { | ||
779 | thingToPush.layerData.isVisible = false; | ||
780 | } | ||
775 | 781 | ||
776 | for (i = 0; i < this.arrLayersLength; i++) { | 782 | for (i = 0; i < this.arrLayersLength; i++) { |
777 | this.arrLayers[i].layerData.isSelected = false; | 783 | this.arrLayers[i].layerData.isSelected = false; |
@@ -801,7 +807,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
801 | this.currentLayerNumber = this.currentLayerNumber + 1; | 807 | this.currentLayerNumber = this.currentLayerNumber + 1; |
802 | newLayerName = "Layer " + this.currentLayerNumber; | 808 | newLayerName = "Layer " + this.currentLayerNumber; |
803 | 809 | ||
804 | if (ele.dataset.storedLayerName) { | 810 | if(ele.dataset.storedLayerName){ |
805 | newLayerName = ele.dataset.storedLayerName; | 811 | newLayerName = ele.dataset.storedLayerName; |
806 | } | 812 | } |
807 | thingToPush.layerData.layerName = newLayerName; | 813 | thingToPush.layerData.layerName = newLayerName; |
@@ -809,7 +815,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
809 | thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; | 815 | thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; |
810 | thingToPush.parentElementUUID = this.hashKey; | 816 | thingToPush.parentElementUUID = this.hashKey; |
811 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; | 817 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; |
812 | 818 | if (this.checkable_animated.classList.contains("checked")) { | |
819 | thingToPush.layerData.isVisible = false; | ||
820 | } | ||
813 | // Are there styles to add? | 821 | // Are there styles to add? |
814 | thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); | 822 | thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); |
815 | thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); | 823 | thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); |
@@ -823,6 +831,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
823 | thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; | 831 | thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; |
824 | 832 | ||
825 | this._openDoc = false; | 833 | this._openDoc = false; |
834 | |||
835 | |||
826 | } | 836 | } |
827 | }, | 837 | }, |
828 | 838 | ||
@@ -1086,8 +1096,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1086 | } | 1096 | } |
1087 | } | 1097 | } |
1088 | }, | 1098 | }, |
1099 | handleConfigButtonClick: { | ||
1100 | value: function(event) { | ||
1101 | event.stopPropagation(); | ||
1102 | this.handleCheckableClick(event); | ||
1103 | |||
1104 | } | ||
1105 | }, | ||
1106 | handleDocumentClick: { | ||
1107 | value: function(event) { | ||
1108 | if (this.tl_configbutton.classList.contains("checked")) { | ||
1109 | this.tl_configbutton.classList.remove("checked"); | ||
1110 | } | ||
1111 | } | ||
1112 | }, | ||
1113 | |||
1089 | handleAnimatedClick: { | 1114 | handleAnimatedClick: { |
1090 | value: function(event) { | 1115 | value: function(event) { |
1116 | if (typeof(this.application.ninja.currentDocument) === "undefined") { | ||
1117 | return; | ||
1118 | } | ||
1119 | if (this.application.ninja.currentDocument == null) { | ||
1120 | return; | ||
1121 | } | ||
1091 | this.handleCheckableClick(event); | 1122 | this.handleCheckableClick(event); |
1092 | this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); | 1123 | this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked"); |
1093 | var boolHide = false, | 1124 | var boolHide = false, |
@@ -1115,14 +1146,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1115 | }, | 1146 | }, |
1116 | handleRelativeClick: { | 1147 | handleRelativeClick: { |
1117 | value: function(event) { | 1148 | value: function(event) { |
1118 | this.handleCheckableClick(event); | 1149 | if (!event.currentTarget.classList.contains("checked")) { |
1150 | this.handleCheckableClick(event); | ||
1151 | } | ||
1119 | this.checkable_absolute.classList.remove("checked"); | 1152 | this.checkable_absolute.classList.remove("checked"); |
1120 | // TODO: Use relative positioning | 1153 | // TODO: Use relative positioning |
1121 | } | 1154 | } |
1122 | }, | 1155 | }, |
1123 | handleAbsoluteClick: { | 1156 | handleAbsoluteClick: { |
1124 | value: function(event) { | 1157 | value: function(event) { |
1125 | this.handleCheckableClick(event); | 1158 | if (!event.currentTarget.classList.contains("checked")) { |
1159 | this.handleCheckableClick(event); | ||
1160 | } | ||
1126 | this.checkable_relative.classList.remove("checked"); | 1161 | this.checkable_relative.classList.remove("checked"); |
1127 | // TODO: Use absolute positioning. | 1162 | // TODO: Use absolute positioning. |
1128 | } | 1163 | } |
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, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ |
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 3 | /* TimelinePanel.scss Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. */ |
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> */ | ||
7 | /* TimelinePanel.scss | ||
8 | * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. | ||
9 | */ | ||
10 | /* line 22, ../scss/TimelinePanel.scss */ | 4 | /* line 22, ../scss/TimelinePanel.scss */ |
11 | .tl_container { | 5 | .tl_container { display: -webkit-box; -webkit-box-orient: vertical; height: 100%; } |
12 | display: -webkit-box; | ||
13 | -webkit-box-orient: vertical; | ||
14 | height: 100%; | ||
15 | } | ||
16 | 6 | ||
17 | /* line 27, ../scss/TimelinePanel.scss */ | 7 | /* line 27, ../scss/TimelinePanel.scss */ |
18 | .maintimeline { | 8 | .maintimeline { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; height: 100%; position: relative; margin-top: 1px; } |
19 | -webkit-box-flex: 1; | ||
20 | display: -webkit-box; | ||
21 | -webkit-box-orient: horizontal; |