From 451cdd792046eca1d57dd205940e5b638f8a08ac Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 13 Mar 2012 15:19:35 -0700 Subject: Renaming folder --- .../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 3011 -> 0 bytes .../Color/colorpanelbase.reel/img/icon_nocolor.png | Bin 3036 -> 0 bytes .../Color/colorpanelbase.reel/img/icon_swap.png | Bin 2961 -> 0 bytes js/panels/Color/colorpanelbase.reel/img/knob.png | Bin 1036 -> 0 bytes 9 files changed, 2410 deletions(-) delete mode 100755 js/panels/Color/colorpanelbase.reel/colorpanelbase.html delete mode 100755 js/panels/Color/colorpanelbase.reel/colorpanelbase.js delete mode 100755 js/panels/Color/colorpanelbase.reel/config.rb delete mode 100755 js/panels/Color/colorpanelbase.reel/css/colorpanelbase.css delete mode 100755 js/panels/Color/colorpanelbase.reel/css/colorpanelbase.scss delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_default.png delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_nocolor.png delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_swap.png delete 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 deleted file mode 100755 index d4330596..00000000 --- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - -
-
- - -
-
- -
- -
-
-
-
- -
- -
-
- - - -
-
-
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 deleted file mode 100755 index af62dd07..00000000 --- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js +++ /dev/null @@ -1,1654 +0,0 @@ -/* -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