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.html8
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js81
2 files changed, 84 insertions, 5 deletions
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 @@
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",
@@ -167,7 +173,7 @@
167 <div id="main_timeline" class="maintimeline"> 173 <div id="main_timeline" class="maintimeline">
168 174
169 175
170 <div id="timeline_leftpane" class="tl_leftpane"> 176 <div id="timeline_leftpane" class="tl_leftpane" tabindex="-1">
171 <div id="leftpane_inside" class="leftinside"> 177 <div id="leftpane_inside" class="leftinside">
172 <div id="timeline_controller" class="timelinecontroller"> 178 <div id="timeline_controller" class="timelinecontroller">
173 <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 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;
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
@@ -155,6 +156,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
155 this.newlayer_button.addEventListener("click", this, false); 156 this.newlayer_button.addEventListener("click", this, false);
156 this.deletelayer_button.identifier = "deleteLayer"; 157 this.deletelayer_button.identifier = "deleteLayer";
157 this.deletelayer_button.addEventListener("click", this, false); 158 this.deletelayer_button.addEventListener("click", this, false);
159
160 // New click listener to handle select/deselect events
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
158 166
159 // Simultaneous scrolling of the layer and tracks 167 // Simultaneous scrolling of the layer and tracks
160 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 168 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -194,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
194 202
195 handleAddLayerClick:{ 203 handleAddLayerClick:{
196 value:function(event){ 204 value:function(event){
197 event.stopPropagation(); 205 //event.stopPropagation();
198 this._isLayer = true; 206 this._isLayer = true;
199 this.needsDraw = true; 207 this.needsDraw = true;
200 208
@@ -203,7 +211,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
203 211
204 handleDeleteLayerClick:{ 212 handleDeleteLayerClick:{
205 value:function(event){ 213 value:function(event){
206 event.stopPropagation(); 214 //event.stopPropagation();
207 this._deleteKeyDown=false; 215 this._deleteKeyDown=false;
208 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ 216 if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
209 this._hashKey="123"; 217 this._hashKey="123";
@@ -237,6 +245,60 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
237 } 245 }
238 }, 246 },
239 247
248 timelineLeftPaneClick : {
249 value: function(event) {
250 // Check ALL THE CLICKS
251 // Are they in a particular layer? If so, we need to select that layer and
252 // deselect the others.
253 var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
254 if (ptrParent !== false) {
255 // Why yes, the click was within a layer. But which one?
256 var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText,
257 myIndex = 0,
258 i = 0,
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 }
270 }
271 },
272
273 timelineLeftPanelBlur: {
274 value: function(event) {
275 console.log('blur called with ' + this._skipNextBlur);
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) {
297 this._skipNextBlur = true;
298 }
299 }
300 },
301
240 handleNewLayer:{ 302 handleNewLayer:{
241 value:function(event){ 303 value:function(event){
242 // Add a new layer. It should be added above the currently selected layer, 304 // Add a new layer. It should be added above the currently selected layer,
@@ -314,6 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
314 thingToPush.arrLayerStyles = []; 376 thingToPush.arrLayerStyles = [];
315 thingToPush.element=[]; 377 thingToPush.element=[];
316 thingToPush.deleted=false; 378 thingToPush.deleted=false;
379 thingToPush.isSelected = false;
317 thingToPush.parentElement=this.application.ninja.currentSelectedContainer; 380 thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
318 // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; 381 // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid;
319 382
@@ -332,14 +395,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
332 this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); 395 this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
333 this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); 396 this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
334 thingToPush.layerPosition=myIndex; 397 thingToPush.layerPosition=myIndex;
398 thingToPush.isSelected = true;
335 newTrack.trackPosition=myIndex; 399 newTrack.trackPosition=myIndex;
336 this.arrLayers.splice(myIndex, 0, thingToPush); 400 this.arrLayers.splice(myIndex, 0, thingToPush);
337 this.arrTracks.splice(myIndex, 0, newTrack); 401 this.arrTracks.splice(myIndex, 0, newTrack);
338 this.currentLayerSelected= this.arrLayers[myIndex]; 402 this.currentLayerSelected= this.arrLayers[myIndex];
403 var i = 0,
404 arrLayersLength = this.arrLayers.length;
405 for (i = 0; i < arrLayersLength; i++) {
406 if (i === myIndex) {
407 this.arrLayers[i].isSelected = true;
408 } else {
409 this.arrLayers[i].isSelected = false;
410 }
411 }
339 this.layerRepetition.selectedIndexes = [myIndex]; 412 this.layerRepetition.selectedIndexes = [myIndex];
340 } else { 413 } else {
341 this.arrLayers.push(thingToPush); 414 this.arrLayers.splice(0, 0, thingToPush);
342 this.arrTracks.push(newTrack); 415 this.arrTracks.splice(0, 0, newTrack);
343 thingToPush.layerPosition=this.arrLayers.length-1; 416 thingToPush.layerPosition=this.arrLayers.length-1;
344 newTrack.trackPosition=this.arrTracks.length-1; 417 newTrack.trackPosition=this.arrTracks.length-1;
345 this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1];