diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 8 | ||||
-rwxr-xr-x | js/controllers/color-controller.js | 17 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 2 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 120 | ||||
-rwxr-xr-x | js/panels/color/colorpopup-manager.js | 495 |
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.colorVi |