From aabd9b98341308cd0d276e6e788b7a3f9531c394 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 21 Jun 2012 11:32:20 -0700
Subject: Timeline: Bug Fix: Document switching was doubling position tracks.
---
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 -
js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 +++++
2 files changed, 5 insertions(+), 1 deletion(-)
(limited to 'js')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 89389469..b8ba5feb 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -595,7 +595,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
prepareForDraw:{
value:function () {
this.initTimeline();
-
}
},
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bf380e00..3cf754b8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -1051,6 +1051,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
createPositionTracks:{
value:function(){
// create track objects for position and transform tracks and push into arrays
+
+ // ... but only do it if we haven't already.
+ if (this.arrPositionTracks.length > 0) {
+ return;
+ }
// create 'left' track
var newLeftTrack = {};
--
cgit v1.2.3
From 403d0834a23760c2481be050a8be925c1ba64a1b Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 21 Jun 2012 12:14:59 -0700
Subject: Timeline: Bug fix IKNINJA-1783, Timeline panel is disabled when CSS
file is open in another tab.
---
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
(limited to 'js')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index b8ba5feb..1ba9f067 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -118,9 +118,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
return;
}
- if(!this._currentDocument && value.currentView === "design") {
- this.enablePanel(true);
- }
+ // Should we enable the panel?
+ if (typeof(this._currentDocument) !== "undefined") {
+ // We have a document, or at least we have initialized the panel.
+ // What view are we in?
+ if (typeof(value) !== "undefined") {
+ if (value.currentView === "design") {
+ // We are in design view, so enable the panel.
+ this.enablePanel(true);
+ }
+ }
+ }
this._currentDocument = value;
@@ -893,7 +901,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.drawTimeMarkers();
// Document switching
// Check to see if we have saved timeline information in the currentDocument.
- //console.log("TimelinePanel.initTimelineForDocument");
+ // console.log("TimelinePanel.initTimelineForDocument");
if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) {
// console.log('TimelinePanel.initTimelineForDocument: new Document');
--
cgit v1.2.3
From 2a9c33a46eb33bb4f25623217c781e9bf16221d9 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 21 Jun 2012 12:48:11 -0700
Subject: Timeline: Bug fix IKNINJA-1755 Can't insert keyframes in a CSS style
property of an object on top layer
---
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 1ba9f067..c8caf50e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1975,7 +1975,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
returnVal = false,
arrLayersLength = this.arrLayers.length;
for (i = 0; i < arrLayersLength; i++) {
- if (this.arrLayers[i].isSelected === true) {
+ if (this.arrLayers[i].layerData.isSelected === true) {
returnVal = i;
}
}
--
cgit v1.2.3
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(-)
(limited to 'js')
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 b154a6e287dcc2aec57e49ca569ee8004675eb42 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 21 Jun 2012 17:46:46 -0700
Subject: Timeline: Bug fix IKNINJA-1791 Double-clicking to go in a child level
and coming back up to Body will collapse its layer and wipe out all the sub
property keyframes.
---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 50 ++++++++++++++++++----
1 file changed, 41 insertions(+), 9 deletions(-)
(limited to 'js')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index c8caf50e..96be66e8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -733,11 +733,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
if (this._boolCacheArrays) {
// ... but only if we're supposed to.
if(this.currentDocument) {
+ var i = 0,
+ hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length,
+ boolHash = false;
+
this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
+ for (i = 0; i < hashLength; i++ ) {
+ if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
+ boolHash = true;
+ }
+ }
+ if (boolHash === false) {
+ var newHash = {};
+ newHash.containerUuid = this.currentDocument.model.domContainer.uuid;
+ newHash.arrLayers = this.arrLayers;
+ this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash);
+ }
}
this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
}
@@ -754,6 +769,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
this.application.ninja.currentDocument.tlCurrentElementsSelected = [];
+ this.application.ninja.currentDocument.tlBreadcrumbHash = [];
}
},
@@ -934,20 +950,36 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
} else if (this.application.ninja.currentDocument.setLevel) {
// console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
// Information stored, but we're moving up or down in the breadcrumb.
- // Get the current selection and restore timeline info for its children.
- var parentNode = this.currentDocument.model.domContainer,
+
+ var i = 0,
+ hash = this.application.ninja.currentDocument.tlBreadcrumbHash,
+ hashLength = hash.length,
+ boolHashed = false,
+ parentNode = this.currentDocument.model.domContainer,
storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
- this.temparrLayers = [];
-
- for (myIndex = 0; parentNode.children[myIndex]; myIndex++) {
- this._openDoc = true;
- this.restoreLayer(parentNode.children[myIndex]);
-
- }
+ this.temparrLayers = [];
+
+ // It's possible there is something stored in the breadcrumb hash in currentdocument, so check there first.
+ for (i = 0; i < hashLength; i++ ) {
+ if (hash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
+ this.temparrLayers = hash[i].arrLayers
+ boolHashed = true;
+ }
+ }
+
+ // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method.
+ if (boolHashed === false) {
+ for (myIndex = 0; parentNode.children[myIndex]; myIndex++) {
+ this._openDoc = true;
+ this.restoreLayer(parentNode.children[myIndex]);
+ }
+ }
+
// Draw the repetition.
this.arrLayers = this.temparrLayers;
this.currentLayerNumber = storedCurrentLayerNumber;
this.application.ninja.currentDocument.setLevel = false;
+ this.resetMasterDuration();
} else {
// console.log('TimelinePanel.initTimelineForDocument: else fallback');
--
cgit v1.2.3
From fff4cd20a23b95519333daec564f309be7d7d4ec Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 21 Jun 2012 18:01:39 -0700
Subject: Timeline: Bug fix: When creating a new file, Timeline was disabled.
(Injection from fix of IKNINJA-1783)
---
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 48 ++++++++++++----------
1 file changed, 27 insertions(+), 21 deletions(-)
(limited to 'js')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 96be66e8..0d0be721 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -117,36 +117,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
if (value === this._currentDocument) {
return;
}
-
+ this._currentDocument = value;
+
+ var boolDoc = false,
+ boolView = false;
+
// Should we enable the panel?
+ // Only if we have both a document and we're in design view.
+ if (typeof(value) !== "undefined") {
+ if (value.currentView === "design") {
+ // We are in design view.
+ boolView = true;
+ }
+ }
if (typeof(this._currentDocument) !== "undefined") {
// We have a document, or at least we have initialized the panel.
- // What view are we in?
- if (typeof(value) !== "undefined") {
- if (value.currentView === "design") {
- // We are in design view, so enable the panel.
- this.enablePanel(true);
- }
- }
+ boolDoc = true;
}
- this._currentDocument = value;
-
- if(!value) {
+ if(boolDoc === false) {
this._boolCacheArrays = false;
this.clearTimelinePanel();
this._boolCacheArrays = true;
this.enablePanel(false);
- } else if(this._currentDocument.currentView === "design") {
- this._boolCacheArrays = false;
- this.clearTimelinePanel();
- this._boolCacheArrays = true;
-
- // Rebind the document events for the new document context
- this._bindDocumentEvents();
-
- // Initialize the timeline for the document.
- this.initTimelineForDocument();
+ } else {
+ if(boolView === true) {
+ this._boolCacheArrays = false;
+ this.clearTimelinePanel();
+ this._boolCacheArrays = true;
+
+ // Rebind the document events for the new document context
+ this._bindDocumentEvents();
+
+ // Initialize the timeline for the document.
+ this.initTimelineForDocument();
+ this.enablePanel(true);
+ }
}
}
},
--
cgit v1.2.3
From 82638621ed793fcb37438798363dba151efd9cd2 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 21 Jun 2012 23:27:15 -0700
Subject: Timeline: Breadcrumb hash in currentDocument will now update as
changes are made to the DOM.
---
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 +
1 file changed, 1 insertion(+)
(limited to 'js')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 0d0be721..29d19c4f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -750,6 +750,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
for (i = 0; i < hashLength; i++ ) {
if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
+ this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers;
boolHash = true;
}
}
--
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')
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(-)
(limited to 'js')
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(-)
(limited to 'js')
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.lineWid