aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
authorJon Reid2012-02-07 22:51:20 -0800
committerJon Reid2012-02-07 22:51:20 -0800
commite34a3ec35118690a8addbe1c75e76a747fd75259 (patch)
tree042228f173bbe20e2d518d2dc9728c81b4520244 /js/panels/Timeline/TimelinePanel.reel
parentad81fc7e75225d24ffaf59bb179a32aa12f5141a (diff)
downloadninja-e34a3ec35118690a8addbe1c75e76a747fd75259.tar.gz
Timeline: Finish focus/blur for left side of panel. Add new methods selectLayer, getLayerIndexByID and getLayerIndexByName.
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js112
2 files changed, 75 insertions, 39 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 1785f888..f7cd40ca 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -173,7 +173,7 @@
173 <div id="main_timeline" class="maintimeline"> 173 <div id="main_timeline" class="maintimeline">
174 174
175 175
176 <div id="timeline_leftpane" class="tl_leftpane" tabindex="-1"> 176 <div id="timeline_leftpane" class="tl_leftpane">
177 <div id="leftpane_inside" class="leftinside"> 177 <div id="leftpane_inside" class="leftinside">
178 <div id="timeline_controller" class="timelinecontroller"> 178 <div id="timeline_controller" class="timelinecontroller">
179 <div id="timeline_controls" class="timelinecontrols"> 179 <div id="timeline_controls" class="timelinecontrols">
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a8934017..f942f36e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -159,10 +159,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
159 159
160 // New click listener to handle select/deselect events 160 // New click listener to handle select/deselect events
161 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); 161 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
162 this.timeline_leftpane.addEventListener("blur", this.timelineLeftPanelBlur.bind(this), false);
163 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
164
165 162
163 // New click listener on body to handle "blurring" the panel
164 document.addEventListener("click", this.handleBlur.bind(this), false);
166 165
167 // Simultaneous scrolling of the layer and tracks 166 // Simultaneous scrolling of the layer and tracks
168 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 167 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -254,47 +253,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
254 if (ptrParent !== false) { 253 if (ptrParent !== false) {
255 // Why yes, the click was within a layer. But which one? 254 // Why yes, the click was within a layer. But which one?
256 var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText, 255 var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText,
257 myIndex = 0, 256 myIndex = this.getLayerIndexByName(strLabel);
258 i = 0, 257 this.selectLayer(myIndex);
259 arrLayersLength = this.arrLayers.length;
260 console.log(strLabel);
261 for (i = 0; i < arrLayersLength; i++) {
262 if (this.arrLayers[i].layerName === strLabel) {
263 myIndex = i;
264 this.arrLayers[i].isSelected = true;
265 } else {
266 this.arrLayers[i].isSelected = false;
267 }
268 }
269 } 258 }
270 } 259 }
271 }, 260 },
272 261
273 timelineLeftPanelBlur: { 262 handleBlur: {
274 value: function(event) { 263 value: function(event) {
275 console.log('blur called with ' + this._skipNextBlur); 264 var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane");
276 if (this._skipNextBlur === true) {
277 this._skipNextBlur = false;
278 } else {
279 var i = 0,
280 arrLayersLength = this.arrLayers.length;
281 for (i = 0; i < arrLayersLength; i++) {
282 this.arrLayers[i].isSelected = false;
283 }
284 this.layerRepetition.selectedIndexes = null;
285 }
286 }
287 },
288 _skipNextBlur : {
289 value: false
290 },
291 timelineLeftPanelMousedown : {
292 value: function(event) {
293 console.log(event.target.classList)
294 var ptrParent = nj.queryParentSelector(event.target, ".label-style");
295 console.log('mousedown with ' + ptrParent)
296 if (ptrParent !== false) { 265 if (ptrParent !== false) {
297 this._skipNextBlur = true; 266 // We were clicking somewhere within the left pane, so we shouldn't blur.
267 } else {
268 this.selectLayer("none");
298 } 269 }
299 } 270 }
300 }, 271 },
@@ -399,6 +370,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
399 newTrack.trackPosition=myIndex; 370 newTrack.trackPosition=myIndex;
400 this.arrLayers.splice(myIndex, 0, thingToPush); 371 this.arrLayers.splice(myIndex, 0, thingToPush);
401 this.arrTracks.splice(myIndex, 0, newTrack); 372 this.arrTracks.splice(myIndex, 0, newTrack);
373 /*
402 this.currentLayerSelected= this.arrLayers[myIndex]; 374 this.currentLayerSelected= this.arrLayers[myIndex];
403 var i = 0, 375 var i = 0,
404 arrLayersLength = this.arrLayers.length; 376 arrLayersLength = this.arrLayers.length;
@@ -410,6 +382,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
410 } 382 }
411 } 383 }
412 this.layerRepetition.selectedIndexes = [myIndex]; 384 this.layerRepetition.selectedIndexes = [myIndex];
385 */
386
387 this.selectLayer(myIndex);
388
413 } else { 389 } else {
414 this.arrLayers.splice(0, 0, thingToPush); 390 this.arrLayers.splice(0, 0, thingToPush);
415 this.arrTracks.splice(0, 0, newTrack); 391 this.arrTracks.splice(0, 0, newTrack);
@@ -741,6 +717,66 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
741 return hashTrackObject; 717 return hashTrackObject;
742 718
743 } 719 }
720 },
721
722 selectLayer : {
723 value: function(layerIndex) {
724 // Select a layer based on its index.
725 // use layerIndex = "none" to deselect all layers.
726 var i = 0,
727 arrLayersLength = this.arrLayers.length;
728 for (i = 0; i < arrLayersLength; i++) {
729 if (i === layerIndex) {
730 this.arrLayers[i].isSelected = true;
731 } else {
732 this.arrLayers[i].isSelected = false;
733 }
734 }
735
736 if (layerIndex !== "none") {
737 this.layerRepetition.selectedIndexes = [layerIndex];
738 this.currentLayerSelected = this.arrLayers[layerIndex]
739 } else {
740 this.layerRepetition.selectedIndexes = null;
741 this.currentLayerSelected = null;
742 }
743 }
744 },
745
746 getLayerIndexByID : {
747 value: function(layerID) {
748 // Get the index in this.arrLayers that matches a particular layerID.
749 // Returns false if no match.
750 var i = 0,
751 returnVal = false,
752 arrLayersLength = this.arrLayers.length;
753
754 for (i=0; i < arrLayersLength; i++) {
755 if (this.arrLayers[i].layerID === layerID) {
756 returnVal = i;
757 }
758 }
759
760 return returnVal;
761
762 }
763 },
764 getLayerIndexByName : {
765 value: function(layerName) {
766 // Get the index in this.arrLayers that matches a particular layerName
767 // Returns false if no match
768 var i = 0,
769 returnVal = false,
770 arrLayersLength = this.arrLayers.length;
771
772 for (i=0; i < arrLayersLength; i++) {
773 if (this.arrLayers[i].layerName === layerName) {
774 returnVal = i;
775 }
776 }
777
778 return returnVal;
779 }
744 } 780 }
745 781
746 /* === END: Controllers === */ 782 /* === END: Controllers === */