aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rwxr-xr-xjs/panels/PanelContainer/PanelContainer.reel/PanelContainer.js2
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js1
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html5
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js143
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html5
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js9
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js16
-rwxr-xr-xjs/panels/properties/content.reel/content.js38
-rwxr-xr-xjs/panels/properties/sections/custom-rows/color-select.reel/color-select.html4
-rwxr-xr-xjs/panels/properties/sections/custom-rows/color-select.reel/color-select.js21
-rwxr-xr-xjs/panels/properties/sections/custom.reel/custom.js5
11 files changed, 217 insertions, 32 deletions
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 3cbd4369..003724bb 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -45,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
45 }, 45 },
46 46
47 initPanelOrder: { 47 initPanelOrder: {
48 value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] 48 value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
49 }, 49 },
50 50
51 panelOrder: { 51 panelOrder: {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e75b4d0f..d50360e6 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -509,7 +509,6 @@ var Layer = exports.Layer = Montage.create(Component, {
509 this.styleCollapser.bypassAnimation = true; 509 this.styleCollapser.bypassAnimation = true;
510 this.styleCollapser.toggle(); 510 this.styleCollapser.toggle();
511 } 511 }
512
513 if (this.isSelected) { 512 if (this.isSelected) {
514 this.element.classList.add("selected"); 513 this.element.classList.add("selected");
515 } else { 514 } else {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 92adee05..1aa9a725 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -32,7 +32,8 @@
32 "timetext" : {"#": "time_text"}, 32 "timetext" : {"#": "time_text"},
33 "timebar" : {"#": "time_bar"}, 33 "timebar" : {"#": "time_bar"},
34 "container_tracks" : {"#" : "container-tracks"}, 34 "container_tracks" : {"#" : "container-tracks"},
35 "end_hottext" : {"@" : "endHottext"} 35 "end_hottext" : {"@" : "endHottext"},
36 "getme" : {"#" : "getme"}
36 } 37 }
37 }, 38 },
38 39
@@ -284,7 +285,7 @@
284 285
285 <div id="user_layers" class="userlayers"> 286 <div id="user_layers" class="userlayers">
286 <div id="master_layer" class="masterlayer"> 287 <div id="master_layer" class="masterlayer">
287 <div>Master Layer</div> 288 <div id="getme">Master Layer</div>
288 </div> 289 </div>
289 <div id="container-layers"> 290 <div id="container-layers">
290 <div id="container-layer"></div> 291 <div id="container-layer"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d7d5328e..81415951 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -28,6 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
28 }, 28 },
29 set:function (newVal) { 29 set:function (newVal) {
30 this._arrLayers = newVal; 30 this._arrLayers = newVal;
31 this.application.ninja.currentDocument.tlArrLayers = newVal;
31 } 32 }
32 }, 33 },
33 34
@@ -99,6 +100,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
99 }, 100 },
100 set:function (newVal) { 101 set:function (newVal) {
101 this._arrTracks = newVal; 102 this._arrTracks = newVal;
103 this.application.ninja.currentDocument.tlArrTracks = newVal;
102 } 104 }
103 }, 105 },
104 106
@@ -171,12 +173,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
171 /* === BEGIN: Draw cycle === */ 173 /* === BEGIN: Draw cycle === */
172 prepareForDraw:{ 174 prepareForDraw:{
173 value:function () { 175 value:function () {
174 this.eventManager.addEventListener( "onOpenDocument", this, false); 176 this.initTimeline();
177 this.eventManager.addEventListener("onOpenDocument", this, false);
178 this.eventManager.addEventListener("closeDocument", this, false);
179 this.eventManager.addEventListener("switchDocument", this, false);
175 } 180 }
176 }, 181 },
177 182
178 handleOnOpenDocument:{ 183 handleOnOpenDocument:{
179 value:function(){ 184 value:function(){
185 this.clearTimelinePanel();
180 this.eventManager.addEventListener("deleteLayerClick", this, false); 186 this.eventManager.addEventListener("deleteLayerClick", this, false);
181 this.eventManager.addEventListener("newLayer", this, false); 187 this.eventManager.addEventListener("newLayer", this, false);
182 this.eventManager.addEventListener("deleteLayer", this, false); 188 this.eventManager.addEventListener("deleteLayer", this, false);
@@ -194,6 +200,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
194 200
195 } 201 }
196 }, 202 },
203
204 handleCloseDocument: {
205 value: function(event) {
206 this.clearTimelinePanel();
207 }
208 },
209
210 handleSwitchDocument : {
211 value: function(event) {
212 // Handle document change.
213 this.handleOnOpenDocument();
214 }
215 },
216
197 willDraw:{ 217 willDraw:{
198 value:function () { 218 value:function () {
199 if (this._isLayer) { 219 if (this._isLayer) {
@@ -205,10 +225,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
205 /* === END: Draw cycle === */ 225 /* === END: Draw cycle === */
206 226
207 /* === BEGIN: Controllers === */ 227 /* === BEGIN: Controllers === */
208 initTimelineView:{ 228 initTimeline : {
209 value:function () { 229 value: function() {
210 var myIndex; 230 // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once.
211 this.layout_tracks = this.element.querySelector(".layout-tracks"); 231 this.layout_tracks = this.element.querySelector(".layout-tracks");
212 this.layout_markers = this.element.querySelector(".layout_markers"); 232 this.layout_markers = this.element.querySelector(".layout_markers");
213 233
214 this.newlayer_button.identifier = "addLayer"; 234 this.newlayer_button.identifier = "addLayer";
@@ -219,8 +239,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
219 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 239 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
220 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 240 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
221 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); 241 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
222 242
223 this.drawTimeMarkers(); 243 }
244 },
245 initTimelineView:{
246 value:function () {
247 var myIndex;
248
249 this.drawTimeMarkers();
224 250
225 this._hashKey = "123"; 251 this._hashKey = "123";
226 _firstLayerDraw = false; 252 _firstLayerDraw = false;
@@ -230,6 +256,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
230 while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) 256 while(this.application.ninja.currentDocument.documentRoot.children[myIndex])
231 { 257 {
232 this._openDoc=true; 258 this._openDoc=true;
259 this._captureSelection=true;
233 NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) 260 NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]})
234 myIndex++; 261 myIndex++;
235 } 262 }
@@ -249,18 +276,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
249 276
250 clearTimelinePanel : { 277 clearTimelinePanel : {
251 value: function() { 278 value: function() {
252 console.log('clearing timeline...') 279 // Remove events
253 this.arrTracks = null; 280 this.eventManager.removeEventListener("deleteLayerClick", this, false);
254 this.arrLayers = null; 281 this.eventManager.removeEventListener("newLayer", this, false);
282 this.eventManager.removeEventListener("deleteLayer", this, false);
283 this.eventManager.removeEventListener("layerBinding", this, false);
284 this.eventManager.removeEventListener("elementAdded", this, false);
285 this.eventManager.removeEventListener("elementDeleted", this, false);
286 this.eventManager.removeEventListener("deleteSelection", this, false);
287 this.eventManager.removeEventListener("selectionChange", this, true);
288
289 // Remove every event listener for every tween in TimelineTrack
290 this.deselectTweens();
291
292 // Reset visual appearance
293 this.application.ninja.timeline.playhead.style.left = "-2px";
294 this.application.ninja.timeline.playheadmarker.style.left = "0px";
295