diff --git a/src/css/settings-resize.css b/src/css/settings-resize.css index ad6b9566..ce8d97b7 100644 --- a/src/css/settings-resize.css +++ b/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; } diff --git a/src/js/controller/settings/SettingsController.js b/src/js/controller/settings/SettingsController.js index e333c382..0988011f 100644 --- a/src/js/controller/settings/SettingsController.js +++ b/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; + } }; })(); diff --git a/src/js/controller/settings/resize/ResizeController.js b/src/js/controller/settings/resize/ResizeController.js index 0ea02cca..8d7a8819 100644 --- a/src/js/controller/settings/resize/ResizeController.js +++ b/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 */ /***********************/ diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index a4d94dbe..eb9cbb5f 100644 --- a/src/js/utils/UserSettings.js +++ b/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' + } }, /** diff --git a/src/js/widgets/SizeInput.js b/src/js/widgets/SizeInput.js index df311b67..62396c0e 100644 --- a/src/js/widgets/SizeInput.js +++ b/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; diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html index fba95e91..c539c93e 100644 --- a/src/templates/settings/resize.html +++ b/src/templates/settings/resize.html @@ -17,7 +17,7 @@