From e065244ac75d1d0f25fd5c75cb58e714a13fe16b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 14 Mar 2012 08:59:17 -0700 Subject: Squashed commit of the following: merge master into timeline Signed-off-by: Jonathan Duran --- .../color/colorpanelbase.reel/colorpanelbase.html | 76 + .../color/colorpanelbase.reel/colorpanelbase.js | 1654 ++++++++++++++++++++ js/panels/color/colorpanelbase.reel/config.rb | 9 + .../colorpanelbase.reel/css/colorpanelbase.css | 332 ++++ .../colorpanelbase.reel/css/colorpanelbase.scss | 339 ++++ .../color/colorpanelbase.reel/img/icon_default.png | Bin 0 -> 3011 bytes .../color/colorpanelbase.reel/img/icon_nocolor.png | Bin 0 -> 3036 bytes .../color/colorpanelbase.reel/img/icon_swap.png | Bin 0 -> 2961 bytes js/panels/color/colorpanelbase.reel/img/knob.png | Bin 0 -> 1036 bytes 9 files changed, 2410 insertions(+) create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.html create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.js create mode 100755 js/panels/color/colorpanelbase.reel/config.rb create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.css create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_default.png create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_nocolor.png create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_swap.png create mode 100755 js/panels/color/colorpanelbase.reel/img/knob.png (limited to 'js/panels/color/colorpanelbase.reel') diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html new file mode 100755 index 00000000..d4330596 --- /dev/null +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ + + +
+
+
R
+
G
+
B
+
A
+
+
+
+
+
+
+
+
+ + + + +
+
#
+
+
+ + + + \ No newline at end of file diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js new file mode 100755 index 00000000..af62dd07 --- /dev/null +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -0,0 +1,1654 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + Popup = require("js/components/popup.reel").Popup, + Slider = require("js/components/slider.reel").Slider, + HotText = require("js/components/hottext.reel").HotText, + ColorBar = require("js/components/colorbar.reel").ColorBar; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanelBase +exports.ColorPanelBase = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + //Storing ColorPanel sliders mode + _panelMode: { + enumerable: false, + value: 'rgb' + }, + //////////////////////////////////////////////////////////////////// + //Storing ColorPanel sliders mode + panelMode: { + enumerable: true, + get: function() { + return this._panelMode; + }, + set: function(value) { + if (value !== this._panelMode) { + this._panelMode = value; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + _colorBar: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + //Storing color manager + _colorManager: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + colorManager: { + 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)); + } + } + }, + //////////////////////////////////////////////////////////////////// + //Color Panel Container + _container: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + _combo: { + 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: []} + }, + //////////////////////////////////////////////////////////////////// + // + historyCache: { + 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} + }, + //////////////////////////////////////////////////////////////////// + // + currentChip: { + enumerable: true, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + previousInput: { + enumerable: true, + value: null + }, + //////////////////////////////////////////////////////////////////// + //Setting up elements/components + prepareForDraw: { + 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}]; + } + }, + + handleFirstDraw: { + enumerable: true, + value: function (e) { + // + this.application.ninja.colorController.createToolbar(); + this.applyDefaultColors(); + this.removeEventListener('firstDraw', this, false); + } + }, + + //////////////////////////////////////////////////////////////////// + //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); + } + }); + //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; + } + }, + //////////////////////////////////////////////////////////////////// + //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'; + } + } + } + }, + //////////////////////////////////////////////////////////////////// + //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'; + } + }, + //////////////////////////////////////////////////////////////////// + // + 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; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + removeButton: { + enumerable: true, + value: function (type, button) { + //Checking for type array to exists before removing item + if (this._buttons[type.toLocaleLowerCase()]) { + this._buttons[type.toLocaleLowerCase()].pop(button); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + setPreviousColor: { + enumerable: true, + value: function (e) { + // + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + if (this.colorManager.colorHistory[this.colorManager.input].length > 1) { + var prev = this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-2], color, alpha; + // + color = prev.c; + alpha = prev.a; + color.wasSetByCode = false; + // + if (prev.m === 'nocolor') { + this.setNoColor(); + } else { + this.colorManager.alpha = {value: alpha, wasSetByCode: true, type: 'change'}; + this.colorManager[prev.m] = color; + } + } + } + }, + //////////////////////////////////////////////////////////////////// + // + rgbMode: { + enumerable: true, + value: function (e) { + // + //this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + this.panelMode = this.colorManager.mode = '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; + // + this._combo[0].slider.value = this.colorManager.rgb.r; + this._combo[1].slider.value = this.colorManager.rgb.g; + this._combo[2].slider.value = this.colorManager.rgb.b; + // + this._updateSliders(e); + for(i=0; this._buttons.rgbmode[i]; i++) { + this._buttons.rgbmode[i].className = 'cp_rgb_mode selected'; + //this._buttons.rgbmode[i].classList.add('selected'); + } + for(i=0; this._buttons.hslmode[i]; i++) { + this._buttons.hslmode[i].className = 'cp_hsl_mode'; + ///this._buttons.hslmode[i].classList.remove('selected'); + } + for(i=0; this._buttons.mlabel1[i]; i++) { + this._buttons.mlabel1[i].innerHTML = 'R'; + } + for(i=0; this._buttons.mlabel2[i]; i++) { + this._buttons.mlabel2[i].innerHTML = 'G'; + } + for(i=0; this._buttons.mlabel3[i]; i++) { + this._buttons.mlabel3[i].innerHTML = 'B'; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + hslMode: { + enumerable: true, + value: function (e) { + // + //this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + this.panelMode = this.colorManager.mode = '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; + // + this._combo[0].slider.value = this.colorManager.hsl.h; + this._combo[1].slider.value = this.colorManager.hsl.s; + this._combo[2].slider.value = this.colorManager.hsl.l; + // + this._updateSliders(e); + for(i=0; this._buttons.rgbmode[i]; i++) { + this._buttons.rgbmode[i].className = 'cp_rgb_mode'; + //this._buttons.rgbmode[i].classList.remove('selected'); + } + for(i=0; this._buttons.hslmode[i]; i++) { + this._buttons.hslmode[i].className = 'cp_hsl_mode selected'; + //this._buttons.hslmode[i].classList.add('selected'); + } + for(i=0; this._buttons.mlabel1[i]; i++) { + this._buttons.mlabel1[i].innerHTML = 'H'; + } + for(i=0; this._buttons.mlabel2[i]; i++) { + this._buttons.mlabel2[i].innerHTML = 'S'; + } + for(i=0; this._buttons.mlabel3[i]; i++) { + this._buttons.mlabel3[i].innerHTML = 'L'; + } + } + }, + //////////////////////////////////////////////////////////////////// + //TODO: Add set by code property + setNoColor: { + enumerable: true, + value: function (e) { + // + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + this.colorManager.applyNoColor(); + } + }, + //////////////////////////////////////////////////////////////////// + // + swapColors: { + enumerable: true, + value: function (e) { + //TODO: Take into account current select input type + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + var stroke = this.colorManager.colorHistory.fill[this.colorManager.colorHistory.fill.length-1], + fill = this.colorManager.colorHistory.stroke[this.colorManager.colorHistory.stroke.length-1]; + stroke.c.wasSetByCode = fill.c.wasSetByCode = false; + stroke.c.type = fill.c.type = 'change'; + //////////////////////////////////////////////////////////// + // + this.colorManager.input = 'stroke'; + this.colorManager.alpha = {value: stroke.a, type: 'change', wasSetByCode: false}; + // + switch (stroke.m) { + //////////////////////////////////////////////////////// + case 'rgb': + this.colorManager.rgb = stroke.c; + break; + //////////////////////////////////////////////////////// + case 'hsv': + this.colorManager.hsv = stroke.c; + break; + //////////////////////////////////////////////////////// + case 'hsl': + this.colorManager.hsl = stroke.c; + break; + //////////////////////////////////////////////////////// + case 'hex': + this.colorManager.hex = stroke.c; + break; + //////////////////////////////////////////////////////// + case 'gradient': + this.colorManager.gradient = stroke.c; + break; + //////////////////////////////////////////////////////// + default: + this.setNoColor(); + break; + //////////////////////////////////////////////////////// + } + //////////////////////////////////////////////////////////// + // + this.colorManager.input = 'fill'; + this.colorManager.alpha = {value: fill.a, type: 'change', wasSetByCode: false}; + // + switch (fill.m) { + //////////////////////////////////////////////////////// + case 'rgb': + this.colorManager.rgb = fill.c; + break; + //////////////////////////////////////////////////////// + case 'hsv': + this.colorManager.hsv = fill.c; + break; + //////////////////////////////////////////////////////// + case 'hsl': + this.colorManager.hsl = fill.c; + break; + //////////////////////////////////////////////////////// + case 'hex': + this.colorManager.hex = fill.c; + break; + //////////////////////////////////////////////////////// + case 'gradient': + this.colorManager.gradient = fill.c; + break; + //////////////////////////////////////////////////////// + default: + this.setNoColor(); + break; + //////////////////////////////////////////////////////// + } + // + //Updating all hex input areas + for(i=0; this._buttons.hexinput[i]; i++) { + this._buttons.hexinput[i]._valueSyncedWithInputField = false; + this._buttons.hexinput[i].needsDraw = true; + } + } + }, + //////////////////////////////////////////////////////////////////// + //Applying default colors to stroke and fill + applyDefaultColors: { + enumerable: true, + value: function () { + //TODO: Take into account current select input type + this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + var mode, max1, max2, max3, color, fColor, sColor; + if (this.panelMode === 'hsl') { + mode = 'hsl', + max1 = 360, + max2 = 100, + max3 = 100, + fColor = {h: 0, s: 0, l:100}, + sColor = {h: 0, s: 0, l:0}; + } else { + mode = 'rgb', + max1 = 255, + max2 = 255, + max3 = 255, + sColor = {r: 0, g: 0, b:0}, + fColor = {r: 255, g: 255, b:255}; + } + // + sColor.wasSetByCode = false; + fColor.wasSetByCode = false; + sColor.type = 'change'; + fColor.type = 'change'; + // + this.panelMode = this.colorManager.mode = mode; + this._combo[0].slider.maxValue = this._combo[0].hottext.maxValue = max1; + this._combo[1].slider.maxValue = this._combo[1].hottext.maxValue = max2; + this._combo[2].slider.maxValue = this._combo[2].hottext.maxValue = max3; + this.colorManager.input = 'stroke'; + this.colorManager.alpha = {value: 1, type: 'changing', wasSetByCode: true}; + if (mode === 'hsl') { + this.colorManager.hsl = sColor; + } else { + this.colorManager.rgb = sColor; + } + + this.colorManager.input = 'fill'; + this.colorManager.alpha = {value: 1, type: 'changing', wasSetByCode: true}; + if (mode === 'hsl') { + this.colorManager.hsl = fColor; + } else { + this.colorManager.rgb = fColor; + } + + //TODO: hack + if (mode === 'hsl') { + for(i=0; this._buttons.rgbmode[i]; i++) { + this._buttons.rgbmode[i].className = ''; + } + for(i=0; this._buttons.hslmode[i]; i++) { + this._buttons.hslmode[i].className = 'selected'; + } + } else { + for(i=0; this._buttons.rgbmode[i]; i++) { + this._buttons.rgbmode[i].className = 'selected'; + } + for(i=0; this._buttons.hslmode[i]; i++) { + this._buttons.hslmode[i].className = ''; + } + } + } + }, + //////////////////////////////////////////////////////////////////// + // + selectColorWithChip: { + enumerable: true, + value: function (e) { + // + this.currentChip = e._event.srcElement; + // + if (this.colorManager.input === 'stroke' || this.colorManager.input === 'fill') { + this.previousInput = this.colorManager.input; + } + this.colorManager.input = 'chip'; + this.colorManager.addEventListener('change', this, false); + // + if (this.otherInput) { + this.selectInputType(null); + } + // + this.application.ninja.colorController.colorPopupManager.showColorChipPopup(e); + } + }, + //////////////////////////////////////////////////////////////////// + // + _updateValueFromSH: { + enumerable: false, + value: function (e) { + // + var update; + // + if (!e._event.wasSetByCode) { + if(e.target.changesColor) { + // + //this.application.ninja.colorController.colorPopupManager.hideColorPopup(); + // + if (this.panelMode === 'rgb') { + if (e.target.cInputType === 'slider') { + // + if (this.colorManager.rgb && Math.round(this._combo[0].slider.value) === this.colorManager.rgb.r && Math.round(this._combo[1].slider.value) === this.colorManager.rgb.g && Math.round(this._combo[2].slider.value) === this.colorManager.rgb.b) { + return; + } + // + update = {r: Math.round(this._combo[0].slider.value), g: Math.round(this._combo[1].slider.value), b:Math.round(this._combo[2].slider.value)}; + } else { + // + if (this.colorManager.rgb && Math.round(this._combo[0].hottext.value) === this.colorManager.rgb.r && Math.round(this._combo[1].hottext.value) === this.colorManager.rgb.g && Math.round(this._combo[2].hottext.value) === this.colorManager.rgb.b) { + return; + } + // + update = {r: Math.round(this._combo[0].hottext.value), g: Math.round(this._combo[1].hottext.value), b:Math.round(this._combo[2].hottext.value)}; + } + update.wasSetByCode = false; + update.type = 'change'; + this.colorManager.rgb = update; + } else if (this.panelMode === 'hsl') { + if (e.target.cInputType === 'slider') { + // + if (this.colorManager.hsl && Math.round(this._combo[0].slider.value) === this.colorManager.hsl.h && Math.round(this._combo[1].slider.value) === this.colorManager.hsl.s && Math.round(this._combo[2].slider.value) === this.colorManager.hsl.l) { + return; + } + // + update = {h: Math.round(this._combo[0].slider.value), s: Math.round(this._combo[1].slider.value), l:Math.round(this._combo[2].slider.value)}; + } else { + // + if (this.colorManager.hsl && Math.round(this._combo[0].hottext.value) === this.colorManager.hsl.h && Math.round(this._combo[1].hottext.value) === this.colorManager.hsl.s && Math.round(this._combo[2].hottext.value) === this.colorManager.hsl.l) { + return; + } + // + update = {h: Math.round(this._combo[0].hottext.value), s: Math.round(this._combo[1].hottext.value), l:Math.round(this._combo[2].hottext.value)}; + } + update.wasSetByCode = false; + update.type = 'change'; + this.colorManager.hsl = update; + } + } else { + if (e.target.cInputType === 'slider') { + update = {value: this._combo[3].slider.value/100, wasSetByCode: false, type: 'change'}; + } else { + update = {value: this._combo[3].hottext.value/100, wasSetByCode: false, type: 'change'}; + } + this.colorManager.alpha = update; + } + } + } + }, + //////////////////////////////////////////////////////////////////// + // + _updateSliders: { + enumerable: false, + value: function (e) { + var color, input = this.colorManager.input, i, other; + if (input === 'fill') { + other = 'stroke'; + } else if (input === 'stroke') { + other = 'fill'; + } else if (input === 'chip') { + var ctx, cvs = this.currentChip.getElementsByTagName('canvas')[0]; + //if (cvs && color) { + if (cvs) { + ctx = cvs.getContext('2d'); + ctx.clearRect(0, 0, cvs.width, cvs.height); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = "#666"; + ctx.moveTo(0, 0); + ctx.lineTo(cvs.width, 0); + ctx.lineTo(cvs.width, cvs.height); + ctx.lineTo(0, cvs.height); + ctx.lineTo(0, 0); + ctx.stroke(); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = "#333"; + ctx.moveTo(2, 2); + ctx.lineTo(cvs.width-2, 2); + ctx.lineTo(cvs.width-2, cvs.height-2); + ctx.lineTo(2, cvs.height-2); + ctx.lineTo(2, 1); + ctx.stroke(); + } + + if (this.colorManager.rgb) + this.currentChip.style.backgroundColor = 'rgba('+this.colorManager.rgb.r+', '+this.colorManager.rgb.g+', '+this.colorManager.rgb.b+', '+this._combo[3].slider.value/100+')'; + + return; + } + if (this.panelMode === 'rgb' && this.colorManager.rgb) { + color = 'rgba('+this._combo[0].slider.value+', '+this._combo[1].slider.value+', '+this._combo[2].slider.value+', '+this._combo[3].slider.value/100+')'; + } else if (this.panelMode === 'hsl' && this.colorManager.hsl) { + color = 'hsla('+this._combo[0].slider.value+', '+this._combo[1].slider.value+'%, '+this._combo[2].slider.value+'%, '+this._combo[3].slider.value/100+')'; + } + //////////////////////////////////////////////////////////// + //Drawing slider/hottext combinations + for (var i=0; i