Merge pull request #342 from juliandescottes/store-resize-to-userpref

Store resize to userpref

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,61 +43,75 @@
    * @public
    */
   ns.SettingsController.prototype.init = function() {
-    $('[data-setting]').click(this.onSettingIconClick.bind(this));
-    $('body').click(this.onBodyClick.bind(this));
-    $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
+    pskl.utils.Event.addEventListener(this.settingsContainer, 'click', this.onSettingsContainerClick_, 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) {
-    var el = evt.originalEvent.currentTarget;
-    var setting = el.getAttribute('data-setting');
-    if (this.currentSetting != setting) {
-      this.loadSetting(setting);
-    } else {
-      this.closeDrawer();
+  ns.SettingsController.prototype.onSettingsContainerClick_ = function (evt) {
+    var setting = pskl.utils.Dom.getData(evt.target, 'setting');
+    if (!setting) {
+      return;
     }
-    evt.originalEvent.stopPropagation();
-    evt.originalEvent.preventDefault();
+
+    if (this.currentSetting != setting) {
+      this.loadSetting_(setting);
+    } else {
+      this.closeDrawer_();
+    }
+
+    evt.stopPropagation();
+    evt.preventDefault();
   };
 
-  ns.SettingsController.prototype.onBodyClick = function (evt) {
+  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) {
-      this.closeDrawer();
+      this.closeDrawer_();
     }
   };
 
-  ns.SettingsController.prototype.loadSetting = function (setting) {
-    if (this.currentController && this.currentController.destroy) {
-      this.currentController.destroy();
-    }
-
+  ns.SettingsController.prototype.loadSetting_ = function (setting) {
     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);
-
-    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
-    $('[data-setting=' + setting + ']').addClass(SEL_SETTING_CLS);
+    pskl.utils.Dom.removeClass(SEL_SETTING_CLS);
+    var selectedSettingButton = document.querySelector('[data-setting=' + setting + ']');
+    if (selectedSettingButton) {
+      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);
-    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+  ns.SettingsController.prototype.closeDrawer_ = function () {
+    pskl.utils.Dom.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

@@ -24,7 +24,19 @@
     var initHeight = this.piskelController.getHeight();
     this.sizeInputWidget = new pskl.widgets.SizeInput(this.widthInput, this.heightInput, initWidth, initHeight);
 
-    this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
+    var settings = pskl.UserSettings.get('RESIZE_SETTINGS');
+    var origin = ns.AnchorWidget.ORIGIN[settings.origin] || ns.AnchorWidget.ORIGIN.TOPLEFT;
+    this.anchorWidget.setOrigin(origin);
+
+    if (settings.resizeContent) {
+      this.resizeContentCheckbox.checked = true;
+      this.anchorWidget.disable();
+    }
+
+    if (settings.maintainRatio) {
+      this.maintainRatioCheckbox.checked = true;
+      this.sizeInputWidget.enableSync();
+    }
 
     this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
     this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
@@ -34,6 +46,8 @@
   };
 
   ns.ResizeController.prototype.destroy = function () {
+    this.updateUserPreferences_();
+
     this.anchorWidget.destroy();
     this.sizeInputWidget.destroy();
     this.superclass.destroy.call(this);
@@ -77,6 +91,14 @@
     }
   };
 
+  ns.ResizeController.prototype.updateUserPreferences_ = function () {
+    pskl.UserSettings.set('RESIZE_SETTINGS', {
+      origin : this.anchorWidget.getOrigin(),
+      resizeContent : !!this.resizeContentCheckbox.checked,
+      maintainRatio : !!this.maintainRatioCheckbox.checked
+    });
+  };
+
   /***********************/
   /* RESIZE LOGIC */
   /***********************/

src/js/utils/UserSettings.js

@@ -13,6 +13,7 @@
     LAYER_PREVIEW : 'LAYER_PREVIEW',
     LAYER_OPACITY : 'LAYER_OPACITY',
     EXPORT_SCALING: 'EXPORT_SCALING',
+    RESIZE_SETTINGS: 'RESIZE_SETTINGS',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
@@ -28,7 +29,12 @@
       'ONION_SKIN' : false,
       'LAYER_OPACITY' : 0.2,
       'LAYER_PREVIEW' : true,
-      'EXPORT_SCALING' : 1
+      'EXPORT_SCALING' : 1,
+      'RESIZE_SETTINGS': {
+        maintainRatio : true,
+        resizeContent : false,
+        origin : 'TOPLEFT'
+      }
     },
 
     /**

src/js/widgets/SizeInput.js

@@ -5,6 +5,7 @@
     this.heightInput = heightInput;
     this.initWidth = initWidth;
     this.initHeight = initHeight;
+
     this.syncEnabled = true;
     this.lastInput = this.widthInput;
 

src/templates/settings/resize.html

@@ -17,7 +17,7 @@
       </div>
       <div class="resize-section">
         <label>
-          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true" checked="true"/>
+          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
           <span>Maintain aspect ratio</span>
         </label>
       </div>