Moved resize+app settings to AbstractSettingController

src/css/forms.css

@@ -3,14 +3,13 @@
 }
 
 .textfield {
+  box-sizing:border-box;
+
   background : black;
   border : 1px solid #888;
   border-radius : 2px;
   padding : 3px 10px;
   color : white;
-
-  box-sizing:border-box;
-  -moz-box-sizing:border-box;
 }
 
 .textfield[disabled=disabled] {
@@ -22,8 +21,8 @@
 }
 
 .button {
-  height: 24px;
   box-sizing: border-box;
+  height: 24px;
 
   background-color: #3f3f3f;
   border: 1px solid #333;
@@ -34,7 +33,7 @@
   text-decoration: none;
 
   color: white;
-  text-shadow: 0px -1px 0 black;
+  text-shadow: 0 -1px 0 black;
   font-weight: bold;
   font-size: 1rem;
   text-align: center;
@@ -56,7 +55,7 @@
   border-bottom-color: rgb(151, 133, 0);
 
   color: black;
-  text-shadow: 0px 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
 }
 
 .button-primary:hover {
@@ -69,7 +68,7 @@
   cursor:default;
   background-color: #aaa;
   color: #777;
-  text-shadow: 0px 1px 0 #bbb;
+  text-shadow: 0 1px 0 #bbb;
   border-color: #666;
   border-top-color: #999;
   border-bottom-color: #555;

src/css/settings-application.css

@@ -1,3 +1,4 @@
 .tiled-preview-checkbox {
   vertical-align: -2px;
+  margin-left: 0;
 }

src/js/controller/settings/AbstractSettingController.js

@@ -0,0 +1,26 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+  ns.AbstractSettingController = function () {};
+
+  ns.AbstractSettingController.prototype.addEventListener = function (el, type, callback) {
+    pskl.utils.Event.addEventListener(el, type, callback, this);
+  };
+
+
+  ns.AbstractSettingController.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+    this.nullifyDomReferences_();
+  };
+
+  ns.AbstractSettingController.prototype.nullifyDomReferences_ = function () {
+    for (var key in this) {
+      if (this.hasOwnProperty(key)) {
+        var isHTMLElement = this[key] && this[key].nodeName;
+        if (isHTMLElement) {
+          this[key] = null;
+        }
+      }
+    }
+  };
+
+})();

src/js/controller/settings/ApplicationSettingsController.js

@@ -3,9 +3,11 @@
 
   ns.ApplicationSettingsController = function () {};
 
+  pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController);
+
   ns.ApplicationSettingsController.prototype.init = function() {
     this.backgroundContainer = document.querySelector('.background-picker-wrapper');
-    pskl.utils.Event.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_, this);
+    this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
 
     // Highlight selected background :
     var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
@@ -22,7 +24,7 @@
       selectedOption.setAttribute('selected', 'selected');
     }
 
-    pskl.utils.Event.addEventListener(gridSelect, 'change', this.onGridWidthChange_, this);
+    this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
 
     // Tiled preview
     var tiledPreview = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
@@ -30,17 +32,12 @@
     if (tiledPreview) {
       tiledPreviewCheckbox.setAttribute('checked', true);
     }
-    pskl.utils.Event.addEventListener(tiledPreviewCheckbox, 'change', this.onTiledPreviewChange_, this);
+    this.addEventListener(tiledPreviewCheckbox, 'change', this.onTiledPreviewChange_);
 
-    // Max FPS 
+    // Max FPS
     var maxFpsInput = document.querySelector('.max-fps-input');
     maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
-    pskl.utils.Event.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_, this);
+    this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
-  };
-
-  ns.ApplicationSettingsController.prototype.destroy = function () {
-    pskl.utils.Event.removeAllEventListeners(this);
-    this.backgroundContainer = null;
   };
 
   ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {

src/js/controller/settings/resize/AnchorWidget.js

@@ -5,7 +5,8 @@
 
   ns.AnchorWidget = function (container) {
     this.container = container;
-    this.container.addEventListener('click', this.onResizeOriginClick_.bind(this));
+    this.disabled = false;
+    pskl.utils.Event.addEventListener(this.container, 'click', this.onResizeOriginClick_, this);
   };
 
   ns.AnchorWidget.ORIGIN = {
@@ -20,9 +21,14 @@
     BOTTOMRIGHT : 'BOTTOMRIGHT'
   };
 
+  ns.AnchorWidget.prototype.destroy = function (evt) {
+    pskl.utils.Event.removeAllEventListeners(this);
+    this.container = null;
+  };
+
   ns.AnchorWidget.prototype.onResizeOriginClick_ = function (evt) {
     var origin = evt.target.dataset.origin;
-    if (origin && ns.AnchorWidget.ORIGIN[origin]) {
+    if (origin && ns.AnchorWidget.ORIGIN[origin] && !this.disabled) {
       this.setOrigin(origin);
     }
   };

src/js/controller/settings/resize/ResizeController.js

@@ -10,6 +10,8 @@
     this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
   };
 
+  pskl.utils.inherit(ns.ResizeController, pskl.controller.settings.AbstractSettingController);
+
   ns.ResizeController.prototype.init = function () {
     this.widthInput = this.container.querySelector('[name="resize-width"]');
     this.heightInput = this.container.querySelector('[name="resize-height"]');
@@ -17,25 +19,27 @@
     this.widthInput.value = this.piskelController.getWidth();
     this.heightInput.value = this.piskelController.getHeight();
 
-    this.widthInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
+    this.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_);
-    this.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
+    this.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_);
-
-    this.cancelButton = this.container.querySelector('.resize-cancel-button');
-    this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this));
 
     this.resizeForm = this.container.querySelector('form');
