From 830b011d94d728882286d72e129f7405134957c7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 17:05:07 -0800 Subject: Updated color code in the PI to go through element mediator. Signed-off-by: Nivesh Rajbhandari --- js/panels/Color/colortoolbar.reel/colortoolbar.js | 64 +++--------- js/panels/properties/content.reel/content.js | 119 ++++++++-------------- 2 files changed, 56 insertions(+), 127 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 19fe7b85..10ae8b6e 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing stroke (stores color in mode use to select color) _stroke: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]} + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing fill (stores color in mode use to select color) _fill: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]} + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -95,76 +95,38 @@ exports.ColorToolbar = Montage.create(Component, { didDraw: { enumerable: false, value: function() { - // + this.fill_btn.addEventListener('change', function (e) { - // - var temp; - // - this.fill = e._event; - // - if (e._event.color && e._event.color.l) { - temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); - temp.a = e._event.color.a; - } else if (e._event.color && e._event.color.r){ - temp = e._event.color; - temp.a = e._event.color.a; - } else { - temp = null; - } - //WebGL uses array - if (temp) { - this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; - } else { - this.fill.webGlColor = null; - } - // + this.fill = e._event; + this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); this.application.ninja.colorController.colorModel.input = 'fill'; - // - var color = e._event.color; + + var color = e._event.color; if (e._event.colorMode !== 'nocolor' && color) { color.wasSetByCode = false; color.type = 'change'; + color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { this.application.ninja.colorController.colorModel.applyNoColor(); } - // this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); - // - this.stroke_btn.addEventListener('change', function (e) { - // - var temp; - // + + this.stroke_btn.addEventListener('change', function (e) { this.stroke = e._event; - // - if (e._event.color && e._event.color.l) { - temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100); - temp.a = e._event.color.a; - } else if (e._event.color && e._event.color.r){ - temp = e._event.color; - temp.a = e._event.color.a; - } else { - temp = null; - } - //WebGL uses array - if (temp) { - this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a]; - } else { - this.stroke.webGlColor = null; - } - // + this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); this.application.ninja.colorController.colorModel.input = 'stroke'; - // + var color = e._event.color; if (e._event.colorMode !== 'nocolor' && color) { color.wasSetByCode = false; color.type = 'change'; + color.mode = e._event.colorMode; this.application.ninja.colorController.colorModel[e._event.colorMode] = color; } else { this.application.ninja.colorController.colorModel.applyNoColor(); } - // this.application.ninja.colorController.colorModel.input = 'chip'; }.bind(this)); } diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index fe6faef8..34c38e70 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -141,7 +141,8 @@ exports.Content = Montage.create(Component, { displayElementProperties: { value: function (el) { - var customPI; + var customPI, + currentValue; this.elementName = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; @@ -180,87 +181,50 @@ exports.Content = Montage.create(Component, { for(var j = 0, fields; fields = customSec.Section[j]; j++) { for(var k = 0, control; control = fields[k]; k++) { - if(control.prop !== "border-color" && control.prop !== "background-color") { - var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); + if(control.type !== "color") { + currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); currentValue ? currentValue = currentValue : currentValue = control.defaultValue; this.customSections[0].content.controls[control.id] = currentValue; } + else + { + currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); + if(control.prop === "border") + { + this.application.ninja.colorController.colorModel.input = "stroke"; + } + else if(control.prop === "background") + { + this.application.ninja.colorController.colorModel.input = "fill"; + } + + debugger; + if(currentValue) + { + if(currentValue.mode === "gradient") + { + this.application.ninja.colorController.colorModel["gradient"] = + {value: currentValue.color, wasSetByCode: true, type: 'change'}; + } + else + { + if (currentValue.color.a !== undefined) + { + this.application.ninja.colorController.colorModel.alpha = + {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; + } + this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; + } + } + else + { + this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; + this.application.ninja.colorController.colorModel.applyNoColor(); + } + } } } } - - - //TODO: Once logic for color and gradient is established, this needs to be revised - - var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image"); - this.application.ninja.colorController.colorModel.input = "stroke"; - if(borderColor || borderImage) { - if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) { - //Gradient - color = this.application.ninja.colorController.getColorObjFromCss(borderImage); - if (color && color.value) { - this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } else { - //Solid - color = this.application.ninja.colorController.getColorObjFromCss(borderColor); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - // - background = ElementsMediator.getProperty(el, "background-color"); - backgroundImage = ElementsMediator.getProperty(el, "background-image"); - this.application.ninja.colorController.colorModel.input = "fill"; - if(background || backgroundImage) { - if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) { - //Gradient - color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage); - if (color && color.value) { - this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'}; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } else { - //Solid - color = this.application.ninja.colorController.getColorObjFromCss(background); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - } - } else { - this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; - this.application.ninja.colorController.colorModel.applyNoColor(); - } - - - - - } }, @@ -300,6 +264,8 @@ exports.Content = Montage.create(Component, { handlePropertyChange: { value: function(e) { + if(e.wasSetByCode) return; + var newValue; e.units ? newValue = e.value + e.units : newValue = e.value; @@ -317,6 +283,7 @@ exports.Content = Montage.create(Component, { handlePropertyChanging: { value: function(e) { + if(e.wasSetByCode) return; // ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); -- cgit v1.2.3