mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Issue #338 : Remove jquery from settingscontroller, destroy setting controller when closing drawer
This commit is contained in:
@ -44,6 +44,10 @@
|
||||
border-color: #555 !important;
|
||||
}
|
||||
|
||||
.resize-origin-option:hover {
|
||||
border : 3px solid white;
|
||||
}
|
||||
|
||||
.resize-origin-option.selected {
|
||||
border : 3px solid gold;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
@ -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
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -31,8 +31,8 @@
|
||||
'LAYER_PREVIEW' : true,
|
||||
'EXPORT_SCALING' : 1,
|
||||
'RESIZE_SETTINGS': {
|
||||
content : false,
|
||||
ratio : true,
|
||||
maintainRatio : true,
|
||||
resizeContent : false,
|
||||
origin : 'TOPLEFT'
|
||||
}
|
||||
},
|
||||
|
Reference in New Issue
Block a user