diff options
Diffstat (limited to 'js/controllers/color-controller.js')
-rwxr-xr-x | js/controllers/color-controller.js | 284 |
1 files changed, 142 insertions, 142 deletions
diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index c5c614ea..8be2421f 100755 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js | |||
@@ -27,16 +27,16 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) | |||
27 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE | 27 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE |
28 | POSSIBILITY OF SUCH DAMAGE. | 28 | POSSIBILITY OF SUCH DAMAGE. |
29 | </copyright> */ | 29 | </copyright> */ |
30 | 30 | ||
31 | //////////////////////////////////////////////////////////////////////// | 31 | //////////////////////////////////////////////////////////////////////// |
32 | // | 32 | // |
33 | var Montage = require("montage/core/core").Montage, | 33 | var Montage = require("montage/core/core").Montage, |
34 | Component = require("montage/ui/component").Component, | 34 | Component = require("montage/ui/component").Component, |
35 | ColorModel = require("js/models/color-model").ColorModel, | 35 | ColorModel = require("js/models/color-model").ColorModel, |
36 | ColorPanelBase = require("js/panels/Color/colorpanelbase.reel").ColorPanelBase, | 36 | ColorPanelBase = require("js/panels/Color/colorpanelbase.reel").ColorPanelBase, |
37 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator, | 37 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator, |
38 | ColorPopupManager = require("js/panels/Color/colorpopup-manager").ColorPopupManager, | 38 | ColorPopupManager = require("js/panels/Color/colorpopup-manager").ColorPopupManager, |
39 | ColorButtonManager = require("js/panels/Color/colorbutton-manager").ColorButtonManager; | 39 | ColorButtonManager = require("js/panels/Color/colorbutton-manager").ColorButtonManager; |
40 | //////////////////////////////////////////////////////////////////////// | 40 | //////////////////////////////////////////////////////////////////////// |
41 | //Exporting as ColorController | 41 | //Exporting as ColorController |
42 | exports.ColorController = Montage.create(Component, { | 42 | exports.ColorController = Montage.create(Component, { |
@@ -48,14 +48,14 @@ exports.ColorController = Montage.create(Component, { | |||
48 | //////////////////////////////////////////////////////////////////// | 48 | //////////////////////////////////////////////////////////////////// |
49 | // | 49 | // |
50 | deserializedFromTemplate: { | 50 | deserializedFromTemplate: { |
51 | value: function () { | 51 | value: function () { |
52 | //Setting up colorManager in other classes | 52 | //Setting up colorManager in other classes |
53 | this.colorPanelBase.colorManager = this.colorModel; | 53 | this.colorPanelBase.colorManager = this.colorModel; |
54 | this.colorPopupManager.colorManager = this.colorModel; | 54 | this.colorPopupManager.colorManager = this.colorModel; |
55 | this.colorButtonManager.colorManager = this.colorModel; | 55 | this.colorButtonManager.colorManager = this.colorModel; |
56 | //Listening for color changes | 56 | //Listening for color changes |
57 | this.colorModel.addEventListener('change', this, false); | 57 | this.colorModel.addEventListener('change', this, false); |
58 | } | 58 | } |
59 | }, | 59 | }, |
60 | //////////////////////////////////////////////////////////////////// | 60 | //////////////////////////////////////////////////////////////////// |
61 | // | 61 | // |
@@ -90,7 +90,7 @@ exports.ColorController = Montage.create(Component, { | |||
90 | //////////////////////////////////////////////////////////////////// | 90 | //////////////////////////////////////////////////////////////////// |
91 | // | 91 | // |
92 | _popupTab: { | 92 | _popupTab: { |
93 | value: 'wheel' | 93 | value: 'wheel' |
94 | }, | 94 | }, |
95 | //////////////////////////////////////////////////////////////////// | 95 | //////////////////////////////////////////////////////////////////// |
96 | // | 96 | // |
@@ -131,7 +131,7 @@ exports.ColorController = Montage.create(Component, { | |||
131 | //////////////////////////////////////////////////////////////////// | 131 | //////////////////////////////////////////////////////////////////// |
132 | // | 132 | // |
133 | _fill: { | 133 | _fill: { |
134 | value: null | 134 | value: null |
135 | }, | 135 | }, |
136 | //////////////////////////////////////////////////////////////////// | 136 | //////////////////////////////////////////////////////////////////// |
137 | // | 137 | // |
@@ -142,7 +142,7 @@ exports.ColorController = Montage.create(Component, { | |||
142 | //////////////////////////////////////////////////////////////////// | 142 | //////////////////////////////////////////////////////////////////// |
143 | // | 143 | // |
144 | _stroke: { | 144 | _stroke: { |
145 | value: null | 145 | value: null |
146 | }, | 146 | }, |
147 | //////////////////////////////////////////////////////////////////// | 147 | //////////////////////////////////////////////////////////////////// |
148 | // | 148 | // |
@@ -154,16 +154,16 @@ exports.ColorController = Montage.create(Component, { | |||
154 | // | 154 | // |
155 | getBackground: { | 155 | getBackground: { |
156 | value: function (element) { | 156 | value: function (element) { |
157 | //TODO: Return object with all background properties | 157 | //TODO: Return object with all background properties |
158 | console.log(ElementsMediator.getProperty(element, 'background-color')); | 158 | console.log(ElementsMediator.getProperty(element, 'background-color')); |
159 | console.log(ElementsMediator.getProperty(element, 'background-image')); | 159 | console.log(ElementsMediator.getProperty(element, 'background-image')); |
160 | } | 160 | } |
161 | }, | 161 | }, |
162 | //////////////////////////////////////////////////////////////////// | 162 | //////////////////////////////////////////////////////////////////// |
163 | // | 163 | // |
164 | getBorder: { | 164 | getBorder: { |
165 | value: function (element) { | 165 | value: function (element) { |
166 | 166 | ||
167 | } | 167 | } |
168 | }, | 168 | }, |
169 | //////////////////////////////////////////////////////////////////// | 169 | //////////////////////////////////////////////////////////////////// |
@@ -189,14 +189,14 @@ exports.ColorController = Montage.create(Component, { | |||
189 | // | 189 | // |
190 | handleChange: { | 190 | handleChange: { |
191 | value: function (e) { | 191 | value: function (e) { |
192 | // | 192 | // |
193 | var color, input = e._event.input, panelMode, mode = e._event.mode; | 193 | var color, input = e._event.input, panelMode, mode = e._event.mode; |
194 | if (this.colorView) { | 194 | if (this.colorView) { |
195 | panelMode = this.colorView.panelMode; | 195 | panelMode = this.colorView.panelMode; |
196 | } | 196 | } |
197 | // | 197 | // |
198 | if (mode === 'nocolor') { | 198 | if (mode === 'nocolor') { |
199 | color = {value: null, css: 'none'}; | 199 | color = {value: null, css: 'none'}; |
200 | } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { | 200 | } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { |
201 | color = e._event.rgba; | 201 | color = e._event.rgba; |
202 | color.webGlColor = e._event.webGlColor; | 202 | color.webGlColor = e._event.webGlColor; |
@@ -206,7 +206,7 @@ exports.ColorController = Montage.create(Component, { | |||
206 | } else if (mode !== 'gradient'){ | 206 | } else if (mode !== 'gradient'){ |
207 | color = {value: e._event.hex, css: '#'+e._event.hex}; | 207 | color = {value: e._event.hex, css: '#'+e._event.hex}; |
208 | } else if (mode === 'gradient'){ | 208 | } else if (mode === 'gradient'){ |
209 | color = e._event.value.value; | 209 | color = e._event.value.value; |
210 | } | 210 | } |
211 | color.mode = panelMode; | 211 | color.mode = panelMode; |
212 | color.wasSetByCode = true; | 212 | color.wasSetByCode = true; |
@@ -215,15 +215,15 @@ exports.ColorController = Montage.create(Component, { | |||
215 | //////////////////////////////////////////////////////////// | 215 | //////////////////////////////////////////////////////////// |
216 | // | 216 | // |
217 | if (input === 'fill') { | 217 | if (input === 'fill') { |
218 | // | 218 | // |
219 | this.fill = color; | 219 | this.fill = color; |
220 | // | 220 | // |
221 | if(e._event.wasSetByCode) return; | 221 | if(e._event.wasSetByCode) return; |
222 | // | 222 | // |
223 | this.setColor(mode, color, true); | 223 | this.setColor(mode, color, true); |
224 | } else if (input === 'stroke') { | 224 | } else if (input === 'stroke') { |
225 | // | 225 | // |
226 | this.stroke = color; | 226 | this.stroke = color; |
227 | // | 227 | // |
228 | if(e._event.wasSetByCode) return; | 228 | if(e._event.wasSetByCode) return; |
229 | 229 | ||
@@ -237,93 +237,93 @@ exports.ColorController = Montage.create(Component, { | |||
237 | //Converts CSS to a color object to be used by the color model | 237 | //Converts CSS to a color object to be used by the color model |
238 | getColorObjFromCss: { | 238 | getColorObjFromCss: { |
239 | value: function (css) { | 239 | value: function (css) { |
240 | // | 240 | // |
241 | var color, arr, i, j, temp, c, gradient; | 241 | var color, arr, i, j, temp, c, gradient; |
242 | //console.log(css.indexOf('-webkit'), css); | 242 | //console.log(css.indexOf('-webkit'), css); |
243 | if (css && css.indexOf('-webkit') >= 0) { | 243 | if (css && css.indexOf('-webkit') >= 0) { |
244 | // | 244 | // |
245 | gradient = {mode: null, stops: null}; | 245 | gradient = {mode: null, stops: null}; |
246 | //Checking for gradient type | 246 | //Checking for gradient type |
247 | if (css.indexOf('-webkit-radial-gradient') >= 0) { | 247 | if (css.indexOf('-webkit-radial-gradient') >= 0) { |
248 | //Radial gradient | 248 | //Radial gradient |
249 | gradient.stops = []; | 249 | gradient.stops = []; |
250 | gradient.mode = 'radial'; | 250 | gradient.mode = 'radial'; |
251 | gradient.gradientMode = 'radial'; | 251 | gradient.gradientMode = 'radial'; |
252 | gradient.css = css; | 252 | gradient.css = css; |
253 | // | 253 | // |
254 | arr = css.split('%,'); | 254 | arr = css.split('%,'); |
255 | // | 255 | // |
256 | for (j=1; arr[j]; j++) { | 256 | for (j=1; arr[j]; j++) { |
257 | //TODO: Add HSL support | 257 | //TODO: Add HSL support |
258 | if (arr[j].indexOf('rgb') >= 0 && arr[j].indexOf('rgba') < 0) { | 258 | if (arr[j].indexOf('rgb') >= 0 && arr[j].indexOf('rgba') < 0) { |
259 | temp = arr[j].split('rgb'); | 259 | temp = arr[j].split('rgb'); |
260 | temp = temp[1].replace(/\(/i, ""); | 260 | temp = temp[1].replace(/\(/i, ""); |
261 | temp = temp.split(')'); | 261 | temp = temp.split(')'); |
262 | c = this.parseCssToColor('rgb('+temp[0]+')'); | 262 | c = this.parseCssToColor('rgb('+temp[0]+')'); |
263 | gradient.stops.push({css: c.css, value: c.value, mode: c.mode, position: parseInt(temp[1].replace(/\%/i, ""))}); | 263 | gradient.stops.push({css: c.css, value: c.value, mode: c.mode, position: parseInt(temp[1].replace(/\%/i, ""))}); |
264 | } else if (css.indexOf('rgba') >= 0) { | 264 | } else if (css.indexOf('rgba') >= 0) { |
265 | 265 | ||
266 | temp = arr[j].split('rgba'); | 266 | temp = arr[j].split('rgba'); |
267 | temp = temp[1].replace(/\(/i, ""); | 267 | temp = temp[1].replace(/\(/i, ""); |
268 | temp = temp.split(')'); | 268 | temp = temp.split(')'); |
269 | c = this.parseCssToColor('rgba('+temp[0]+')'); | 269 | c = this.parseCssToColor('rgba('+temp[0]+')'); |
270 | gradient.stops.push({css: c.css, value: c.value, mode: c.mode, position: parseInt(temp[1].replace(/\%/i, ""))}); | 270 | gradient.stops.push({css: c.css, value: c.value, mode: c.mode, position: parseInt(temp[1].replace(/\%/i, ""))}); |
271 |