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

This commit is contained in:
jdescottes
2015-11-25 00:36:19 +01:00
parent 1c1f6c11ab
commit 9329a5fd03
4 changed files with 48 additions and 30 deletions

View File

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

View File

@ -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;
}
};
})();

View File

@ -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
});
};

View File

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