aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js3
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js20
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html6
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js79
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js34
5 files changed, 124 insertions, 18 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 95a94b36..f7c936f7 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,6 +76,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
76 76
77 selectKeyframe:{ 77 selectKeyframe:{
78 value:function(){ 78 value:function(){
79 if(this.isSelected){
80 return;
81 }
79 82
80 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ 83 if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
81 var tweenID = this.parentComponent.tweenID; 84 var tweenID = this.parentComponent.tweenID;
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 776d5ec8..b4833fa2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -325,6 +325,7 @@ var Layer = exports.Layer = Montage.create(Component, {
325 value: false 325 value: false
326 }, 326 },
327 isActive: { 327 isActive: {
328 serializable:true,
328 get: function() { 329 get: function() {
329 return this._isActive; 330 return this._isActive;
330 }, 331 },
@@ -752,12 +753,20 @@ var Layer = exports.Layer = Montage.create(Component, {
752 //defaultEventManager.dispatchEvent(newEvent); 753 //defaultEventManager.dispatchEvent(newEvent);
753 754
754 // Dispatch the event to the TimelineTrack component associated with this Layer. 755 // Dispatch the event to the TimelineTrack component associated with this Layer.
755 var myIndex = this.application.ninja.timeline.getActiveLayerIndex(), 756 var myIndex = false,
757 i = 0,
758 arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
756 arrTracks = document.querySelectorAll('[data-montage-id="track"]'); 759 arrTracks = document.querySelectorAll('[data-montage-id="track"]');
757 760
761 for (i = 0; i < arrLayersLength; i++) {
762 if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) {
763 myIndex = i;
764 }
765 }
766
758 if (myIndex !== false) { 767 if (myIndex !== false) {
759 arrTracks[myIndex].dispatchEvent(newEvent); 768 arrTracks[myIndex].dispatchEvent(newEvent);
760 } 769 }
761 } 770 }
762 }, 771 },
763 772
@@ -945,12 +954,14 @@ var Layer = exports.Layer = Montage.create(Component, {
945 this.isMainCollapsed = false; 954 this.isMainCollapsed = false;
946 } else { 955 } else {
947 this.isMainCollapsed = true; 956 this.isMainCollapsed = true;
957 this.application.ninja.timeline.synchScrollbars(43);
948 } 958 }
949 this.triggerOutgoingBinding(); 959 this.triggerOutgoingBinding();
950 } 960 }
951 }, 961 },
952 handlePositionCollapserClick : { 962 handlePositionCollapserClick : {
953 value: function(event) { 963 value: function(event) {
964 var myHeight = this.positionCollapser.element.offsetHeight;
954 this.positionCollapser.bypassAnimation = false; 965 this.positionCollapser.bypassAnimation = false;
955 this.bypassAnimation = false; 966 this.bypassAnimation = false;
956 this.layerData.bypassAnimation = false; 967 this.layerData.bypassAnimation = false;
@@ -958,12 +969,14 @@ var Layer = exports.Layer = Montage.create(Component, {
958 this.isPositionCollapsed = false; 969 this.isPositionCollapsed = false;
959 } else { 970 } else {
960 this.isPositionCollapsed = true; 971 this.isPositionCollapsed = true;
972 this.application.ninja.timeline.synchScrollbars(myHeight);
961 } 973 }
962 this.triggerOutgoingBinding(); 974 this.triggerOutgoingBinding();
963 } 975 }
964 }, 976 },
965 handleStyleCollapserClick : { 977 handleStyleCollapserClick : {
966 value: function(event) { 978 value: function(event) {
979 var myHeight = this.styleCollapser.element.offsetHeight;
967 this.styleCollapser.bypassAnimation = false; 980 this.styleCollapser.bypassAnimation = false;
968 this.bypassAnimation = false; 981 this.bypassAnimation = false;
969 this.layerData.bypassAnimation = false; 982 this.layerData.bypassAnimation = false;
@@ -971,6 +984,7 @@ var Layer = exports.Layer = Montage.create(Component, {
971 this.isStyleCollapsed = false; 984 this.isStyleCollapsed = false;
972 } else { 985 } else {
973 this.isStyleCollapsed = true; 986 this.isStyleCollapsed = true;
987 this.application.ninja.timeline.synchScrollbars(myHeight);
974 } 988 }
975 this.triggerOutgoingBinding(); 989 this.triggerOutgoingBinding();
976 } 990 }
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index eac361a8..f6fae9b8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -37,7 +37,8 @@
37 "checkable_animated" : {"#" : "checkable_animated"}, 37 "checkable_animated" : {"#" : "checkable_animated"},
38 "tl_configbutton" : {"#" : "tl-configbutton"}, 38 "tl_configbutton" : {"#" : "tl-configbutton"},
39 "checkable_lock" : {"#" : "checkable_lock"}, 39 "checkable_lock" : {"#" : "checkable_lock"},
40 "checkable_visible":{"#" : "checkable_visible"} 40 "checkable_visible":{"#" : "checkable_visible"},
41 "play_button" : {"#" : "play_button"}
41 } 42 }
42 }, 43 },
43 44
@@ -164,10 +165,7 @@
164 <div data-montage-id="leftpane_inside" class="leftinside"> 165 <div data-montage-id="leftpane_inside" class="leftinside">
165 <div data-montage-id="timeline_controller" class="timelinecontroller"> 166 <div data-montage-id="timeline_controller" class="timelinecontroller">
166 <div data-montage-id="timeline_controls" class="timelinecontrols"> 167 <div data-montage-id="timeline_controls" class="timelinecontrols">
167 <div data-montage-id="rewind_button" class="rewindbutton"></div>
168 <div data-montage-id="play_button" class="playbutton"></div> 168 <div data-montage-id="play_button" class="playbutton"></div>
169 <div data-montage-id="pause_button" class="pausebutton"></div>
170 <div data-montage-id="forward_button" class="forwardbutton"></div>
171 <div data-montage-id="time_text" class="timetext">00:00:00</div> 169 <div data-montage-id="time_text" class="timetext">00:00:00</div>
172 </div> 170 </div>
173 </div> 171 </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 470062ba..12b481de 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -243,6 +243,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
243 value: false 243 value: false
244 }, 244 },
245 245
246 _areTracksCollapsing: {
247 value: false
248 },
249
246 _currentOpenSpanMenu: { 250 _currentOpenSpanMenu: {
247 value: false 251 value: false
248 }, 252 },
@@ -687,6 +691,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
687 // We have shuffled layers, so we need to update this.selectedLayers. 691 // We have shuffled layers, so we need to update this.selectedLayers.
688 this.selectLayers([]) 692 this.selectLayers([])
689 } 693 }
694
695 // Do we need to scroll the layers?
696 if (this._areTracksCollapsing !== false) {
697 //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop);
698 //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\
699 this.layout_tracks.scrollTop = this._areTracksCollapsing;
700 this._areTracksCollapsing = false;
701 }
690 } 702 }
691 }, 703 },
692 704
@@ -898,6 +910,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
898 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); 910 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
899 this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); 911 this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
900 this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); 912 this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
913 this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
901 914
902 this.addPropertyChangeListener("currentDocument.model.domContainer", this); 915 this.addPropertyChangeListener("currentDocument.model.domContainer", this);
903 916
@@ -1073,15 +1086,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1073 } 1086 }
1074 }, 1087 },
1075 1088
1089 handlePlayButtonClick:{
1090 value:function(ev){
1091 this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
1092
1093 if (this.application.ninja.appModel.livePreview) {
1094 this.play_button.classList.remove("playbutton");
1095 this.play_button.classList.add("pausebutton");
1096
1097 } else {
1098 this.play_button.classList.remove("pausebutton");
1099 this.play_button.classList.add("playbutton");
1100 }
1101 }
1102 },
1103
1076 handleKeyframeShortcut:{ 1104 handleKeyframeShortcut:{
1077 value:function(action){ 1105 value:function(action){
1078 var tempEv = {}; 1106 var tempEv = {};
1079 tempEv.offsetX = this.playheadmarker.offsetLeft; 1107 tempEv.offsetX = this.playheadmarker.offsetLeft;
1080