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 2021-09-22 20:17:44 +02:00
parent 11f69ef9e4
commit 8be4c384bb
27 changed files with 136 additions and 196 deletions

View file

@ -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;
}
}
}

View file

@ -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
}
*/

View file

@ -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);

View file

@ -22,22 +22,14 @@ export class AbstractSettingsScreen extends AbstractScreen {
this.setupSettings();
}
/**
* @param {Function=} fCallback
*/
setupSettings(fCallback = null) {
fCallback && fCallback();
}
setupSettings() {}
onRoute(subName) {
let settingsScreen = null,
RoutedSettingsViewModel = null,
viewModelDom = null;
RoutedSettingsViewModel = VIEW_MODELS.find(
SettingsViewModel =>
SettingsViewModel && SettingsViewModel.__rlSettingsData && subName === SettingsViewModel.__rlSettingsData.Route
);
viewModelDom = null,
RoutedSettingsViewModel = VIEW_MODELS.find(
SettingsViewModel => subName === SettingsViewModel.__rlSettingsData.route
);
if (RoutedSettingsViewModel) {
if (RoutedSettingsViewModel.__builded && RoutedSettingsViewModel.__vm) {
@ -47,23 +39,20 @@ export class AbstractSettingsScreen extends AbstractScreen {
if (vmPlace) {
settingsScreen = new RoutedSettingsViewModel();
viewModelDom = Element.fromHTML('<div class="rl-settings-view-model" hidden=""></div>');
viewModelDom = Element.fromHTML('<div hidden=""></div>');
vmPlace.append(viewModelDom);
settingsScreen.viewModelDom = viewModelDom;
settingsScreen.__rlSettingsData = RoutedSettingsViewModel.__rlSettingsData;
RoutedSettingsViewModel.__dom = viewModelDom;
RoutedSettingsViewModel.__builded = true;
RoutedSettingsViewModel.__vm = settingsScreen;
const tmpl = { name: RoutedSettingsViewModel.__rlSettingsData.Template };
ko.applyBindingAccessorsToNode(
viewModelDom,
{
i18nInit: true,
template: () => tmpl
template: () => ({ name: RoutedSettingsViewModel.__rlSettingsData.template })
},
settingsScreen
);
@ -75,33 +64,25 @@ export class AbstractSettingsScreen extends AbstractScreen {
}
if (settingsScreen) {
const o = this;
setTimeout(() => {
// hide
if (o.oCurrentSubScreen) {
o.oCurrentSubScreen.onHide && o.oCurrentSubScreen.onHide();
o.oCurrentSubScreen.viewModelDom.hidden = true;
}
this.onHide();
// --
o.oCurrentSubScreen = settingsScreen;
this.oCurrentSubScreen = settingsScreen;
// show
if (o.oCurrentSubScreen) {
o.oCurrentSubScreen.onBeforeShow && o.oCurrentSubScreen.onBeforeShow();
o.oCurrentSubScreen.viewModelDom.hidden = false;
o.oCurrentSubScreen.onShow && o.oCurrentSubScreen.onShow();
settingsScreen.onBeforeShow && settingsScreen.onBeforeShow();
settingsScreen.viewModelDom.hidden = false;
settingsScreen.onShow && settingsScreen.onShow();
o.menu.forEach(item => {
item.selected(
settingsScreen &&
settingsScreen.__rlSettingsData &&
item.route === settingsScreen.__rlSettingsData.Route
);
});
this.menu.forEach(item => {
item.selected(
item.route === RoutedSettingsViewModel.__rlSettingsData.route
);
});
doc.querySelector('#rl-content .b-settings .b-content').scrollTop = 0;
}
doc.querySelector('#rl-content .b-settings .b-content').scrollTop = 0;
// --
}, 1);
}
@ -111,34 +92,23 @@ export class AbstractSettingsScreen extends AbstractScreen {
}
onHide() {
if (this.oCurrentSubScreen && this.oCurrentSubScreen.viewModelDom) {
this.oCurrentSubScreen.onHide && this.oCurrentSubScreen.onHide();
this.oCurrentSubScreen.viewModelDom.hidden = true;
let subScreen = this.oCurrentSubScreen;
if (subScreen) {
subScreen.onHide && subScreen.onHide();
subScreen.viewModelDom.hidden = true;
}
}
onBuild() {
VIEW_MODELS.forEach(SettingsViewModel => {
if (
SettingsViewModel &&
SettingsViewModel.__rlSettingsData
) {
this.menu.push({
route: SettingsViewModel.__rlSettingsData.Route,
label: SettingsViewModel.__rlSettingsData.Label,
selected: ko.observable(false)
});
}
});
VIEW_MODELS.forEach(SettingsViewModel => this.menu.push(SettingsViewModel.__rlSettingsData));
}
routes() {
const DefaultViewModel = VIEW_MODELS.find(
SettingsViewModel =>
SettingsViewModel && SettingsViewModel.__rlSettingsData && SettingsViewModel.__rlSettingsData.IsDefault
SettingsViewModel => SettingsViewModel.__rlSettingsData.isDefault
),
defaultRoute =
DefaultViewModel && DefaultViewModel.__rlSettingsData ? DefaultViewModel.__rlSettingsData.Route : 'general',
DefaultViewModel ? DefaultViewModel.__rlSettingsData.route : 'general',
rules = {
subname: /^(.*)$/,
normalize_: (rquest, vals) => {
@ -165,10 +135,11 @@ export class AbstractSettingsScreen extends AbstractScreen {
*/
export function settingsAddViewModel(SettingsViewModelClass, template, labelName, route, isDefault = false) {
SettingsViewModelClass.__rlSettingsData = {
Label: labelName,
Template: template,
Route: route,
IsDefault: !!isDefault
label: labelName,
route: route,
selected: ko.observable(false),
template: template,
isDefault: !!isDefault
};
VIEW_MODELS.push(SettingsViewModelClass);

View file

@ -19,10 +19,7 @@ export class SettingsAdminScreen extends AbstractSettingsScreen {
super([MenuSettingsAdminView, PaneSettingsAdminView]);
}
/**
* @param {Function=} fCallback = null
*/
setupSettings(fCallback = null) {
setupSettings() {
settingsAddViewModel(
GeneralAdminSettings,
'AdminSettingsGeneral',
@ -49,8 +46,6 @@ export class SettingsAdminScreen extends AbstractSettingsScreen {
);
runSettingsViewModelHooks(true);
fCallback && fCallback();
}
onShow() {

View file

@ -32,13 +32,8 @@ export class SettingsUserScreen extends AbstractSettingsScreen {
);
}
/**
* @param {Function=} fCallback
*/
setupSettings(fCallback = null) {
setupSettings() {
if (!Settings.capa(Capa.Settings)) {
fCallback && fCallback();
return false;
}
@ -79,8 +74,6 @@ export class SettingsUserScreen extends AbstractSettingsScreen {
runSettingsViewModelHooks(false);
fCallback && fCallback();
return true;
}

View file

@ -1,7 +1,7 @@
import ko from 'ko';
import { Settings } from 'Common/Globals';
export class AboutAdminSettings {
export class AboutAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.version = ko.observable(Settings.app('version'));
}

View file

@ -5,7 +5,7 @@ import { settingsSaveHelperSimpleFunction } from 'Common/Utils';
import Remote from 'Remote/Admin/Fetch';
export class BrandingAdminSettings {
export class BrandingAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.title = ko.observable(SettingsGet('Title')).idleTrigger();
this.loadingDesc = ko.observable(SettingsGet('LoadingDescription')).idleTrigger();

View file

@ -12,7 +12,7 @@ import {
import Remote from 'Remote/Admin/Fetch';
import { decorateKoCommands } from 'Knoin/Knoin';
export class ContactsAdminSettings {
export class ContactsAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.defaultOptionsAfterRender = defaultOptionsAfterRender;

View file

@ -8,7 +8,7 @@ import Remote from 'Remote/Admin/Fetch';
import { DomainPopupView } from 'View/Popup/Domain';
import { DomainAliasPopupView } from 'View/Popup/DomainAlias';
export class DomainsAdminSettings {
export class DomainsAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.domains = DomainAdminStore;

View file

@ -23,7 +23,7 @@ import { ThemeStore } from 'Stores/Theme';
import { LanguageStore } from 'Stores/Language';
import LanguagesPopupView from 'View/Popup/Languages';
export class GeneralAdminSettings {
export class GeneralAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.language = LanguageStore.language;
this.languages = LanguageStore.languages;

View file

@ -5,7 +5,7 @@ import { settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo
import Remote from 'Remote/Admin/Fetch';
export class LoginAdminSettings {
export class LoginAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
addObservablesTo(this, {
determineUserLanguage: !!SettingsGet('DetermineUserLanguage'),

View file

@ -11,7 +11,7 @@ import { PluginPopupView } from 'View/Popup/Plugin';
import { SettingsGet } from 'Common/Globals';
import { addComputablesTo } from 'Common/Utils';
export class PackagesAdminSettings {
export class PackagesAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.packagesError = ko.observable('');

View file

@ -6,7 +6,7 @@ import Remote from 'Remote/Admin/Fetch';
import { decorateKoCommands } from 'Knoin/Knoin';
export class SecurityAdminSettings {
export class SecurityAdminSettings /*extends AbstractViewSettings*/ {
constructor() {
this.weakPassword = rl.app.weakPassword;

View file

@ -12,7 +12,7 @@ import { showScreenPopup } from 'Knoin/Knoin';
import { AccountPopupView } from 'View/Popup/Account';
import { IdentityPopupView } from 'View/Popup/Identity';
export class AccountsUserSettings {
export class AccountsUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.allowAdditionalAccount = Settings.capa(Capa.AdditionalAccounts);
this.allowIdentities = Settings.capa(Capa.Identities);

View file

@ -4,7 +4,7 @@ import { SettingsGet } from 'Common/Globals';
import { ContactUserStore } from 'Stores/User/Contact';
import Remote from 'Remote/User/Fetch';
export class ContactsUserSettings {
export class ContactsUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.contactsAutosave = ko.observable(!!SettingsGet('ContactsAutosave'));

View file

@ -13,7 +13,7 @@ import { showScreenPopup } from 'Knoin/Knoin';
import { SieveScriptPopupView } from 'View/Popup/SieveScript';
export class FiltersUserSettings {
export class FiltersUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.scripts = SieveUserStore.scripts;
this.loading = ko.observable(false).extend({ debounce: 200 });

View file

@ -19,7 +19,7 @@ import { showScreenPopup } from 'Knoin/Knoin';
import { FolderCreatePopupView } from 'View/Popup/FolderCreate';
import { FolderSystemPopupView } from 'View/Popup/FolderSystem';
export class FoldersUserSettings {
export class FoldersUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.displaySpecSetting = FolderUserStore.displaySpecSetting;
this.folderList = FolderUserStore.folderList;

View file

@ -20,7 +20,7 @@ import Remote from 'Remote/User/Fetch';
import { IdentityPopupView } from 'View/Popup/Identity';
import { LanguagesPopupView } from 'View/Popup/Languages';
export class GeneralUserSettings {
export class GeneralUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.language = LanguageStore.language;
this.languages = LanguageStore.languages;

View file

@ -13,7 +13,7 @@ import { AddOpenPgpKeyPopupView } from 'View/Popup/AddOpenPgpKey';
import { NewOpenPgpKeyPopupView } from 'View/Popup/NewOpenPgpKey';
import { ViewOpenPgpKeyPopupView } from 'View/Popup/ViewOpenPgpKey';
export class OpenPgpUserSettings {
export class OpenPgpUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.openpgpkeys = PgpUserStore.openpgpkeys;
this.openpgpkeysPublic = PgpUserStore.openpgpkeysPublic;

View file

@ -9,7 +9,7 @@ import { SettingsUserStore } from 'Stores/User/Settings';
import Remote from 'Remote/User/Fetch';
export class SecurityUserSettings {
export class SecurityUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.capaAutoLogout = Settings.capa(Capa.AutoLogout);

View file

@ -10,7 +10,7 @@ import { ThemeStore } from 'Stores/Theme';
import Remote from 'Remote/User/Fetch';
export class ThemesUserSettings {
export class ThemesUserSettings /*extends AbstractViewSettings*/ {
constructor() {
this.theme = ThemeStore.theme;
this.themes = ThemeStore.themes;

View file

@ -80,7 +80,7 @@
}
}
html.rl-mobile .rl-settings-view-model {
html.rl-mobile #rl-settings-subscreen > * {
margin-right: 15px;
}

View file

@ -29,7 +29,7 @@ class PluginPopupView extends AbstractViewPopup {
});
this.bDisabeCloseOnEsc = true;
this.sDefaultScope = Scope.All;
this.keyScope.scope = Scope.All;
this.tryToClosePopup = this.tryToClosePopup.debounce(200);

View file

@ -88,7 +88,7 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
onBuild() {
shortcuts.add('m,contextmenu', '', [Scope.MessageList, Scope.MessageView, Scope.Settings], () => {
if (this.viewModelVisible) {
if (!this.viewModelDom.hidden) {
MessageUserStore.messageFullScreenMode(false);
this.accountMenuDropdownTrigger(true);
return false;
@ -97,7 +97,7 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
// shortcuts help
shortcuts.add('?,f1,help', '', [Scope.MessageList, Scope.MessageView, Scope.Settings], () => {
if (this.viewModelVisible) {
if (!this.viewModelDom.hidden) {
showScreenPopup(KeyboardShortcutsHelpPopupView);
return false;
}

View file

@ -877,7 +877,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
}
prefetchNextTick() {
if (!this.bPrefetch && !ifvisible.now() && this.viewModelVisible) {
if (!this.bPrefetch && !ifvisible.now() && !this.viewModelDom.hidden) {
const message = MessageUserStore.list.find(
item => item && !hasRequestedMessage(item.folder, item.uid)
);

View file

@ -419,7 +419,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
// exit fullscreen, back
shortcuts.add('escape,backspace', '', Scope.MessageView, () => {
if (this.viewModelVisible && MessageUserStore.message()) {
if (!this.viewModelDom.hidden && MessageUserStore.message()) {
const preview = SettingsUserStore.usePreviewPane();
if (this.fullScreenMode()) {
this.fullScreenMode(false);