aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJon Reid2012-07-03 12:14:34 -0700
committerJon Reid2012-07-03 12:14:34 -0700
commit7e997cac27b4fcb1a30ab53ab5d2114eacfb9222 (patch)
treef6b3f4b23d0f1091f2391eca61a5d4b804b7cfef
parentfd0f914b10e72b4acbc58330b3a59672ad667890 (diff)
downloadninja-7e997cac27b4fcb1a30ab53ab5d2114eacfb9222.tar.gz
Timeline: Code refactor for Style.js
-rw-r--r--js/panels/Timeline/Style.reel/Style.js195
1 files changed, 103 insertions, 92 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index c8d323a9..78bc2db3 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -17,38 +17,80 @@
17 17
18var Montage = require("montage/core/core").Montage; 18var Montage = require("montage/core/core").Montage;
19var Component = require("montage/ui/component").Component; 19var Component = require("montage/ui/component").Component;
20var ElementsMediator = require("js/mediators/element-mediator").ElementMediator 20var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
21 21
22 22
23var LayerStyle = exports.LayerStyle = Montage.create(Component, { 23var LayerStyle = exports.LayerStyle = Montage.create(Component, {
24 24 /* === BEGIN: Models === */
25 _parentLayerComponent: {
26 value: null
27 },
28
29 _styleContainer: {
30 value: null
31 },
25 styleContainer: { 32 styleContainer: {
26 value: null, 33 serializable: true,
27 serializable: true 34 get: function() {
35 return this._styleContainer;
36 },
37 set: function(newVal) {
38 this._styleContainer = newVal;
39 }
28 }, 40 },
29 41
42 _styleHintable: {
43 value: null
44 },
30 styleHintable: { 45 styleHintable: {
31 value: null, 46 serializable: true,
32 serializable: true 47 get: function() {
48 return this._styleHintable;
49 },
50 set: function(newVal) {
51 this._styleHintable = newVal;
52 }
33 }, 53 },
34 54
55 _styleProperty: {
56 value: null
57 },
35 styleProperty: { 58 styleProperty: {
36 value: null, 59 serializable: true,
37 serializable: true 60 get: function() {
61 return this._styleProperty;
62 },
63 set: function(newVal) {
64 this._styleProperty = newVal;
65 }
38 }, 66 },
39 67
68 _valueEditorHottext: {
69 value: null
70 },
40 valueEditorHottext: { 71 valueEditorHottext: {
41 value: null, 72 serializable: true,
42 serializable: true 73 get: function() {
74 return this._valueEditorHottext;
75 },
76 set: function(newVal) {
77 this._valueEditorHottext = newVal;
78 }
43 }, 79 },
44 80
81 _dtextProperty: {
82 value: null
83 },
45 dtextProperty: { 84 dtextProperty: {
46 value: null, 85 serializable: true,
47 serializable: true 86 get: function() {
87 return this._dtextProperty;
88 },
89 set: function(newVal) {
90 this._dtextProperty = newVal;
91 }
48 }, 92 },
49 93
50 /* === BEGIN: Models === */
51 // isSelected: whether or not the style is selected
52 _isSelected: { 94 _isSelected: {
53 value: false 95 value: false
54 }, 96 },
@@ -66,9 +108,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
66 } 108 }
67 }, 109 },
68 110
69 /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with
70 * parent Layer.
71 */
72 _isActive: { 111 _isActive: {
73 value: false 112 value: false
74 }, 113 },
@@ -139,6 +178,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
139 }, 178 },
140 serializable: true 179 serializable: true
141 }, 180 },
181
142 _myHintableValue : { 182 _myHintableValue : {
143 value: null 183 value: null
144 }, 184 },
@@ -194,13 +234,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
194 } 234 }
195 }, 235 },
196 236
197 addedColorChips: 237 addedColorChips: {
198 { value: false }, 238 value: false
239 },
199 240
200 _colorelement: { 241 _colorelement: {
201 writable:true 242 writable:true
202 }, 243 },
203
204 colorelement: { 244 colorelement: {
205 enumerable: true, 245 enumerable: true,
206 get: function () { 246 get: function () {
@@ -246,11 +286,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
246 }, 286 },
247 draw: { 287 draw: {
248 value: function() { 288 value: function() {
249 289 // Show the right view
250 if (this._swapViews === true) { 290 if (this._swapViews === true) {
251 // Show the right thing
252 this._showView(); 291 this._showView();
253 } 292 }
293
294 // Is this style selected?
254 if (this.isSelected) { 295 if (this.isSelected) {
255 this.element.classList.add("style-selected"); 296 this.element.classList.add("style-selected");
256 } else { 297 } else {
@@ -260,6 +301,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
260 301
261 } 302 }
262 }, 303 },
304
263 didDraw: { 305 didDraw: {
264 value: function() { 306 value: function() {
265 if (this._swapViews === true) { 307 if (this._swapViews === true) {
@@ -288,6 +330,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
288 this.whichView = "propval"; 330 this.whichView = "propval";
289 } 331 }
290 }, 332 },
333
334 handleFillColorChange: {
335 value: function (event) {
336 if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
337 var fillColorObject={};
338 fillColorObject.color=event._event.color;
339 fillColorObject.mode=event._event.colorMode;
340 ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
341 }
342 }
343 },
344
345 handleHottextChange:{
346 value:function(event){
347 if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
348 this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline");
349 }
350 }
351 },
352
353 handleHottextChanging:{
354 value:function(event){
355 if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
356 this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline");
357 }
358 }
359 },
360
361 handleBlur:{
362 value:function(event){
363 if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
364 this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline");
365 }
366 }
367 },
291 368
292 // Init: Initialize the component with some useful selectors and other defaults. 369 // Init: Initialize the component with some useful selectors and other defaults.
293 init : { 370 init : {
@@ -296,6 +373,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
296 var arrHints = [], 373 var arrHints = [],
297 i = 0; 374 i = 0;
298 375
376 this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
377
299 // Get the array of hints from _myTweenables: 378 // Get the array of hints from _myTweenables:
300 for (i = 0; i < this._myTweenables.length; i++) { 379 for (i = 0; i < this._myTweenables.length; i++) {
301 arrHints.push(this._myTweenables[i].property) 380 arrHints.push(this._myTweenables[i].property)
@@ -372,7 +451,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
372 this.valueEditorHottext.minValue = tweenable.min; 45