aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js8
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js27
-rwxr-xr-xjs/panels/color/colorpopup-manager.js232
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, {
43 get: function() {return this._mode;}, 43 get: function() {return this._mode;},
44 set: function(value) { 44 set: function(value) {
45 // 45 //
46 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 46 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
47 // 47 //
48 this._mode = value; 48 this._mode = value;
49 // 49 //
@@ -132,7 +132,7 @@ exports.GradientPicker = Montage.create(Component, {
132 value: function(data, silent) { 132 value: function(data, silent) {
133 if (this.application.ninja.colorController.colorPopupManager) { 133 if (this.application.ninja.colorController.colorPopupManager) {
134 //Hiding any open popups (of gradient buttons) 134 //Hiding any open popups (of gradient buttons)
135 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 135 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
136 //Creating stop elements 136 //Creating stop elements
137 var stop = document.createElement('div'), 137 var stop = document.createElement('div'),
138 holder = document.createElement('div'), 138 holder = document.createElement('div'),
@@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, {
160 //Initialing button with color data 160 //Initialing button with color data
161 button.color(data.color.mode, data.color.value); 161 button.color(data.color.mode, data.color.value);
162 //Button popup data 162 //Button popup data
163 button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true, history: false}; 163 button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, gradientPopup: true, history: false};
164 //Listening for color events from button 164 //Listening for color events from button
165 button.addEventListener('change', this, false); 165 button.addEventListener('change', this, false);
166 //Dispatching event depending on type of mode 166 //Dispatching event depending on type of mode
@@ -263,7 +263,7 @@ exports.GradientPicker = Montage.create(Component, {
263 // 263 //
264 this._updating = true; 264 this._updating = true;
265 // 265 //
266 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); 266 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
267 // 267 //
268 if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) { 268 if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) {
269 this.removeStop(this.currentStop); 269 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, {
60 value: function () { 60 value: function () {
61 // 61 //
62 this._components = null; 62 this._components = null;
63 this._components = {wheel: null, combo: null}; 63 this._components = {wheel: null, combo: null, gradient: null};
64 } 64 }
65 }, 65 },
66 //////////////////////////////////////////////////////////////////// 66 ////////////////////////////////////////////////////////////////////
@@ -369,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, {
369 drawGradient: { 369 drawGradient: {
370 value: function (g) { 370 value: function (g) {
371 //TODO: Remove container, insert in reel 371 //TODO: Remove container, insert in reel
372 var container = document.createElement('div'), gradient = GradientPicker.create(); 372 var container = document.createElement('div');
373 //
374 this._components.gradient = GradientPicker.create();
375 //
373 this.gradients.appendChild(container); 376 this.gradients.appendChild(container);
374 //Creating gradient picker from components 377 //Creating gradient picker from components
375 gradient.element = container; 378 this._components.gradient.element = container;
376 gradient.hack = this.hack; // TODO: Remove 379 this._components.gradient.hack = this.hack; // TODO: Remove
377 // 380 //
378 if (g && g.value && g.value.stops) { 381 if (g && g.value && g.value.stops) {
379 if (g.value.gradientMode) { 382 if (g.value.gradientMode) {
380 gradient._mode = g.value.gradientMode; 383 this._components.gradient._mode = g.value.gradientMode;
381 gradient.value = g.value.stops; 384 this._components.gradient.value = g.value.stops;
382 } else { 385 } else {
383 gradient._mode = 'linear'; 386 this._components.gradient._mode = 'linear';
384 gradient.value = g.value.stops; 387 this._components.gradient.value = g.value.stops;
385 } 388 }
386 } else { 389 } else {
387 gradient._mode = this.defaultGradient.gradientMode; 390 this._components.gradient._mode = this.defaultGradient.gradientMode;
388 gradient.value = this.defaultGradient.stops; 391 this._components.gradient.value = this.defaultGradient.stops;
389 } 392 }
390 // 393 //
391 gradient.needsDraw = true; 394 this._components.gradient.needsDraw = true;
392 gradient.addEventListener('change', function (e){ 395 this._components.gradient.addEventListener('change', function (e){
393 // 396 //
394 if (!e._event.wasSetByCode) { 397 if (!e._event.wasSetByCode) {
395 this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false}; 398 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, {
36 //Closing popups if outside limits 36 //Closing popups if outside limits
37 document.addEventListener('mousedown', function (e) { 37 document.addEventListener('mousedown', function (e) {
38 // 38 //
39 if (this._popupBase && !this._popupChipBase) { 39 if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) {
40 if(!this.popupHitCheck(this._popupBase, e)) { 40 if(!this.popupHitCheck(this._popupBase, e)) {
41 this.hideColorPopup(); 41 this.hideColorPopup();
42 } 42 }
43 } else if (!this._popupBase && this._popupChipBase) { 43 } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
44 if(!this.popupHitCheck(this._popupChipBase, e)) { 44 if(!this.popupHitCheck(this._popupChipBase, e)) {
45 this.hideColorChipPopup(); 45 this.hideColorChipPopup();
46 } 46 }
47 } else if (this._popupBase && this._popupChipBase) { 47 } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
48 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) { 48 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) {
49 this.hideColorPopup(); 49 this.hideColorPopup();
50 } 50 }
51 } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
52 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
53 this.hideColorPopup();
54 }
55 } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
56 if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
57 this.hideColorChipPopup();
58 }
59 } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) {
60 if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
61 this.hideColorPopup();
62 }
51 } 63 }
52 }.bind(this)); 64 }.bind(this));
53 //////////////////////////////////////////////////////////// 65 ////////////////////////////////////////////////////////////
@@ -74,9 +86,11 @@ exports.ColorPopupManager = Montage.create(Component, {
74 //Hides popups since click is outside limits 86 //Hides popups since click is outside limits
75 return false; 87 return false;
76 } else { 88 } else {
89 //Keeps popup open since click inside area
77 return true; 90 return true;
78 } 91 }
79 } else { 92 } else {
93 //Hides popups since element not detected
80 return false; 94 return false;
81 } 95 }
82 } 96 }
@@ -92,6 +106,11 @@ exports.ColorPopupManager = Montage.create(Component, {
92 value: null 106 value: null
93 }, 107 },
94 //////////////////////////////////////////////////////////////////// 108 ////////////////////////////////////////////////////////////////////
109 //
110 _popupGradientChipBase: {
111 value: null
112 },
113 ////////////////////////////////////////////////////////////////////
95 //Storing color manager 114 //Storing color manager
96 _colorManager: { 115 _colorManager: {
97 value: null 116 value: null
@@ -99,33 +118,33 @@ exports.ColorPopupManager = Montage.create(Component, {
99 //////////////////////////////////////////////////////////////////// 118 ////////////////////////////////////////////////////////////////////
100 // 119 //
101 colorManager: { 120 colorManager: {
102 get: function() { 121 get: function() {return this._colorManager;},
103 return this._colorManager; 122 set: function(value) {this._colorManager = value;}
104 },
105 set: function(value) {
106 this._colorManager = value;
107 }
108 }, 123 },
109 //////////////////////////////////////////////////////////////////// 124 ////////////////////////////////////////////////////////////////////
110 // 125 //
111 _colorPopupDrawing: { 126 _colorPopupDrawing: {
112 enumerable: true,
113 value: false 127 value: false
114 }, 128 },
115 //////////////////////////////////////////////////////////////////// 129 ////////////////////////////////////////////////////////////////////