diff options
Diffstat (limited to 'js/panels/Timeline/Style.reel/Style.js')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 200 |
1 files changed, 109 insertions, 91 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 122c2c0a..e1c08d2d 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -41,38 +41,80 @@ POSSIBILITY OF SUCH DAMAGE. | |||
41 | 41 | ||
42 | var Montage = require("montage/core/core").Montage; | 42 | var Montage = require("montage/core/core").Montage; |
43 | var Component = require("montage/ui/component").Component; | 43 | var Component = require("montage/ui/component").Component; |
44 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator | 44 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator |
45 | 45 | ||
46 | 46 | ||
47 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | 47 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { |
48 | 48 | /* === BEGIN: Models === */ | |
49 | _parentLayerComponent: { | ||
50 | value: null | ||
51 | }, | ||
52 | |||
53 | _styleContainer: { | ||
54 | value: null | ||
55 | }, | ||
49 | styleContainer: { | 56 | styleContainer: { |
50 | value: null, | 57 | serializable: true, |
51 | serializable: true | 58 | get: function() { |
59 | return this._styleContainer; | ||
60 | }, | ||
61 | set: function(newVal) { | ||
62 | this._styleContainer = newVal; | ||
63 | } | ||
52 | }, | 64 | }, |
53 | 65 | ||
66 | _styleHintable: { | ||
67 | value: null | ||
68 | }, | ||
54 | styleHintable: { | 69 | styleHintable: { |
55 | value: null, | 70 | serializable: true, |
56 | serializable: true | 71 | get: function() { |
72 | return this._styleHintable; | ||
73 | }, | ||
74 | set: function(newVal) { | ||
75 | this._styleHintable = newVal; | ||
76 | } | ||
57 | }, | 77 | }, |
58 | 78 | ||
79 | _styleProperty: { | ||
80 | value: null | ||
81 | }, | ||
59 | styleProperty: { | 82 | styleProperty: { |
60 | value: null, | 83 | serializable: true, |
61 | serializable: true | 84 | get: function() { |
85 | return this._styleProperty; | ||
86 | }, | ||
87 | set: function(newVal) { | ||
88 | this._styleProperty = newVal; | ||
89 | } | ||
62 | }, | 90 | }, |
63 | 91 | ||
92 | _valueEditorHottext: { | ||
93 | value: null | ||
94 | }, | ||
64 | valueEditorHottext: { | 95 | valueEditorHottext: { |
65 | value: null, | 96 | serializable: true, |
66 | serializable: true | 97 | get: function() { |
98 | return this._valueEditorHottext; | ||
99 | }, | ||
100 | set: function(newVal) { | ||
101 | this._valueEditorHottext = newVal; | ||
102 | } | ||
67 | }, | 103 | }, |
68 | 104 | ||
105 | _dtextProperty: { | ||
106 | value: null | ||
107 | }, | ||
69 | dtextProperty: { | 108 | dtextProperty: { |
70 | value: null, | 109 | serializable: true, |
71 | serializable: true | 110 | get: function() { |
111 | return this._dtextProperty; | ||
112 | }, | ||
113 | set: function(newVal) { | ||
114 | this._dtextProperty = newVal; | ||
115 | } | ||
72 | }, | 116 | }, |
73 | 117 | ||
74 | /* === BEGIN: Models === */ | ||
75 | // isSelected: whether or not the style is selected | ||
76 | _isSelected: { | 118 | _isSelected: { |
77 | value: false | 119 | value: false |
78 | }, | 120 | }, |
@@ -90,9 +132,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
90 | } | 132 | } |
91 | }, | 133 | }, |
92 | 134 | ||
93 | /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with | ||
94 | * parent Layer. | ||
95 | */ | ||
96 | _isActive: { | 135 | _isActive: { |
97 | value: false | 136 | value: false |
98 | }, | 137 | }, |
@@ -163,6 +202,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
163 | }, | 202 | }, |
164 | serializable: true | 203 | serializable: true |
165 | }, | 204 | }, |
205 | |||
166 | _myHintableValue : { | 206 | _myHintableValue : { |
167 | value: null | 207 | value: null |
168 | }, | 208 | }, |
@@ -218,13 +258,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
218 | } | 258 | } |
219 | }, | 259 | }, |
220 | 260 | ||
221 | addedColorChips: | 261 | addedColorChips: { |
222 | { value: false }, | 262 | value: false |
263 | }, | ||
223 | 264 | ||
224 | _colorelement: { | 265 | _colorelement: { |
225 | writable:true | 266 | writable:true |
226 | }, | 267 | }, |
227 | |||
228 | colorelement: { | 268 | colorelement: { |
229 | enumerable: true, | 269 | enumerable: true, |
230 | get: function () { | 270 | get: function () { |
@@ -268,13 +308,21 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
268 | this.init(); | 308 | this.init(); |
269 | } | 309 | } |
270 | }, | 310 | }, |
311 | willDraw: { | ||
312 | value: function() { | ||
313 | if (this._parentLayerComponent === null) { | ||
314 | this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent; | ||
315 | } | ||
316 | } | ||
317 | }, | ||
271 | draw: { | 318 | draw: { |
272 | value: function() { | 319 | value: function() { |
273 | 320 | // Show the right view | |
274 | if (this._swapViews === true) { | 321 | if (this._swapViews === true) { |
275 | // Show the right thing | ||
276 | this._showView(); | 322 | this._showView(); |
277 | } | 323 | } |
324 | |||
325 | // Is this style selected? | ||
278 | if (this.isSelected) { | 326 | if (this.isSelected) { |
279 | this.element.classList.add("style-selected"); | 327 | this.element.classList.add("style-selected"); |
280 | } else { | 328 | } else { |
@@ -284,6 +332,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
284 | 332 | ||
285 | } | 333 | } |
286 | }, | 334 | }, |
335 | |||
287 | didDraw: { | 336 | didDraw: { |
288 | value: function() { | 337 | value: function() { |
289 | if (this._swapViews === true) { | 338 | if (this._swapViews === true) { |
@@ -312,6 +361,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
312 | this.whichView = "propval"; | 361 | this.whichView = "propval"; |
313 | } | 362 | } |
314 | }, | 363 | }, |
364 | |||
365 | handleFillColorChange: { | ||
366 | value: function (event) { | ||
367 | if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){ | ||
368 | var fillColorObject={}; | ||
369 | fillColorObject.color=event._event.color; | ||
370 | fillColorObject.mode=event._event.colorMode; | ||
371 | ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide) | ||
372 | } | ||
373 | } | ||
374 | }, | ||
375 | |||
376 | handleHottextChange:{ | ||
377 | value:function(event){ | ||
378 | if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ | ||
379 | this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Change", "timeline"); | ||
380 | } | ||
381 | } | ||
382 | }, | ||
383 | |||
384 | handleHottextChanging:{ | ||
385 | value:function(event){ | ||
386 | if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ | ||
387 | this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units] , "Changing", "timeline"); | ||
388 | } | ||
389 | } | ||
390 | }, | ||
391 | |||
392 | handleBlur:{ | ||
393 | value:function(event){ | ||
394 | if(this.application.ninja.timeline.selectedStyle === this.editorProperty){ | ||
395 | this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [event.target.value] , "Change", "timeline"); | ||
396 | } | ||
397 | } | ||
398 | }, | ||
315 | 399 | ||
316 | // Init: Initialize the component with some useful selectors and other defaults. | 400 | // Init: Initialize the component with some useful selectors and other defaults. |
317 | init : { | 401 | init : { |
@@ -319,7 +403,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
319 | 403 | ||
320 | var arrHints = [], | 404 |