Issue #338 : Remove jquery from settingscontroller, destroy setting controller when closing drawer

src/css/settings-resize.css

@@ -44,6 +44,10 @@
   border-color: #555 !important;
 }
 
+.resize-origin-option:hover {
+  border : 3px solid white;
+}
+
 .resize-origin-option.selected {
   border : 3px solid gold;
 }

src/js/controller/settings/SettingsController.js

@@ -33,8 +33,8 @@
 
   ns.SettingsController = function (piskelController) {
     this.piskelController = piskelController;
+    this.settingsContainer = document.querySelector('[data-pskl-controller=settings]');
     this.drawerContainer = document.getElementById('drawer-container');
-    this.settingsContainer = $('[data-pskl-controller=settings]');
     this.isExpanded = false;
     this.currentSetting = null;
   };
@@ -43,28 +43,33 @@
    * @public
    */
   ns.SettingsController.prototype.init = function() {
-    $('[data-setting]').click(this.onSettingIconClick.bind(this));
+    pskl.utils.Event.addEventListener(this.settingsContainer, 'click', this.onSettingContainerClick, this);
-    $('body').click(this.onBodyClick.bind(this));
+    pskl.utils.Event.addEventListener(document.body, 'click', this.onBodyClick, this);
+
     $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
   };
 
-  ns.SettingsController.prototype.onSettingIconClick = function (evt) {
+  ns.SettingsController.prototype.onSettingContainerClick = function (evt) {
-    var el = evt.originalEvent.currentTarget;
+    var setting = pskl.utils.Dom.getData(evt.target, 'setting');
-    var setting = el.getAttribute('data-setting');
+    if (!setting) {
+      return;
+    }
+
     if (this.currentSetting != setting) {
       this.loadSetting(setting);
     } else {
       this.closeDrawer();
     }
-    evt.originalEvent.stopPropagation();
+
-    evt.originalEvent.preventDefault();
+    evt.stopPropagation();
+    evt.preventDefault();
   };
 
   ns.SettingsController.prototype.onBodyClick = function (evt) {
     var target = evt.target;
 
     var isInDrawerContainer = pskl.utils.Dom.isParent(target, this.drawerContainer);
-    var isInSettingsIcon = target.getAttribute('data-setting');
+    var isInSettingsIcon = target.dataset.setting;
     var isInSettingsContainer = isInDrawerContainer || isInSettingsIcon;
 
     if (this.isExpanded && !isInSettingsContainer) {
@@ -73,31 +78,40 @@
   };
 
   ns.SettingsController.prototype.loadSetting = function (setting) {
-    if (this.currentController && this.currentController.destroy) {
-      this.currentController.destroy();
-    }
-
     this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template);
 
+    // when switching settings controller, destroy previously loaded controller
+    this.destroyCurrentController_();
+
     this.currentSetting = setting;
     this.currentController = new settings[setting].controller(this.piskelController);
     this.currentController.init();
 
-    this.settingsContainer.addClass(EXP_DRAWER_CLS);
+    pskl.utils.Dom.removeClass(SEL_SETTING_CLS);
-
+    var selectedSettingButton = document.querySelector('[data-setting=' + setting + ']');
-    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+    if (selectedSettingButton) {
-    $('[data-setting=' + setting + ']').addClass(SEL_SETTING_CLS);
+      selectedSettingButton.classList.add(SEL_SETTING_CLS);
+    }
+    this.settingsContainer.classList.add(EXP_DRAWER_CLS);
 
     this.isExpanded = true;
   };
 
   ns.SettingsController.prototype.closeDrawer = function () {
-    this.settingsContainer.removeClass(EXP_DRAWER_CLS);
+    pskl.utils.Dom.removeClass(SEL_SETTING_CLS);
-    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+    this.settingsContainer.classList.remove(EXP_DRAWER_CLS);
 
     this.isExpanded = false;
     this.currentSetting = null;
-
     document.activeElement.blur();
+
+    this.destroyCurrentController_();
+  };
+
+  ns.SettingsController.prototype.destroyCurrentController_ = function () {
+    if (this.currentController && this.currentController.destroy) {
+      this.currentController.destroy();
+      this.currentController = null;
+    }
   };
 })();

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

@@ -17,23 +17,23 @@
     this.widthInput = this.container.querySelector('[name="resize-width"]');
     this.heightInput = this.container.querySelector('[name="resize-height"]');
     this.resizeForm = this.container.querySelector('form');
-
+    this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
-    var settings = pskl.UserSettings.get('RESIZE_SETTINGS');
+    this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
 
     var initWidth = this.piskelController.getWidth();
     var initHeight = this.piskelController.getHeight();
     this.sizeInputWidget = new pskl.widgets.SizeInput(this.widthInput, this.heightInput, initWidth, initHeight);
 
+    var settings = pskl.UserSettings.get('RESIZE_SETTINGS');
     var origin = ns.AnchorWidget.ORIGIN[settings.origin] || ns.AnchorWidget.ORIGIN.TOPLEFT;
     this.anchorWidget.setOrigin(origin);
 
-    this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
+    if (settings.resizeContent) {
-    if (settings.content) {
       this.resizeContentCheckbox.checked = true;
       this.anchorWidget.disable();
     }
-    this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
+
-    if (settings.ratio) {
+    if (settings.maintainRatio) {
       this.maintainRatioCheckbox.checked = true;
       this.sizeInputWidget.enableSync();
     }
@@ -94,8 +94,8 @@
   ns.ResizeController.prototype.updateUserPreferences_ = function () {
     pskl.UserSettings.set('RESIZE_SETTINGS', {
       origin : this.anchorWidget.getOrigin(),
-      content : !!this.resizeContentCheckbox.checked,
+      resizeContent : !!this.resizeContentCheckbox.checked,
-      ratio : !!this.maintainRatioCheckbox.checked
+      maintainRatio : !!this.maintainRatioCheckbox.checked
     });
   };
 

src/js/utils/UserSettings.js

@@ -31,8 +31,8 @@
       'LAYER_PREVIEW' : true,
       'EXPORT_SCALING' : 1,
       'RESIZE_SETTINGS': {
-        content : false,
+        maintainRatio : true,
-        ratio : true,
+        resizeContent : false,
         origin : 'TOPLEFT'
       }
     },