mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Remove jquery from PaletteController.js

Browse Source
This commit is contained in:
Julian Descottes 2018-04-08 16:08:51 +02:00
parent ac13cf13c1
commit b9cc2eb4f8
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/js/controller/PaletteController.js
View File

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