Get rid of i18nInit and improve i18nUpdate

This commit is contained in:
the-djmaze 2022-04-05 10:31:55 +02:00
parent 5b3dfc26de
commit 48974d1b5a
6 changed files with 38 additions and 43 deletions

4
dev/External/ko.js vendored
View file

@ -80,10 +80,6 @@ Object.assign(ko.bindingHandlers, {
}
},
i18nInit: {
init: element => i18nToNodes(element)
},
i18nUpdate: {
update: (element, fValueAccessor) => {
ko.unwrap(fValueAccessor());

View file

@ -2,6 +2,7 @@ import ko from 'ko';
import { koComputable } from 'External/ko';
import { doc, $htmlCL, elementById, fireEvent } from 'Common/Globals';
import { forEachObjectValue, forEachObjectEntry } from 'Common/Utils';
import { i18nToNodes } from 'Common/Translator';
let
SCREENS = {},
@ -86,6 +87,7 @@ const
vm.modalVisible.subscribe(value => {
if (value) {
i18nToNodes(vmDom);
visiblePopups.add(vm);
vmDom.style.zIndex = 3000 + (visiblePopups.size * 2);
vmDom.showModal();
@ -111,7 +113,6 @@ const
ko.applyBindingAccessorsToNode(
vmDom,
{
i18nInit: true,
template: () => ({ name: id })
},
vm
@ -215,6 +216,7 @@ const
forEachViewModel(vmScreen, (vm, dom) => {
vm.beforeShow && vm.beforeShow();
i18nToNodes(dom);
dom.hidden = false;
vm.onShow && vm.onShow();
autofocus(dom);

View file

@ -5,6 +5,7 @@ import { settings } from 'Common/Links';
import { createElement, elementById } from 'Common/Globals';
import { AbstractScreen } from 'Knoin/AbstractScreen';
import { i18nToNodes } from 'Common/Translator';
const VIEW_MODELS = [];
@ -28,36 +29,33 @@ export class AbstractSettingsScreen extends AbstractScreen {
);
if (RoutedSettingsViewModel) {
const vmPlace = elementById('rl-settings-subscreen');
if (RoutedSettingsViewModel.__vm) {
settingsScreen = RoutedSettingsViewModel.__vm;
} else if (vmPlace) {
viewModelDom = createElement('div',{
id: 'V-Settings-' + RoutedSettingsViewModel.name.replace(/(User|Admin)Settings/,''),
hidden: ''
})
vmPlace.append(viewModelDom);
settingsScreen = new RoutedSettingsViewModel();
settingsScreen.viewModelDom = viewModelDom;
RoutedSettingsViewModel.__dom = viewModelDom;
RoutedSettingsViewModel.__vm = settingsScreen;
ko.applyBindingAccessorsToNode(
viewModelDom,
{
template: () => ({ name: RoutedSettingsViewModel.__rlSettingsData.template })
},
settingsScreen
);
settingsScreen.onBuild && settingsScreen.onBuild(viewModelDom);
} else {
const vmPlace = elementById('rl-settings-subscreen');
if (vmPlace) {
viewModelDom = createElement('div',{
id: 'V-Settings-' + RoutedSettingsViewModel.name.replace(/(User|Admin)Settings/,''),
hidden: ''
})
vmPlace.append(viewModelDom);
settingsScreen = new RoutedSettingsViewModel();
settingsScreen.viewModelDom = viewModelDom;
RoutedSettingsViewModel.__dom = viewModelDom;
RoutedSettingsViewModel.__vm = settingsScreen;
ko.applyBindingAccessorsToNode(
viewModelDom,
{
i18nInit: true,
template: () => ({ name: RoutedSettingsViewModel.__rlSettingsData.template })
},
settingsScreen
);
settingsScreen.onBuild && settingsScreen.onBuild(viewModelDom);
} else {
console.log('Cannot find sub settings view model position: SettingsSubScreen');
}
console.log('Cannot find sub settings view model position: SettingsSubScreen');
}
if (settingsScreen) {
@ -70,6 +68,7 @@ export class AbstractSettingsScreen extends AbstractScreen {
// show
settingsScreen.beforeShow && settingsScreen.beforeShow();
i18nToNodes(settingsScreen.viewModelDom);
settingsScreen.viewModelDom.hidden = false;
settingsScreen.onShow && settingsScreen.onShow();
@ -79,7 +78,7 @@ export class AbstractSettingsScreen extends AbstractScreen {
);
});
(elementById('rl-settings-subscreen') || {}).scrollTop = 0;
(vmPlace || {}).scrollTop = 0;
// --
}, 1);
}

View file

@ -5,7 +5,7 @@
<span data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
</h3>
</header>
<div class="modal-body" data-bind="with: filter, i18nUpdate: filter">
<div class="modal-body" data-bind="with: filter">
<div class="control-group" data-bind="css: {'error': nameError}">
<input type="text" class="span5"
data-bind="value: name, hasfocus: nameFocused"
@ -37,7 +37,7 @@
<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
<div data-bind="template: {'name': actionTemplate()}, i18nUpdate: actionTemplate"></div>
<div data-bind="template: {'name': actionTemplate()}"></div>
</div>
<footer>
<a class="btn buttonSave" data-bind="click: saveFilter" data-icon="✔" data-i18n="GLOBAL/DONE"></a>

View file

@ -1,5 +1,5 @@
<!-- ko with: script -->
<header data-bind="i18nInit: true">
<header>
<a href="#" class="close" data-bind="click: $root.close">×</a>
<h3>
<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_CREATE" data-bind="visible: !exists()"></span>
@ -7,7 +7,7 @@
<span data-bind="visible: exists">: <!-- ko text: name--><!-- /ko --></span>
</h3>
</header>
<div class="modal-body" data-bind="i18nInit: true">
<div class="modal-body">
<div class="control-group" data-bind="css: {'error': nameError}, hidden: exists">
<input type="text" class="span5"
@ -39,8 +39,7 @@
<textarea style="width:100%;height:60vh" data-bind="value: body, valueUpdate: 'input'"></textarea>
</div>
<div data-bind="visible: !$root.rawActive()">
<table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="i18nUpdate: filters">
<table class="table table-hover list-table filters-list g-ui-user-select-none">
<colgroup>
<col style="width: 30px">
<col style="width: 16px">
@ -70,7 +69,7 @@
<a class="btn" data-bind="click: $root.addFilter" data-icon="✚" data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></a>
</div>
</div>
<footer data-bind="i18nInit: true">
<footer>
<a class="btn" data-bind="visible: $root.allowToggle, click: function() { $root.toggleFiltersRaw(); }, css: {'active': $root.rawActive }" data-i18n="[title]POPUPS_SIEVE_SCRIPT/BUTTON_RAW_SCRIPT">
<i class="icon-file-code"></i>
</a>

View file

@ -6,15 +6,14 @@
</div>
</div>
<div class="alert alert-error g-ui-user-select-none" data-bind="visible: serverError" data-icon="⚠" data-bind="text: serverErrorDesc"></div>
<table class="table table-hover list-table g-ui-user-select-none"
data-bind="i18nUpdate: scripts">
<table class="table table-hover list-table g-ui-user-select-none">
<colgroup>
<col style="width: 30px">
<col>
<col style="width: 140px">
<col style="width: 1em">
</colgroup>
<tbody data-bind="foreach: scripts">
<tbody data-bind="foreach: scripts, i18nUpdate: scripts">
<tr class="script-item">
<td>
<span class="disabled-script fontastic" data-bind="click: function (oScript) { $root.toggleScript(oScript); }, text: active() ? '☑' : '☐'"></span>