/* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ //////////////////////////////////////////////////////////////////////// // var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, ColorChipPopup = require("js/panels/Color/colorchippopup.reel").ColorChipPopup, ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPopupManager exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { value: false }, //////////////////////////////////////////////////////////////////// // _hasInit: { value: false }, //////////////////////////////////////////////////////////////////// // init: { enumerable: false, value: function () { //////////////////////////////////////////////////////////// //TODO: Improve logic on handling closing the popup //////////////////////////////////////////////////////////// //Hiding popup on any panel(s) actions this.eventManager.addEventListener("panelOrderChanged", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("panelClose", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("panelCollapsed", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("panelSelected", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("togglePanel", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("panelResizing", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("panelResizedStart", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // this.eventManager.addEventListener("panelResizedEnd", function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // window.addEventListener('resize', function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); // document.addEventListener('mousedown', function (e) { // if (e._event.srcElement.getAttribute('data-montage-id') === 'stageCanvas' || e._event.srcElement.id === 'mainContainer' || e._event.srcElement.getAttribute('data-montage-id') === 'drawingCanvas') { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); } }.bind(this)); //////////////////////////////////////////////////////////// } }, //////////////////////////////////////////////////////////////////// // _popupPanel: { enumerable: false, value: {} }, //////////////////////////////////////////////////////////////////// // _popupChip: { enumerable: false, value: {} }, //////////////////////////////////////////////////////////////////// // _popupBase: { enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // _popupChipBase: { enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // colorManager: { enumerable: true, get: function() { return this._colorManager; }, set: function(value) { this._colorManager = value; } }, //TODO: Remove, figure out offset bug _hackOffset: { enumerable: true, value: false }, _colorPopupDrawing: { enumerable: true, value: false }, _colorChipPopupDrawing: { enumerable: true, value: false }, //////////////////////////////////////////////////////////////////// //TODO: Remove and use montage's built in component showColorPopup: { enumerable: true, value: function (x, y, side, align) { if (this._colorPopupDrawing) { return; } if (this._popupPanel.opened) { //Toogles if called and opened this.hideColorPopup(); } else { this._colorPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events if (!this._hasinit) { this.init(); this._hasinit = true; } //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); document.body.appendChild(popup); // this._popupBase = ColorPanelPopup.create(); this._popupBase.element = popup; this._popupBase.props = {x: x, y: y, side: side, align: align}; this._popupBase.colorManager = this.colorManager; //TODO: Remove if (this._hackOffset) { this._popupBase.hack = {x: 53, y: 235}; } else { this._hackOffset = true; this._popupBase.hack = {x: 0, y: 0}; } // this._popupBase.addEventListener('change', this, false); this._popupBase.addEventListener('changing', this, false); // this._popupBase.needsDraw = true; this._popupBase.addEventListener('firstDraw', this, false); } } }, //////////////////////////////////////////////////////////////////// // hideColorPopup: { enumerable: true, value: function () { if (this._popupPanel.opened) { // this._popupPanel.popup.removeEventListener('didDraw', this, false); // this.hideColorChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // this.application.ninja.popupManager.removePopup(this._popupPanel.popup.element); this._popupPanel.opened = false; //TODO: Fix HACK of removing popup this._popupPanel.popup.base.destroy(); this._popupPanel.popup = null; } else if (this._popupChip.opened) { this.hideColorChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } } } }, //////////////////////////////////////////////////////////////////// // colorChipChange: { enumerable: true, value: function (e) { //e._event.srcElement.style.backgroundColor = '#'+e._event.hex; //this.colorManager.removeEventListener('change', this, false); // var ctx, cvs = this.application.ninja.colorController.colorView.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.application.ninja.colorController.colorView.panelMode === 'hsl') { this.application.ninja.colorController.colorView.color('hsl', e._event.hsla); } else if (this.application.ninja.colorController.colorView.panelMode === 'rgb'){ this.application.ninja.colorController.colorView.currentChip.color('rgb', e._event.rgba); } else { this.application.ninja.colorController.colorView.currentChip.color('hex', e._event.hex); } // } }, //////////////////////////////////////////////////////////////////// // showColorChipPopup: { enumerable: true, value: function (e) { if (this._colorChipPopupDrawing) { return; } if (this._popupChip.opened) { //Toogles if called and opened this.hideColorChipPopup(); } else { this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events if (!this._hasinit) { this.init(); this._hasinit = true; } //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); document.body.appendChild(popup); // this._popupChip.event = e._event; this._popupChipBase = ColorChipPopup.create(); this._popupChipBase.element = popup; this._popupChipBase.colorManager = this.colorManager; if (e._event.srcElement.props) { this.colorChipProps = e._event.srcElement.props; } else { this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; } // if (!this.colorChipProps.panel) { this.hideColorPopup(); } // this._popupChipBase.popupModes = {}; this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient; this._popupChipBase.popupModes.image = this.colorChipProps.image; this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel; this._popupChipBase.popupModes.palette = this.colorChipProps.palette; this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; // this._popupChipBase.addEventListener('change', this, false); this._popupChipBase.addEventListener('changing', this, false); // this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); } } }, //////////////////////////////////////////////////////////////////// // hideColorChipPopup: { enumerable: true, value: function () { if (this._popupChip.opened) { // this._popupChip.popup.removeEventListener('didDraw', this, false); //Making sure to return color manager to either stroke or fill (might be a Hack for now) if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // this.application.ninja.popupManager.removePopup(this._popupChip.popup.element); this._popupChip.opened = false; //TODO: Fix HACK of removing popup this._popupChip.popup.base.destroy(); this._popupChip.popup = null; } } }, //////////////////////////////////////////////////////////////////// //Reworking logic, firstDraw bubbles up, so target must be checked handleFirstDraw: { enumerable: false, value: function (e) { if (e._target._element.className === 'cpp_popup') { this._popupBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.element, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); //Displaying popup once it's drawn this._popupPanel.popup.addEventListener('firstDraw', this, false); //Hiding popup while it draws this._popupPanel.popup.element.style.opacity = 0; //Storing popup for use when closing this._popupPanel.popup.base = this._popupBase; } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { // this._colorPopupDrawing = false; // this._popupPanel.popup.removeEventListener('firstDraw', this, false); //Fades in with CSS transition this._popupPanel.popup.element.style.opacity = 1; //Popup was added, so it's opened this._popupPanel.opened = true; } else if (e._target._element.className === 'cc_popup') { this._popupChipBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content if (this.colorChipProps.offset) { this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } else { this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } // if (!this.colorChipProps.panel) { this.colorManager.input = 'chip'; } //Hiding popup while it draws this._popupChip.popup.element.style.opacity = 0; //Storing popup for use when closing this._popupChip.popup.base = this._popupChipBase; //Displaying popup once it's drawn this._popupChip.popup.addEventListener('firstDraw', this, false); } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cc_popup') { this._popupChip.popup.removeEventListener('firstDraw', this, false); // this._colorChipPopupDrawing = false; // var hsv, color = this._popupChip.event.srcElement.colorValue; // this._popupChip.popup.element.style.opacity = 1; // this._popupChip.opened = true; // if (this._popupChip.event.srcElement.colorMode === 'rgb') { if (this._popupChip.event.srcElement.colorValue && this._popupChip.event.srcElement.colorValue.r) { color = this._popupChip.event.srcElement.colorValue; } else if (this._popupChip.event.srcElement.colorValue && this._popupChip.event.srcElement.colorValue.color){ color = this._popupChip.event.srcElement.colorValue.color; } else { return; } hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); hsv.wasSetByCode = false; hsv.type = 'change'; this._popupChip.popup.base._colorChipWheel.value = hsv; } else if (this._popupChip.event.srcElement.colorMode === 'hsl') { if (this._popupChip.event.srcElement.colorValue.h) { color = this._popupChip.event.srcElement.colorValue; } else{ color = this._popupChip.event.srcElement.colorValue.color; } color = this.colorManager.hslToRgb(color.h/360, color.s/100, color.l/100); hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); hsv.wasSetByCode = false; hsv.type = 'change'; this._popupChip.popup.base._colorChipWheel.value = hsv; } } } }, //////////////////////////////////////////////////////////////////// // handleChange: { enumerable: false, value: function (e) { if (e._event.input && e._event.input === 'chip') { this.colorChipChange(e); return; } // if (!e._event.wasSetByCode) { if (e._event.hsv) { if(e._target._colorBarCanvas && this.colorManager.input !== 'chip') { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); } // if (this.colorManager.input !== 'chip') { this.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; } else { //this.colorChipChange(e); } } } } }, //////////////////////////////////////////////////////////////////// // handleChanging: { enumerable: false, value: function (e) { if (e._event.hsv) { // if(e._target._colorBarCanvas && this.colorManager.input !== 'chip') { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); } //Converting color to RGB to update buttons background colors (affecting only view) var color = this.colorManager.hsvToRgb(e._event.hsv.h/(Math.PI*2), e._event.hsv.s, e._event.hsv.v), i, input = this.colorManager.input; if (input === 'chip') { var ctx, cvs = this.application.ninja.colorController.colorView.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(); } //Updating background color if (this.colorManager.alpha && this.colorManager.alpha.value) { this.application.ninja.colorController.colorView.currentChip.style.backgroundImage = 'none'; this.application.ninja.colorController.colorView.currentChip.style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha.value+')'; } else { this.application.ninja.colorController.colorView.currentChip.style.backgroundImage = 'none'; this.application.ninja.colorController.colorView.currentChip.style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha+')'; } return; } //Applying color to all buttons in array for(i=0; this.application.ninja.colorController.colorView._buttons[input][i]; i++) { //TODO: Remove this and combine to single method for live updating colors //Combines with drawing routing in 'selectInputHighlight' var ctx, cvs = this.application.ninja.colorController.colorView._buttons[input][i].getElementsByTagName('canvas')[0]; 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(); } //Updating background color if (this.colorManager.alpha && this.colorManager.alpha.value) { this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundImage = 'none'; this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha.value+')'; } else { this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundImage = 'none'; this.application.ninja.colorController.colorView._buttons[input][i].style.backgroundColor = 'rgba('+color.r+','+color.g+','+color.b+', '+this.colorManager.alpha+')'; } } } } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// });