diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 195 |
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 | ||
18 | var Montage = require("montage/core/core").Montage; | 18 | var Montage = require("montage/core/core").Montage; |
19 | var Component = require("montage/ui/component").Component; | 19 | var Component = require("montage/ui/component").Component; |
20 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator | 20 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator |
21 | 21 | ||
22 | 22 | ||
23 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | 23 | var 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; | 451 | this.valueEditorHottext.minValue = tweenable.min; |
373 | this.valueEditorHottext.maxValue = tweenable.max; | 452 | this.valueEditorHottext.maxValue = tweenable.max; |