diff options
author | Valerio Virgillito | 2012-06-20 21:56:18 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-20 21:56:18 -0700 |
commit | c8fc6d15e1570e89243abe527cd149e354f7e11f (patch) | |
tree | f648fa7842f3dc6011da08aaab0bedb445d43b58 /js/panels/Timeline/Style.reel | |
parent | 392a559e90357d48c910a07617261483b2b45476 (diff) | |
parent | 58bca4771ab1e043cd5c11239c1936a022080096 (diff) | |
download | ninja-c8fc6d15e1570e89243abe527cd149e354f7e11f.tar.gz |
Merge pull request #316 from imix23ways/Timeline-merge-candidate
Timeline merge candidate
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 | 711 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/css/Style.css | 91 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/scss/Style.scss | 11 |
4 files changed, 462 insertions, 358 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 eed58a65..fe8d04e9 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 | ||
@@ -56,6 +58,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
56 | return this._isSelected; | 58 | return this._isSelected; |
57 | }, | 59 | }, |
58 | set: function(newVal) { | 60 | set: function(newVal) { |
61 | |||
59 | if (newVal !== this._isSelected) { | 62 | if (newVal !== this._isSelected) { |
60 | this._isSelected = newVal; | 63 | this._isSelected = newVal; |
61 | this.needsDraw = true; | 64 | this.needsDraw = true; |
@@ -190,7 +193,43 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
190 | this.needsDraw = true; | 193 | this.needsDraw = true; |
191 | } | 194 | } |
192 | }, | 195 | }, |
193 | 196 | ||
197 | addedColorChips: | ||
198 | { value: false }, | ||
199 | |||
200 | _colorelement: { | ||
201 | writable:true | ||
202 | }, | ||
203 | |||
204 | colorelement: { | ||
205 | enumerable: true, | ||
206 | get: function () { | ||
207 | return this._colorelement; | ||
208 | }, | ||
209 | set: function (value) { | ||
210 | if (value !== this._colorelement) { | ||
211 | this._colorelement = value; | ||
212 | } | ||
213 | } | ||
214 | }, | ||
215 | |||
216 | _fill: { | ||
217 | enumerable: false, | ||
218 | 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] } | ||
219 | }, | ||
220 | |||
221 | fill: { | ||
222 | enumerable: true, | ||
223 | get: function () { | ||
224 | return this._fill; | ||
225 | }, | ||
226 | set: function (value) { | ||
227 | if (value !== this._fill) { | ||
228 | this._fill = value; | ||
229 | } | ||
230 | } | ||
231 | }, | ||
232 | |||
194 | handleMousedown: { | 233 | handleMousedown: { |
195 | value: function(event) { | 234 | value: function(event) { |
196 | this.isActive = true; | 235 | this.isActive = true; |
@@ -213,10 +252,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
213 | this._showView(); | 252 | this._showView(); |
214 | } | 253 | } |
215 | if (this.isSelected) { | 254 | if (this.isSelected) { |
216 | this.element.classList.add("selected"); | 255 | this.element.classList.add("style-selected"); |
217 | } else { | 256 | } else { |
218 | this.element.classList.remove("selected"); | 257 | this.element.classList.remove("style-selected"); |
219 | } | 258 | } |
259 | |||
260 | |||
220 | } | 261 | } |
221 | }, | 262 | }, |
222 | didDraw: { | 263 | didDraw: { |
@@ -243,7 +284,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
243 | value: function(event) { | 284 | value: function(event) { |
244 | // this should be handled via binding, but somehow is not. Setting manually for now. | 285 | // this should be handled via binding, but somehow is not. Setting manually for now. |
245 | this.editorProperty = this.myHintable.value; | 286 | this.editorProperty = this.myHintable.value; |
246 | |||
247 | // Change views. | 287 | // Change views. |
248 | this.whichView = "propval"; | 288 | this.whichView = "propval"; |
249 | } | 289 | } |
@@ -308,6 +348,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
308 | // First, get the appropriate editor type from the data structure. | 348 | // First, get the appropriate editor type from the data structure. |
309 | var tweenable = {}, | 349 | var tweenable = {}, |
310 | i = 0; | 350 | i = 0; |
351 | |||
352 | if (this.ruleTweener === true) { | ||
353 | return; | ||
354 | } else { | ||
355 | this.ruleTweener = true; | ||
356 | } | ||
311 | 357 | ||
312 | tweenable.tweener = "input"; | 358 | tweenable.tweener = "input"; |
313 | 359 | ||
@@ -325,17 +371,45 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
325 | this.valueEditorHottext.units = tweenable.units; | 371 | this.valueEditorHottext.units = tweenable.units; |
326 | this.valueEditorHottext.minValue = tweenable.min; | 372 | this.valueEditorHottext.minValue = tweenable.min; |
327 | this.valueEditorHottext.maxValue = tweenable.max; | 373 | this.valueEditorHottext.maxValue = tweenable.max; |
374 | this.valueEditorHottext.identifier="hottext"; | ||
375 | el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement; | ||
376 | this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty)); | ||
377 | this.valueEditorHottext.value = this.editorValue | ||
378 | this.valueEditorHottext.addEventListener("change",this,false); | ||
379 | this.valueEditorHottext.addEventListener("changing",this,false); | ||
328 | this.valueEditorHottext.needsDraw = true; | 380 | this.valueEditorHottext.needsDraw = true; |
329 | } else if (tweenable.tweener === "color" ) { | 381 | } else if (tweenable.tweener === "color" ) { |
330 | this.editorInputContainer.classList.add("hidden"); | 382 | this.editorInputContainer.classList.add("hidden"); |
331 | this.editorColorContainer.classList.remove("hidden"); | 383 | this.editorColorContainer.classList.remove("hidden"); |
332 | this.editorHottextContainer.classList.add("hidden"); | 384 | this.editorHottextContainer.classList.add("hidden"); |
385 | |||
386 | if(tweenable.colorType === "fill"){ | ||
387 | this._isFill = true; | ||
388 | }else{ | ||
389 | if(tweenable.colorType === "stroke"){ | ||
390 | this._isFill = false; | ||
391 | this._borderSide = tweenable.strokePosition | ||
392 | } | ||
393 | } | ||
394 | |||
395 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
396 | // setup fill color | ||
397 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
398 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
399 | this.colorelement = this._fillColorCtrl; | ||
400 | var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide) | ||
401 | this.application.ninja.timeline.selectedStyle = this.editorProperty; | ||
402 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
403 | this._fillColorCtrl.color(currentValue.colorMode, currentValue.color); | ||
404 | this.addedColorChips = true; | ||
405 | } | ||
333 | // TODO: set up color chip here. | 406 | // TODO: set up color chip here. |
334 | } else if (tweenable.tweener === "input"){ | 407 | } else if (tweenable.tweener === "input"){ |
335 | this.editorInputContainer.classList.remove("hidden"); | 408 | this.editorInputContainer.classList.remove("hidden"); |
336 | this.editorColorContainer.classList.add("hidden"); | 409 | this.editorColorContainer.classList.add("hidden"); |
337 | this.editorHottextContainer.classList.add("hidden"); | 410 | this.editorHottextContainer.classList.add("hidden"); |
338 | this.valueEditorInput.value = this.editorValue; | 411 | this.valueEditorInput.value = this.editorValue; |
412 | this.valueEditorInput.addEventListener("blur",this,false); | ||
339 | } else { | 413 | } else { |
340 | this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") | 414 | this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") |
341 | } | 415 | } |
@@ -345,296 +419,347 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
345 | /* === END: Controllers === */ | 419 | /* === END: Controllers === */ |
346 | 420 | ||
347 | _myTweenables: { | 421 | _myTweenables: { |
348 | value: [ | 422 | value: [ |
349 | { | 423 | { |
350 |