From a30d76ff641ce89686cf5fbd9f04ac9ab4e9c830 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 10 Feb 2012 17:21:28 -0800 Subject: initial color chip for the stage Signed-off-by: Valerio Virgillito --- js/components/ui/color-chip.reel/color-chip.js | 80 +++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 8 deletions(-) (limited to 'js/components/ui') diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 5bef7020..4c288084 100644 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -9,32 +9,96 @@ var Montage = require("montage/core/core").Montage, var ColorChip = exports.ColorChip = Montage.create(Component, { + chip: { + value: false + }, + hasIcon: { value: true }, + iconType: { + value: null + }, + mode: { value: "stroke" }, - prepareForDraw: { - value: function() { -// this.colorButton.props = {side: 'right', align: 'bottom', wheel: true, palette: true, gradient: true, image: true, offset: 20}; -// this.application.ninja.colorController.addButton('chip', this.colorButton); + offset: { + value: 20 + }, + initialColor: { + value: false + }, + + changeDelegate: { + value: null + }, + prepareForDraw: { + value: function() { this.addEventListener("firstDraw", this, false); } }, draw: { value: function() { + if(this.hasIcon) { + var icon = this.iconType || this.mode + "Icon"; + this.application.ninja.colorController.addButton(icon, this.icon); + } - if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon); - -// this.application.ninja.colorController.addButton(this.mode, this.chipBtn); - this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20}; + this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset}; this.application.ninja.colorController.addButton(this.mode, this.chipBtn); + + /* + if(this.chip) { + //this.application.ninja.colorController.addButton('fillIcon', this.icon); + this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 0}; + this.application.ninja.colorController.addButton(this.mode, this.chipBtn); + } else { + //if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon); + this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20}; + this.application.ninja.colorController.addButton(this.mode, this.chipBtn); + } + */ + + + } + }, + + handleFirstDraw: { + value: function(evt) { + if(this.chip) { + // This is a single chip - Not related to the color panel -- Set the initial color if found + var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)"; + + if(this.initialColor) { + console.log(this.initialColor); + var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor); + mode = colorObj.mode; + r = colorObj.value.r; + g = colorObj.value.g; + b = colorObj.value.b; + a = colorObj.value.a; + css = colorObj.css; + } + + this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); + //this.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'}); + + this.chipBtn.addEventListener("change", this, false); + } + } + }, + + handleChange: { + value: function(evt) { + if(this.changeDelegate && typeof(this.changeDelegate === "function")) { + this.changeDelegate(evt); + } } } -- cgit v1.2.3 From 0d7d6d4d98437a93f31ededa14ca6eb5382c9e58 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 13 Feb 2012 14:05:10 -0800 Subject: Cleaning up the stage background color chip. Signed-off-by: Valerio Virgillito --- js/components/ui/color-chip.reel/color-chip.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'js/components/ui') diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 4c288084..e51bdd8a 100644 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -53,19 +53,6 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset}; this.application.ninja.colorController.addButton(this.mode, this.chipBtn); - /* - if(this.chip) { - //this.application.ninja.colorController.addButton('fillIcon', this.icon); - this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 0}; - this.application.ninja.colorController.addButton(this.mode, this.chipBtn); - } else { - //if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon); - this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20}; - this.application.ninja.colorController.addButton(this.mode, this.chipBtn); - } - */ - - } }, @@ -76,7 +63,6 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)"; if(this.initialColor) { - console.log(this.initialColor); var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor); mode = colorObj.mode; r = colorObj.value.r; @@ -87,8 +73,6 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { } this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); - //this.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'}); - this.chipBtn.addEventListener("change", this, false); } } -- cgit v1.2.3