aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js43
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css428
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss7
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;