From 30c3cdbcc5cd9828aa63c14ef38a7f5a9f199bd8 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 19 Nov 2015 08:18:26 +0100 Subject: [PATCH 1/3] Issue #338 : Store resize prefs to userpref --- .../settings/resize/ResizeController.js | 28 +++++++++++++++++-- src/js/utils/UserSettings.js | 8 +++++- src/js/widgets/SizeInput.js | 1 + src/templates/settings/resize.html | 2 +- 4 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/js/controller/settings/resize/ResizeController.js b/src/js/controller/settings/resize/ResizeController.js index 0ea02cca..dc1a86e4 100644 --- a/src/js/controller/settings/resize/ResizeController.js +++ b/src/js/controller/settings/resize/ResizeController.js @@ -17,14 +17,26 @@ 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'); - this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox'); + + var settings = pskl.UserSettings.get('RESIZE_SETTINGS'); var initWidth = this.piskelController.getWidth(); 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 origin = ns.AnchorWidget.ORIGIN[settings.origin] || ns.AnchorWidget.ORIGIN.TOPLEFT; + this.anchorWidget.setOrigin(origin); + + this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox'); + if (settings.content) { + this.resizeContentCheckbox.checked = true; + this.anchorWidget.disable(); + } + this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox'); + if (settings.ratio) { + 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(), + content : !!this.resizeContentCheckbox.checked, + ratio : !!this.maintainRatioCheckbox.checked + }); + }; + /***********************/ /* RESIZE LOGIC */ /***********************/ diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index a4d94dbe..dd360a50 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': { + content : false, + ratio : true, + 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 @@
From 9329a5fd036ff4d2c06214b833e9d77e7a556a27 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 25 Nov 2015 00:36:19 +0100 Subject: [PATCH 2/3] Issue #338 : Remove jquery from settingscontroller, destroy setting controller when closing drawer --- src/css/settings-resize.css | 4 ++ .../controller/settings/SettingsController.js | 54 ++++++++++++------- .../settings/resize/ResizeController.js | 16 +++--- src/js/utils/UserSettings.js | 4 +- 4 files changed, 48 insertions(+), 30 deletions(-) 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..0a1606c0 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,28 +43,33 @@ * @public */ ns.SettingsController.prototype.init = function() { - $('[data-setting]').click(this.onSettingIconClick.bind(this)); - $('body').click(this.onBodyClick.bind(this)); + pskl.utils.Event.addEventListener(this.settingsContainer, 'click', this.onSettingContainerClick, 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'); + ns.SettingsController.prototype.onSettingContainerClick = function (evt) { + var setting = pskl.utils.Dom.getData(evt.target, '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); - - $('.' + 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); + 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 dc1a86e4..8d7a8819 100644 --- a/src/js/controller/settings/resize/ResizeController.js +++ b/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'); - - var settings = pskl.UserSettings.get('RESIZE_SETTINGS'); + this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox'); + 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.content) { + if (settings.resizeContent) { 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, - ratio : !!this.maintainRatioCheckbox.checked + resizeContent : !!this.resizeContentCheckbox.checked, + maintainRatio : !!this.maintainRatioCheckbox.checked }); }; diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index dd360a50..eb9cbb5f 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -31,8 +31,8 @@ 'LAYER_PREVIEW' : true, 'EXPORT_SCALING' : 1, 'RESIZE_SETTINGS': { - content : false, - ratio : true, + maintainRatio : true, + resizeContent : false, origin : 'TOPLEFT' } }, From 8d26d693ffb816d7c4abaf61837151138a297500 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 25 Nov 2015 00:40:12 +0100 Subject: [PATCH 3/3] Issue #338 : Cleanup public/private in SettingsController --- .../controller/settings/SettingsController.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/js/controller/settings/SettingsController.js b/src/js/controller/settings/SettingsController.js index 0a1606c0..0988011f 100644 --- a/src/js/controller/settings/SettingsController.js +++ b/src/js/controller/settings/SettingsController.js @@ -43,29 +43,29 @@ * @public */ ns.SettingsController.prototype.init = function() { - pskl.utils.Event.addEventListener(this.settingsContainer, 'click', this.onSettingContainerClick, this); - pskl.utils.Event.addEventListener(document.body, 'click', this.onBodyClick, 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)); + $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer_.bind(this)); }; - ns.SettingsController.prototype.onSettingContainerClick = function (evt) { + ns.SettingsController.prototype.onSettingsContainerClick_ = function (evt) { var setting = pskl.utils.Dom.getData(evt.target, 'setting'); if (!setting) { return; } if (this.currentSetting != setting) { - this.loadSetting(setting); + this.loadSetting_(setting); } else { - this.closeDrawer(); + 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); @@ -73,11 +73,11 @@ var isInSettingsContainer = isInDrawerContainer || isInSettingsIcon; if (this.isExpanded && !isInSettingsContainer) { - this.closeDrawer(); + this.closeDrawer_(); } }; - ns.SettingsController.prototype.loadSetting = function (setting) { + ns.SettingsController.prototype.loadSetting_ = function (setting) { this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template); // when switching settings controller, destroy previously loaded controller @@ -97,7 +97,7 @@ this.isExpanded = true; }; - ns.SettingsController.prototype.closeDrawer = function () { + ns.SettingsController.prototype.closeDrawer_ = function () { pskl.utils.Dom.removeClass(SEL_SETTING_CLS); this.settingsContainer.classList.remove(EXP_DRAWER_CLS);