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:
jdescottes
2014-09-07 12:22:44 +02:00
parent 6b32239fa1
commit 92d7109ef7
7 changed files with 108 additions and 61 deletions

View File

@ -12,6 +12,7 @@
ns.AbstractDialogController.prototype.destroy = function () {};
ns.AbstractDialogController.prototype.closeDialog = function () {
this.destroy();
$.publish(Events.DIALOG_HIDE);
};

View File

@ -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) {

View File

@ -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();
}
};
})();