aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorJon Reid2012-02-07 18:44:06 -0800
committerJon Reid2012-02-07 18:44:06 -0800
commitad81fc7e75225d24ffaf59bb179a32aa12f5141a (patch)
tree5666374f64a16fe83b6d6d627f77d041341be51f /js/panels
parente247f0c9bd596f0aeba6f6239ea9bd4178f5d50d (diff)
downloadninja-ad81fc7e75225d24ffaf59bb179a32aa12f5141a.tar.gz
Timeline: select/deselect layers. Work on focus/blur for layers.
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html5
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js29
-rw-r--r--js/panels/Timeline/Style.reel/Style.js22
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html8
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js81
5 files changed, 137 insertions, 8 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index add6cb38..add28385 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -66,6 +66,11 @@
66 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty", 66 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty",
67 "oneway" : false 67 "oneway" : false
68 }, 68 },
69 "isSelected" : {
70 "boundObject" : {"@": "repetition1"},
71 "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
72 "oneway" : false
73 },
69 "editorValue" : { 74 "editorValue" : {
70 "boundObject" : {"@": "repetition1"}, 75 "boundObject" : {"@": "repetition1"},
71 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue", 76 "boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 29171272..c5f5d7e4 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -103,6 +103,7 @@ var Layer = exports.Layer = Montage.create(Component, {
103 _isSelected:{ 103 _isSelected:{
104 value: false, 104 value: false,
105 writable: true, 105 writable: true,
106 serializable: true,
106 enumerable: false 107 enumerable: false
107 }, 108 },
108 109
@@ -111,7 +112,22 @@ var Layer = exports.Layer = Montage.create(Component, {
111 return this._isSelected; 112 return this._isSelected;
112 }, 113 },
113 set:function(value){ 114 set:function(value){
114 this._isSelected = value; 115 if (value !== this._isSelected) {
116 // Only concerned about different values
117 if (value === false) {
118 // Deselect all of the styles
119 var i = 0, arrLayerStylesLength = this.arrLayerStyles.length;
120 if (arrLayerStylesLength > 0) {
121 for (i = 0; i < arrLayerStylesLength; i++) {
122 this.arrLayerStyles[i].isSelected = false;
123 }
124 this.styleRepetition.selectedIndexes = null;
125 }
126 }
127 this._isSelected = value;
128 this.needsDraw = true;
129 }
130
115 } 131 }
116 }, 132 },
117 _isAnimated:{ 133 _isAnimated:{
@@ -335,6 +351,12 @@ var Layer = exports.Layer = Montage.create(Component, {
335 this.styleCollapser.bypassAnimation = true; 351 this.styleCollapser.bypassAnimation = true;
336 this.styleCollapser.toggle(); 352 this.styleCollapser.toggle();
337 } 353 }
354
355 if (this.isSelected) {
356 this.element.classList.add("selected");
357 } else {
358 this.element.classList.remove("selected");
359 }
338 } 360 }
339 }, 361 },
340 /* End: Draw cycle */ 362 /* End: Draw cycle */
@@ -398,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, {
398 newStyle.editorProperty = ""; 420 newStyle.editorProperty = "";
399 newStyle.editorValue = ""; 421 newStyle.editorValue = "";
400 newStyle.ruleTweener = false; 422 newStyle.ruleTweener = false;
423 newStyle.isSelected = true;
401 424
402 if (!!this.styleRepetition.selectedIndexes) { 425 if (!!this.styleRepetition.selectedIndexes) {
403 mySelection = this.styleRepetition.selectedIndexes[0]; 426 mySelection = this.styleRepetition.selectedIndexes[0];
@@ -450,13 +473,13 @@ var Layer = exports.Layer = Montage.create(Component, {
450 handleAddStyleClick: { 473 handleAddStyleClick: {
451 value: function(event) { 474 value: function(event) {
452 // Stop the event propagation 475 // Stop the event propagation
453 event.stopPropagation(); 476 //event.stopPropagation();
454 this.addStyle(); 477 this.addStyle();
455 } 478 }
456 }, 479 },
457 handleDeleteStyleClick: { 480 handleDeleteStyleClick: {
458 value: function(event) { 481 value: function(event) {
459 event.stopPropagation(); 482 //event.stopPropagation();
460 this.deleteStyle(); 483 this.deleteStyle();
461 } 484 }
462 }, 485 },
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 796385d0..bf254795 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -19,6 +19,23 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
19 }, 19 },
20 20
21 /* === BEGIN: Models === */ 21 /* === BEGIN: Models === */
22 // isSelected: whether or not the style is selected
23 _isSelected: {
24 serializable: true,
25 value: false
26 },
27 isSelected: {
28 serializable: true,
29 get: function() {
30 return this._isSelected;
31 },
32 set: function(newVal) {
33 if (newVal !== this._isSelected) {
34 this._isSelected = newVal;
35 this.needsDraw = true;
36 }
37 }
38 },
22 39
23 // Property for this editor 40 // Property for this editor
24 _editorProperty: { 41 _editorProperty: {
@@ -152,6 +169,11 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
152 // Show the right thing 169 // Show the right thing
153 this._showView(); 170 this._showView();
154 } 171 }
172 if (this.isSelected) {
173 this.element.classList.add("selected");
174 } else {
175 this.element.classList.remove("selected");
176 }
155 } 177 }
156 }, 178 },
157 didDraw: { 179 didDraw: {
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.addEventL