2016-08-17 06:01:20 +08:00
|
|
|
import ko from 'ko';
|
|
|
|
|
2022-02-17 16:36:29 +08:00
|
|
|
import { inFocus } from 'Common/Utils';
|
|
|
|
import { addObservablesTo, addComputablesTo, addSubscribablesTo } from 'External/ko';
|
2021-03-16 23:06:16 +08:00
|
|
|
import { Scope } from 'Common/Enums';
|
2021-11-08 04:19:48 +08:00
|
|
|
import { keyScope, Settings, leftPanelDisabled } from 'Common/Globals';
|
2022-02-07 22:20:39 +08:00
|
|
|
import { ViewType, showScreenPopup } from 'Knoin/Knoin';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
class AbstractView {
|
2021-09-23 15:41:02 +08:00
|
|
|
constructor(templateID, type)
|
2021-01-24 17:25:23 +08:00
|
|
|
{
|
2021-10-11 20:31:54 +08:00
|
|
|
// Object.defineProperty(this, 'viewModelTemplateID', { value: templateID });
|
|
|
|
this.viewModelTemplateID = templateID;
|
2021-09-23 02:17:44 +08:00
|
|
|
this.viewType = type;
|
|
|
|
this.viewModelDom = null;
|
2021-03-16 23:06:16 +08:00
|
|
|
|
2021-09-23 02:17:44 +08:00
|
|
|
this.keyScope = {
|
|
|
|
scope: Scope.None,
|
|
|
|
previous: Scope.None,
|
|
|
|
set: function() {
|
|
|
|
this.previous = keyScope();
|
|
|
|
keyScope(this.scope);
|
|
|
|
},
|
|
|
|
unset: function() {
|
|
|
|
keyScope(this.previous);
|
|
|
|
}
|
|
|
|
};
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
|
|
|
|
2021-09-23 02:17:44 +08:00
|
|
|
/*
|
|
|
|
onBuild() {}
|
2022-02-25 19:11:32 +08:00
|
|
|
onBeforeShow() {} // Happens before: hidden = false
|
|
|
|
onShow() {} // Happens after: hidden = false
|
2021-09-23 02:17:44 +08:00
|
|
|
onHide() {}
|
|
|
|
*/
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
querySelector(selectors) {
|
|
|
|
return this.viewModelDom.querySelector(selectors);
|
|
|
|
}
|
|
|
|
|
|
|
|
addObservables(observables) {
|
2021-03-16 17:59:47 +08:00
|
|
|
addObservablesTo(this, observables);
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
addComputables(computables) {
|
2021-03-16 17:59:47 +08:00
|
|
|
addComputablesTo(this, computables);
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
addSubscribables(subscribables) {
|
2021-03-16 17:59:47 +08:00
|
|
|
addSubscribablesTo(this, subscribables);
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export class AbstractViewPopup extends AbstractView
|
|
|
|
{
|
|
|
|
constructor(name)
|
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
super('Popups' + name, ViewType.Popup);
|
2022-02-25 05:40:17 +08:00
|
|
|
this.keyScope.scope = name;
|
2021-11-07 05:08:45 +08:00
|
|
|
this.modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
|
2022-02-25 05:40:17 +08:00
|
|
|
shortcuts.add('escape,close', '', name, () => {
|
|
|
|
if (this.modalVisibility() && this.onClose()) {
|
|
|
|
this.closeCommand();
|
|
|
|
return false;
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
|
|
|
return true;
|
|
|
|
});
|
2022-02-25 05:40:17 +08:00
|
|
|
shortcuts.add('backspace', '', name, inFocus());
|
|
|
|
}
|
|
|
|
|
2022-02-25 20:13:09 +08:00
|
|
|
// Happens when user hits Escape or Close key
|
2022-02-25 05:40:17 +08:00
|
|
|
onClose() {
|
2022-02-25 20:13:09 +08:00
|
|
|
return true; // false to prevent closing
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2022-02-25 05:40:17 +08:00
|
|
|
|
|
|
|
/*
|
2022-02-25 19:11:32 +08:00
|
|
|
onBeforeShow() {} // Happens before showModal()
|
|
|
|
onShow() {} // Happens after showModal()
|
|
|
|
afterShow() {} // Happens after showModal() animation transitionend
|
|
|
|
onHide() {} // Happens before animation transitionend
|
|
|
|
afterHide() {} // Happens after animation transitionend
|
2022-02-25 05:40:17 +08:00
|
|
|
|
|
|
|
closeCommand() {}
|
|
|
|
*/
|
2021-01-24 17:25:23 +08:00
|
|
|
}
|
2022-02-07 22:20:39 +08:00
|
|
|
|
|
|
|
AbstractViewPopup.showModal = function(params = []) {
|
2022-02-04 16:49:55 +08:00
|
|
|
showScreenPopup(this, params);
|
|
|
|
}
|
2022-02-07 22:20:39 +08:00
|
|
|
|
2022-02-04 16:49:55 +08:00
|
|
|
AbstractViewPopup.hidden = function() {
|
|
|
|
return !this.__vm || !this.__vm.modalVisibility();
|
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
export class AbstractViewCenter extends AbstractView
|
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
constructor(templateID)
|
2021-01-24 17:25:23 +08:00
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
super(templateID, ViewType.Content);
|
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
|
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
constructor(templateID)
|
2021-01-24 17:25:23 +08:00
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
super(templateID, ViewType.Left);
|
2021-11-08 04:19:48 +08:00
|
|
|
this.leftPanelDisabled = leftPanelDisabled;
|
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
|
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
constructor(templateID)
|
2021-01-24 17:25:23 +08:00
|
|
|
{
|
2021-09-23 15:41:02 +08:00
|
|
|
super(templateID, ViewType.Right);
|
2020-10-26 19:54:03 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2021-09-23 02:17:44 +08:00
|
|
|
|
|
|
|
/*
|
|
|
|
export class AbstractViewSettings
|
|
|
|
{
|
|
|
|
onBuild(viewModelDom) {}
|
|
|
|
onBeforeShow() {}
|
|
|
|
onShow() {}
|
|
|
|
onHide() {}
|
|
|
|
viewModelDom
|
|
|
|
}
|
|
|
|
*/
|
2021-11-08 00:06:08 +08:00
|
|
|
|
|
|
|
export class AbstractViewLogin extends AbstractViewCenter {
|
|
|
|
constructor(templateID) {
|
|
|
|
super(templateID);
|
|
|
|
this.hideSubmitButton = Settings.app('hideSubmitButton');
|
|
|
|
this.formError = ko.observable(false).extend({ falseTimeout: 500 });
|
|
|
|
}
|
|
|
|
|
|
|
|
onBuild(dom) {
|
|
|
|
dom.classList.add('LoginView');
|
|
|
|
}
|
|
|
|
|
|
|
|
onShow() {
|
|
|
|
rl.route.off();
|
|
|
|
}
|
|
|
|
|
|
|
|
submitForm() {
|
|
|
|
// return false;
|
|
|
|
}
|
|
|
|
}
|