From 92d7109ef77ed8e39382da60e0f0f721616037c1 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 7 Sep 2014 12:22:44 +0200 Subject: [PATCH] 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 --- src/css/dialogs-create-palette.css | 15 ++- src/js/app.js | 1 - .../dialogs/AbstractDialogController.js | 1 + .../dialogs/CreatePaletteController.js | 25 +++-- .../controller/widgets/HslRgbColorPicker.js | 98 ++++++++++--------- src/js/utils/core.js | 24 +++++ src/templates/dialogs/create-palette.html | 5 +- 7 files changed, 108 insertions(+), 61 deletions(-) diff --git a/src/css/dialogs-create-palette.css b/src/css/dialogs-create-palette.css index ffbbab28..d2f16148 100644 --- a/src/css/dialogs-create-palette.css +++ b/src/css/dialogs-create-palette.css @@ -39,10 +39,19 @@ background: #222; } -.create-palette-submit { +.create-palette-actions { position: absolute; - right: 10px; - bottom: 10px; + box-sizing: border-box; + + width:100%; + height: 45px; + + left: 0; + right: 0; + bottom: 0; + + padding:10px; + text-align:right; } .color-preview { diff --git a/src/js/app.js b/src/js/app.js index 4932a16b..4371d6c5 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -11,7 +11,6 @@ init : function () { /** - * True when piskel is running in static mode (no back end needed). * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl */ this.isAppEngineVersion = !!pskl.appEngineToken_; diff --git a/src/js/controller/dialogs/AbstractDialogController.js b/src/js/controller/dialogs/AbstractDialogController.js index 1c8c7715..00f28ebf 100644 --- a/src/js/controller/dialogs/AbstractDialogController.js +++ b/src/js/controller/dialogs/AbstractDialogController.js @@ -12,6 +12,7 @@ ns.AbstractDialogController.prototype.destroy = function () {}; ns.AbstractDialogController.prototype.closeDialog = function () { + this.destroy(); $.publish(Events.DIALOG_HIDE); }; diff --git a/src/js/controller/dialogs/CreatePaletteController.js b/src/js/controller/dialogs/CreatePaletteController.js index 51a6c78b..455b6fbb 100644 --- a/src/js/controller/dialogs/CreatePaletteController.js +++ b/src/js/controller/dialogs/CreatePaletteController.js @@ -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) { diff --git a/src/js/controller/widgets/HslRgbColorPicker.js b/src/js/controller/widgets/HslRgbColorPicker.js index cdc4f8e7..304b9943 100644 --- a/src/js/controller/widgets/HslRgbColorPicker.js +++ b/src/js/controller/widgets/HslRgbColorPicker.js @@ -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(); + } + }; + + })(); \ No newline at end of file diff --git a/src/js/utils/core.js b/src/js/utils/core.js index cd4226d5..59cb7e45 100644 --- a/src/js/utils/core.js +++ b/src/js/utils/core.js @@ -76,5 +76,29 @@ if (!Function.prototype.bind) { } }; + var entityMap = { + "&": "&", + "<": "<", + ">": ">", + '"': '"', + "'": ''', + "/": '/' + }; + + ns.escapeHtml= function (string) { + return String(string).replace(/[&<>"'\/]/g, function (s) { + return entityMap[s]; + }); + }; + + var reEntityMap = {}; + ns.unescapeHtml= function (string) { + Object.keys(entityMap).forEach(function(key) { + reEntityMap[key] = reEntityMap[key] || new RegExp(entityMap[key], "g"); + string = string.replace(reEntityMap[key], key); + }); + return string; + }; + })(); diff --git a/src/templates/dialogs/create-palette.html b/src/templates/dialogs/create-palette.html index 79d783d6..1b28b114 100644 --- a/src/templates/dialogs/create-palette.html +++ b/src/templates/dialogs/create-palette.html @@ -45,7 +45,10 @@
- +
+ + +