From ad81fc7e75225d24ffaf59bb179a32aa12f5141a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 7 Feb 2012 18:44:06 -0800 Subject: Timeline: select/deselect layers. Work on focus/blur for layers. --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 8 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 81 ++++++++++++++++++++-- 2 files changed, 84 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9ed69f4a..1785f888 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -14,6 +14,7 @@ "element": {"#": "timeline_panel"}, "user_layers": {"#": "user_layers"}, "track_container": {"#": "right_inside"}, + "timeline_leftpane" : {"#" : "timeline_leftpane"}, "layer_tracks": {"#": "layer_tracks"}, "master_track": {"#": "master_track"}, "newlayer_button": {"#": "newlayer_button"}, @@ -92,6 +93,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", "oneway" : false }, + "isSelected" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", + "oneway" : false + }, "isStyleCollapsed" : { "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", @@ -167,7 +173,7 @@
-
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index e0825893..a8934017 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; var Component = require("montage/ui/component").Component; var Layer = require("js/panels/Timeline/Layer.reel").Layer; var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; +var nj = require("js/lib/NJUtils").NJUtils; // var Track = require("js/panels/Timeline/Track.reel").Track; @@ -155,6 +156,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.newlayer_button.addEventListener("click", this, false); this.deletelayer_button.identifier = "deleteLayer"; this.deletelayer_button.addEventListener("click", this, false); + + // New click listener to handle select/deselect events + this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); + this.timeline_leftpane.addEventListener("blur", this.timelineLeftPanelBlur.bind(this), false); + this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false); + + // Simultaneous scrolling of the layer and tracks this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); @@ -194,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleAddLayerClick:{ value:function(event){ - event.stopPropagation(); + //event.stopPropagation(); this._isLayer = true; this.needsDraw = true; @@ -203,7 +211,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayerClick:{ value:function(event){ - event.stopPropagation(); + //event.stopPropagation(); this._deleteKeyDown=false; if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ this._hashKey="123"; @@ -237,6 +245,60 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + timelineLeftPaneClick : { + value: function(event) { + // Check ALL THE CLICKS + // Are they in a particular layer? If so, we need to select that layer and + // deselect the others. + var ptrParent = nj.queryParentSelector(event.target, ".container-layer"); + if (ptrParent !== false) { + // Why yes, the click was within a layer. But which one? + var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText, + myIndex = 0, + i = 0, + arrLayersLength = this.arrLayers.length; + console.log(strLabel); + for (i = 0; i < arrLayersLength; i++) { + if (this.arrLayers[i].layerName === strLabel) { + myIndex = i; + this.arrLayers[i].isSelected = true; + } else { + this.arrLayers[i].isSelected = false; + } + } + } + } + }, + + timelineLeftPanelBlur: { + value: function(event) { + console.log('blur called with ' + this._skipNextBlur); + if (this._skipNextBlur === true) { + this._skipNextBlur = false; + } else { + var i = 0, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + this.arrLayers[i].isSelected = false; + } + this.layerRepetition.selectedIndexes = null; + } + } + }, + _skipNextBlur : { + value: false + }, + timelineLeftPanelMousedown : { + value: function(event) { + console.log(event.target.classList) + var ptrParent = nj.queryParentSelector(event.target, ".label-style"); + console.log('mousedown with ' + ptrParent) + if (ptrParent !== false) { + this._skipNextBlur = true; + } + } + }, + handleNewLayer:{ value:function(event){ // Add a new layer. It should be added above the currently selected layer, @@ -314,6 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.arrLayerStyles = []; thingToPush.element=[]; thingToPush.deleted=false; + thingToPush.isSelected = false; thingToPush.parentElement=this.application.ninja.currentSelectedContainer; // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; @@ -332,14 +395,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); thingToPush.layerPosition=myIndex; + thingToPush.isSelected = true; newTrack.trackPosition=myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); this.currentLayerSelected= this.arrLayers[myIndex]; + var i = 0, + arrLayersLength = this.arrLayers.length; + for (i = 0; i < arrLayersLength; i++) { + if (i === myIndex) { + this.arrLayers[i].isSelected = true; + } else { + this.arrLayers[i].isSelected = false; + } + } this.layerRepetition.selectedIndexes = [myIndex]; } else { - this.arrLayers.push(thingToPush); - this.arrTracks.push(newTrack); + this.arrLayers.splice(0, 0, thingToPush); + this.arrTracks.splice(0, 0, newTrack); thingToPush.layerPosition=this.arrLayers.length-1; newTrack.trackPosition=this.arrTracks.length-1; this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; -- cgit v1.2.3