aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js8
-rwxr-xr-xjs/controllers/color-controller.js17
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html2
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js120
-rwxr-xr-xjs/panels/color/colorpopup-manager.js495
5 files changed, 444 insertions, 198 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6071f3c6..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}; 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/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, {
254 gradient.css = css; 254 gradient.css = css;
255 // 255 //
256 arr = css.split('from('); 256 arr = css.split('from(');
257 arr = arr[1].split('),'); 257 //
258 if (arr.length > 1) {
259 arr = arr[1].split('),');
260 } else {
261 arr = (css.split(css.split('color-stop(')[0])[1]).split('),');
262 }
258 // 263 //
259 for (i=0; arr[i]; i++) { 264 for (i=0; arr[i]; i++) {
260 arr[i] = arr[i].replace(/ color-stop\(/i, ""); 265 arr[i] = arr[i].replace(/ color-stop\(/i, "");
@@ -264,14 +269,20 @@ exports.ColorController = Montage.create(Component, {
264 arr[i] = arr[i].replace(/\)\)/i, ""); 269 arr[i] = arr[i].replace(/\)\)/i, "");
265 } 270 }
266 // 271 //
267 if (i === 0) { 272 if (i === 0 && arr[i].indexOf('color-stop') === -1) {
268 arr[i] = {css: arr[i], percent: 0}; 273 arr[i] = {css: arr[i], percent: 0};
269 } else if (i === arr.length-1) { 274 } else if (i === arr.length-1) {
270 arr[i] = {css: arr[i], percent: 100}; 275 temp = arr[i].split(', rgb');
276 if (temp.length > 1) {
277 arr[i] = {css: 'rgb'+temp[1].replace(/\)\)/i, ""), percent: Math.round(parseFloat(temp[0])*100)};
278 } else {
279 arr[i] = {css: arr[i], percent: 100};
280 }
271 } else { 281 } else {
272 // 282 //
273 if (arr[i].indexOf('rgb') >= 0 && arr[i].indexOf('rgba') < 0) { 283 if (arr[i].indexOf('rgb') >= 0 && arr[i].indexOf('rgba') < 0) {
274 temp = arr[i].split(', rgb'); 284 temp = arr[i].split(', rgb');
285 temp[0] = temp[0].replace(/color\-stop\(/gi, '');
275 arr[i] = {css: 'rgb'+temp[1], percent: Math.round(parseFloat(temp[0])*100)}; 286 arr[i] = {css: 'rgb'+temp[1], percent: Math.round(parseFloat(temp[0])*100)};
276 } else if (arr[i].indexOf('rgba') >= 0) { 287 } else if (arr[i].indexOf('rgba') >= 0) {
277 temp = arr[i].split(', rgba'); 288 temp = arr[i].split(', rgba');
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 @@
52 52
53 </div> 53 </div>
54 54
55 <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div> 55 <div class="cp_pu_hex">#<input data-montage-id="input_hex" class="cp_pu_hottext_hex" maxlength="6" /></div>
56 56
57 <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button> 57 <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
58 <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button> 58 <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 192c62fb..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 ////////////////////////////////////////////////////////////////////
@@ -129,44 +129,73 @@ exports.ColorPanelPopup = Montage.create(Component, {
129 draw: { 129 draw: {
130 value: function() { 130 value: function() {
131 // 131 //
132 this.drawPalette(this.defaultPalette); 132 if (!this.props || (this.props && this.props.palette)) {
133 //
134 this.btnPalette.addEventListener('click', function () {
135 this.popupSwitchInputTo(this.palettes);
136 }.bind(this), true);
137 //
138 this.drawPalette(this.defaultPalette);
139 } else {
140 this.btnPalette.style.display = 'none';
141 }
133 // 142 //
134 if (!this.colorManager.gradient) { 143 if (!this.props || (this.props && this.props.gradient)) {
135 this.drawGradient(this.defaultGradient); 144 //
145 this.btnGradient.addEventListener('click', function () {
146 this.popupSwitchInputTo(this.gradients);
147 }.bind(this), true);
148 //
149 if (!this.colorManager.gradient) {
150 this.drawGradient(this.defaultGradient);
151 }
152 } else {
153 this.btnGradient.style.display = 'none';
136 } 154 }
137 // 155 //
138 this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]); 156 this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex);
139 // 157 //
140 this._components.combo.slider.needsDraw = true; 158 this._components.combo.slider.needsDraw = true;
141 this._components.combo.hottext.needsDraw = true; 159 this._components.combo.hottext.needsDraw = true;
142 // 160 //
143 this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () { 161 if (!this.props || (this.props && this.props.nocolor)) {
144 this.setNoColor(); 162 //
145 }.bind(this), true); 163 this.btnNocolor.addEventListener('click', function () {
146 // 164 this.setNoColor();
147 this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () { 165 }.bind(this), true);
148 this.popupSwitchInputTo(this.palettes); 166 } else {
149 }.bind(this), true); 167 this.btnNocolor.style.display = 'none';
150 // 168 }
151 this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () {
152 this.popupSwitchInputTo(this.wheel);
153 }.bind(this), true);
154 //
155 this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () {
156 this.popupSwitchInputTo(this.gradients);
157 }.bind(this), true);
158 //
159 this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button
160 this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () {
161 //this.popupSwitchInputTo(this.images);
162 }.bind(this), true);
163 // 169 //
164 this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]); 170 if (!this.props || (this.props && this.props.wheel)) {
165 this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]); 171 //