diff options
Diffstat (limited to 'js/panels/Timeline/Style.reel')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.html | 7 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 662 |
2 files changed, 377 insertions, 292 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html index 5be159c3..cdc355e7 100644 --- a/js/panels/Timeline/Style.reel/Style.html +++ b/js/panels/Timeline/Style.reel/Style.html | |||
@@ -19,7 +19,8 @@ | |||
19 | "styleProperty" : {"#": "container-property"}, | 19 | "styleProperty" : {"#": "container-property"}, |
20 | "valueEditorHottext" : {"@":"hottextunit"}, | 20 | "valueEditorHottext" : {"@":"hottextunit"}, |
21 | "dtextProperty" : {"@":"dtext1"}, | 21 | "dtextProperty" : {"@":"dtext1"}, |
22 | "myHintable" : {"@" :"hintable"} | 22 | "myHintable" : {"@" :"hintable"}, |
23 | "_fillColorCtrl": {"#": "fillColorCtrl"} | ||
23 | } | 24 | } |
24 | }, | 25 | }, |
25 | "dtext1" : { | 26 | "dtext1" : { |
@@ -78,7 +79,9 @@ | |||
78 | <div data-montage-id="value-editor-hottext"></div> | 79 | <div data-montage-id="value-editor-hottext"></div> |
79 | </div> | 80 | </div> |
80 | <div class="cell-value value-editor editor-color hidden"> | 81 | <div class="cell-value value-editor editor-color hidden"> |
81 | <div data-montage-id="value-editor-color">[ ]</div> | 82 | <div data-montage-id="value-editor-color"> |
83 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> | ||
84 | </div> | ||
82 | </div> | 85 | </div> |
83 | <div class="cell-value value-editor editor-input hidden"> | 86 | <div class="cell-value value-editor editor-input hidden"> |
84 | <!-- <div data-montage-id="value-editor-input"></div> --> | 87 | <!-- <div data-montage-id="value-editor-input"></div> --> |
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index fa848cc0..102e9f25 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -17,6 +17,8 @@ | |||
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 | ||
21 | |||
20 | 22 | ||
21 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | 23 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { |
22 | 24 | ||
@@ -169,7 +171,27 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
169 | this.needsDraw = true; | 171 | this.needsDraw = true; |
170 | } | 172 | } |
171 | }, | 173 | }, |
172 | 174 | ||
175 | addedColorChips: | ||
176 | { value: false }, | ||
177 | |||
178 | _fill: { | ||
179 | enumerable: false, | ||
180 | value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } | ||
181 | }, | ||
182 | |||
183 | fill: { | ||
184 | enumerable: true, | ||
185 | get: function () { | ||
186 | return this._fill; | ||
187 | }, | ||
188 | set: function (value) { | ||
189 | if (value !== this._fill) { | ||
190 | this._fill = value; | ||
191 | } | ||
192 | } | ||
193 | }, | ||
194 | |||
173 | handleMousedown: { | 195 | handleMousedown: { |
174 | value: function(event) { | 196 | value: function(event) { |
175 | this.isActive = true; | 197 | this.isActive = true; |
@@ -196,6 +218,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
196 | } else { | 218 | } else { |
197 | this.element.classList.remove("style-selected"); | 219 | this.element.classList.remove("style-selected"); |
198 | } | 220 | } |
221 | |||
222 | |||
199 | } | 223 | } |
200 | }, | 224 | }, |
201 | didDraw: { | 225 | didDraw: { |
@@ -311,6 +335,38 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
311 | this.editorInputContainer.classList.add("hidden"); | 335 | this.editorInputContainer.classList.add("hidden"); |
312 | this.editorColorContainer.classList.remove("hidden"); | 336 | this.editorColorContainer.classList.remove("hidden"); |
313 | this.editorHottextContainer.classList.add("hidden"); | 337 | this.editorHottextContainer.classList.add("hidden"); |
338 | |||
339 | if(tweenable.colorType === "fill"){ | ||
340 | this._isFill = true; | ||
341 | }else{ | ||
342 | if(tweenable.colorType === "stroke"){ | ||
343 | this._isFill = false; | ||
344 | this._borderSide = tweenable.strokePosition | ||
345 | } | ||
346 | |||
347 | } | ||
348 | |||
349 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
350 | // setup fill color | ||
351 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
352 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
353 | |||
354 | // setup stroke color | ||
355 | // this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
356 | // this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); | ||
357 | |||
358 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
359 | |||
360 | this.addedColorChips = true; | ||
361 | } | ||
362 | |||
363 | if (this.addedColorChips) { | ||
364 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | ||
365 | // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); | ||
366 | } | ||
367 | |||
368 | |||
369 | |||
314 | // TODO: set up color chip here. | 370 | // TODO: set up color chip here. |
315 | } else if (tweenable.tweener === "input"){ | 371 | } else if (tweenable.tweener === "input"){ |
316 | this.editorInputContainer.classList.remove("hidden"); | 372 | this.editorInputContainer.classList.remove("hidden"); |
@@ -327,295 +383,321 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
327 | /* === END: Controllers === */ | 383 | /* === END: Controllers === */ |
328 | 384 | ||
329 | _myTweenables: { | 385 | _myTweenables: { |
330 | value: [ | 386 | value: [ |
331 | { | 387 | { |
332 | "property" : "background-color", | 388 | "property" : "background-color", |
333 | "tweener" : "color", | 389 | "tweener" : "color", |
334 | "units" : "", | 390 | "units" : "", |
335 | "min" : "", | 391 | "min" : "", |
336 | "max" : "", | 392 | "max" : "", |
337 | "default" :"#FFFFFF" | 393 | "default" :"#FFFFFF", |
338 | }, | 394 | "colorType" :"fill" |
339 | { | 395 | }, |
340 | "property" : "background-position-x", | 396 | { |
341 | "tweener" : "hottext", | 397 | "property" : "background-position-x", |
342 | "units" : "px", | 398 | "tweener" : "hottext", |
343 | "min" : -9999, | 399 | "units" : "px", |
344 | "max" : 9999, | 400 | "min" : -9999, |
345 | "default" : 0 | 401 | "max" : 9999, |
346 | }, | 402 | "default" : 0 |
347 | { | 403 | }, |
348 | "property" : "background-position-y", | 404 | { |
349 | "tweener" : "hottext", | 405 | "property" : "background-position-y", |
350 | "units" : "px", | 406 | "tweener" : "hottext", |
351 | "min" : -9999, | 407 | "units" : "px", |
352 | "max" : 9999, | 408 | "min" : -9999, |
353 | "default" : 0 | 409 | "max" : 9999, |
354 | }, | 410 | "default" : 0 |
355 | { | 411 | }, |
356 | "property" : "border-color", | 412 | { |
357 | "tweener" : "color", | 413 | "property" : "border-color", |
358 | "units" : "", | 414 | "tweener" : "color", |
359 | "min" : "", | 415 | "units" : "", |
360 | "max" : "", | 416 | "min" : "", |
361 | "default" : "#FFFFFF" | 417 | "max" : "", |
362 | }, | 418 | "default" : "#FFFFFF", |
363 | { | 419 | "colorType" : "stroke", |
364 | "property" : "border-width", | 420 | "strokePosition" : false |
365 | "tweener" : "hottext", | 421 | }, |
366 | "units" : "px", | 422 | { |
367 | "min" : 0, | 423 | "property" : "border-width", |
368 | "max" : 9999, | 424 | "tweener" : "hottext", |
369 | "default" : 0 | 425 | "units" : "px", |
370 | }, | 426 | "min" : 0, |
371 | { | 427 | "max" : 9999, |
372 | "property" : "border-bottom-color", | 428 | "default" : 0 |
373 | "tweener" : "color", | 429 | }, |
374 | "units" : "", | 430 | { |
375 | "default" : "#FFFFFF" | 431 | "property" : "border-bottom-color", |
376 | }, | 432 | "tweener" : "color", |
377 | { | 433 | "units" : "", |
378 | "property" : "border-bottom-width", | 434 | "default" : "#FFFFFF", |
379 | "tweener" : "hottext", | 435 | "colorType" : "stroke", |
380 | "units" : "px", | 436 | "strokePosition" : "bottom" |
381 | "min" : 0, | 437 | |
382 | "max" : 9999, | 438 | }, |
383 | "default" : 0 | 439 | { |
384 | }, | 440 | "property" : "border-bottom-width", |
385 | { | 441 | "tweener" : "hottext", |
386 | "property" : "border-left-color", | 442 |