Replace viewDecorator and popupDecorator with proper AbstractView classes

This commit is contained in:
djmaze 2021-01-24 10:25:23 +01:00
parent 51958babba
commit 864da66b5f
38 changed files with 202 additions and 359 deletions

View file

@ -3,8 +3,9 @@ import ko from 'ko';
import { inFocus } from 'Common/Utils';
import { KeyState } from 'Common/Enums';
import { keyScope } from 'Common/Globals';
import { ViewType } from 'Knoin/Knoin';
export class AbstractViewNext {
class AbstractView {
bDisabeCloseOnEsc = false;
sDefaultKeyScope = KeyState.None;
sCurrentKeyScope = KeyState.None;
@ -13,9 +14,15 @@ export class AbstractViewNext {
modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
viewModelName = '';
viewModelNames = [];
viewModelDom = null;
constructor(name, templateID, type)
{
this.viewModelName = 'View/' + name;
this.viewModelTemplateID = templateID;
this.viewModelPosition = type;
}
/**
* @returns {void}
*/
@ -31,24 +38,6 @@ export class AbstractViewNext {
keyScope(this.sCurrentKeyScope);
}
/**
* @returns {void}
*/
registerPopupKeyDown() {
addEventListener('keydown', event => {
if (event && this.modalVisibility && this.modalVisibility()) {
if (!this.bDisabeCloseOnEsc && 'Escape' == event.key) {
this.cancelCommand && this.cancelCommand();
return false;
} else if ('Backspace' == event.key && !inFocus()) {
return false;
}
}
return true;
});
}
cancelCommand() {} // eslint-disable-line no-empty-function
closeCommand() {} // eslint-disable-line no-empty-function
@ -69,3 +58,53 @@ export class AbstractViewNext {
}
}
export class AbstractViewPopup extends AbstractView
{
constructor(name)
{
super('Popup/' + name, 'Popups' + name, ViewType.Popup);
}
/**
* @returns {void}
*/
registerPopupKeyDown() {
addEventListener('keydown', event => {
if (event && this.modalVisibility && this.modalVisibility()) {
if (!this.bDisabeCloseOnEsc && 'Escape' == event.key) {
this.cancelCommand && this.cancelCommand();
return false;
} else if ('Backspace' == event.key && !inFocus()) {
return false;
}
}
return true;
});
}
}
export class AbstractViewCenter extends AbstractView
{
constructor(name, templateID)
{
super(name, templateID, ViewType.Center);
}
}
export class AbstractViewLeft extends AbstractView
{
constructor(name, templateID)
{
super(name, templateID, ViewType.Left);
}
}
export class AbstractViewRight extends AbstractView
{
constructor(name, templateID)
{
super(name, templateID, ViewType.Right);
}
}

View file

@ -105,17 +105,12 @@ function buildViewModel(ViewModelClass, vmScreen) {
if (ViewModelClass && !ViewModelClass.__builded) {
let vmDom = null;
const vm = new ViewModelClass(vmScreen),
position = ViewModelClass.__type || '',
position = vm.viewModelPosition || '',
vmPlace = position ? document.querySelector('#rl-content #rl-' + position.toLowerCase()) : null;
ViewModelClass.__builded = true;
ViewModelClass.__vm = vm;
vm.viewModelName = ViewModelClass.__name;
vm.viewModelNames = ViewModelClass.__names;
vm.viewModelTemplateID = ViewModelClass.__templateID;
vm.viewModelPosition = ViewModelClass.__type;
if (vmPlace) {
vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.viewModelTemplateID + '" hidden=""></div>');
vmPlace.append(vmDom);
@ -368,42 +363,6 @@ export function startScreens(screensClasses) {
setTimeout(() => $htmlCL.add('rl-started-delay'), 200);
}
/**
* @param {Object} params
* @returns {Function}
*/
function viewDecorator({ name, type, templateID }) {
return (target) => {
if (target) {
if (name) {
if (Array.isArray(name)) {
target.__names = name;
} else {
target.__names = [name];
}
target.__name = target.__names[0];
}
if (type) {
target.__type = type;
}
if (templateID) {
target.__templateID = templateID;
}
}
};
}
/**
* @param {Object} params
* @returns {Function}
*/
function popupDecorator({ name, templateID }) {
return viewDecorator({ name, type: ViewType.Popup, templateID });
}
/**
* @param {Function} canExecute
* @returns {Function}
@ -441,7 +400,7 @@ function settingsMenuKeysHandler(items) {
let index = items.length;
if (event && index) {
while (index-- && !items[index].matches('.selected'));
if (handler && 'up' === handler.shortcut) {
if (handler && 'arrowup' === handler.shortcut) {
index && --index;
} else if (index < items.length - 1) {
++index;
@ -456,9 +415,5 @@ function settingsMenuKeysHandler(items) {
export {
commandDecorator,
commandDecorator as command,
viewDecorator,
viewDecorator as view,
popupDecorator,
popupDecorator as popup,
settingsMenuKeysHandler
};