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

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