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.js706
2 files changed, 420 insertions, 293 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 5c1c9eeb..03d674a5 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
@@ -169,7 +171,43 @@ 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 _colorelement: {
179 writable:true
180 },
181
182 colorelement: {
183 enumerable: true,
184 get: function () {
185 return this._colorelement;
186 },
187 set: function (value) {
188 if (value !== this._colorelement) {
189 this._colorelement = value;
190 }
191 }
192 },
193
194 _fill: {
195 enumerable: false,
196 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] }
197 },
198
199 fill: {
200 enumerable: true,
201 get: function () {
202 return this._fill;
203 },
204 set: function (value) {
205 if (value !== this._fill) {
206 this._fill = value;
207 }
208 }
209 },
210
173 handleMousedown: { 211 handleMousedown: {
174 value: function(event) { 212 value: function(event) {
175 this.isActive = true; 213 this.isActive = true;
@@ -196,6 +234,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
196 } else { 234 } else {
197 this.element.classList.remove("style-selected"); 235 this.element.classList.remove("style-selected");
198 } 236 }
237
238
199 } 239 }
200 }, 240 },
201 didDraw: { 241 didDraw: {
@@ -222,7 +262,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
222 value: function(event) { 262 value: function(event) {
223 // this should be handled via binding, but somehow is not. Setting manually for now. 263 // this should be handled via binding, but somehow is not. Setting manually for now.
224 this.editorProperty = this.myHintable.value; 264 this.editorProperty = this.myHintable.value;
225
226 // Change views. 265 // Change views.
227 this.whichView = "propval"; 266 this.whichView = "propval";
228 } 267 }
@@ -287,6 +326,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
287 // First, get the appropriate editor type from the data structure. 326 // First, get the appropriate editor type from the data structure.
288 var tweenable = {}, 327 var tweenable = {},
289 i = 0; 328 i = 0;
329
330 if (this.ruleTweener === true) {
331 return;
332 } else {
333 this.ruleTweener = true;
334 }
290 335
291 tweenable.tweener = "input"; 336 tweenable.tweener = "input";
292 337
@@ -304,17 +349,45 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
304 this.valueEditorHottext.units = tweenable.units; 349 this.valueEditorHottext.units = tweenable.units;
305 this.valueEditorHottext.minValue = tweenable.min; 350 this.valueEditorHottext.minValue = tweenable.min;
306 this.valueEditorHottext.maxValue = tweenable.max; 351 this.valueEditorHottext.maxValue = tweenable.max;
352 this.valueEditorHottext.identifier="hottext";
353 el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement;
354 this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty));
355 this.valueEditorHottext.value = this.editorValue
356 this.valueEditorHottext.addEventListener("change",this,false);
357 this.valueEditorHottext.addEventListener("changing",this,false);
307 this.valueEditorHottext.needsDraw = true; 358 this.valueEditorHottext.needsDraw = true;
308 } else if (tweenable.tweener === "color" ) { 359 } else if (tweenable.tweener === "color" ) {
309 this.editorInputContainer.classList.add("hidden"); 360 this.editorInputContainer.classList.add("hidden");
310 this.editorColorContainer.classList.remove("hidden"); 361 this.editorColorContainer.classList.remove("hidden");
311 this.editorHottextContainer.classList.add("hidden"); 362 this.editorHottextContainer.classList.add("hidden");
363
364 if(tweenable.colorType === "fill"){
365 this._isFill = true;
366 }else{
367 if(tweenable.colorType === "stroke"){
368 this._isFill = false;
369 this._borderSide = tweenable.strokePosition
370 }
371 }
372
373 if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
374 // setup fill color
375 this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
376 this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
377 this.colorelement = this._fillColorCtrl;
378 var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
379 this.application.ninja.timeline.selectedStyle = this.editorProperty;
380 this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
381 this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
382 this.addedColorChips = true;
383 }
312 // TODO: set up color chip here. 384 // TODO: set up color chip here.
313 } else if (tweenable.tweener === "input"){ 385 } else if (tweenable.tweener === "input"){
314 this.editorInputContainer.classList.remove("hidden"); 386 this.editorInputContainer.classList.remove("hidden");
315 this.editorColorContainer.classList.add("hidden"); 387 this.editorColorContainer.classList.add("hidden");
316 this.editorHottextContainer.classList.add("hidden"); 388 this.editorHottextContainer.classList.add("hidden");
317 this.valueEditorInput.value = this.editorValue; 389 this.valueEditorInput.value = this.editorValue;
390 this.valueEditorInput.addEventListener("blur",this,false);
318 } else { 391 } else {
319 this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.") 392 this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.")
320 } 393 }
@@ -324,296 +397,347 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
324 /* === END: Controllers === */ 397 /* === END: Controllers === */
325 398
326 _myTweenables: { 399 _myTweenables: {
327 value: [ 400 value: [
328 { 401 {
329 "property" : "background-color", 402 "property" : "background-color",
330 "tweener" : "color", 403 "tweener" : "color",
331 "units" : "", 404 "units" : "",
332 "min" : "", 405 "min" : "",
333 "max" : "", 406 "max" : "",
334 "default" :"#FFFFFF" 407 "default" :"#FFFFFF",
335 }, 408 "colorType" :"fill"
336 { 409 },
337 "property" : "background-position-x", 410 {
338 "tweener" : "hottext", 411 "property" : "background-position-x",
339 "units" : "px", 412 "tweener" : "hottext",
340 "min" : -9999, 413 "units" : "px",
341 "max" : 9999, 414 "min" : -9999,
342 "default" : 0 415 "max" : 9999,
343 }, 416 "default" : 0
344 { 417 },
345 "property" : "background-position-y", 418 {
346 "tweener" : "hottext",