2014-03-26 10:41:45 +04:00
|
|
|
(function () {
|
|
|
|
var ns = $.namespace('pskl.controller.dialogs');
|
|
|
|
|
|
|
|
var dialogs = {
|
2015-10-10 23:53:48 +03:00
|
|
|
'cheatsheet' : {
|
|
|
|
template : 'templates/dialogs/cheatsheet.html',
|
|
|
|
controller : ns.CheatsheetController
|
|
|
|
},
|
2014-08-30 20:39:54 +04:00
|
|
|
'create-palette' : {
|
|
|
|
template : 'templates/dialogs/create-palette.html',
|
|
|
|
controller : ns.CreatePaletteController
|
|
|
|
},
|
2014-07-12 17:34:50 +04:00
|
|
|
'browse-local' : {
|
|
|
|
template : 'templates/dialogs/browse-local.html',
|
|
|
|
controller : ns.BrowseLocalController
|
|
|
|
},
|
2017-01-16 02:52:48 +03:00
|
|
|
'import' : {
|
|
|
|
template : 'templates/dialogs/import.html',
|
|
|
|
controller : ns.importwizard.ImportWizard
|
2016-11-28 03:00:49 +03:00
|
|
|
},
|
|
|
|
'performance-info' : {
|
|
|
|
template : 'templates/dialogs/performance-info.html',
|
|
|
|
controller : ns.PerformanceInfoController
|
2016-12-12 04:00:49 +03:00
|
|
|
},
|
|
|
|
'unsupported-browser' : {
|
|
|
|
template : 'templates/dialogs/unsupported-browser.html',
|
|
|
|
controller : ns.UnsupportedBrowserController
|
2014-03-26 10:41:45 +04:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.DialogsController = function (piskelController) {
|
|
|
|
this.piskelController = piskelController;
|
2015-10-10 20:32:25 +03:00
|
|
|
this.closePopupShortcut = pskl.service.keyboard.Shortcuts.MISC.CLOSE_POPUP;
|
2014-03-29 21:35:56 +04:00
|
|
|
this.currentDialog_ = null;
|
2014-03-26 10:41:45 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.DialogsController.prototype.init = function () {
|
|
|
|
this.dialogContainer_ = document.getElementById('dialog-container');
|
|
|
|
this.dialogWrapper_ = document.getElementById('dialog-container-wrapper');
|
2015-10-10 23:53:48 +03:00
|
|
|
|
2017-01-16 02:52:48 +03:00
|
|
|
$.subscribe(Events.DIALOG_SHOW, this.onDialogDisplayEvent_.bind(this));
|
2015-10-10 23:53:48 +03:00
|
|
|
$.subscribe(Events.DIALOG_HIDE, this.hideDialog.bind(this));
|
2014-03-30 04:59:14 +04:00
|
|
|
|
2015-10-10 20:32:25 +03:00
|
|
|
var createPaletteShortcut = pskl.service.keyboard.Shortcuts.COLOR.CREATE_PALETTE;
|
|
|
|
pskl.app.shortcutService.registerShortcut(createPaletteShortcut, this.onCreatePaletteShortcut_.bind(this));
|
2014-09-27 13:04:03 +04:00
|
|
|
|
2015-10-10 23:53:48 +03:00
|
|
|
var cheatsheetShortcut = pskl.service.keyboard.Shortcuts.MISC.CHEATSHEET;
|
|
|
|
pskl.app.shortcutService.registerShortcut(cheatsheetShortcut, this.onCheatsheetShortcut_.bind(this));
|
|
|
|
pskl.utils.Event.addEventListener('.cheatsheet-link', 'click', this.onCheatsheetShortcut_, this);
|
|
|
|
|
|
|
|
// adding the .animated class here instead of in the markup to avoid an animation during app startup
|
2014-07-12 23:14:07 +04:00
|
|
|
this.dialogWrapper_.classList.add('animated');
|
2016-10-02 01:56:13 +03:00
|
|
|
pskl.utils.Event.addEventListener(this.dialogWrapper_, 'click', this.onWrapperClicked_, this);
|
2014-03-26 10:41:45 +04:00
|
|
|
};
|
|
|
|
|
2015-10-10 20:32:25 +03:00
|
|
|
ns.DialogsController.prototype.onCreatePaletteShortcut_ = function () {
|
2015-10-10 23:53:48 +03:00
|
|
|
this.toggleDialog_('create-palette');
|
2015-10-10 20:32:25 +03:00
|
|
|
};
|
|
|
|
|
2015-10-10 23:53:48 +03:00
|
|
|
ns.DialogsController.prototype.onCheatsheetShortcut_ = function () {
|
|
|
|
this.toggleDialog_('cheatsheet');
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* If no dialog is currently displayed, the dialog with the provided id will be displayed.
|
|
|
|
* If a dialog is displayed and has the same id as the provided id, hide it.
|
|
|
|
* Otherwise, no-op.
|
|
|
|
*/
|
|
|
|
ns.DialogsController.prototype.toggleDialog_ = function (dialogId) {
|
|
|
|
if (!this.isDisplayingDialog_()) {
|
|
|
|
this.showDialog(dialogId);
|
|
|
|
} else if (this.getCurrentDialogId_() === dialogId) {
|
|
|
|
this.hideDialog();
|
2014-03-26 10:41:45 +04:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-10-10 23:53:48 +03:00
|
|
|
ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, args) {
|
|
|
|
this.showDialog(args.dialogId, args.initArgs);
|
2014-03-26 10:41:45 +04:00
|
|
|
};
|
|
|
|
|
2016-10-02 01:56:13 +03:00
|
|
|
ns.DialogsController.prototype.onWrapperClicked_ = function (evt) {
|
|
|
|
if (evt.target === this.dialogWrapper_) {
|
|
|
|
this.hideDialog();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-10-10 23:53:48 +03:00
|
|
|
ns.DialogsController.prototype.showDialog = function (dialogId, initArgs) {
|
|
|
|
if (this.isDisplayingDialog_()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var config = dialogs[dialogId];
|
|
|
|
if (!config) {
|
|
|
|
console.error('Could not find dialog configuration for dialogId : ' + dialogId);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.dialogContainer_.classList.add(dialogId);
|
|
|
|
|
|
|
|
this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
|
|
|
|
var controller = new config.controller(this.piskelController);
|
|
|
|
controller.init(initArgs);
|
|
|
|
|
|
|
|
this.currentDialog_ = {
|
|
|
|
id : dialogId,
|
|
|
|
controller : controller
|
|
|
|
};
|
|
|
|
|
2015-10-10 20:32:25 +03:00
|
|
|
pskl.app.shortcutService.registerShortcut(this.closePopupShortcut, this.hideDialog.bind(this));
|
2014-03-30 18:20:58 +04:00
|
|
|
this.dialogWrapper_.classList.add('show');
|
2014-03-26 10:41:45 +04:00
|
|
|
};
|
|
|
|
|
2014-03-29 21:35:56 +04:00
|
|
|
ns.DialogsController.prototype.hideDialog = function () {
|
2015-10-10 23:53:48 +03:00
|
|
|
if (this.isHiding_ || !this.isDisplayingDialog_()) {
|
|
|
|
return;
|
2014-03-30 18:20:58 +04:00
|
|
|
}
|
|
|
|
|
2015-10-10 20:32:25 +03:00
|
|
|
pskl.app.shortcutService.unregisterShortcut(this.closePopupShortcut);
|
2014-03-30 18:20:58 +04:00
|
|
|
this.dialogWrapper_.classList.remove('show');
|
2015-10-10 23:53:48 +03:00
|
|
|
window.setTimeout(this.cleanupDialogContainer_.bind(this), 500);
|
|
|
|
this.isHiding_ = true;
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.DialogsController.prototype.cleanupDialogContainer_ = function () {
|
|
|
|
this.dialogContainer_.classList.remove(this.currentDialog_.id);
|
|
|
|
this.currentDialog_.controller.destroy();
|
|
|
|
this.currentDialog_ = null;
|
|
|
|
|
|
|
|
this.dialogContainer_.innerHTML = '';
|
|
|
|
this.isHiding_ = false;
|
2014-03-26 10:41:45 +04:00
|
|
|
};
|
|
|
|
|
2015-10-10 23:53:48 +03:00
|
|
|
ns.DialogsController.prototype.isDisplayingDialog_ = function () {
|
2014-03-29 21:35:56 +04:00
|
|
|
return this.currentDialog_ !== null;
|
|
|
|
};
|
|
|
|
|
2015-10-10 23:53:48 +03:00
|
|
|
ns.DialogsController.prototype.getCurrentDialogId_ = function () {
|
|
|
|
if (this.currentDialog_) {
|
|
|
|
return this.currentDialog_.id;
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
2015-04-14 19:02:33 +03:00
|
|
|
})();
|