mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-31 21:19:21 +03:00
Improved AbstractScreen properties
Improved settings screens Views: * sDefaultScope & sCurrentScope to sub-class keyScope * drop viewModelVisible * rename viewModelTemplateID to templateID * rename viewModelPosition to viewType
This commit is contained in:
djmaze
parent
11f69ef9e4
commit
8be4c384bb
27 changed files with 136 additions and 196 deletions
|
|
@ -2,23 +2,9 @@ import { isArray, arrayLength } from 'Common/Utils';
|
|||
|
||||
export class AbstractScreen {
|
||||
constructor(screenName, viewModels = []) {
|
||||
this.oCross = null;
|
||||
this.sScreenName = screenName;
|
||||
this.aViewModels = isArray(viewModels) ? viewModels : [];
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Array}
|
||||
*/
|
||||
get viewModels() {
|
||||
return this.aViewModels;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
screenName() {
|
||||
return this.sScreenName;
|
||||
this.__cross = null;
|
||||
this.screenName = screenName;
|
||||
this.viewModels = isArray(viewModels) ? viewModels : [];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -28,12 +14,13 @@ export class AbstractScreen {
|
|||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {?Object}
|
||||
*/
|
||||
get __cross() {
|
||||
return this.oCross;
|
||||
}
|
||||
/*
|
||||
onBuild(viewModelDom) {}
|
||||
onShow() {}
|
||||
onHide() {}
|
||||
__started
|
||||
__builded
|
||||
*/
|
||||
|
||||
/**
|
||||
* @returns {void}
|
||||
|
|
@ -48,7 +35,7 @@ export class AbstractScreen {
|
|||
|
||||
routes.forEach(item => item && route && (route.addRoute(item[0], fMatcher).rules = item[1]));
|
||||
|
||||
this.oCross = route;
|
||||
this.__cross = route;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,32 +8,32 @@ import { ViewType } from 'Knoin/Knoin';
|
|||
class AbstractView {
|
||||
constructor(name, templateID, type)
|
||||
{
|
||||
this.viewModelTemplateID = templateID;
|
||||
this.viewModelPosition = type;
|
||||
// Object.defineProperty(this, 'templateId', { value: templateID });
|
||||
this.templateId = templateID;
|
||||
this.viewType = type;
|
||||
this.viewModelDom = null;
|
||||
|
||||
this.sDefaultScope = Scope.None;
|
||||
this.sCurrentScope = Scope.None;
|
||||
|
||||
this.viewModelVisible = false;
|
||||
this.modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
|
||||
|
||||
this.viewModelDom = null;
|
||||
this.keyScope = {
|
||||
scope: Scope.None,
|
||||
previous: Scope.None,
|
||||
set: function() {
|
||||
this.previous = keyScope();
|
||||
keyScope(this.scope);
|
||||
},
|
||||
unset: function() {
|
||||
keyScope(this.previous);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {void}
|
||||
*/
|
||||
storeAndSetScope() {
|
||||
this.sCurrentScope = keyScope();
|
||||
keyScope(this.sDefaultScope);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {void}
|
||||
*/
|
||||
restoreScope() {
|
||||
keyScope(this.sCurrentScope);
|
||||
}
|
||||
/*
|
||||
onBuild() {}
|
||||
onBeforeShow() {}
|
||||
onShow() {}
|
||||
onHide() {}
|
||||
*/
|
||||
|
||||
querySelector(selectors) {
|
||||
return this.viewModelDom.querySelector(selectors);
|
||||
|
|
@ -59,11 +59,14 @@ export class AbstractViewPopup extends AbstractView
|
|||
{
|
||||
super('Popup/' + name, 'Popups' + name, ViewType.Popup);
|
||||
if (name in Scope) {
|
||||
this.sDefaultScope = Scope[name];
|
||||
this.keyScope.scope = Scope[name];
|
||||
}
|
||||
this.bDisabeCloseOnEsc = false;
|
||||
}
|
||||
/*
|
||||
onShowWithDelay() {}
|
||||
onHideWithDelay() {}
|
||||
|
||||
cancelCommand() {}
|
||||
closeCommand() {}
|
||||
*/
|
||||
|
|
@ -109,3 +112,14 @@ export class AbstractViewRight extends AbstractView
|
|||
super(name, templateID, ViewType.Right);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
export class AbstractViewSettings
|
||||
{
|
||||
onBuild(viewModelDom) {}
|
||||
onBeforeShow() {}
|
||||
onShow() {}
|
||||
onHide() {}
|
||||
viewModelDom
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import ko from 'ko';
|
||||
|
||||
import { doc, $htmlCL } from 'Common/Globals';
|
||||
import { arrayLength, isFunction } from 'Common/Utils';
|
||||
import { isFunction } from 'Common/Utils';
|
||||
|
||||
let currentScreen = null,
|
||||
defaultScreenName = '';
|
||||
|
|
@ -29,14 +29,14 @@ const SCREENS = {},
|
|||
if (ViewModelClass && !ViewModelClass.__builded) {
|
||||
let vmDom = null;
|
||||
const vm = new ViewModelClass(vmScreen),
|
||||
position = vm.viewModelPosition || '',
|
||||
position = vm.viewType || '',
|
||||
vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
|
||||
|
||||
ViewModelClass.__builded = true;
|
||||
ViewModelClass.__vm = vm;
|
||||
|
||||
if (vmPlace) {
|
||||
vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.viewModelTemplateID + '" hidden=""></div>');
|
||||
vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.templateId + '" hidden=""></div>');
|
||||
vmPlace.append(vmDom);
|
||||
|
||||
vm.viewModelDom = vmDom;
|
||||
|
|
@ -65,7 +65,7 @@ const SCREENS = {},
|
|||
visiblePopups.add(vm);
|
||||
vmDom.style.zIndex = 3000 + visiblePopups.size + 10;
|
||||
vmDom.hidden = false;
|
||||
vm.storeAndSetScope();
|
||||
vm.keyScope.set();
|
||||
arePopupsVisible(true);
|
||||
requestAnimationFrame(() => { // wait just before the next paint
|
||||
vmDom.offsetHeight; // force a reflow
|
||||
|
|
@ -75,7 +75,7 @@ const SCREENS = {},
|
|||
visiblePopups.delete(vm);
|
||||
vm.onHide && vm.onHide();
|
||||
vmDom.classList.remove('show');
|
||||
vm.restoreScope();
|
||||
vm.keyScope.unset();
|
||||
arePopupsVisible(0 < visiblePopups.size);
|
||||
}
|
||||
vmDom.setAttribute('aria-hidden', !value);
|
||||
|
|
@ -92,7 +92,7 @@ const SCREENS = {},
|
|||
vmDom,
|
||||
{
|
||||
i18nInit: true,
|
||||
template: () => ({ name: vm.viewModelTemplateID })
|
||||
template: () => ({ name: vm.templateId })
|
||||
},
|
||||
vm
|
||||
);
|
||||
|
|
@ -111,6 +111,18 @@ const SCREENS = {},
|
|||
return ViewModelClass && ViewModelClass.__vm;
|
||||
},
|
||||
|
||||
forEachViewModel = (screen, fn) => {
|
||||
screen.viewModels.forEach(ViewModelClass => {
|
||||
if (
|
||||
ViewModelClass.__vm &&
|
||||
ViewModelClass.__dom &&
|
||||
ViewType.Popup !== ViewModelClass.__vm.viewType
|
||||
) {
|
||||
fn(ViewModelClass.__vm, ViewModelClass.__dom);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} screenName
|
||||
* @param {string} subPart
|
||||
|
|
@ -156,56 +168,30 @@ const SCREENS = {},
|
|||
// hide screen
|
||||
if (currentScreen && !isSameScreen) {
|
||||
currentScreen.onHide && currentScreen.onHide();
|
||||
currentScreen.onHideWithDelay && setTimeout(()=>currentScreen.onHideWithDelay(), 500);
|
||||
|
||||
if (arrayLength(currentScreen.viewModels)) {
|
||||
currentScreen.viewModels.forEach(ViewModelClass => {
|
||||
if (
|
||||
ViewModelClass.__vm &&
|
||||
ViewModelClass.__dom &&
|
||||
ViewType.Popup !== ViewModelClass.__vm.viewModelPosition
|
||||
) {
|
||||
ViewModelClass.__dom.hidden = true;
|
||||
ViewModelClass.__vm.viewModelVisible = false;
|
||||
|
||||
ViewModelClass.__vm.onHide && ViewModelClass.__vm.onHide();
|
||||
ViewModelClass.__vm.onHideWithDelay && setTimeout(()=>ViewModelClass.__vm.onHideWithDelay(), 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
forEachViewModel(currentScreen, (vm, dom) => {
|
||||
dom.hidden = true;
|
||||
vm.onHide && vm.onHide();
|
||||
});
|
||||
}
|
||||
// --
|
||||
|
||||
currentScreen = vmScreen;
|
||||
|
||||
// show screen
|
||||
if (currentScreen && !isSameScreen) {
|
||||
currentScreen.onShow && currentScreen.onShow();
|
||||
if (!isSameScreen) {
|
||||
vmScreen.onShow && vmScreen.onShow();
|
||||
|
||||
if (arrayLength(currentScreen.viewModels)) {
|
||||
currentScreen.viewModels.forEach(ViewModelClass => {
|
||||
if (
|
||||
ViewModelClass.__vm &&
|
||||
ViewModelClass.__dom &&
|
||||
ViewType.Popup !== ViewModelClass.__vm.viewModelPosition
|
||||
) {
|
||||
ViewModelClass.__vm.onBeforeShow && ViewModelClass.__vm.onBeforeShow();
|
||||
|
||||
ViewModelClass.__dom.hidden = false;
|
||||
ViewModelClass.__vm.viewModelVisible = true;
|
||||
|
||||
ViewModelClass.__vm.onShow && ViewModelClass.__vm.onShow();
|
||||
|
||||
autofocus(ViewModelClass.__dom);
|
||||
|
||||
ViewModelClass.__vm.onShowWithDelay && setTimeout(()=>ViewModelClass.__vm.onShowWithDelay, 200);
|
||||
}
|
||||
});
|
||||
}
|
||||
forEachViewModel(vmScreen, (vm, dom) => {
|
||||
vm.onBeforeShow && vm.onBeforeShow();
|
||||
dom.hidden = false;
|
||||
vm.onShow && vm.onShow();
|
||||
autofocus(dom);
|
||||
});
|
||||
}
|
||||
// --
|
||||
|
||||
vmScreen && vmScreen.__cross && vmScreen.__cross.parse(subPart);
|
||||
vmScreen.__cross && vmScreen.__cross.parse(subPart);
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -292,19 +278,13 @@ export const
|
|||
screensClasses.forEach(CScreen => {
|
||||
if (CScreen) {
|
||||
const vmScreen = new CScreen(),
|
||||
screenName = vmScreen && vmScreen.screenName();
|
||||
|
||||
if (screenName) {
|
||||
defaultScreenName || (defaultScreenName = screenName);
|
||||
|
||||
SCREENS[screenName] = vmScreen;
|
||||
}
|
||||
screenName = vmScreen.screenName;
|
||||
defaultScreenName || (defaultScreenName = screenName);
|
||||
SCREENS[screenName] = vmScreen;
|
||||
}
|
||||
});
|
||||
|
||||
Object.values(SCREENS).forEach(vmScreen =>
|
||||
vmScreen && vmScreen.onStart && vmScreen.onStart()
|
||||
);
|
||||
Object.values(SCREENS).forEach(vmScreen => vmScreen.onStart());
|
||||
|
||||
const cross = new Crossroads();
|
||||
cross.addRoute(/^([a-zA-Z0-9-]*)\/?(.*)$/, screenOnRoute);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue