aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Style.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r--js/panels/Timeline/Style.reel/Style.js200
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
42var Montage = require("montage/core/core").Montage; 42var Montage = require("montage/core/core").Montage;
43var Component = require("montage/ui/component").Component; 43var Component = require("montage/ui/component").Component;
44var ElementsMediator = require("js/mediators/element-mediator").ElementMediator 44var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
45 45
46 46
47var LayerStyle = exports.LayerStyle = Montage.create(Component, { 47var 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 var arrHints = [],
321 i = 0; 405 i = 0;