diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index 2ee8b9c4..d3a73216 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -35,24 +35,24 @@ // Initialize colorpickers: var colorPicker = $('#color-picker'); colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg)); - colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); - this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker); + colorPicker.change({isPrimary : true}, this.onPickerChange_.bind(this)); + this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker.get(0)); var secondaryColorPicker = $('#secondary-color-picker'); secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg)); - secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); - this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker); + secondaryColorPicker.change({isPrimary : false}, this.onPickerChange_.bind(this)); + this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker.get(0)); - var swapColorsIcon = $('.swap-colors-button'); - swapColorsIcon.click(this.swapColors.bind(this)); + var swapColorsIcon = document.querySelector('.swap-colors-button'); + swapColorsIcon.addEventListener('click', this.swapColors.bind(this)); }; /** * @private */ - ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) { - var inputPicker = $(evt.target); - var color = inputPicker.val(); + ns.PaletteController.prototype.onPickerChange_ = function(evt) { + var inputPicker = evt.target; + var color = inputPicker.value; if (color != Constants.TRANSPARENT_COLOR) { // Unless the color is TRANSPARENT_COLOR, format it to hexstring, as @@ -71,7 +71,6 @@ * @private */ ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) { - var inputPicker = $(evt.target); if (args.isPrimary) { this.setPrimaryColor_(color); } else { @@ -80,12 +79,12 @@ }; ns.PaletteController.prototype.setPrimaryColor_ = function (color) { - this.updateColorPicker_(color, $('#color-picker')); + this.updateColorPicker_(color, document.querySelector('#color-picker')); $.publish(Events.PRIMARY_COLOR_SELECTED, [color]); }; ns.PaletteController.prototype.setSecondaryColor_ = function (color) { - this.updateColorPicker_(color, $('#secondary-color-picker')); + this.updateColorPicker_(color, document.querySelector('#secondary-color-picker')); $.publish(Events.SECONDARY_COLOR_SELECTED, [color]); }; @@ -104,6 +103,7 @@ * @private */ ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) { + var jqueryColorPicker = $(colorPicker); if (color == Constants.TRANSPARENT_COLOR) { // We can set the current palette color to transparent. // You can then combine this transparent color with an advanced @@ -114,17 +114,17 @@ // The colorpicker can't be set to a transparent state. // We set its background to white and insert the // string "TRANSPARENT" to mimic this state: - colorPicker.spectrum('set', Constants.TRANSPARENT_COLOR); - colorPicker.val(Constants.TRANSPARENT_COLOR); + jqueryColorPicker.spectrum('set', Constants.TRANSPARENT_COLOR); + colorPicker.value = Constants.TRANSPARENT_COLOR; } else { - colorPicker.spectrum('set', color); + jqueryColorPicker.spectrum('set', color); } this.setTitleOnPicker_(color, colorPicker); }; ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) { - var parent = colorPicker.parent(); - title = parent.data('initial-title') + '
' + title; - parent.attr('data-original-title', title); + var parent = colorPicker.parentNode; + title = parent.dataset.initialTitle + '
' + title; + parent.dataset.originalTitle = title; }; })();