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.js131
2 files changed, 130 insertions, 7 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 9ed69f4a..f7cd40ca 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -14,6 +14,7 @@
14 "element": {"#": "timeline_panel"}, 14 "element": {"#": "timeline_panel"},
15 "user_layers": {"#": "user_layers"}, 15 "user_layers": {"#": "user_layers"},
16 "track_container": {"#": "right_inside"}, 16 "track_container": {"#": "right_inside"},
17 "timeline_leftpane" : {"#" : "timeline_leftpane"},
17 "layer_tracks": {"#": "layer_tracks"}, 18 "layer_tracks": {"#": "layer_tracks"},
18 "master_track": {"#": "master_track"}, 19 "master_track": {"#": "master_track"},
19 "newlayer_button": {"#": "newlayer_button"}, 20 "newlayer_button": {"#": "newlayer_button"},
@@ -92,6 +93,11 @@
92 "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", 93 "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
93 "oneway" : false 94 "oneway" : false
94 }, 95 },
96 "isSelected" : {
97 "boundObject" : {"@" : "repetition1"},
98 "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
99 "oneway" : false
100 },
95 "isStyleCollapsed" : { 101 "isStyleCollapsed" : {
96 "boundObject" : {"@" : "repetition1"}, 102 "boundObject" : {"@" : "repetition1"},
97 "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", 103 "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index ef353490..48537cef 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -2,6 +2,7 @@ var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var Layer = require("js/panels/Timeline/Layer.reel").Layer; 3var Layer = require("js/panels/Timeline/Layer.reel").Layer;
4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; 4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
5var nj = require("js/lib/NJUtils").NJUtils;
5 6
6// var Track = require("js/panels/Timeline/Track.reel").Track; 7// var Track = require("js/panels/Timeline/Track.reel").Track;
7 8
@@ -139,15 +140,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
139 // Initialize the timeline 140 // Initialize the timeline
140 initTimelineView : { 141 initTimelineView : {
141 value:function(){ 142 value:function(){
143
144 // Get some selectors to make life easier.
145 this.layout_tracks = this.element.querySelector(".layout-tracks");
146 this.layout_markers = this.element.querySelector(".layout_markers");
142 147
143 // Add event handlers on the buttons. 148 // Add event handlers on the buttons.
144 this.newlayer_button.identifier = "addLayer"; 149 this.newlayer_button.identifier = "addLayer";
145 this.newlayer_button.addEventListener("click", this, false); 150 this.newlayer_button.addEventListener("click", this, false);
146 this.deletelayer_button.identifier = "deleteLayer"; 151 this.deletelayer_button.identifier = "deleteLayer";
147 this.deletelayer_button.addEventListener("click", this, false); 152 this.deletelayer_button.addEventListener("click", this, false);
153
154 // New click listener to handle select/deselect events
155 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
156
157 // New click listener on body to handle "blurring" the panel
158 document.addEventListener("click", this.handleBlur.bind(this), false);
148 159
149 // Simultaneous scrolling of the layer and tracks 160 // Simultaneous scrolling of the layer and tracks
150 this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 161 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
151 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 162 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
152 163
153 // Calculate and draw time markers 164 // Calculate and draw time markers
@@ -166,8 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
166 177
167 updateLayerScroll:{ 178 updateLayerScroll:{
168 value:function(){ 179 value:function(){
169 this.user_layers.scrollTop = this.layer_tracks.scrollTop; 180 console.log(this.layout_tracks.scrollLeft)
170 this.master_track.scrollLeft = this.layer_tracks.scrollLeft; 181 this.user_layers.scrollTop = this.layout_tracks.scrollTop;
182 this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
171 } 183 }
172 }, 184 },
173 185
@@ -183,7 +195,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
183 195
184 handleAddLayerClick:{ 196 handleAddLayerClick:{
185 value:function(event){ 197 value:function(event){
186 event.stopPropagation(); 198 //event.stopPropagation();
187 this._isLayer = true; 199 this._isLayer = true;
188 this.needsDraw = true; 200 this.needsDraw = true;
189 } 201 }
@@ -191,7 +203,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
191 203
192 handleDeleteLayerClick:{ 204 handleDeleteLayerClick:{
193 value:function(event){ 205 value:function(event){
194 event.stopPropagation(); 206 //event.stopPropagation();
195 this._deleteKeyDown=false; 207 this._deleteKeyDown=false;
196 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ 208 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
197 this._hashKey="123"; 209 this._hashKey="123";
@@ -230,6 +242,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
230 } 242 }
231 }, 243 },
232 244
245 timelineLeftPaneClick : {
246 value: function(event) {
247 // Check ALL THE CLICKS
248 // Are they in a particular layer? If so, we need to select that layer and
249 // deselect the others.
250 var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
251 if (ptrParent !== false) {
252 // Why yes, the click was within a layer. But which one?
253 var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText,
254 myIndex = this.getLayerIndexByName(strLabel);
255 this.selectLayer(myIndex);
256 }
257 }
258 },
259
260 handleBlur: {
261 value: function(event) {
262 var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane");
263 if (ptrParent !== false) {
264 // We were clicking somewhere within the left pane, so we shouldn't blur.
265 } else {
266 this.selectLayer("none");
267 }
268 }
269 },
270
233 handleNewLayer:{ 271 handleNewLayer:{
234 value:function(event){ 272 value:function(event){
235 // Add a new layer. It should be added above the currently selected layer, 273 // Add a new layer. It should be added above the currently selected layer,
@@ -315,6 +353,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
315 thingToPush.arrLayerStyles = []; 353 thingToPush.arrLayerStyles = [];
316 thingToPush.element=[]; 354 thingToPush.element=[];
317 thingToPush.deleted=false; 355 thingToPush.deleted=false;
356 thingToPush.isSelected = false;
318 if(_firstLayerDraw){ 357 if(_firstLayerDraw){
319 thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; 358 thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid;
320 thingToPush.parentElement=this.application.ninja.currentSelectedContainer; 359 thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
@@ -341,18 +380,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
341 if (!!this.layerRepetition.selectedIndexes) { 380 if (!!this.layerRepetition.selectedIndexes) {
342 myIndex = this.layerRepetition.selectedIndexes[0]; 381 myIndex = this.layerRepetition.selectedIndexes[0];
343 thingToPush.layerPosition=myIndex; 382 thingToPush.layerPosition=myIndex;
383 thingToPush.isSelected = true;
344 newTrack.trackPosition=myIndex; 384 newTrack.trackPosition=myIndex;
345 this.arrLayers.splice(myIndex, 0, thingToPush); 385 this.arrLayers.splice(myIndex, 0, thingToPush);
346 this.arrTracks.splice(myIndex, 0, newTrack); 386 this.arrTracks.splice(myIndex, 0, newTrack);
347 this._LayerUndoPosition = myIndex; 387 this._LayerUndoPosition = myIndex;
388 /*
348 this.currentLayerSelected= this.arrLayers[myIndex]; 389 this.currentLayerSelected= this.arrLayers[myIndex];
349 this.currentTrackSelected=this.arrTracks[myIndex]; 390 this.currentTrackSelected=this.arrTracks[myIndex];
391 var i = 0,
392 arrLayersLength = this.arrLayers.length;
393 for (i = 0; i < arrLayersLength; i++) {
394 if (i === myIndex) {
395 this.arrLayers[i].isSelected = true;
396 } else {
397 this.arrLayers[i].isSelected = false;
398 }
399 }
350 this.layerRepetition.selectedIndexes = [myIndex]; 400 this.layerRepetition.selectedIndexes = [myIndex];
401 */
402
403 this.selectLayer(myIndex);
404
351 this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); 405 this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
352 this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); 406 this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
353 } else { 407 } else {
354 this.arrLayers.push(thingToPush); 408 this.arrLayers.splice(0, 0, thingToPush);
355 this.arrTracks.push(newTrack); 409 this.arrTracks.splice(0, 0, newTrack);