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.html7
-rw-r--r--js/panels/Timeline/Style.reel/Style.js711
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css91
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss11
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">[&nbsp;]</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
18var Montage = require("montage/core/core").Montage; 18var Montage = require("montage/core/core").Montage;
19var Component = require("montage/ui/component").Component; 19var Component = require("montage/ui/component").Component;
20var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
21
20 22
21var LayerStyle = exports.LayerStyle = Montage.create(Component, { 23var 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 "property" : "background-color", 424 "property" : "background-color",
351 "tweener" : "color", 425 "tweener" : "color",
352 "units" : "", 426 "units" : "",
353 "min" : "", 427 "min" : "",
354 "max" : "", 428 "max" : "",