aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html8
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js111
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html6
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js90
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