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.html6
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js221
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css36
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss3
4 files changed, 209 insertions, 57 deletions
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 53a3b299..ef13f22e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -117,28 +117,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
117 if (value === this._currentDocument) { 117 if (value === this._currentDocument) {
118 return; 118 return;
119 } 119 }
120
121 if(!this._currentDocument && value.currentView === "design") {
122 this.enablePanel(true);
123 }
124
125 this._currentDocument = value; 120 this._currentDocument = value;
121
122 var boolDoc = false,
123 boolView = false;
124
125 // Should we enable the panel?
126 // Only if we have both a document and we're in design view.
127 if (typeof(value) !== "undefined") {
128 if (value.currentView === "design") {
129 // We are in design view.
130 boolView = true;
131 }
132 }
133 if (typeof(this._currentDocument) !== "undefined") {
134 // We have a document, or at least we have initialized the panel.
135 boolDoc = true;
136 }
126 137
127 if(!value) { 138 if(boolDoc === false) {
128 this._boolCacheArrays = false; 139 this._boolCacheArrays = false;
129 this.clearTimelinePanel(); 140 this.clearTimelinePanel();
130 this._boolCacheArrays = true; 141 this._boolCacheArrays = true;
131 this.enablePanel(false); 142 this.enablePanel(false);
132 } else if(this._currentDocument.currentView === "design") { 143 } else {
133 this._boolCacheArrays = false; 144 if(boolView === true) {
134 this.clearTimelinePanel(); 145 this._boolCacheArrays = false;
135 this._boolCacheArrays = true; 146 this.clearTimelinePanel();
136 147 this._boolCacheArrays = true;
137 // Rebind the document events for the new document context 148
138 this._bindDocumentEvents(); 149 // Rebind the document events for the new document context
139 150 this._bindDocumentEvents();
140 // Initialize the timeline for the document. 151
141 this.initTimelineForDocument(); 152 // Initialize the timeline for the document.
153 this.initTimelineForDocument();
154 this.enablePanel(true);
155 }
142 } 156 }
143 } 157 }
144 }, 158 },
@@ -229,6 +243,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
229 value: false 243 value: false
230 }, 244 },
231 245
246 _areTracksCollapsing: {
247 value: false
248 },
249
232 _currentOpenSpanMenu: { 250 _currentOpenSpanMenu: {
233 value: false 251 value: false
234 }, 252 },
@@ -595,7 +613,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
595 prepareForDraw:{ 613 prepareForDraw:{
596 value:function () { 614 value:function () {
597 this.initTimeline(); 615 this.initTimeline();
598
599 } 616 }
600 }, 617 },
601 618
@@ -674,6 +691,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
674 // We have shuffled layers, so we need to update this.selectedLayers. 691 // We have shuffled layers, so we need to update this.selectedLayers.
675 this.selectLayers([]) 692 this.selectLayers([])
676 } 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 }
677 } 702 }
678 }, 703 },
679 704
@@ -726,11 +751,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
726 if (this._boolCacheArrays) { 751 if (this._boolCacheArrays) {
727 // ... but only if we're supposed to. 752 // ... but only if we're supposed to.
728 if(this.currentDocument) { 753 if(this.currentDocument) {
754 var i = 0,
755 hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length,
756 boolHash = false;
757
729 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; 758 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
730 this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; 759 this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
731 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; 760 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
732 this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; 761 this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
733 this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; 762 this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
763 for (i = 0; i < hashLength; i++ ) {
764 if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
765 this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers;
766 boolHash = true;
767 }
768 }
769 if (boolHash === false) {
770 var newHash = {};
771 newHash.containerUuid = this.currentDocument.model.domContainer.uuid;
772 newHash.arrLayers = this.arrLayers;
773 this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash);
774 }
734 } 775 }
735 this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected; 776 this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
736 } 777 }
@@ -748,6 +789,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
748 this.application.ninja.currentDocument.tlCurrentLayersSelected = false; 789 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
749 this.application.ninja.currentDocument.tlCurrentElementsSelected = []; 790 this.application.ninja.currentDocument.tlCurrentElementsSelected = [];
750 this.application.ninja.currentDocument.lockedElements = []; 791 this.application.ninja.currentDocument.lockedElements = [];
792 this.application.ninja.currentDocument.tlBreadcrumbHash = [];
751 } 793 }
752 }, 794 },
753 795
@@ -868,6 +910,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
868 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); 910 this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
869 this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); 911 this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
870 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);
871 914
872 this.addPropertyChangeListener("currentDocument.model.domContainer", this); 915 this.addPropertyChangeListener("currentDocument.model.domContainer", this);
873 916
@@ -891,7 +934,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
891 this.drawTimeMarkers(); 934 this.drawTimeMarkers();
892 // Document switching 935 // Document switching
893 // Check to see if we have saved timeline information in the currentDocument. 936 // Check to see if we have saved timeline information in the currentDocument.
894 //console.log("TimelinePanel.initTimelineForDocument"); 937 // console.log("TimelinePanel.initTimelineForDocument");
895 938