-    this.resizeForm.addEventListener('submit', this.onResizeFormSubmit_.bind(this));
+    this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
 
     this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
-    this.resizeContentCheckbox.addEventListener('change', this.onResizeContentChange_.bind(this));
+    this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
 
     this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
-    this.maintainRatioCheckbox.addEventListener('change', this.onMaintainRatioChange_.bind(this));
+    this.addEventListener(this.maintainRatioCheckbox, 'change', this.onMaintainRatioChange_);
 
     this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
     this.lastInput = this.widthInput;
   };
 
+  ns.ResizeController.prototype.destroy = function () {
+    this.anchorWidget.destroy();
+    this.superclass.destroy.call(this);
+  };
+
   ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
     evt.preventDefault();
 
@@ -53,10 +57,6 @@
     return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
   };
 
-  ns.ResizeController.prototype.onCancelButtonClicked_ = function () {
-    $.publish(Events.CLOSE_SETTINGS_DRAWER);
-  };
-
   ns.ResizeController.prototype.onResizeContentChange_ = function (evt) {
     var target = evt.target;
     if (target.checked) {
@@ -103,7 +103,7 @@
   };
 
   /***********************/
-  /* RESIZE CANVAS LOGIC */
+  /* RESIZE LOGIC */
   /***********************/
 
   ns.ResizeController.prototype.resizeFrame_ = function (frame) {

src/js/utils/Event.js

@@ -20,9 +20,10 @@
     if (scope && scope.__pskl_listeners) {
       var listeners = scope.__pskl_listeners;
       for (var i = 0 ; i < listeners.length ; i++) {
-        if (listeners[i].callback === callback) {
+        var listener = listeners[i];
+        if (listener.callback === callback && listener.el === el  && listener.type === type) {
           el.removeEventListener(type, listeners[i].handler);
-          listeners.slice(i, 1);
+          listeners.splice(i, 1);
           break;
         }
       }

src/piskel-script-list.js

@@ -96,6 +96,7 @@
   "js/controller/CanvasBackgroundController.js",
 
   // Settings sub-controllers
+  "js/controller/settings/AbstractSettingController.js",
   "js/controller/settings/ApplicationSettingsController.js",
   "js/controller/settings/exportimage/ImageExportController.js",
   "js/controller/settings/exportimage/GifExportController.js",

src/piskel-style-list.js

@@ -7,6 +7,7 @@
   "css/font-icon.css",
   "css/forms.css",
   "css/settings.css",
+  "css/settings-application.css",
   "css/settings-export.css",
   "css/settings-import.css",
   "css/settings-resize.css",

src/templates/settings/application.html

@@ -39,13 +39,13 @@
   <div class="settings-item">
     <label>
       <input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
-      Display tiled preview
+      Repeated preview
     </label>
   </div>
 
   <div class="settings-item">
-    <label for="tiled-preview">Max FPS :</label>
+    <label for="tiled-preview">Maximum FPS </label>
-        <input type="text" class="textfield max-fps-input" name="max-fps"/>
+        <input type="text" class="textfield  textfield-small  max-fps-input" name="max-fps"/>
   </div>
 </div>
 

src/templates/settings/import.html

@@ -26,7 +26,7 @@
     Import From Picture
   </div>
   <div class="settings-item">
-    <div style="margin-top:5px;margin-bottom:5px;">Supports : <span class="import-highlight">PNG, JPG, BMP, Animated GIF ...</span></div>
+    <div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
     <div class="import-section">
       <button type="button" class="button  button-primary file-input-button">Browse images</button>
       <input style="display:none"

src/templates/settings/resize.html

@@ -1,7 +1,7 @@
 <div class="settings-section">
   <!-- RESIZE DRAWING AREA -->
   <div class="settings-title">
-    Canvas size
+    Resize
   </div>
   <div class="settings-item  resize-canvas">
     <form action="" method="POST" name="resize-canvas-form">
@@ -42,7 +42,6 @@
         </div>
       </div>
       <input type="submit" class="button button-primary resize-button" value="Resize" />
-      <input type="button" class="button resize-cancel-button" value="Cancel" />
     </form>
   </div>
 </div>