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.
---
.../gradientpicker.reel/gradientpicker.js | 2 +-
.../colorpanelpopup.reel/colorpanelpopup.html | 2 +-
.../color/colorpanelpopup.reel/colorpanelpopup.js | 93 +++++---
js/panels/color/colorpopup-manager.js | 264 ++++++++++++---------
4 files changed, 213 insertions(+), 148 deletions(-)
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6071f3c6..6b50fae2 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, {
//Initialing button with color data
button.color(data.color.mode, data.color.value);
//Button popup data
- button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true};
+ button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true, history: false};
//Listening for color events from button
button.addEventListener('change', this, false);
//Dispatching event depending on type of mode
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