mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Enhancement : Palette colors creation
- Added cancel button to create palette dialog - Added escape/unescapeHtml methods to pskl.utils - Escaping palette name now ... - Removed outdated comment in app.js regarding appEngine token - Added a call to destroy() during dialogClose of AbstractDlgCtrl
This commit is contained in:
@ -12,6 +12,7 @@
|
||||
ns.AbstractDialogController.prototype.destroy = function () {};
|
||||
|
||||
ns.AbstractDialogController.prototype.closeDialog = function () {
|
||||
this.destroy();
|
||||
$.publish(Events.DIALOG_HIDE);
|
||||
};
|
||||
|
||||
|
@ -10,7 +10,7 @@
|
||||
|
||||
ns.CreatePaletteController.prototype.init = function (paletteId) {
|
||||
this.superclass.init.call(this);
|
||||
console.log(paletteId);
|
||||
|
||||
if (paletteId) {
|
||||
var palette = this.paletteService.getPaletteById(paletteId);
|
||||
this.palette = pskl.model.Palette.fromObject(palette);
|
||||
@ -20,23 +20,32 @@
|
||||
}
|
||||
|
||||
this.colorsList = document.querySelector('.colors-list');
|
||||
this.colorPickerContainer = document.querySelector('.color-picker-container');
|
||||
this.colorPreviewEl = document.querySelector('.color-preview');
|
||||
|
||||
this.submitButton = document.querySelector('.create-palette-submit');
|
||||
this.nameInput = document.querySelector('input[name="palette-name"]');
|
||||
this.nameInput.value = this.palette.name;
|
||||
this.nameInput.value = pskl.utils.unescapeHtml(this.palette.name);
|
||||
|
||||
var submitButton = document.querySelector('.create-palette-submit');
|
||||
var cancelButton = document.querySelector('.create-palette-cancel');
|
||||
|
||||
this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
|
||||
this.submitButton.addEventListener('click', this.onSubmitButtonClick_.bind(this));
|
||||
this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
|
||||
|
||||
this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(this.colorPickerContainer, this.onColorUpdated_.bind(this));
|
||||
submitButton.addEventListener('click', this.onSubmitButtonClick_.bind(this));
|
||||
cancelButton.addEventListener('click', this.closeDialog.bind(this));
|
||||
|
||||
var colorPickerContainer = document.querySelector('.color-picker-container');
|
||||
this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
|
||||
this.hslRgbColorPicker.init();
|
||||
|
||||
this.refresh_();
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.destroy = function () {
|
||||
this.colorsList = null;
|
||||
this.colorPreviewEl = null;
|
||||
this.nameInput = null;
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onColorUpdated_ = function (color) {
|
||||
var rgbColor = color.toRgbString();
|
||||
this.colorPreviewEl.style.background = rgbColor;
|
||||
@ -92,7 +101,7 @@
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
|
||||
this.palette.name = this.nameInput.value;
|
||||
this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.selectColor_ = function (index) {
|
||||
|
@ -1,6 +1,5 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.widgets');
|
||||
var PICKER_INPUT_DELAY = 30;
|
||||
|
||||
ns.HslRgbColorPicker = function (container, colorUpdatedCallback) {
|
||||
this.container = container;
|
||||
@ -9,8 +8,9 @@
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.init = function () {
|
||||
this.container.addEventListener('input', this.onPickerInput_.bind(this));
|
||||
this.container.addEventListener('change', this.onPickerChange_.bind(this));
|
||||
var isChromeOrFirefox = pskl.utils.UserAgent.isChrome || pskl.utils.UserAgent.isFirefox;
|
||||
var changeEvent = isChromeOrFirefox ? 'input' : 'change';
|
||||
this.container.addEventListener(changeEvent, this.onPickerChange_.bind(this));
|
||||
|
||||
this.spectrumEl = this.container.querySelector('.color-picker-spectrum');
|
||||
|
||||
@ -26,14 +26,6 @@
|
||||
};
|
||||
|
||||
|
||||
ns.HslRgbColorPicker.prototype.onPickerInput_ = function (evt) {
|
||||
var now = Date.now();
|
||||
if (now - this.lastInputTimestamp_ > PICKER_INPUT_DELAY) {
|
||||
this.lastInputTimestamp_ = now;
|
||||
this.onPickerChange_(evt);
|
||||
}
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.onPickerChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
|
||||
@ -77,27 +69,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.toTinyColor_ = function (color) {
|
||||
if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
|
||||
return color;
|
||||
} else {
|
||||
return window.tinycolor(JSON.parse(JSON.stringify(color)));
|
||||
}
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.toHsvColor_ = function (color) {
|
||||
var isHsvColor = ['h','s','v'].every(color.hasOwnProperty.bind(color));
|
||||
if (isHsvColor) {
|
||||
return {
|
||||
h : Math.max(0, Math.min(359, color.h)),
|
||||
s : Math.max(0, Math.min(1, color.s)),
|
||||
v : Math.max(0, Math.min(1, color.v))
|
||||
};
|
||||
} else {
|
||||
return this.toTinyColor_(color).toHsv();
|
||||
}
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.updateInputs = function () {
|
||||
var inputs = this.container.querySelectorAll('input');
|
||||
var rgb = this.tinyColor.toRgb();
|
||||
@ -131,22 +102,53 @@
|
||||
var start, end;
|
||||
var isHueSlider = dimension === 'h';
|
||||
if (!isHueSlider) {
|
||||
if (model === 'hsv') {
|
||||
start = JSON.parse(JSON.stringify(this.hsvColor));
|
||||
start[dimension] = 0;
|
||||
|
||||
end = JSON.parse(JSON.stringify(this.hsvColor));
|
||||
end[dimension] = 1;
|
||||
} else {
|
||||
start = this.tinyColor.toRgb();
|
||||
start[dimension] = 0;
|
||||
|
||||
end = this.tinyColor.toRgb();
|
||||
end[dimension] = 255;
|
||||
}
|
||||
var colorStart = window.tinycolor(start).toRgbString();
|
||||
var colorEnd = window.tinycolor(end).toRgbString();
|
||||
slider.style.backgroundImage = "linear-gradient(to right, " + colorStart + " 0, " + colorEnd + " 100%)";
|
||||
var colors = this.getSliderBackgroundColors_(model, dimension);
|
||||
slider.style.backgroundImage = "linear-gradient(to right, " + colors.start + " 0, " + colors.end + " 100%)";
|
||||
}
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.getSliderBackgroundColors_ = function (model, dimension) {
|
||||
var start, end;
|
||||
if (model === 'hsv') {
|
||||
start = JSON.parse(JSON.stringify(this.hsvColor));
|
||||
start[dimension] = 0;
|
||||
|
||||
end = JSON.parse(JSON.stringify(this.hsvColor));
|
||||
end[dimension] = 1;
|
||||
} else {
|
||||
start = this.tinyColor.toRgb();
|
||||
start[dimension] = 0;
|
||||
|
||||
end = this.tinyColor.toRgb();
|
||||
end[dimension] = 255;
|
||||
}
|
||||
|
||||
return {
|
||||
start : window.tinycolor(start).toRgbString(),
|
||||
end : window.tinycolor(end).toRgbString()
|
||||
};
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.toTinyColor_ = function (color) {
|
||||
if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
|
||||
return color;
|
||||
} else {
|
||||
return window.tinycolor(JSON.parse(JSON.stringify(color)));
|
||||
}
|
||||
};
|
||||
|
||||
ns.HslRgbColorPicker.prototype.toHsvColor_ = function (color) {
|
||||
var isHsvColor = ['h','s','v'].every(color.hasOwnProperty.bind(color));
|
||||
if (isHsvColor) {
|
||||
return {
|
||||
h : Math.max(0, Math.min(359, color.h)),
|
||||
s : Math.max(0, Math.min(1, color.s)),
|
||||
v : Math.max(0, Math.min(1, color.v))
|
||||
};
|
||||
} else {
|
||||
return this.toTinyColor_(color).toHsv();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
})();
|
Reference in New Issue
Block a user