diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html index f40bd448..19bc4b6b 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -26,7 +26,7 @@ -

diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index 0698a6dc..f65d5bc0 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -26,7 +26,7 @@ -

diff --git a/js/panels/color/colortoolbar.reel/colortoolbar.html b/js/panels/color/colortoolbar.reel/colortoolbar.html index e32a475c..6561ed99 100755 --- a/js/panels/color/colortoolbar.reel/colortoolbar.html +++ b/js/panels/color/colortoolbar.reel/colortoolbar.html @@ -28,7 +28,7 @@ -

-- cgit v1.2.3 From 1a759361b82127f9d5c1428dc889fffdf2daaf86 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 3 May 2012 15:11:56 -0700 Subject: First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools. --- .../color/colorpanelbase.reel/colorpanelbase.js | 2835 ++++++++++---------- 1 file changed, 1420 insertions(+), 1415 deletions(-) (limited to 'js/panels/color') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index af62dd07..64cdc360 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -15,35 +15,35 @@ var Montage = require("montage/core/core").Montage, //////////////////////////////////////////////////////////////////////// //Exporting as ColorPanelBase exports.ColorPanelBase = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - // - hasTemplate: { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { value: true }, //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode _panelMode: { - enumerable: false, - value: 'rgb' + enumerable: false, + value: 'rgb' }, //////////////////////////////////////////////////////////////////// //Storing ColorPanel sliders mode panelMode: { - enumerable: true, - get: function() { + enumerable: true, + get: function () { return this._panelMode; }, - set: function(value) { - if (value !== this._panelMode) { - this._panelMode = value; - } + set: function (value) { + if (value !== this._panelMode) { + this._panelMode = value; + } } }, //////////////////////////////////////////////////////////////////// // _colorBar: { - enumerable: false, - value: null + enumerable: false, + value: null }, //////////////////////////////////////////////////////////////////// //Storing color manager @@ -54,19 +54,19 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorManager: { - enumerable: true, - get: function() { + enumerable: true, + get: function () { return this._colorManager; }, - set: function(value) { - if (value !== this._colorManager) { - this._colorManager = value; - //Updating input buttons - this._colorManager.addEventListener('change', this._update.bind(this)); - this._colorManager.addEventListener('changing', this._update.bind(this)); - //Updating history buttons once color is set - this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this)); - } + set: function (value) { + if (value !== this._colorManager) { + this._colorManager = value; + //Updating input buttons + this._colorManager.addEventListener('change', this._update.bind(this)); + this._colorManager.addEventListener('changing', this._update.bind(this)); + //Updating history buttons once color is set + this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this)); + } } }, //////////////////////////////////////////////////////////////////// @@ -78,50 +78,50 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // _combo: { - enumerable: false, - value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}] + enumerable: false, + value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}] }, //////////////////////////////////////////////////////////////////// // _buttons: { - enumerable: false, - value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} + enumerable: false, + value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] } }, //////////////////////////////////////////////////////////////////// // historyCache: { - enumerable: false, - value: {current: null, previous: null} + enumerable: false, + value: { current: null, previous: null } }, //////////////////////////////////////////////////////////////////// // colorChipProps: { - enumerable: true, - value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false} + enumerable: true, + value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false } }, //////////////////////////////////////////////////////////////////// // currentChip: { - enumerable: true, - value: null + enumerable: true, + value: null }, //////////////////////////////////////////////////////////////////// // previousInput: { - enumerable: true, - value: null + enumerable: true, + value: null }, //////////////////////////////////////////////////////////////////// //Setting up elements/components prepareForDraw: { - enumerable: false, - value: function() { - //TODO: Remove temporary hack, color history should be initilized + enumerable: false, + value: function () { + //TODO: Remove temporary hack, color history should be initilized this.addEventListener('firstDraw', this, false); this.application.ninja.colorController.colorView = this; - this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}]; - this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}]; - } + this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}]; + this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}]; + } }, handleFirstDraw: { @@ -131,1521 +131,1526 @@ exports.ColorPanelBase = Montage.create(Component, { this.application.ninja.colorController.createToolbar(); this.applyDefaultColors(); this.removeEventListener('firstDraw', this, false); + + // Workaround for delaying subtool colorchip creation until the color panel is initialized. + // This can be removed and the subtools must be updated once we create a new view for color buttons + // and they no longer rely on the view of the color panel. + this.application.ninja.colorController.colorPanelDrawn = true; } }, //////////////////////////////////////////////////////////////////// //Assigning values and binding willDraw: { - enumerable: false, - value: function() { - //////////////////////////////////////////////////////////// - //TODO: remove ID dependencies - createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element); - createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element); - createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element); - createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element); - //////////////////////////////////////////////////////////// - //Function to create slider/hottext combination - function createCombo (c, slid, htid, color, e) { - //Only creating, not drawing - c.slider = Slider.create(); - c.hottext = HotText.create(); - c.slider.element = e.getElementsByClassName(slid)[0]; - c.hottext.element = e.getElementsByClassName(htid)[0]; - c.slider.changesColor = c.hottext.changesColor = color; - c.slider.cInputType = 'slider'; - c.slider.cInputType = 'hottext'; - //Binding Hottext to Slider - Object.defineBinding(c.hottext, "value", { - boundObject: c.slider, - boundObjectPropertyPath: "_value", //TODO: Check if needed - oneway: false, - boundValueMutator: function(value) { - return Math.round(value); + enumerable: false, + value: function () { + //////////////////////////////////////////////////////////// + //TODO: remove ID dependencies + createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element); + createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element); + createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element); + createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element); + //////////////////////////////////////////////////////////// + //Function to create slider/hottext combination + function createCombo(c, slid, htid, color, e) { + //Only creating, not drawing + c.slider = Slider.create(); + c.hottext = HotText.create(); + c.slider.element = e.getElementsByClassName(slid)[0]; + c.hottext.element = e.getElementsByClassName(htid)[0]; + c.slider.changesColor = c.hottext.changesColor = color; + c.slider.cInputType = 'slider'; + c.slider.cInputType = 'hottext'; + //Binding Hottext to Slider + Object.defineBinding(c.hottext, "value", { + boundObject: c.slider, + boundObjectPropertyPath: "_value", //TODO: Check if needed + oneway: false, + boundValueMutator: function (value) { + return Math.round(value); } - }); - //Binding Slider to Hottext - Object.defineBinding(c.slider, "value", { - boundObject: c.hottext, - boundObjectPropertyPath: "value", - oneway: false, - boundValueMutator: function(value) { + }); + //Binding Slider to Hottext + Object.defineBinding(c.slider, "value", { + boundObject: c.hottext, + boundObjectPropertyPath: "value", + oneway: false, + boundValueMutator: function (value) { return Math.round(value); } - }); - } - //////////////////////////////////////////////////////////// - //Creating ColorBar and sending color manager - this._colorBar = ColorBar.create(); - this._colorBar.element = this.element.getElementsByClassName("cp_spectrum")[0]; - //////////////////////////////////////////////////////////// - //Adding/Initializing buttons - this.addButton('fill', this.element.getElementsByClassName('cpe_fill')[0]); - this.addButton('fillicon', this.element.getElementsByClassName('cpe_fill_icon')[0]); - this.addButton('stroke', this.element.getElementsByClassName('cpe_stroke')[0]); - this.addButton('strokeicon', this.element.getElementsByClassName('cpe_stroke_icon')[0]); - - this.addButton('current', this.element.getElementsByClassName('cp_color_current')[0]); - this.addButton('previous', this.element.getElementsByClassName('cp_color_previous')[0]); - - this.addButton('hexinput', this.element.getElementsByClassName('cp_hottext5')[0]); - this.addButton('reset', this.element.getElementsByClassName('cp_reset')[0]); - this.addButton('nocolor', this.element.getElementsByClassName('cp_nocolor')[0]); - this.addButton('swap', this.element.getElementsByClassName('cp_swap')[0]); - - //TODO: Add HSL mode when Chrome can pass proper mode in color, also add in CSS button states - //this.addButton('hslmode', this.element.getElementsByClassName('cp_hsl_mode')[0]); - this.addButton('rgbmode', this.element.getElementsByClassName('cp_rgb_mode')[0]); - - this.addButton('mlabel1', this.element.getElementsByClassName('sh_label1')[0]); - this.addButton('mlabel2', this.element.getElementsByClassName('sh_label2')[0]); - this.addButton('mlabel3', this.element.getElementsByClassName('sh_label3')[0]); - - - - //Initialing values of sliders according to current mode - if (this._panelMode === 'rgb') { - this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 255; - this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = 255; - this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = 255; - } else if (this._panelMode === 'hsl') { - this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 360; - this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = 100; - this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = 100; - } - //Alpha slider/hottext is indepenent of color panel mode - this._combo[3].slider.maxValue = this._combo[3].hottext.maxValue = 100; - } + }); + } + //////////////////////////////////////////////////////////// + //Creating ColorBar and sending color manager + this._colorBar = ColorBar.create(); + this._colorBar.element = this.element.getElementsByClassName("cp_spectrum")[0]; + //////////////////////////////////////////////////////////// + //Adding/Initializing buttons + this.addButton('fill', this.element.getElementsByClassName('cpe_fill')[0]); + this.addButton('fillicon', this.element.getElementsByClassName('cpe_fill_icon')[0]); + this.addButton('stroke', this.element.getElementsByClassName('cpe_stroke')[0]); + this.addButton('strokeicon', this.element.getElementsByClassName('cpe_stroke_icon')[0]); + + this.addButton('current', this.element.getElementsByClassName('cp_color_current')[0]); + this.addButton('previous', this.element.getElementsByClassName('cp_color_previous')[0]); + + this.addButton('hexinput', this.element.getElementsByClassName('cp_hottext5')[0]); + this.addButton('reset', this.element.getElementsByClassName('cp_reset')[0]); + this.addButton('nocolor', this.element.getElementsByClassName('cp_nocolor')[0]); + this.addButton('swap', this.element.getElementsByClassName('cp_swap')[0]); + + //TODO: Add HSL mode when Chrome can pass proper mode in color, also add in CSS button states + //this.addButton('hslmode', this.element.getElementsByClassName('cp_hsl_mode')[0]); + this.addButton('rgbmode', this.element.getElementsByClassName('cp_rgb_mode')[0]); + + this.addButton('mlabel1', this.element.getElementsByClassName('sh_label1')[0]); + this.addButton('mlabel2', this.element.getElementsByClassName('sh_label2')[0]); + this.addButton('mlabel3', this.element.getElementsByClassName('sh_label3')[0]); + + + + //Initialing values of sliders according to current mode + if (this._panelMode === 'rgb') { + this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 255; + this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = 255; + this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = 255; + } else if (this._panelMode === 'hsl') { + this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = 360; + this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = 100; + this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = 100; + } + //Alpha slider/hottext is indepenent of color panel mode + this._combo[3].slider.maxValue = this._combo[3].hottext.maxValue = 100; + } }, //////////////////////////////////////////////////////////////////// //Drawing elements/components draw: { - enumerable: false, - value: function() { - //////////////////////////////////////////////////////////// - //Drawing slider/hottext combinations - for (var i=0; i 1) { - // - prev = this.colorManager.colorHistory[input][this.colorManager.colorHistory[input].length-2]; - alpha = prev.a; - // - cvs = this._buttons.previous[i].getElementsByTagName('canvas')[0]; - ctx = cvs.getContext('2d'); - ctx.clearRect(0, 0, cvs.width, cvs.height); - // - this._buttons.previous[i].style.background = 'none'; - this._buttons.previous[i].style.backgroundImage = 'none'; - this._buttons.previous[i].style.backgroundColor = 'none'; - // - switch (prev.m) { - case 'hsv': - hsv = prev.c; - color = this.colorManager.hsvToRgb(hsv.h/(Math.PI*2), hsv.s, hsv.v); - this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'rgba('+color.r+', '+color.g+', '+color.b+', '+alpha+')'; - break; - case 'hsl': - color = prev.c; - this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'hsla('+color.h+', '+color.s+'%, '+color.l+'%, '+alpha+')'; - break; - case 'rgb': - color = prev.c; - this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'rgba('+color.r+', '+color.g+', '+color.b+', '+alpha+')'; - break; - case 'hex': - this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = prev.c.hex; - break; - case 'gradient': - this._buttons.previous[i].style.backgroundImage = this.historyCache.previous = prev.c.value.css; - break; - case 'nocolor': - ctx.beginPath(); - ctx.moveTo(0, cvs.height); - ctx.lineTo(cvs.width, 0); - ctx.lineWidth = 16; - ctx.strokeStyle = "#FF0000"; - ctx.stroke(); - this._buttons.previous[i].style.backgroundColor = 'white'; - this.historyCache.previous = 'nocolor'; - break; - default: - this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'transparent'; - this._buttons.previous[i].style.backgroundImage = this.historyCache.previous = 'transparent'; - break; - } - } else { - this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'transparent'; - this._buttons.previous[i].style.backgroundImage = this.historyCache.previous = 'transparent'; - } - } - } + enumerable: false, + value: function (e) { + //Locals + var bg = 'none', img, i, input = this.colorManager.input.toLowerCase(), color, hsv, mode = e._event.mode, prev, alpha, ctx, cvs; + if (input === 'chip') { + return; + } + //Creating background color string according to panel mode (not input color mode) + if (mode === 'hsv' || mode === 'hsl' || mode === 'rgb' || mode === 'hex' || mode === 'alpha') { + if (this.panelMode === 'rgb' && e._event.rgba) { + color = e._event.rgba; + bg = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')'; + } else if (this.panelMode === 'hsl' && e._event.hsla) { + color = e._event.hsla; + bg = 'hsla(' + color.h + ', ' + color.s + '%, ' + color.l + '%, ' + color.a + ')'; + } else { + bg = 'nocolor'; + } + color = null; + for (i = 0; this._buttons.current[i]; i++) { + cvs = this._buttons.current[i].getElementsByTagName('canvas')[0]; + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + this._buttons.current[i].style.backgroundColor = bg; + this._buttons.current[i].style.backgroundImage = 'none'; + } + } else if (mode === 'gradient') { + // + color = e._event.value; + bg = e._event.value.value.css; + for (i = 0; this._buttons.current[i]; i++) { + cvs = this._buttons.current[i].getElementsByTagName('canvas')[0]; + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + this._buttons.current[i].style.background = 'none'; + this._buttons.current[i].style.backgroundColor = 'none'; + this._buttons.current[i].style.backgroundImage = bg; + } + } else { + // + bg = 'nocolor'; + for (i = 0; this._buttons.current[i]; i++) { + //TODO: combine no color into one reusable funtion + cvs = this._buttons.current[i].getElementsByTagName('canvas')[0]; + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + ctx.beginPath(); + ctx.moveTo(0, cvs.height); + ctx.lineTo(cvs.width, 0); + ctx.lineWidth = 16; + ctx.strokeStyle = "#FF0000"; + ctx.stroke(); + this._buttons.current[i].style.backgroundColor = 'white'; + this._buttons.current[i].style.backgroundImage = 'none'; + } + } + this.historyCache.current = bg; + //Using history of input type to set colors of 'previous' buttons + for (i = 0; this._buttons.previous[i]; i++) { + // + if (this.colorManager.colorHistory[input].length > 1) { + // + prev = this.colorManager.colorHistory[input][this.colorManager.colorHistory[input].length - 2]; + alpha = prev.a; + // + cvs = this._buttons.previous[i].getElementsByTagName('canvas')[0]; + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + // + this._buttons.previous[i].style.background = 'none'; + this._buttons.previous[i].style.backgroundImage = 'none'; + this._buttons.previous[i].style.backgroundColor = 'none'; + // + switch (prev.m) { + case 'hsv': + hsv = prev.c; + color = this.colorManager.hsvToRgb(hsv.h / (Math.PI * 2), hsv.s, hsv.v); + this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + alpha + ')'; + break; + case 'hsl': + color = prev.c; + this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'hsla(' + color.h + ', ' + color.s + '%, ' + color.l + '%, ' + alpha + ')'; + break; + case 'rgb': + color = prev.c; + this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + alpha + ')'; + break; + case 'hex': + this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = prev.c.hex; + break; + case 'gradient': + this._buttons.previous[i].style.backgroundImage = this.historyCache.previous = prev.c.value.css; + break; + case 'nocolor': + ctx.beginPath(); + ctx.moveTo(0, cvs.height); + ctx.lineTo(cvs.width, 0); + ctx.lineWidth = 16; + ctx.strokeStyle = "#FF0000"; + ctx.stroke(); + this._buttons.previous[i].style.backgroundColor = 'white'; + this.historyCache.previous = 'nocolor'; + break; + default: + this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'transparent'; + this._buttons.previous[i].style.backgroundImage = this.historyCache.previous = 'transparent'; + break; + } + } else { + this._buttons.previous[i].style.backgroundColor = this.historyCache.previous = 'transparent'; + this._buttons.previous[i].style.backgroundImage = this.historyCache.previous = 'transparent'; + } + } + } }, //////////////////////////////////////////////////////////////////// //Draws no color icon on button's canvas drawButtonNoColor: { - enumerable: true, - value: function (btn, cvs) { - // - var ctx = cvs.getContext('2d'); - ctx.clearRect(0, 0, cvs.width, cvs.height); - // - ctx.beginPath(); - ctx.moveTo(0, cvs.height); - ctx.lineTo(cvs.width, 0); - ctx.lineWidth = Math.round(cvs.width/18); - ctx.strokeStyle = "#FF0000"; - ctx.stroke(); - btn.style.backgroundColor = 'white'; - btn.style.backgroundImage = 'none'; - } + enumerable: true, + value: function (btn, cvs) { + // + var ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + // + ctx.beginPath(); + ctx.moveTo(0, cvs.height); + ctx.lineTo(cvs.width, 0); + ctx.lineWidth = Math.round(cvs.width / 18); + ctx.strokeStyle = "#FF0000"; + ctx.stroke(); + btn.style.backgroundColor = 'white'; + btn.style.backgroundImage = 'none'; + } }, //////////////////////////////////////////////////////////////////// // addButton: { - enumerable: true, - value: function (type, button) { - // - switch (type.toLocaleLowerCase()) { - case 'chip': - // - var cvs = document.createElement('canvas'); - cvs.style.width = '100%'; - cvs.style.height = '100%'; - cvs.style.pointerEvents = 'none'; - cvs.style.float = 'left'; - // - this._buttons.chip.push(button); - button.style.cursor = 'pointer'; - button.color = function (m, c) { - if (this.colorValue && c && this.colorValue.css === c.css) { - return; - } - if (c && c.css) { - this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); - this.style.backgroundColor = c.css; - } else { - this.drawNoColor(this, this.cvs); - } - this.colorValue = c; - this.colorMode = m; - this.otherInput = false; - // - var actionEvent = document.createEvent("CustomEvent"); - actionEvent.initEvent('change', true, true); - actionEvent.color = c; - actionEvent.colorMode = m; - actionEvent.input = 'chip'; - this.dispatchEvent(actionEvent); - }; - button.drawNoColor = this.drawButtonNoColor; - button.addEventListener('click', this.selectColorWithChip.bind(this)); - button.cvs = cvs; - button.ctx = cvs.getContext('2d'); - button.appendChild(cvs); - break; - case 'fill': - this._buttons.fill.push(button); - button.style.cursor = 'pointer'; - button.inputType = 'fill'; - button.title = 'Fill'; - button.popup = true; - button.addEventListener('click', this.selectInputType.bind(this)); - button.innerHTML = ""; - var cvs = document.createElement('canvas'); - cvs.style.width = '100%'; - cvs.style.height = '100%'; - cvs.style.pointerEvents = 'none'; - cvs.style.float = 'left'; - button.appendChild(cvs); - // - if (this.application.ninja.colorController.fill && this.application.ninja.colorController.fill.css !== 'none') { - button.style.background = 'none'; - if (this.application.ninja.colorController.fill.css.indexOf('-webkit') >= 0) { - button.style.backgroundColor = 'none'; - button.style.backgroundImage = this.application.ninja.colorController.fill.css; - } else { - button.style.backgroundColor = this.application.ninja.colorController.fill.css; - button.style.backgroundImage = 'none'; - } - } else { - this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); - } - break; - //////////////////////////////////////////////////////// - case 'fillicon': - button.innerHTML = ''; - this._buttons.fill.push(button); - button.style.cursor = 'pointer'; - button.inputType = 'fill'; - button.title = 'Fill'; - button.addEventListener('click', this.selectInputType.bind(this)); - button.className = button.className + ' cpe_fill_icon'; - if (this.colorManager.input === 'fill') { - button.className = button.className + ' selected'; - } - break; - //////////////////////////////////////////////////////// - case 'stroke': - this._buttons.stroke.push(button); - button.style.cursor = 'pointer'; - button.inputType = 'stroke'; - button.popup = true; - button.title = 'Stroke'; - button.addEventListener('click', this.selectInputType.bind(this)); - button.innerHTML = ""; - var cvs = document.createElement('canvas'); - cvs.style.width = '100%'; - cvs.style.height = '100%'; - cvs.style.pointerEvents = 'none'; - cvs.style.float = 'left'; - button.appendChild(cvs); - // - if (this.application.ninja.colorController.stroke && this.application.ninja.colorController.stroke.css !== 'none') { - button.style.background = 'none'; - if (this.application.ninja.colorController.stroke.css.indexOf('-webkit') >= 0) { - button.style.backgroundColor = 'none'; - button.style.backgroundImage = this.application.ninja.colorController.stroke.css; - } else { - button.style.backgroundColor = this.application.ninja.colorController.stroke.css; - button.style.backgroundImage = 'none'; - } - } else { - this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); - //this.selectInputHighlight(this._buttons['stroke'], this._buttons['fill'], false, true); - } - break; - //////////////////////////////////////////////////////// - case 'strokeicon': - button.innerHTML = ''; - this._buttons.stroke.push(button); - button.style.cursor = 'pointer'; - button.title = 'Stroke'; - button.inputType = 'stroke'; - button.addEventListener('click', this.selectInputType.bind(this)); - button.className = button.className + ' cpe_stroke_icon'; - if (this.colorManager.input === 'stroke') { - button.className = button.className + ' selected'; - } - break; - //////////////////////////////////////////////////////// - case 'current': - this._buttons.current.push(button); - button.style.cursor = 'default'; - button.innerHTML = ""; - button.title = 'Current Color' - var cvs = document.createElement('canvas'); - cvs.style.width = '100%'; - cvs.style.height = '100%'; - cvs.style.pointerEvents = 'none'; - cvs.style.float = 'left'; - button.appendChild(cvs); - if (this.historyCache.current) { - //TODO:Remove hack - if (this.historyCache.current === 'nocolor') { - this.drawButtonNoColor(button, cvs); - } else { - button.style.backgroundColor = this.historyCache.current; - } - } - break; - //////////////////////////////////////////////////////// - case 'previous': - this._buttons.previous.push(button); - button.addEventListener('click', this.setPreviousColor.bind(this)); - button.style.cursor = 'pointer'; - button.innerHTML = ""; - button.title = 'Previous Color'; - var cvs = document.createElement('canvas'); - cvs.style.width = '100%'; - cvs.style.height = '100%'; - cvs.style.pointerEvents = 'none'; - cvs.style.float = 'left'; - button.appendChild(cvs); - if (this.historyCache.previous) { - if (this.historyCache.previous === 'nocolor') { - this.drawButtonNoColor(button, cvs); - } else { - button.style.backgroundColor = this.historyCache.previous; - } - } - break; - //////////////////////////////////////////////////////// - case 'mlabel1': - this._buttons.mlabel1.push(button); - break; - //////////////////////////////////////////////////////// - case 'mlabel2': - this._buttons.mlabel2.push(button); - break; - //////////////////////////////////////////////////////// - case 'mlabel3': - this._buttons.mlabel3.push(button); - break; - //////////////////////////////////////////////////////// - case 'rgbmode': - this._buttons.rgbmode.push(button); - button.title = 'Color Mode: RGB'; - button.addEventListener('click', this.rgbMode.bind(this)); - break; - //////////////////////////////////////////////////////// - case 'hslmode': - this._buttons.hslmode.push(button); - button.title = 'Color Mode: HSL'; - button.addEventListener('click', this.hslMode.bind(this)); - break; - //////////////////////////////////////////////////////// - case 'reset': - this._buttons.reset.push(button); - button.title = 'Default Colors'; - button.addEventListener('click', this.applyDefaultColors.bind(this)); - break; - //////////////////////////////////////////////////////// - case 'nocolor': - this._buttons.nocolor.push(button); - button.title = 'No Color'; - button.addEventListener('click', this.setNoColor.bind(this)); - break; - //////////////////////////////////////////////////////// - case 'swap': - this._buttons.swap.push(button); - button.title = 'Swap Colors'; - button.addEventListener('click', this.swapColors.bind(this)); - break; - //////////////////////////////////////////////////////// - case 'hexinput': - var hexinp = HotText.create(); - hexinp.element = button; - hexinp.labelFunction = this._updateHexValue.bind(this); - hexinp.inputFunction = this._hottextHexInput.bind(this); - hexinp.needsDraw = true; - this._buttons.hexinput.push(hexinp); - return hexinp; - break; - //////////////////////////////////////////////////////// - default: - console.log("ERROR: An error occured, the button '"+button+"' has an invalid type of "+type+"."); - break; - } - } + enumerable: true, + value: function (type, button) { + // + switch (type.toLocaleLowerCase()) { + case 'chip': + // + var cvs = document.createElement('canvas'); + cvs.style.width = '100%'; + cvs.style.height = '100%'; + cvs.style.pointerEvents = 'none'; + cvs.style.float = 'left'; + // + this._buttons.chip.push(button); + button.style.cursor = 'pointer'; + button.color = function (m, c) { + if (this.colorValue && c && this.colorValue.css === c.css) { + return; + } + if (c && c.css) { + this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); + this.style.backgroundColor = c.css; + } else { + this.drawNoColor(this, this.cvs); + } + this.colorValue = c; + this.colorMode = m; + this.otherInput = false; + // + var actionEvent = document.createEvent("CustomEvent"); + actionEvent.initEvent('change', true, true); + actionEvent.color = c; + actionEvent.colorMode = m; + actionEvent.input = 'chip'; + this.dispatchEvent(actionEvent); + }; + button.drawNoColor = this.drawButtonNoColor; + button.addEventListener('click', this.selectColorWithChip.bind(this)); + button.cvs = cvs; + button.ctx = cvs.getContext('2d'); + button.appendChild(cvs); + break; + case 'fill': + this._buttons.fill.push(button); + button.style.cursor = 'pointer'; + button.inputType = 'fill'; + button.title = 'Fill'; + button.popup = true; + button.addEventListener('click', this.selectInputType.bind(this)); + button.innerHTML = ""; + var cvs = document.createElement('canvas'); + cvs.style.width = '100%'; + cvs.style.height = '100%'; + cvs.style.pointerEvents = 'none'; + cvs.style.float = 'left'; + button.appendChild(cvs); + // + if (this.application.ninja.colorController.fill && this.application.ninja.colorController.fill.css !== 'none') { + button.style.background = 'none'; + if (this.application.ninja.colorController.fill.css.indexOf('-webkit') >= 0) { + button.style.backgroundColor = 'none'; + button.style.backgroundImage = this.application.ninja.colorController.fill.css; + } else { + button.style.backgroundColor = this.application.ninja.colorController.fill.css; + button.style.backgroundImage = 'none'; + } + } else { + this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); + } + break; + //////////////////////////////////////////////////////// + case 'fillicon': + button.innerHTML = ''; + this._buttons.fill.push(button); + button.style.cursor = 'pointer'; + button.inputType = 'fill'; + button.title = 'Fill'; + button.addEventListener('click', this.selectInputType.bind(this)); + button.className = button.className + ' cpe_fill_icon'; + if (this.colorManager.input === 'fill') { + button.className = button.className + ' selected'; + } + break; + //////////////////////////////////////////////////////// + case 'stroke': + this._buttons.stroke.push(button); + button.style.cursor = 'pointer'; + button.inputType = 'stroke'; + button.popup = true; + button.title = 'Stroke'; + button.addEventListener('click', this.selectInputType.bind(this)); + button.innerHTML = ""; + var cvs = document.createElement('canvas'); + cvs.style.width = '100%'; + cvs.style.height = '100%'; + cvs.style.pointerEvents = 'none'; + cvs.style.float = 'left'; + button.appendChild(cvs); + // + if (this.application.ninja.colorController.stroke && this.application.ninja.colorController.stroke.css !== 'none') { + button.style.background = 'none'; + if (this.application.ninja.colorController.stroke.css.indexOf('-webkit') >= 0) { + button.style.backgroundColor = 'none'; + button.style.backgroundImage = this.application.ninja.colorController.stroke.css; + } else { + button.style.backgroundColor = this.application.ninja.colorController.stroke.css; + button.style.backgroundImage = 'none'; + } + } else { + this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); + //this.selectInputHighlight(this._buttons['stroke'], this._buttons['fill'], false, true); + } + break; + //////////////////////////////////////////////////////// + case 'strokeicon': + button.innerHTML = ''; + this._buttons.stroke.push(button); + button.style.cursor = 'pointer'; + button.title = 'Stroke'; + button.inputType = 'stroke'; + button.addEventListener('click', this.selectInputType.bind(this)); + button.className = button.className + ' cpe_stroke_icon'; + if (this.colorManager.input === 'stroke') { + button.className = button.className + ' selected'; + } + break; + //////////////////////////////////////////////////////// + case 'current': + this._buttons.current.push(button); + button.style.cursor = 'default'; + button.innerHTML = ""; + button.title = 'Current Color' + var cvs = document.createElement('canvas'); + cvs.style.width = '100%'; + cvs.style.height = '100%'; + cvs.style.pointerEvents = 'none'; + cvs.style.float = 'left'; + button.appendChild(cvs); + if (this.historyCache.current) { + //TODO:Remove hack + if (this.historyCache.current === 'nocolor') { + this.drawButtonNoColor(button, cvs); + } else { + button.style.backgroundColor = this.historyCache.current; + } + } + break; + //////////////////////////////////////////////////////// + case 'previous': + this._buttons.previous.push(button); + button.addEventListener('click', this.setPreviousColor.bind(this)); + button.style.cursor = 'pointer'; + button.innerHTML = ""; + button.title = 'Previous Color'; + var cvs = document.createElement('canvas'); + cvs.style.width = '100%'; + cvs.style.height = '100%'; + cvs.style.pointerEvents = 'none'; + cvs.style.float = 'left'; + button.appendChild(cvs); + if (this.historyCache.previous) { + if (this.historyCache.previous === 'nocolor') { + this.drawButtonNoColor(button, cvs); + } else { + button.style.backgroundColor = this.historyCache.previous; + } + } + break; + ////////////////////////////