2016-08-17 06:01:20 +08:00
|
|
|
import ko from 'ko';
|
|
|
|
|
2020-08-19 02:24:17 +08:00
|
|
|
import { inFocus } from 'Common/Utils';
|
2020-09-17 23:47:35 +08:00
|
|
|
import { KeyState } from 'Common/Enums';
|
2020-07-15 20:25:51 +08:00
|
|
|
import { keyScope } from 'Common/Globals';
|
2021-01-24 17:25:23 +08:00
|
|
|
import { ViewType } from 'Knoin/Knoin';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
class AbstractView {
|
2016-09-10 06:38:16 +08:00
|
|
|
bDisabeCloseOnEsc = false;
|
|
|
|
sDefaultKeyScope = KeyState.None;
|
|
|
|
sCurrentKeyScope = KeyState.None;
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2020-10-02 18:40:33 +08:00
|
|
|
viewModelVisible = false;
|
2019-07-05 03:19:24 +08:00
|
|
|
modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2016-09-10 06:38:16 +08:00
|
|
|
viewModelName = '';
|
|
|
|
viewModelDom = null;
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
constructor(name, templateID, type)
|
|
|
|
{
|
|
|
|
this.viewModelName = 'View/' + name;
|
|
|
|
this.viewModelTemplateID = templateID;
|
|
|
|
this.viewModelPosition = type;
|
|
|
|
}
|
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
/**
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
storeAndSetKeyScope() {
|
|
|
|
this.sCurrentKeyScope = keyScope();
|
|
|
|
keyScope(this.sDefaultKeyScope);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
restoreKeyScope() {
|
|
|
|
keyScope(this.sCurrentKeyScope);
|
|
|
|
}
|
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
cancelCommand() {} // eslint-disable-line no-empty-function
|
|
|
|
closeCommand() {} // eslint-disable-line no-empty-function
|
|
|
|
|
|
|
|
querySelector(selectors) {
|
|
|
|
return this.viewModelDom.querySelector(selectors);
|
|
|
|
}
|
|
|
|
|
|
|
|
addObservables(observables) {
|
|
|
|
ko.addObservablesTo(this, observables);
|
|
|
|
}
|
|
|
|
|
|
|
|
addComputables(computables) {
|
|
|
|
ko.addComputablesTo(this, computables);
|
|
|
|
}
|
|
|
|
|
|
|
|
addSubscribables(subscribables) {
|
|
|
|
ko.addSubscribablesTo(this, subscribables);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export class AbstractViewPopup extends AbstractView
|
|
|
|
{
|
|
|
|
constructor(name)
|
|
|
|
{
|
|
|
|
super('Popup/' + name, 'Popups' + name, ViewType.Popup);
|
|
|
|
}
|
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
/**
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
registerPopupKeyDown() {
|
2020-09-17 23:47:35 +08:00
|
|
|
addEventListener('keydown', event => {
|
2019-07-05 03:19:24 +08:00
|
|
|
if (event && this.modalVisibility && this.modalVisibility()) {
|
2020-09-17 23:47:35 +08:00
|
|
|
if (!this.bDisabeCloseOnEsc && 'Escape' == event.key) {
|
2020-08-19 02:24:17 +08:00
|
|
|
this.cancelCommand && this.cancelCommand();
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
2020-09-17 23:47:35 +08:00
|
|
|
} else if ('Backspace' == event.key && !inFocus()) {
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
});
|
|
|
|
}
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
export class AbstractViewCenter extends AbstractView
|
|
|
|
{
|
|
|
|
constructor(name, templateID)
|
|
|
|
{
|
|
|
|
super(name, templateID, ViewType.Center);
|
2020-10-26 19:54:03 +08:00
|
|
|
}
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
2020-10-26 19:54:03 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
export class AbstractViewLeft extends AbstractView
|
|
|
|
{
|
|
|
|
constructor(name, templateID)
|
|
|
|
{
|
|
|
|
super(name, templateID, ViewType.Left);
|
2020-10-26 19:54:03 +08:00
|
|
|
}
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
2020-10-26 19:54:03 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
export class AbstractViewRight extends AbstractView
|
|
|
|
{
|
|
|
|
constructor(name, templateID)
|
|
|
|
{
|
|
|
|
super(name, templateID, ViewType.Right);
|
2020-10-26 19:54:03 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|