diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 8 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 111 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 6 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 90 |
4 files changed, 205 insertions, 10 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 3648cbbb..5ee50491 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -27,7 +27,9 @@ | |||
27 | "topControl": {"@" : "dtext_position_y"}, | 27 | "topControl": {"@" : "dtext_position_y"}, |
28 | "widthControl": {"@" : "dtext_scale_x"}, | 28 | "widthControl": {"@" : "dtext_scale_x"}, |
29 | "heightControl": {"@" : "dtext_scale_y"}, | 29 | "heightControl": {"@" : "dtext_scale_y"}, |
30 | "styleType":{"@" : "style"} | 30 | "styleType":{"@" : "style"}, |
31 | "layerLock":{"#" : "layerLock"}, | ||
32 | "visibilityButton":{"#" : "visibilityButton"} | ||
31 | } | 33 | } |
32 | }, | 34 | }, |
33 | "dtext1" : { | 35 | "dtext1" : { |
@@ -262,8 +264,8 @@ | |||
262 | <span data-montage-id="layer-tag" class="layer-tag"></span> | 264 | <span data-montage-id="layer-tag" class="layer-tag"></span> |
263 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> | 265 | <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span> |
264 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> | 266 | <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span> |
265 | <div class="cssbutton button-lock"></div> | 267 | <div class="cssbutton button-lock" data-montage-id="layerLock"></div> |
266 | <div class="cssbutton button-visible"></div> | 268 | <div class="cssbutton button-visible" data-montage-id="visibilityButton"></div> |
267 | </div> | 269 | </div> |
268 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> | 270 | <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main"> |
269 | <div class="label-position"> | 271 | <div class="label-position"> |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 0abd97be..776d5ec8 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -368,6 +368,41 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
368 | this.layerData.isVisible = value; | 368 | this.layerData.isVisible = value; |
369 | } | 369 | } |
370 | }, | 370 | }, |
371 | |||
372 | _isLock:{ | ||
373 | value: false | ||
374 | }, | ||
375 | |||
376 | isLock:{ | ||
377 | get:function(){ | ||
378 | return this._isLock; | ||
379 | }, | ||
380 | set:function(value){ | ||
381 | if (this._isLock !== value) { | ||
382 | this._isLock = value; | ||
383 | |||
384 | } | ||
385 | this.layerData.isLock = value; | ||
386 | } | ||
387 | }, | ||
388 | |||
389 | _isHidden:{ | ||
390 | value: false | ||
391 | }, | ||
392 | |||
393 | isHidden:{ | ||
394 | get:function(){ | ||
395 | return this._isHidden; | ||
396 | }, | ||
397 | set:function(value){ | ||
398 | if (this._isHidden !== value) { | ||
399 | this._isHidden = value; | ||
400 | |||
401 | } | ||
402 | this.layerData._isHidden = value; | ||
403 | } | ||
404 | }, | ||
405 | |||
371 | 406 | ||
372 | _justAdded: { | 407 | _justAdded: { |
373 | value: false | 408 | value: false |
@@ -508,6 +543,8 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
508 | this.docUUID = this.layerData.docUUID; | 543 | this.docUUID = this.layerData.docUUID; |
509 | this.selectedStyleIndex = this.layerData.selectedStyleIndex; | 544 | this.selectedStyleIndex = this.layerData.selectedStyleIndex; |
510 | this.needsDraw = boolNeedsDraw; | 545 | this.needsDraw = boolNeedsDraw; |
546 | this.isLock = this.layerData.isLock; | ||
547 | this.isHidden = this.layerData.isHidden; | ||
511 | } | 548 | } |
512 | }, | 549 | }, |
513 | 550 | ||
@@ -555,6 +592,8 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
555 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); | 592 | this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); |
556 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); | 593 | this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); |
557 | this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); | 594 | this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); |
595 | this.layerLock.addEventListener("click",this.handleLayerLock.bind(this),false); | ||
596 | this.visibilityButton.addEventListener("click",this.handleLayerVisibility.bind(this),false); | ||
558 | 597 | ||
559 | // Add event listeners to add and delete style buttons | 598 | // Add event listeners to add and delete style buttons |
560 | this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); | 599 | this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false); |
@@ -1223,6 +1262,78 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
1223 | } | 1262 | } |
1224 | }, | 1263 | }, |
1225 | 1264 | ||
1265 | handleLayerLock: { | ||
1266 | value: function() { | ||
1267 | var i = 0; | ||
1268 | var arrlength = this.application.ninja.timeline.arrLayers.length; | ||
1269 | var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length; | ||
1270 | if(!this.layerData.isLock){ | ||
1271 | for(i = 0; i < arrlength; i++){ | ||
1272 | if(this.application.ninja.timeline.arrLayers[i].layerData.isLock){ | ||
1273 | this.application.ninja.timeline.arrLayers[i].layerData.isLock = false; | ||
1274 | this.application.ninja.timeline.arrLayers[i].layerData.isSelected = false; | ||
1275 | for(var k = 0; k < lockElementArrLength; k++){ | ||
1276 | if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){ | ||
1277 | this.application.ninja.currentDocument.lockedElements.splice(k,1); | ||
1278 | break; | ||
1279 | } | ||
1280 | } | ||
1281 | } | ||
1282 | } | ||
1283 | this.layerData.isSelected = false; | ||
1284 | this.application.ninja.timeline.selectLayers([]); | ||
1285 | this.application.ninja.currentDocument.lockedElements.push(this.layerData.stageElement); | ||
1286 | } else { | ||
1287 | this.layerData.isSelected = true; | ||
1288 | for(k = 0; k<lockElementArrLength; k++){ | ||
1289 | if(this.application.ninja.currentDocument.lockedElements[k] === this.layerData.stageElement){ | ||
1290 | this.application.ninja.currentDocument.lockedElements.splice(k,1); | ||
1291 | break; | ||
1292 | } | ||
1293 | } | ||
1294 | |||
1295 | } | ||
1296 | this.layerData.isLock = !this.layerData.isLock; | ||
1297 | |||
1298 | } | ||
1299 | }, | ||
1300 | |||
1301 | handleLayerVisibility:{ | ||
1302 | value:function(){ | ||
1303 | var i = 0; | ||
1304 | var arrlength = this.application.ninja.timeline.arrLayers.length; | ||
1305 | var lockElementArrLength=this.application.ninja.currentDocument.lockedElements.length; | ||
1306 | if(!this.layerData.isHidden){ | ||
1307 | for(i = 0; i<arrlength; i++){ | ||
1308 | if(this.application.ninja.timeline.arrLayers[i].layerData.isHidden){ | ||
1309 | this.application.ninja.timeline.arrLayers[i].layerData.isHidden = false; | ||
1310 | this.application.ninja.timeline.arrLayers[i].layerData.stageElement.style.visibility = "visible"; | ||
1311 | for(var k = 0;k < lockElementArrLength;k++){ | ||
1312 | if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){ | ||
1313 | this.application.ninja.currentDocument.lockedElements.splice(k,1); | ||
1314 | break; | ||
1315 | } | ||
1316 | } | ||
1317 | } | ||
1318 | |||
1319 | } | ||
1320 | this.layerData.stageElement.style.visibility = "hidden"; | ||
1321 | this.application.ninja.currentDocument.lockedElements.push(this.layerData.stageElement); | ||
1322 | |||
1323 | } else { | ||
1324 | this.layerData.stageElement.style.visibility = "visible"; | ||
1325 | for(var k = 0; k < lockElementArrLength; k++){ | ||
1326 | if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){ | ||
1327 | this.application.ninja.currentDocument.lockedElements.splice(k,1); | ||
1328 | break; | ||
1329 | } | ||
1330 | } | ||
1331 | } | ||
1332 | this.layerData.isHidden = !this.layerData.isHidden; | ||
1333 | |||
1334 | } | ||
1335 | }, | ||
1336 | |||
1226 | 1337 | ||
1227 | /* End: Event handlers */ | 1338 | /* End: Event handlers */ |
1228 | 1339 | ||
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 9e2bacd5..eac361a8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -35,7 +35,9 @@ | |||
35 | "container_tracks" : {"#" : "container-tracks"}, | 35 | "container_tracks" : {"#" : "container-tracks"}, |
36 | "timeline_disabler" : {"#" : "timeline-disabler"}, | 36 | "timeline_disabler" : {"#" : "timeline-disabler"}, |
37 | "checkable_animated" : {"#" : "checkable_animated"}, | 37 | "checkable_animated" : {"#" : "checkable_animated"}, |
38 | "tl_configbutton" : {"#" : "tl-configbutton"} | 38 | "tl_configbutton" : {"#" : "tl-configbutton"}, |
39 | "checkable_lock" : {"#" : "checkable_lock"}, | ||
40 | "checkable_visible":{"#" : "checkable_visible"} | ||
39 | } | 41 | } |
40 | }, | 42 | }, |
41 | 43 | ||
@@ -178,6 +180,8 @@ | |||
178 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> | 180 | <div class="tl-configbutton" data-montage-id="tl-configbutton"> |
179 | <div class="tl-dropdown"> | 181 | <div class="tl-dropdown"> |
180 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> | 182 | <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div> |
183 | <div class="checkable" data-montage-id="checkable_lock">Lock Layers</div> | ||
184 | <div class="checkable" data-montage-id="checkable_visible">Visibility of Layers</div> | ||
181 | </div> | 185 | </div> |
182 | </div> | 186 | </div> |
183 | 187 | ||
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a67de4cc..e06fb422 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/T |