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

@@ -39,10 +39,19 @@
   background: #222;
 }
 
-.create-palette-submit {
+.create-palette-actions {
   position: absolute;
-  right: 10px;
+  box-sizing: border-box;
-  bottom: 10px;
+
+  width:100%;
+  height: 45px;
+
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  padding:10px;
+  text-align:right;
 }
 
 .color-preview {

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_;

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

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

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));
+    var isChromeOrFirefox = pskl.utils.UserAgent.isChrome || pskl.utils.UserAgent.isFirefox;
-    this.container.addEventListener('change', this.onPickerChange_.bind(this));
+    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') {
+      var colors = this.getSliderBackgroundColors_(model, dimension);
-        start = JSON.parse(JSON.stringify(this.hsvColor));
+      slider.style.backgroundImage = "linear-gradient(to right, " + colors.start + " 0, " + colors.end + " 100%)";
-        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%)";
     }
   };
+
+  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();
+    }
+  };
+
+
 })();

src/js/utils/core.js

@@ -76,5 +76,29 @@ if (!Function.prototype.bind) {
     }
   };
 
+  var entityMap = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': '&quot;',
+    "'": '&#39;',
+    "/": '&#x2F;'
+  };
+
+  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;
+  };
+
 })();
 

src/templates/dialogs/create-palette.html

@@ -45,7 +45,10 @@
           <div class="color-preview"></div>
         </div>
       </div>
-      <button type="button" name="create-palette-submit" class="button button-primary create-palette-submit">Save</button>
+      <div class="create-palette-actions">
+        <button type="button" name="create-palette-cancel" class="button button-primary create-palette-cancel">Cancel</button>
+        <button type="button" name="create-palette-submit" class="button button-primary create-palette-submit">Save</button>
+      </div>
   </div>
 
   <script type="text/template" id="color-picker-slider-template">