aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js111
1 files changed, 19 insertions, 92 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 3c4cfa2e..b3f4318a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -11,11 +11,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
11 }, 11 },
12 12
13 /* === BEGIN: Models === */ 13 /* === BEGIN: Models === */
14
15 // Layer models: arrays for the data and repetition, current layer number,
16 _arrLayers:{ 14 _arrLayers:{
17 value:[] 15 value:[]
18 }, 16 },
17
19 arrLayers:{ 18 arrLayers:{
20 get:function () { 19 get:function () {
21 return this._arrLayers; 20 return this._arrLayers;
@@ -28,6 +27,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
28 _layerRepetition:{ 27 _layerRepetition:{
29 value:null 28 value:null
30 }, 29 },
30
31 layerRepetition:{ 31 layerRepetition:{
32 get:function () { 32 get:function () {
33 return this._layerRepetition; 33 return this._layerRepetition;
@@ -36,9 +36,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
36 this._layerRepetition = newVal; 36 this._layerRepetition = newVal;
37 } 37 }
38 }, 38 },
39
39 _currentLayerNumber:{ 40 _currentLayerNumber:{
40 value:0 41 value:0
41 }, 42 },
43
42 currentLayerNumber:{ 44 currentLayerNumber:{
43 get:function () { 45 get:function () {
44 return this._currentLayerNumber; 46 return this._currentLayerNumber;
@@ -62,11 +64,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
62 value:1000 64 value:1000
63 }, 65 },
64 66
65 // Track model
66 _arrTracks:{ 67 _arrTracks:{
67 serializable:true, 68 serializable:true,
68 value:[] 69 value:[]
69 }, 70 },
71
70 arrTracks:{ 72 arrTracks:{
71 serializable:true, 73 serializable:true,
72 get:function () { 74 get:function () {
@@ -76,10 +78,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
76 this._arrTracks = newVal; 78 this._arrTracks = newVal;
77 } 79 }
78 }, 80 },
81
79 _trackRepetition:{ 82 _trackRepetition:{
80 serializable:true, 83 serializable:true,
81 value:null 84 value:null
82 }, 85 },
86
83 trackRepetition:{ 87 trackRepetition:{
84 serializable:true, 88 serializable:true,
85 get:function () { 89 get:function () {
@@ -104,11 +108,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
104 } 108 }
105 }, 109 },
106 110
111 _isLayer:{
112 value:false
113 },
114
115 _firstTimeLoaded:{
116 value:true,
117 writable:true
118 },
107 119
120 _arrLayersNonEmpty:{
121 value:true,
122 writable:true
123 },
108 /* === END: Models === */ 124 /* === END: Models === */
109 125
110 /* === BEGIN: Draw cycle === */ 126 /* === BEGIN: Draw cycle === */
111
112 prepareForDraw:{ 127 prepareForDraw:{
113 value:function () { 128 value:function () {
114 129
@@ -126,20 +141,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
126 } 141 }
127 }, 142 },
128 143
129 _isLayer:{
130 value:false
131 },
132
133 _firstTimeLoaded:{
134 value:true,
135 writable:true
136 },
137
138 _arrLayersNonEmpty:{
139 value:true,
140 writable:true
141 },
142
143 willDraw:{ 144 willDraw:{
144 value:function () { 145 value:function () {
145 if (this._isLayer) { 146 if (this._isLayer) {
@@ -148,43 +149,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
148 } 149 }
149 } 150 }
150 }, 151 },
151
152 /* === END: Draw cycle === */ 152 /* === END: Draw cycle === */
153 153
154 /* === BEGIN: Controllers === */ 154 /* === BEGIN: Controllers === */
155
156 initTimelineView:{ 155 initTimelineView:{
157 value:function () { 156 value:function () {
158
159 // Get some selectors to make life easier.
160 this.layout_tracks = this.element.querySelector(".layout-tracks"); 157 this.layout_tracks = this.element.querySelector(".layout-tracks");
161 this.layout_markers = this.element.querySelector(".layout_markers"); 158 this.layout_markers = this.element.querySelector(".layout_markers");
162 159
163 // Add event handlers on the buttons.
164 this.newlayer_button.identifier = "addLayer"; 160 this.newlayer_button.identifier = "addLayer";
165 this.newlayer_button.addEventListener("click", this, false); 161 this.newlayer_button.addEventListener("click", this, false);
166 this.deletelayer_button.identifier = "deleteLayer"; 162 this.deletelayer_button.identifier = "deleteLayer";
167 this.deletelayer_button.addEventListener("click", this, false); 163 this.deletelayer_button.addEventListener("click", this, false);
168
169 // New click listener to handle select/deselect events
170 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); 164 this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
171
172 // Simultaneous scrolling of the layer and tracks
173 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 165 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
174 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 166 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
175 167
176 // Calculate and draw time markers
177 this.drawTimeMarkers(); 168 this.drawTimeMarkers();
178 169
179 // Default to one layer for new doc
180// this.newLayer();
181 this._hashKey = "123"; 170 this._hashKey = "123";
182 _firstLayerDraw = false; 171 _firstLayerDraw = false;
183 NJevent('newLayer', this._hashKey); 172 NJevent('newLayer', this._hashKey);
184 _firstLayerDraw = true; 173 _firstLayerDraw = true;
185 this.selectLayer(0); 174 this.selectLayer(0);
186
187 // TODO - add condition for existing doc and parse DOM for top level elements
188 } 175 }
189 }, 176 },
190 177
@@ -234,7 +221,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
234 221
235 handleAddLayerClick:{ 222 handleAddLayerClick:{
236 value:function (event) { 223 value:function (event) {
237 //event.stopPropagation();
238 this._isLayer = true; 224 this._isLayer = true;
239 this.needsDraw = true; 225 this.needsDraw = true;
240 } 226 }
@@ -242,7 +228,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
242 228
243 handleDeleteLayerClick:{ 229 handleDeleteLayerClick:{
244 value:function (event) { 230 value:function (event) {
245 //event.stopPropagation();
246 this._deleteKeyDown = false; 231 this._deleteKeyDown = false;
247 if (this.application.ninja.currentSelectedContainer.id === "UserContent") { 232 if (this.application.ninja.currentSelectedContainer.id === "UserContent") {
248 this._hashKey = "123"; 233 this._hashKey = "123";
@@ -260,17 +245,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
260 this._firstTimeLoaded = false; 245 this._firstTimeLoaded = false;
261 } else { 246 } else {
262 while (this.arrLayers.pop()) { 247 while (this.arrLayers.pop()) {
263
264 } 248 }
265 while (this.arrTracks.pop()) { 249 while (this.arrTracks.pop()) {
266 } 250 }
267
268 if (event.detail.element.id === "UserContent") {