From 1e9af08f42e4ba18fc8c5a8501d8cbecec0f4fe8 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 21 Jun 2012 16:53:04 -0700 Subject: Replacing temp color chip pop This replaces the temporary color chip popup with a main popup used universally throughout the app. There are still outstanding issues to be addressed, this is just the initial set up before debugging issues. --- .../colorpanelpopup.reel/colorpanelpopup.html | 2 +- .../color/colorpanelpopup.reel/colorpanelpopup.js | 93 +++++--- js/panels/color/colorpopup-manager.js | 264 ++++++++++++--------- 3 files changed, 212 insertions(+), 147 deletions(-) (limited to 'js/panels/color') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html index 596580b4..d3b6fed7 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html @@ -52,7 +52,7 @@ -
#
+
#
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 192c62fb..153817c1 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -129,44 +129,73 @@ exports.ColorPanelPopup = Montage.create(Component, { draw: { value: function() { // - this.drawPalette(this.defaultPalette); + if (!this.props || (this.props && this.props.palette)) { + // + this.btnPalette.addEventListener('click', function () { + this.popupSwitchInputTo(this.palettes); + }.bind(this), true); + // + this.drawPalette(this.defaultPalette); + } else { + this.btnPalette.style.display = 'none'; + } // - if (!this.colorManager.gradient) { - this.drawGradient(this.defaultGradient); + if (!this.props || (this.props && this.props.gradient)) { + // + this.btnGradient.addEventListener('click', function () { + this.popupSwitchInputTo(this.gradients); + }.bind(this), true); + // + if (!this.colorManager.gradient) { + this.drawGradient(this.defaultGradient); + } + } else { + this.btnGradient.style.display = 'none'; } // - this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); + this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex); // this._components.combo.slider.needsDraw = true; this._components.combo.hottext.needsDraw = true; - // - this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { - this.setNoColor(); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.palettes); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.wheel); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () { - this.popupSwitchInputTo(this.gradients); - }.bind(this), true); - // - this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button - this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () { - //this.popupSwitchInputTo(this.images); - }.bind(this), true); + // + if (!this.props || (this.props && this.props.nocolor)) { + // + this.btnNocolor.addEventListener('click', function () { + this.setNoColor(); + }.bind(this), true); + } else { + this.btnNocolor.style.display = 'none'; + } // - this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); - this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); + if (!this.props || (this.props && this.props.wheel)) { + // + this.btnWheel.addEventListener('click', function () { + this.popupSwitchInputTo(this.wheel); + }.bind(this), true); + // + this._components.wheel.addEventListener('firstDraw', this, false); + this._components.wheel.needsDraw = true; + } else { + this.btnWheel.style.display = 'none'; + } // - this._components.wheel.addEventListener('firstDraw', this, false); + if (!this.props || (this.props && this.props.image)) { + // + this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button + this.btnImage.addEventListener('click', function () { + //this.popupSwitchInputTo(this.images); + }.bind(this), true); + } else { + this.btnImage.style.display = 'none'; + } // - this._components.wheel.needsDraw = true; + if (!this.props || (this.props && this.props.history)) { + this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent); + this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious); + } else { + this.btnCurrent.style.display = 'none'; + this.btnPrevious.style.display = 'none'; + } } }, //////////////////////////////////////////////////////////////////// @@ -202,7 +231,7 @@ exports.ColorPanelPopup = Montage.create(Component, { break } //Checking for a gradient to be current color - if (this.colorManager.gradient) { + if (this.colorManager.gradient && (!this.props || (this.props && this.props.gradient))) { if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') { //If no gradient set, using default this.drawGradient(this.defaultGradient); @@ -265,7 +294,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.application.ninja.colorController.popupTab = 'gradient'; } // - this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); + if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); } }, //////////////////////////////////////////////////////////////////// @@ -413,7 +442,7 @@ exports.ColorPanelPopup = Montage.create(Component, { destroy: { value: function() { // - this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); + this.application.ninja.colorController.colorView.removeButton('hexinput', this.inputHex); Object.deleteBinding(this._components.combo.hottext, "value"); Object.deleteBinding(this._components.combo.slider, "value"); Object.deleteBinding(this._components.wheel, "value"); diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 4667f2b4..fba196e4 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot 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; + ColorPanelPopup = require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup, + ColorModel = require("js/models/color-model").ColorModel; //////////////////////////////////////////////////////////////////////// //Exporting as ColorPopupManager exports.ColorPopupManager = Montage.create(Component, { @@ -26,69 +27,77 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init: { - enumerable: false, value: function () { //////////////////////////////////////////////////////////// //Closing popups on resize window.addEventListener('resize', function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); - //Storing limits of popup - var top, bottom, left, right; + //Closing popups if outside limits document.addEventListener('mousedown', function (e) { - //Checking for popup to be opened otherwise nothing happens - if (this._popupPanel.opened && this._popupPanel.popup && this._popupPanel.popup.element && !e._event.srcElement.inputType) { - //Getting horizontal limits - left = parseInt(this._popupPanel.popup.element.style.left) + parseInt(this._popupPanel.popup.element.style.marginLeft); - right = left + parseInt(this._popupPanel.popup.element.offsetWidth); - //Getting vertical limits - top = parseInt(this._popupPanel.popup.element.style.top) + parseInt(this._popupPanel.popup.element.style.marginTop); - bottom = left + parseInt(this._popupPanel.popup.element.offsetHeight); - //Checking click position in relation to limits - if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { - //Hides popups since click is outside limits - this.application.ninja.colorController.colorPopupManager.hideColorPopup(); - } - } + // + if (this._popupBase && !this._popupChipBase) { + if(!this.popupHitCheck(this._popupBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && this._popupChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { + this.hideColorPopup(); + } + } }.bind(this)); //////////////////////////////////////////////////////////// } }, //////////////////////////////////////////////////////////////////// // - _popupPanel: { - enumerable: false, - value: {} - }, - //////////////////////////////////////////////////////////////////// - // - _popupChip: { - enumerable: false, - value: {} + popupHitCheck: { + value: function (element, e) { + //Storing limits of popup + var top, bottom, left, right; + //Checking for popup to be opened otherwise nothing happens + if (element && element.opened && element.popup && element.popup.element) { + //Getting horizontal limits + left = parseInt(element.popup.element.style.left) + parseInt(element.popup.element.style.marginLeft); + right = left + parseInt(element.popup.element.offsetWidth); + //Getting vertical limits + top = parseInt(element.popup.element.style.top) + parseInt(element.popup.element.style.marginTop); + bottom = left + parseInt(element.popup.element.offsetHeight); + //Checking click position in relation to limits + if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) { + //Hides popups since click is outside limits + return false; + } else { + return true; + } + } else { + return false; + } + } }, //////////////////////////////////////////////////////////////////// // _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; }, @@ -96,27 +105,18 @@ exports.ColorPopupManager = Montage.create(Component, { 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: { @@ -125,7 +125,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (this._colorPopupDrawing) { return; } - if (this._popupPanel.opened) { + if (this._popupBase && this._popupBase.opened) { //Toogles if called and opened this.hideColorPopup(); } else { @@ -143,15 +143,8 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupBase = ColorPanelPopup.create(); this._popupBase.element = popup; - this._popupBase.props = {x: x, y: y, side: side, align: align}; + this._popupBase.props = {x: x, y: y, side: side, align: align, wheel: true, palette: true, gradient: true, image: true, nocolor: true, history: true}; 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); @@ -166,9 +159,9 @@ exports.ColorPopupManager = Montage.create(Component, { hideColorPopup: { enumerable: true, value: function () { - if (this._popupPanel.opened) { + if (this._popupBase && this._popupBase.opened) { // - this._popupPanel.popup.removeEventListener('didDraw', this, false); + this._popupBase.popup.removeEventListener('didDraw', this, false); // this.hideColorChipPopup(); //Making sure to return color manager to either stroke or fill (might be a Hack for now) @@ -176,12 +169,12 @@ exports.ColorPopupManager = Montage.create(Component, { this.colorManager.input = this.application.ninja.colorController.colorView.previousInput; } // - this.application.ninja.popupManager.removePopup(this._popupPanel.popup.element); - this._popupPanel.opened = false; + this.application.ninja.popupManager.removePopup(this._popupBase.popup.element); + this._popupBase.opened = false; //TODO: Fix HACK of removing popup - this._popupPanel.popup.base.destroy(); - this._popupPanel.popup = null; - } else if (this._popupChip.opened) { + this._popupBase.popup.base.destroy(); + this._popupBase.popup = null; + } else if (this._popupChipBase && this._popupChipBase.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) { @@ -195,11 +188,13 @@ exports.ColorPopupManager = Montage.create(Component, { 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) { + var ctx, + cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + rgb = this._popupChipBase.colorManager.rgb, + hsl = this._popupChipBase.colorManager.hsl, + alpha = this._popupChipBase.colorManager.alpha.value; + // if (cvs) { ctx = cvs.getContext('2d'); ctx.clearRect(0, 0, cvs.width, cvs.height); @@ -223,15 +218,7 @@ exports.ColorPopupManager = Montage.create(Component, { 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); - } - // - + this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); } }, //////////////////////////////////////////////////////////////////// @@ -242,7 +229,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (this._colorChipPopupDrawing) { return; } - if (this._popupChip.opened) { + if (this._popupChipBase && this._popupChipBase.opened) { //Toogles if called and opened this.hideColorChipPopup(); } else { @@ -253,12 +240,49 @@ exports.ColorPopupManager = Montage.create(Component, { 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 = ColorPanelPopup.create(); + this._popupChipBase.element = popup; + this._popupChipBase.isPopupChip = true; + if (e._event.srcElement.props) { + this._popupChipBase.props = e._event.srcElement.props; + } else { + this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, panel: false, history: false}; + } + // + if (this._popupChipBase.props.offset) { + this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupChipBase.props.offset)+'px'; + this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } else { + this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; + this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } + this._popupChipBase.colorManager = ColorModel.create(); + // + this._popupChipBase.addEventListener('change', this, false); + this._popupChipBase.addEventListener('changing', this, false); + // + this._popupChipBase.needsDraw = true; + this._popupChipBase.addEventListener('firstDraw', this, false); + + + + + + + /* +//////////////////////////////////////////////////// + //Creating popup from m-js component + var popup = document.createElement('div'); + document.body.appendChild(popup); + // + this._popupChipBase.event = e._event; this._popupChipBase = ColorChipPopup.create(); this._popupChipBase.element = popup; this._popupChipBase.colorManager = this.colorManager; @@ -284,6 +308,7 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); +*/ } } }, @@ -292,19 +317,20 @@ exports.ColorPopupManager = Montage.create(Component, { hideColorChipPopup: { enumerable: true, value: function () { - if (this._popupChip.opened) { + // + if (this._popupChipBase && this._popupChipBase.opened) { // - this._popupChip.popup.removeEventListener('didDraw', this, false); + this._popupChipBase.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; + this.application.ninja.popupManager.removePopup(this._popupChipBase.popup.element); + this._popupChipBase.opened = false; //TODO: Fix HACK of removing popup - this._popupChip.popup.base.destroy(); - this._popupChip.popup = null; + this._popupChipBase.popup.base.destroy(); + this._popupChipBase.popup = null; } } }, @@ -314,78 +340,83 @@ exports.ColorPopupManager = Montage.create(Component, { enumerable: false, value: function (e) { if (e._target._element.className === 'cpp_popup') { - this._popupBase.removeEventListener('firstDraw', this, false); + e._target.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}); + e._target.popup = this.application.ninja.popupManager.createPopup(e._target.element, {x: e._target.props.x, y: e._target.props.y}, {side: e._target.props.side, align: e._target.props.align}); //Displaying popup once it's drawn - this._popupPanel.popup.addEventListener('firstDraw', this, false); + e._target.popup.addEventListener('firstDraw', this, false); //Hiding popup while it draws - this._popupPanel.popup.element.style.opacity = 0; + e._target.popup.element.style.opacity = 0; //Storing popup for use when closing - this._popupPanel.popup.base = this._popupBase; + e._target.popup.base = e._target; } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { - // - this._colorPopupDrawing = false; + if (!e._target.base.isPopupChip) { + this._colorPopupDrawing = false; + } else { + this._colorChipPopupDrawing = false; + } // - this._popupPanel.popup.removeEventListener('firstDraw', this, false); + e._target.base.popup.removeEventListener('firstDraw', this, false); //Fades in with CSS transition - this._popupPanel.popup.element.style.opacity = 1; + e._target.base.popup.element.style.opacity = 1; //Popup was added, so it's opened - this._popupPanel.opened = true; - } else if (e._target._element.className === 'cc_popup') { + e._target.base.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}); + this._popupChipBase.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChipBase.event.clientX - this._popupChipBase.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChipBase.event.target.clientHeight/2+this._popupChipBase.event.clientY - this._popupChipBase.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}); + this._popupChipBase.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChipBase.event.clientX - this._popupChipBase.event.offsetX)+'px', y: (this._popupChipBase.event.target.clientHeight/2+this._popupChipBase.event.clientY - this._popupChipBase.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; + this._popupChipBase.popup.element.style.opacity = 0; //Storing popup for use when closing - this._popupChip.popup.base = this._popupChipBase; + this._popupChipBase.popup.base = this._popupChipBase; //Displaying popup once it's drawn - this._popupChip.popup.addEventListener('firstDraw', this, false); + this._popupChipBase.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._popupChipBase.popup.removeEventListener('firstDraw', this, false); // this._colorChipPopupDrawing = false; // - var hsv, color = this._popupChip.event.srcElement.colorValue; + var hsv, color = this._popupChipBase.event.srcElement.colorValue; // - this._popupChip.popup.element.style.opacity = 1; + this._popupChipBase.popup.element.style.opacity = 1; // - this._popupChip.opened = true; + this._popupChipBase.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; + if (this._popupChipBase.event.srcElement.colorMode === 'rgb') { + if (this._popupChipBase.event.srcElement.colorValue && this._popupChipBase.event.srcElement.colorValue.r) { + color = this._popupChipBase.event.srcElement.colorValue; + } else if (this._popupChipBase.event.srcElement.colorValue && this._popupChipBase.event.srcElement.colorValue.color){ + color = this._popupChipBase.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; + this._popupChipBase.popup.base._colorChipWheel.value = hsv; + } else if (this._popupChipBase.event.srcElement.colorMode === 'hsl') { + if (this._popupChipBase.event.srcElement.colorValue.h) { + color = this._popupChipBase.event.srcElement.colorValue; } else{ - color = this._popupChip.event.srcElement.colorValue.color; + color = this._popupChipBase.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; + this._popupChipBase.popup.base._colorChipWheel.value = hsv; } } +*/ } }, //////////////////////////////////////////////////////////////////// @@ -393,8 +424,13 @@ exports.ColorPopupManager = Montage.create(Component, { handleChange: { enumerable: false, value: function (e) { - if (e._event.input && e._event.input === 'chip') { - this.colorChipChange(e); + if (this._popupChipBase && this._popupChipBase.opened) { + if (e._event.hsv) { + this._popupChipBase.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}; + this.colorChipChange(e); + } else { + console.log(e._event); + } return; } // -- cgit v1.2.3 From b97819e9a8da9267d49acd72f918f8c40c8b320e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 22 Jun 2012 16:20:14 -0700 Subject: Fix closing logic and init color on chip Added improved logic to handle toggling from button the color popup. Also added an init color method for the chip to initialize color in it's popup. --- js/panels/color/colorpopup-manager.js | 71 +++++++++++++++++++++++++++++++++-- 1 file changed, 68 insertions(+), 3 deletions(-) (limited to 'js/panels/color') diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index fba196e4..bccfcebc 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -33,7 +33,6 @@ exports.ColorPopupManager = Montage.create(Component, { window.addEventListener('resize', function (e) { this.application.ninja.colorController.colorPopupManager.hideColorPopup(); }.bind(this)); - //Closing popups if outside limits document.addEventListener('mousedown', function (e) { // @@ -58,6 +57,8 @@ exports.ColorPopupManager = Montage.create(Component, { // popupHitCheck: { value: function (element, e) { + //Prevent any action for button to handle toggling + if (e._event.target.inputType || e._event.target.colorMode) return true; //Storing limits of popup var top, bottom, left, right; //Checking for popup to be opened otherwise nothing happens @@ -263,6 +264,9 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; this._popupChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; } + // + this._popupChipBase.props.source = e._event.srcElement; + // this._popupChipBase.colorManager = ColorModel.create(); // this._popupChipBase.addEventListener('change', this, false); @@ -361,7 +365,68 @@ exports.ColorPopupManager = Montage.create(Component, { e._target.base.popup.element.style.opacity = 1; //Popup was added, so it's opened e._target.base.opened = true; - }/* + // + if (e._target.base.props && e._target.base.props.source) { + // + var cbtn = e._target.base.props.source, color, hsv; + // + if (cbtn.colorMode === 'rgb') { + // + if (cbtn.colorValue && !isNaN(cbtn.colorValue.r)) { + color = cbtn.colorValue; + } else if (cbtn.colorValue && cbtn.colorValue.color){ + color = cbtn.colorValue.color; + } else { + return; + } + // + hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); + } else if (cbtn.colorMode === 'hsl') { + // + if (cbtn.colorValue && !isNaN(cbtn.colorValue.h)) { + color = cbtn.colorValue; + } else if (cbtn.colorValue && cbtn.colorValue.color){ + color = cbtn.colorValue.color; + } else { + return; + } + // + color = this.colorManager.hslToRgb(color.h/360, color.s/100, color.l/100); + // + hsv = this.colorManager.rgbToHsv(color.r, color.g, color.b); + } + // + if (hsv) { + hsv.wasSetByCode = false; + hsv.type = 'change'; + e._target.base._components.wheel.value = hsv; + } + } + } + + + + + + + + + + + + + + + + + + + + + + + + /* 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 @@ -429,7 +494,7 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupChipBase.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}; this.colorChipChange(e); } else { - console.log(e._event); + //console.log(e._event); } return; } -- cgit v1.2.3 From 0e7e32cadeb2002ee0c77c224b23aa00859f2183 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 22 Jun 2012 23:51:50 -0700 Subject: Added third gradient chip popup Need to add support for gradient events dispatching from standalone chips. Just need to hook up relays for events besides HSV to bubble up. --- .../color/colorpanelpopup.reel/colorpanelpopup.js | 27 +-- js/panels/color/colorpopup-manager.js | 232 +++++++++++++++------ 2 files changed, 182 insertions(+), 77 deletions(-) (limited to 'js/panels/color') diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 153817c1..179dc02c 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, { value: function () { // this._components = null; - this._components = {wheel: null, combo: null}; + this._components = {wheel: null, combo: null, gradient: null}; } }, //////////////////////////////////////////////////////////////////// @@ -369,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, { drawGradient: { value: function (g) { //TODO: Remove container, insert in reel - var container = document.createElement('div'), gradient = GradientPicker.create(); + var container = document.createElement('div'); + // + this._components.gradient = GradientPicker.create(); + // this.gradients.appendChild(container); //Creating gradient picker from components - gradient.element = container; - gradient.hack = this.hack; // TODO: Remove + this._components.gradient.element = container; + this._components.gradient.hack = this.hack; // TODO: Remove // if (g && g.value && g.value.stops) { if (g.value.gradientMode) { - gradient._mode = g.value.gradientMode; - gradient.value = g.value.stops; + this._components.gradient._mode = g.value.gradientMode; + this._components.gradient.value = g.value.stops; } else { - gradient._mode = 'linear'; - gradient.value = g.value.stops; + this._components.gradient._mode = 'linear'; + this._components.gradient.value = g.value.stops; } } else { - gradient._mode = this.defaultGradient.gradientMode; - gradient.value = this.defaultGradient.stops; + this._components.gradient._mode = this.defaultGradient.gradientMode; + this._components.gradient.value = this.defaultGradient.stops; } // - gradient.needsDraw = true; - gradient.addEventListener('change', function (e){ + this._components.gradient.needsDraw = true; + this._components.gradient.addEventListener('change', function (e){ // if (!e._event.wasSetByCode) { this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false}; diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index bccfcebc..717e6fa2 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -36,18 +36,30 @@ exports.ColorPopupManager = Montage.create(Component, { //Closing popups if outside limits document.addEventListener('mousedown', function (e) { // - if (this._popupBase && !this._popupChipBase) { + if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupBase, e)) { this.hideColorPopup(); } - } else if (!this._popupBase && this._popupChipBase) { + } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupChipBase, e)) { this.hideColorChipPopup(); } - } else if (this._popupBase && this._popupChipBase) { + } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) { if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { this.hideColorPopup(); } + } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } + } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorChipPopup(); + } + } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) { + if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) { + this.hideColorPopup(); + } } }.bind(this)); //////////////////////////////////////////////////////////// @@ -74,9 +86,11 @@ exports.ColorPopupManager = Montage.create(Component, { //Hides popups since click is outside limits return false; } else { + //Keeps popup open since click inside area return true; } } else { + //Hides popups since element not detected return false; } } @@ -92,6 +106,11 @@ exports.ColorPopupManager = Montage.create(Component, { value: null }, //////////////////////////////////////////////////////////////////// + // + _popupGradientChipBase: { + value: null + }, + //////////////////////////////////////////////////////////////////// //Storing color manager _colorManager: { value: null @@ -99,33 +118,33 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorManager: { - get: function() { - return this._colorManager; - }, - set: function(value) { - this._colorManager = value; - } + get: function() {return this._colorManager;}, + set: function(value) {this._colorManager = value;} }, //////////////////////////////////////////////////////////////////// // _colorPopupDrawing: { - enumerable: true, value: false }, //////////////////////////////////////////////////////////////////// // _colorChipPopupDrawing: { - enumerable: true, + value: false + }, + //////////////////////////////////////////////////////////////////// + // + _colorGradientPopupDrawing: { value: false }, //////////////////////////////////////////////////////////////////// //TODO: Remove and use montage's built in component showColorPopup: { - enumerable: true, value: function (x, y, side, align) { + //Check to see if popup is drawing, avoids errors if (this._colorPopupDrawing) { return; } + //Check for toggling view if (this._popupBase && this._popupBase.opened) { //Toogles if called and opened this.hideColorPopup(); @@ -138,7 +157,7 @@ exports.ColorPopupManager = Montage.create(Component, { this._hasinit = true; } //////////////////////////////////////////////////// - //Creating popup from m-js component + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // @@ -158,13 +177,13 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hideColorPopup: { - enumerable: true, value: function () { if (this._popupBase && this._popupBase.opened) { // this._popupBase.popup.removeEventListener('didDraw', this, false); // this.hideColorChipPopup(); + this.hideGradientChipPopup(); //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; @@ -187,7 +206,6 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // colorChipChange: { - enumerable: true, value: function (e) { // var ctx, @@ -224,16 +242,58 @@ exports.ColorPopupManager = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + colorGradientChipChange: { + value: function (e) { + // + var ctx, + cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], + rgb = this._popupGradientChipBase.colorManager.rgb, + hsl = this._popupGradientChipBase.colorManager.hsl, + alpha = this._popupGradientChipBase.colorManager.alpha.value; + // + 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(); + } + // + this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); + } + }, + //////////////////////////////////////////////////////////////////// + // showColorChipPopup: { - enumerable: true, value: function (e) { if (this._colorChipPopupDrawing) { return; } - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupChipBase && this._popupChipBase.opened && (!this._popupChipBase.props || (this._popupChipBase.props && !this._popupChipBase.props.gradientPopup)) && !e._event.srcElement.props.gradientPopup) { //Toogles if called and opened this.hideColorChipPopup(); + return; } else { + // + if (e._event.srcElement.props.gradientPopup) { + this.showGradientChipPopup(e); + return; + } this._colorChipPopupDrawing = true; //////////////////////////////////////////////////// //Initializing events @@ -241,10 +301,8 @@ exports.ColorPopupManager = Montage.create(Component, { this.init(); this._hasinit = true; } - - //////////////////////////////////////////////////// - //Creating popup from m-js component + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // @@ -254,7 +312,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._event.srcElement.props) { this._popupChipBase.props = e._event.srcElement.props; } else { - this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, panel: false, history: false}; + this._popupChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; } // if (this._popupChipBase.props.offset) { @@ -274,74 +332,110 @@ exports.ColorPopupManager = Montage.create(Component, { // this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); - - - - - - - /* -//////////////////////////////////////////////////// - //Creating popup from m-js component + } + } + }, + //////////////////////////////////////////////////////////////////// + // + hideColorChipPopup: { + value: function () { + // + if (this._popupChipBase && this._popupChipBase.opened) { + // + this.hideGradientChipPopup(); + // + this._popupChipBase.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._popupChipBase.popup.element); + this._popupChipBase.opened = false; + //TODO: Fix HACK of removing popup + this._popupChipBase.popup.base.destroy(); + this._popupChipBase.popup = null; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + showGradientChipPopup: { + value: function (e) { + if (this._colorGradientPopupDrawing) { + return; + } + if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { + //Toogles if called and opened + this.hideGradientChipPopup(); + return; + } else { + // + this._colorGradientPopupDrawing = true; + //////////////////////////////////////////////////// + //Initializing events + if (!this._hasinit) { + this.init(); + this._hasinit = true; + } + //////////////////////////////////////////////////// + //Creating popup var popup = document.createElement('div'); document.body.appendChild(popup); // - this._popupChipBase.event = e._event; - this._popupChipBase = ColorChipPopup.create(); - this._popupChipBase.element = popup; - this._popupChipBase.colorManager = this.colorManager; + this._popupGradientChipBase = ColorPanelPopup.create(); + this._popupGradientChipBase.element = popup; + this._popupGradientChipBase.isPopupChip = true; if (e._event.srcElement.props) { - this.colorChipProps = e._event.srcElement.props; + this._popupGradientChipBase.props = e._event.srcElement.props; } else { - this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; + this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: 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; + if (this._popupGradientChipBase.props.offset) { + this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX + this._popupGradientChipBase.props.offset)+'px'; + this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } else { + this._popupGradientChipBase.props.x = (e._event.clientX - e._event.offsetX)+'px'; + this._popupGradientChipBase.props.y = (e._event.target.clientHeight/2+e._event.clientY - e._event.offsetY)+'px'; + } + // + this._popupGradientChipBase.props.source = e._event.srcElement; + // + this._popupGradientChipBase.colorManager = ColorModel.create(); // - this._popupChipBase.addEventListener('change', this, false); - this._popupChipBase.addEventListener('changing', this, false); + this._popupGradientChipBase.addEventListener('change', this, false); + this._popupGradientChipBase.addEventListener('changing', this, false); // - this._popupChipBase.needsDraw = true; - this._popupChipBase.addEventListener('firstDraw', this, false); -*/ + this._popupGradientChipBase.needsDraw = true; + this._popupGradientChipBase.addEventListener('firstDraw', this, false); } } }, //////////////////////////////////////////////////////////////////// // - hideColorChipPopup: { - enumerable: true, + hideGradientChipPopup: { value: function () { // - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { // - this._popupChipBase.popup.removeEventListener('didDraw', this, false); + this._popupGradientChipBase.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._popupChipBase.popup.element); - this._popupChipBase.opened = false; + this.application.ninja.popupManager.removePopup(this._popupGradientChipBase.popup.element); + this._popupGradientChipBase.opened = false; //TODO: Fix HACK of removing popup - this._popupChipBase.popup.base.destroy(); - this._popupChipBase.popup = null; + this._popupGradientChipBase.popup.base.destroy(); + this._popupGradientChipBase.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') { e._target.removeEventListener('firstDraw', this, false); @@ -356,6 +450,8 @@ exports.ColorPopupManager = Montage.create(Component, { } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { if (!e._target.base.isPopupChip) { this._colorPopupDrawing = false; + } else if (e._target.base.props && e._target.base.props.gradientPopup) { + this._colorGradientPopupDrawing = false; } else { this._colorChipPopupDrawing = false; } @@ -400,6 +496,8 @@ exports.ColorPopupManager = Montage.create(Component, { hsv.wasSetByCode = false; hsv.type = 'change'; e._target.base._components.wheel.value = hsv; + } else { + e._target.base.colorManager.applyNoColor(false); } } } @@ -487,9 +585,8 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChange: { - enumerable: false, value: function (e) { - if (this._popupChipBase && this._popupChipBase.opened) { + if (this._popupChipBase && this._popupChipBase.opened && !this._popupGradientChipBase) { if (e._event.hsv) { this._popupChipBase.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}; this.colorChipChange(e); @@ -497,6 +594,14 @@ exports.ColorPopupManager = Montage.create(Component, { //console.log(e._event); } return; + } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { + if (e._event.hsv) { + this._popupGradientChipBase.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}; + this.colorGradientChipChange(e); + } else { + //console.log(e._event); + } + return; } // if (!e._event.wasSetByCode) { @@ -517,7 +622,6 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // handleChanging: { - enumerable: false, value: function (e) { if (e._event.hsv) { // @@ -562,8 +666,6 @@ exports.ColorPopupManager = Montage.create(Component, { } 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 -- cgit v1.2.3 From a9e029a21e4801b438dbee1c79c8912e24d637a7 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sat, 23 Jun 2012 00:13:11 -0700 Subject: Deleting obsolete files --- .../color/colorchippopup.reel/colorchippopup.html | 62 --- .../color/colorchippopup.reel/colorchippopup.js | 589 --------------------- js/panels/color/colorchippopup.reel/config.rb | 9 - .../colorchippopup.reel/css/colorchippopup.css | 239 --------- .../colorchippopup.reel/css/colorchippopup.scss | 240 --------- .../color/colorchippopup.reel/img/icon_bitmap.png | Bin 3072 -> 0 bytes .../colorchippopup.reel/img/icon_colorwheel.png | Bin 3420 -> 0 bytes .../colorchippopup.reel/img/icon_gradient.png | Bin 2815 -> 0 bytes .../color/colorchippopup.reel/img/icon_nofill.png | Bin 2951 -> 0 bytes js/panels/color/colorchippopup.reel/img/knob.png | Bin 1036 -> 0 bytes .../color/colortoolbar.reel/colortoolbar.html | 53 -- js/panels/color/colortoolbar.reel/colortoolbar.js | 138 ----- js/panels/color/colortoolbar.reel/config.rb | 9 - .../color/colortoolbar.reel/css/colortoolbar.css | 45 -- .../color/colortoolbar.reel/css/colortoolbar.scss | 52 -- 15 files changed, 1436 deletions(-) delete mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.html delete mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.js delete mode 100755 js/panels/color/colorchippopup.reel/config.rb delete mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.css delete mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.scss delete mode 100755 js/panels/color/colorchippopup.reel/img/icon_bitmap.png delete mode 100755 js/panels/color/colorchippopup.reel/img/icon_colorwheel.png delete mode 100755 js/panels/color/colorchippopup.reel/img/icon_gradient.png delete mode 100755 js/panels/color/colorchippopup.reel/img/icon_nofill.png delete mode 100755 js/panels/color/colorchippopup.reel/img/knob.png delete mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.html delete mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.js delete mode 100755 js/panels/color/colortoolbar.reel/config.rb delete mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.css delete mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.scss (limited to 'js/panels/color') diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.html b/js/panels/color/colorchippopup.reel/colorchippopup.html deleted file mode 100755 index cdb26894..00000000 --- a/js/panels/color/colorchippopup.reel/colorchippopup.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - -
-
- -
#
- - - - - - - -
- -
-
-
-
-
-
- -
-
Alpha
-
- -
%
-
- -
- - - - \ No newline at end of file diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js deleted file mode 100755 index 923beca9..00000000 --- a/js/panels/color/colorchippopup.reel/colorchippopup.js +++ /dev/null @@ -1,589 +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, - Slider = require("js/components/slider.reel").Slider, - HotText = require("js/components/hottext.reel").HotText, - ColorWheel = require("js/components/colorwheel.reel").ColorWheel, - GradientPicker = require("js/components/gradientpicker.reel").GradientPicker; -//////////////////////////////////////////////////////////////////////// -//Exporting as ColorPanelPopup -exports.ColorChipPopup = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - // - hasTemplate: { - value: true - }, - //////////////////////////////////////////////////////////////////// - //Storing color manager - _colorManager: { - enumerable: false, - value: false - }, - //////////////////////////////////////////////////////////////////// - //Color manager - colorManager: { - enumerable: true, - get: function() { - return this._colorManager; - }, - set: function(value) { - if (value !== this._colorManager) { - this._colorManager = value; - } - } - }, - //////////////////////////////////////////////////////////////////// - // - setNoColor: { - enumerable: true, - value: function (code) { - this.colorManager.applyNoColor(code); - } - }, - //////////////////////////////////////////////////////////////////// - // - _colorChipWheel: { - enumerable: false, - value: null - }, - //////////////////////////////////////////////////////////////////// - // - popupContainers: { - enumerable: true, - value: {wheel: null, palette: null, gradient: null, image: null} - }, - //////////////////////////////////////////////////////////////////// - // - popupModes: { - enumerable: true, - value: {wheel: true, palette: true, gradient: true, image: true, nocolor: true} - }, - //////////////////////////////////////////////////////////////////// - // - hexInput: { - enumerable: true, - value: null - }, - ///////////////////////////////////////