Moved resize+app settings to AbstractSettingController

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);
-  };
-
-  ns.ApplicationSettingsController.prototype.destroy = function () {
-    pskl.utils.Event.removeAllEventListeners(this);
-    this.backgroundContainer = null;
+    this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
   };
 
   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.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this));
-
-    this.cancelButton = this.container.querySelector('.resize-cancel-button');
-    this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this));
+    this.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_);
+    this.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_);
 
     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) {