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
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(-)
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 7396ca7f01ca884564b1dd86a8847d28364f1a96 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 22 Jun 2012 23:48:53 -0700
Subject: Fixing bug with gradient stop limits
It seems that from-to stops are omitted if using objects with no 0 and/or 100 percent stops, seems like browser induced, but can't confirmed, bug never reported, but this should fix it.
---
js/controllers/color-controller.js | 17 ++++++++++++++---
1 file changed, 14 insertions(+), 3 deletions(-)
diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 3165988d..2a6fe9bd 100755
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -254,7 +254,12 @@ exports.ColorController = Montage.create(Component, {
gradient.css = css;
//
arr = css.split('from(');
- arr = arr[1].split('),');
+ //
+ if (arr.length > 1) {
+ arr = arr[1].split('),');
+ } else {
+ arr = (css.split(css.split('color-stop(')[0])[1]).split('),');
+ }
//
for (i=0; arr[i]; i++) {
arr[i] = arr[i].replace(/ color-stop\(/i, "");
@@ -264,14 +269,20 @@ exports.ColorController = Montage.create(Component, {
arr[i] = arr[i].replace(/\)\)/i, "");
}
//
- if (i === 0) {
+ if (i === 0 && arr[i].indexOf('color-stop') === -1) {
arr[i] = {css: arr[i], percent: 0};
} else if (i === arr.length-1) {
- arr[i] = {css: arr[i], percent: 100};
+ temp = arr[i].split(', rgb');
+ if (temp.length > 1) {
+ arr[i] = {css: 'rgb'+temp[1].replace(/\)\)/i, ""), percent: Math.round(parseFloat(temp[0])*100)};
+ } else {
+ arr[i] = {css: arr[i], percent: 100};
+ }
} else {
//
if (arr[i].indexOf('rgb') >= 0 && arr[i].indexOf('rgba') < 0) {
temp = arr[i].split(', rgb');
+ temp[0] = temp[0].replace(/color\-stop\(/gi, '');
arr[i] = {css: 'rgb'+temp[1], percent: Math.round(parseFloat(temp[0])*100)};
} else if (arr[i].indexOf('rgba') >= 0) {
temp = arr[i].split(', rgba');
--
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.
---
.../gradientpicker.reel/gradientpicker.js | 8 +-
.../color/colorpanelpopup.reel/colorpanelpopup.js | 27 +--
js/panels/color/colorpopup-manager.js | 232 +++++++++++++++------
3 files changed, 186 insertions(+), 81 deletions(-)
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6b50fae2..9acd24ac 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -43,7 +43,7 @@ exports.GradientPicker = Montage.create(Component, {
get: function() {return this._mode;},
set: function(value) {
//
- this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+ this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
//
this._mode = value;
//
@@ -132,7 +132,7 @@ exports.GradientPicker = Montage.create(Component, {
value: function(data, silent) {
if (this.application.ninja.colorController.colorPopupManager) {
//Hiding any open popups (of gradient buttons)
- this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+ this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
//Creating stop elements
var stop = document.createElement('div'),
holder = document.createElement('div'),
@@ -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, history: false};
+ button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, gradientPopup: true, history: false};
//Listening for color events from button
button.addEventListener('change', this, false);
//Dispatching event depending on type of mode
@@ -263,7 +263,7 @@ exports.GradientPicker = Montage.create(Component, {
//
this._updating = true;
//
- this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+ this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
//
if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) {
this.removeStop(this.currentStop);
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.ree