aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorKruti Shah2012-05-22 10:28:41 -0700
committerKruti Shah2012-05-22 10:28:41 -0700
commitf1387bc995766b8d941f93e605a91c49c8931645 (patch)
tree74c268f8ffb2996d44e5f643dbcae9ebeed32afa /js/panels
parente9995c973acadc507b802fdefdb22b4c4bf82325 (diff)
downloadninja-f1387bc995766b8d941f93e605a91c49c8931645.tar.gz
Layer Control
Signed-off-by: Kruti Shah <kruti.shah@motorola.com>
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html23
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js142
-rw-r--r--js/panels/Timeline/Style.reel/Style.js19
3 files changed, 157 insertions, 27 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c7e7b575..c4aa6e29 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -21,7 +21,12 @@
21 "positionCollapser" : {"@" : "positionCollapser"}, 21 "positionCollapser" : {"@" : "positionCollapser"},
22 "styleCollapser" : {"@" : "styleCollapser"}, 22 "styleCollapser" : {"@" : "styleCollapser"},
23 "clickerMain" : {"#" : "clicker-main"}, 23 "clickerMain" : {"#" : "clicker-main"},
24 "myLabel" : {"#" : "myLabel"} 24 "myLabel" : {"#" : "myLabel"},
25 "leftControl": {"@" : "dtext_position_x"},
26 "topControl": {"@" : "dtext_position_y"},
27 "widthControl": {"@" : "dtext_scale_x"},
28 "heightControl": {"@" : "dtext_scale_y"},
29 "styleType":{"@" : "style"}
25 } 30 }
26 }, 31 },
27 "dtext1" : { 32 "dtext1" : {
@@ -147,10 +152,10 @@
147 "prototype": "js/components/hottextunit.reel[HotTextUnit]", 152 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
148 "properties": { 153 "properties": {
149 "element": {"#": "scale-x"}, 154 "element": {"#": "scale-x"},
150 "maxValue" : 100, 155 "maxValue" : 100000,
151 "minValue" : 0, 156 "minValue" : -100000,
152 "acceptableUnits" : "%", 157 "acceptableUnits" : "px",
153 "units" : "%", 158 "units" : "px",
154 "value" : 0 159 "value" : 0
155 }, 160 },
156 "bindings": { 161 "bindings": {
@@ -165,10 +170,10 @@
165 "prototype": "js/components/hottextunit.reel[HotTextUnit]", 170 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
166 "properties": { 171 "properties": {
167 "element": {"#": "scale-y"}, 172 "element": {"#": "scale-y"},
168 "maxValue" : 100, 173 "maxValue" : 100000,
169 "minValue" : 0, 174 "minValue" : -100000,
170 "acceptableUnits" : "%", 175 "acceptableUnits" : "px",
171 "units" : "%", 176 "units" : "px",
172 "value" : 0 177 "value" : 0
173 }, 178 },
174 "bindings": { 179 "bindings": {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b0f6d220..2df11f18 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -12,6 +12,7 @@ var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
12var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText; 12var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
13var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; 13var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
14var nj = require("js/lib/NJUtils").NJUtils; 14var nj = require("js/lib/NJUtils").NJUtils;
15var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
15 16
16var Layer = exports.Layer = Montage.create(Component, { 17var Layer = exports.Layer = Montage.create(Component, {
17 18
@@ -162,7 +163,6 @@ var Layer = exports.Layer = Montage.create(Component, {
162 this._dtextPositionX = value; 163 this._dtextPositionX = value;
163 this.layerData.dtextPositionX = value; 164 this.layerData.dtextPositionX = value;
164 } 165 }
165
166 } 166 }
167 }, 167 },
168 168
@@ -487,11 +487,36 @@ var Layer = exports.Layer = Montage.create(Component, {
487 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 487 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
488 488
489 this.eventManager.addEventListener("updatedID", this, false); 489 this.eventManager.addEventListener("updatedID", this, false);
490 490 this.eventManager.addEventListener("elementChange",this,false);
491
492 this.leftControl.identifier = "left";
493 this.leftControl.addEventListener("changing",this,false);
494 this.leftControl.addEventListener("change",this,false);
495
496 this.topControl.identifier = "top";
497 this.topControl.addEventListener("changing",this,false);
498 this.topControl.addEventListener("change",this,false);
499
500 this.widthControl.identifier = "width";
501 this.widthControl.addEventListener("changing",this,false);
502 this.widthControl.addEventListener("change",this,false);
491 503
504 this.heightControl.identifier = "height";
505 this.heightControl.addEventListener("changing",this,false);
506 this.heightControl.addEventListener("change",this,false);
507
508 el=this.layerData.elementsList[0];
509
510 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
511 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
512 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
513 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
514
515// this.eventManager.addEventListener("changing",this,false);
492 516
493 } 517 }
494 }, 518 },
519
495 draw: { 520 draw: {
496 value: function() { 521 value: function() {
497 if (this.isSelected) { 522 if (this.isSelected) {
@@ -582,6 +607,7 @@ var Layer = exports.Layer = Montage.create(Component, {
582 newStyle.ruleTweener = false; 607 newStyle.ruleTweener = false;
583 newStyle.isSelected = false; 608 newStyle.isSelected = false;
584 this.arrLayerStyles.push(newStyle); 609 this.arrLayerStyles.push(newStyle);
610 console.log(newStyle.editorValue)
585 611
586 // Set up the event info and dispatch the event 612 // Set up the event info and dispatch the event
587 this.styleCounter += 1; 613 this.styleCounter += 1;
@@ -589,6 +615,7 @@ var Layer = exports.Layer = Montage.create(Component, {
589 defaultEventManager.dispatchEvent(newEvent); 615 defaultEventManager.dispatchEvent(newEvent);
590 } 616 }
591 }, 617 },
618
592 deleteStyle : { 619 deleteStyle : {
593 value: function() { 620 value: function() {
594 var newEvent = document.createEvent("CustomEvent"), 621 var newEvent = document.createEvent("CustomEvent"),
@@ -816,6 +843,100 @@ var Layer = exports.Layer = Montage.create(Component, {
816 return false; 843 return false;
817 } 844 }
818 }, 845 },
846
847 handleLeftChange:{
848 value:function(){
849 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
850 }
851 },
852
853 handleTopChange:{
854 value:function(){
855 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Change", "timeline");
856 }
857 },
858
859 handleWidthChange:{
860 value:function(){
861 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Change", "timeline");
862 }
863 },
864
865 handleHeightChange:{
866 value:function(){
867 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Change", "timeline");
868 }
869 },
870
871 handleLeftChanging:{
872 value:function(){
873 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
874 }
875 },
876
877 handleTopChanging:{
878 value:function(){
879 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
880 }
881 },
882
883 handleWidthChanging:{
884 value:function(){
885 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
886 }
887 },
888
889 handleHeightChanging:{
890 value:function(){
891 this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
892 }
893 },
894
895
896 handleElementChange:{
897 value:function(event){
898 var el = this.layerData.elementsList[0];
899 var length = this.arrLayerStyles.length , i;
900
901 if(event.detail.source && event.detail.source!== "timeline"){
902 this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
903 this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
904 this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
905 this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
906
907 for(i=0; i<length; i++){
908 if(event.detail.data.prop === this.arrLayerStyles[i].editorProperty){
909 this.arrLayerStyles[i].editorValue = parseFloat(ElementsMediator.getProperty(el, this.arrLayerStyles[i].editorProperty));
910 break;
911 }
912 }
913 }
914
915 }
916 },
917
918 handleUpdatedID:{
919