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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
#
-
-
-
-
-
-
\ 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