From b2a492bdab25f53f2b2c9a736285a51552ffd1f9 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Thu, 17 Feb 2022 09:36:29 +0100 Subject: [PATCH] Cleanup knockout subscribables --- dev/App/Abstract.js | 12 +++--------- dev/Common/Utils.js | 10 ---------- dev/Component/AbstractInput.js | 6 +++--- dev/External/ko.js | 12 +++++++++++- dev/Knoin/AbstractModel.js | 17 +++++++++-------- dev/Knoin/AbstractViews.js | 3 ++- dev/Settings/Admin/Branding.js | 3 ++- dev/Settings/Admin/Contacts.js | 5 ++--- dev/Settings/Admin/General.js | 7 +++---- dev/Settings/Admin/Login.js | 3 ++- dev/Settings/Admin/Packages.js | 2 +- dev/Settings/Admin/Security.js | 2 +- dev/Settings/User/Filters.js | 3 ++- dev/Settings/User/General.js | 3 ++- dev/Stores/User/Account.js | 2 +- dev/Stores/User/App.js | 2 +- dev/Stores/User/Contact.js | 3 ++- dev/Stores/User/Folder.js | 21 ++++++++++++--------- dev/Stores/User/GnuPG.js | 2 -- dev/Stores/User/Message.js | 3 ++- dev/Stores/User/Notification.js | 2 +- dev/Stores/User/OpenPGP.js | 2 -- dev/Stores/User/Settings.js | 3 ++- dev/View/Popup/FolderSystem.js | 4 ++-- dev/View/Popup/SieveScript.js | 2 +- dev/View/User/MailBox/FolderList.js | 2 +- dev/View/User/MailBox/MessageView.js | 12 +++++------- 27 files changed, 73 insertions(+), 75 deletions(-) diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js index c7af2996b..6ea1d7307 100644 --- a/dev/App/Abstract.js +++ b/dev/App/Abstract.js @@ -50,16 +50,10 @@ export class AbstractApp { viewModel: { createViewModel: (params, componentInfo) => { params = params || {}; - - if (componentInfo && componentInfo.element) { - - i18nToNodes(componentInfo.element); - - if (params.inline) { - componentInfo.element.style.display = 'inline-block'; - } + i18nToNodes(componentInfo.element); + if (params.inline) { + componentInfo.element.style.display = 'inline-block'; } - return new ClassObject(params); } } diff --git a/dev/Common/Utils.js b/dev/Common/Utils.js index 6383d500e..a7f07c579 100644 --- a/dev/Common/Utils.js +++ b/dev/Common/Utils.js @@ -29,16 +29,6 @@ export const domItem && item && undefined !== item.disabled && domItem.classList.toggle('disabled', domItem.disabled = item.disabled), - addObservablesTo = (target, observables) => - forEachObjectEntry(observables, (key, value) => - target[key] = /*isArray(value) ? ko.observableArray(value) :*/ ko.observable(value) ), - - addComputablesTo = (target, computables) => - forEachObjectEntry(computables, (key, fn) => target[key] = ko.computed(fn, {'pure':true})), - - addSubscribablesTo = (target, subscribables) => - forEachObjectEntry(subscribables, (key, fn) => target[key].subscribe(fn)), - inFocus = () => { try { return doc.activeElement && doc.activeElement.matches( diff --git a/dev/Component/AbstractInput.js b/dev/Component/AbstractInput.js index 33bae112a..63a8830db 100644 --- a/dev/Component/AbstractInput.js +++ b/dev/Component/AbstractInput.js @@ -41,17 +41,17 @@ export class AbstractInput { (size + ' settings-saved-trigger-input ' + classForTrigger()).trim() ); - this.disposable = [ + this.disposables = [ this.trigger.subscribe(setTriggerState, this), this.className ]; } else { this.className = size; - this.disposable = []; + this.disposables = []; } } dispose() { - this.disposable.forEach(dispose); + this.disposables.forEach(dispose); } } diff --git a/dev/External/ko.js b/dev/External/ko.js index 3a171b37f..133c03013 100644 --- a/dev/External/ko.js +++ b/dev/External/ko.js @@ -1,7 +1,7 @@ import { i18nToNodes } from 'Common/Translator'; import { doc, createElement } from 'Common/Globals'; import { SaveSettingsStep } from 'Common/Enums'; -import { arrayLength, isFunction } from 'Common/Utils'; +import { arrayLength, isFunction, forEachObjectEntry } from 'Common/Utils'; export const /** @@ -11,6 +11,16 @@ export const */ koComputable = fn => ko.computed(fn, {'pure':true}), + addObservablesTo = (target, observables) => + forEachObjectEntry(observables, (key, value) => + target[key] = /*isArray(value) ? ko.observableArray(value) :*/ ko.observable(value) ), + + addComputablesTo = (target, computables) => + forEachObjectEntry(computables, (key, fn) => target[key] = koComputable(fn)), + + addSubscribablesTo = (target, subscribables) => + forEachObjectEntry(subscribables, (key, fn) => target[key].subscribe(fn)), + dispose = disposable => disposable && isFunction(disposable.dispose) && disposable.dispose(); ko.bindingHandlers.tooltipErrorTip = { diff --git a/dev/Knoin/AbstractModel.js b/dev/Knoin/AbstractModel.js index 311cd1ccc..95d0b2600 100644 --- a/dev/Knoin/AbstractModel.js +++ b/dev/Knoin/AbstractModel.js @@ -1,5 +1,5 @@ -import { isArray, addObservablesTo, addComputablesTo, forEachObjectValue, forEachObjectEntry } from 'Common/Utils'; -import { dispose } from 'External/ko'; +import { isArray, forEachObjectValue, forEachObjectEntry } from 'Common/Utils'; +import { dispose, addObservablesTo, addComputablesTo } from 'External/ko'; function typeCast(curValue, newValue) { if (null != curValue) { @@ -26,7 +26,7 @@ export class AbstractModel { throw new Error("Can't instantiate AbstractModel!"); } */ - this.subscribables = []; + this.disposables = []; } addObservables(observables) { @@ -38,25 +38,26 @@ export class AbstractModel { } addSubscribables(subscribables) { - forEachObjectEntry(subscribables, (key, fn) => this.subscribables.push( this[key].subscribe(fn) ) ); +// addSubscribablesTo(this, subscribables); + forEachObjectEntry(subscribables, (key, fn) => this.disposables.push( this[key].subscribe(fn) ) ); } /** Called by delegateRunOnDestroy */ onDestroy() { /** dispose ko subscribables */ - this.subscribables.forEach(dispose); + this.disposables.forEach(dispose); /** clear object entries */ // forEachObjectEntry(this, (key, value) => { forEachObjectValue(this, value => { /** clear CollectionModel */ let arr = ko.isObservableArray(value) ? value() : value; - arr && arr.onDestroy && value.onDestroy(); + arr && arr.onDestroy && arr.onDestroy(); /** destroy ko.observable/ko.computed? */ - dispose(value); +// dispose(value); /** clear object value */ // this[key] = null; // TODO: issue with Contacts view }); -// this.subscribables = []; +// this.disposables = []; } /** diff --git a/dev/Knoin/AbstractViews.js b/dev/Knoin/AbstractViews.js index 442876a71..13ba2bf94 100644 --- a/dev/Knoin/AbstractViews.js +++ b/dev/Knoin/AbstractViews.js @@ -1,6 +1,7 @@ import ko from 'ko'; -import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils'; +import { inFocus } from 'Common/Utils'; +import { addObservablesTo, addComputablesTo, addSubscribablesTo } from 'External/ko'; import { Scope } from 'Common/Enums'; import { keyScope, Settings, leftPanelDisabled } from 'Common/Globals'; import { ViewType, showScreenPopup } from 'Knoin/Knoin'; diff --git a/dev/Settings/Admin/Branding.js b/dev/Settings/Admin/Branding.js index c7182a55b..cfe7e3fe9 100644 --- a/dev/Settings/Admin/Branding.js +++ b/dev/Settings/Admin/Branding.js @@ -1,6 +1,7 @@ import { SaveSettingsStep } from 'Common/Enums'; import { SettingsGet } from 'Common/Globals'; -import { settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo } from 'Common/Utils'; +import { settingsSaveHelperSimpleFunction } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo } from 'External/ko'; import Remote from 'Remote/Admin/Fetch'; diff --git a/dev/Settings/Admin/Contacts.js b/dev/Settings/Admin/Contacts.js index 12fa5d153..95db097d9 100644 --- a/dev/Settings/Admin/Contacts.js +++ b/dev/Settings/Admin/Contacts.js @@ -4,10 +4,9 @@ import { SaveSettingsStep } from 'Common/Enums'; import { SettingsGet } from 'Common/Globals'; import { settingsSaveHelperSimpleFunction, - defaultOptionsAfterRender, - addObservablesTo, - addSubscribablesTo + defaultOptionsAfterRender } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo } from 'External/ko'; import Remote from 'Remote/Admin/Fetch'; import { decorateKoCommands } from 'Knoin/Knoin'; diff --git a/dev/Settings/Admin/General.js b/dev/Settings/Admin/General.js index 096b8ad53..3aed04b4a 100644 --- a/dev/Settings/Admin/General.js +++ b/dev/Settings/Admin/General.js @@ -5,12 +5,11 @@ import { pInt, settingsSaveHelperSimpleFunction, changeTheme, - convertThemeName, - addObservablesTo, - addSubscribablesTo, - addComputablesTo + convertThemeName } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo, addComputablesTo } from 'External/ko'; + import { Capa, SaveSettingsStep } from 'Common/Enums'; import { Settings, SettingsGet, SettingsCapa } from 'Common/Globals'; import { translatorReload, convertLangName } from 'Common/Translator'; diff --git a/dev/Settings/Admin/Login.js b/dev/Settings/Admin/Login.js index 09ae7f151..ac5d8b26f 100644 --- a/dev/Settings/Admin/Login.js +++ b/dev/Settings/Admin/Login.js @@ -1,6 +1,7 @@ import { SaveSettingsStep } from 'Common/Enums'; import { Settings, SettingsGet } from 'Common/Globals'; -import { settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo } from 'Common/Utils'; +import { settingsSaveHelperSimpleFunction } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo } from 'External/ko'; import Remote from 'Remote/Admin/Fetch'; diff --git a/dev/Settings/Admin/Packages.js b/dev/Settings/Admin/Packages.js index 2301a21bc..354a5e650 100644 --- a/dev/Settings/Admin/Packages.js +++ b/dev/Settings/Admin/Packages.js @@ -9,7 +9,7 @@ import Remote from 'Remote/Admin/Fetch'; import { showScreenPopup } from 'Knoin/Knoin'; import { PluginPopupView } from 'View/Popup/Plugin'; import { SettingsGet } from 'Common/Globals'; -import { addObservablesTo, addComputablesTo } from 'Common/Utils'; +import { addObservablesTo, addComputablesTo } from 'External/ko'; export class PackagesAdminSettings /*extends AbstractViewSettings*/ { constructor() { diff --git a/dev/Settings/Admin/Security.js b/dev/Settings/Admin/Security.js index a635364b2..5d06197ee 100644 --- a/dev/Settings/Admin/Security.js +++ b/dev/Settings/Admin/Security.js @@ -1,6 +1,6 @@ import { Capa } from 'Common/Enums'; import { Settings, SettingsGet } from 'Common/Globals'; -import { addObservablesTo, addSubscribablesTo } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo } from 'External/ko'; import Remote from 'Remote/Admin/Fetch'; diff --git a/dev/Settings/User/Filters.js b/dev/Settings/User/Filters.js index b0cd9e812..1c4756d84 100644 --- a/dev/Settings/User/Filters.js +++ b/dev/Settings/User/Filters.js @@ -1,7 +1,8 @@ import ko from 'ko'; import { getNotification } from 'Common/Translator'; -import { addObservablesTo, forEachObjectValue } from 'Common/Utils'; +import { forEachObjectValue } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; import { delegateRunOnDestroy } from 'Common/UtilsUser'; import { SieveUserStore } from 'Stores/User/Sieve'; diff --git a/dev/Settings/User/General.js b/dev/Settings/User/General.js index cd6a0751a..140ab1978 100644 --- a/dev/Settings/User/General.js +++ b/dev/Settings/User/General.js @@ -3,7 +3,8 @@ import ko from 'ko'; import { SaveSettingsStep } from 'Common/Enums'; import { EditorDefaultType, Layout } from 'Common/EnumsUser'; import { Settings, SettingsGet } from 'Common/Globals'; -import { isArray, settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo, addComputablesTo } from 'Common/Utils'; +import { isArray, settingsSaveHelperSimpleFunction } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo, addComputablesTo } from 'External/ko'; import { i18n, trigger as translatorTrigger, translatorReload, convertLangName } from 'Common/Translator'; import { showScreenPopup } from 'Knoin/Knoin'; diff --git a/dev/Stores/User/Account.js b/dev/Stores/User/Account.js index fa81a9e25..3ebf33c74 100644 --- a/dev/Stores/User/Account.js +++ b/dev/Stores/User/Account.js @@ -1,5 +1,5 @@ import ko from 'ko'; -import { addObservablesTo } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; export const AccountUserStore = { accounts: ko.observableArray(), diff --git a/dev/Stores/User/App.js b/dev/Stores/User/App.js index 43304b23d..d175430b5 100644 --- a/dev/Stores/User/App.js +++ b/dev/Stores/User/App.js @@ -1,6 +1,6 @@ import { Scope } from 'Common/Enums'; import { keyScope, leftPanelDisabled, SettingsGet, elementById } from 'Common/Globals'; -import { addObservablesTo } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; import { ThemeStore } from 'Stores/Theme'; export const AppUserStore = { diff --git a/dev/Stores/User/Contact.js b/dev/Stores/User/Contact.js index f22e0ee89..ad42fd925 100644 --- a/dev/Stores/User/Contact.js +++ b/dev/Stores/User/Contact.js @@ -1,6 +1,7 @@ import ko from 'ko'; import { SettingsGet } from 'Common/Globals'; -import { pInt, addObservablesTo } from 'Common/Utils'; +import { pInt } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; import Remote from 'Remote/User/Fetch'; export const ContactUserStore = ko.observableArray(); diff --git a/dev/Stores/User/Folder.js b/dev/Stores/User/Folder.js index 3d69905bb..60b5929ef 100644 --- a/dev/Stores/User/Folder.js +++ b/dev/Stores/User/Folder.js @@ -3,7 +3,8 @@ import { koComputable } from 'External/ko'; import { FolderType, FolderSortMode } from 'Common/EnumsUser'; import { UNUSED_OPTION_VALUE } from 'Common/Consts'; -import { addObservablesTo, addSubscribablesTo, addComputablesTo, forEachObjectEntry } from 'Common/Utils'; +import { forEachObjectEntry } from 'Common/Utils'; +import { addObservablesTo, addSubscribablesTo, addComputablesTo } from 'External/ko'; import { getFolderInboxName, getFolderFromCacheList } from 'Common/Cache'; import { Settings } from 'Common/Globals'; //import Remote from 'Remote/User/Fetch'; Circular dependency @@ -78,20 +79,22 @@ export const FolderUserStore = new class { }); const - fRemoveSystemFolderType = (observable) => () => { - const folder = getFolderFromCacheList(observable()); - folder && folder.type(FolderType.User); + subscribeRemoveSystemFolder = observable => { + observable.subscribe(() => { + const folder = getFolderFromCacheList(observable()); + folder && folder.type(FolderType.User); + }, self, 'beforeChange'); }, fSetSystemFolderType = type => value => { const folder = getFolderFromCacheList(value); folder && folder.type(type); }; - self.sentFolder.subscribe(fRemoveSystemFolderType(self.sentFolder), self, 'beforeChange'); - self.draftsFolder.subscribe(fRemoveSystemFolderType(self.draftsFolder), self, 'beforeChange'); - self.spamFolder.subscribe(fRemoveSystemFolderType(self.spamFolder), self, 'beforeChange'); - self.trashFolder.subscribe(fRemoveSystemFolderType(self.trashFolder), self, 'beforeChange'); - self.archiveFolder.subscribe(fRemoveSystemFolderType(self.archiveFolder), self, 'beforeChange'); + subscribeRemoveSystemFolder(self.sentFolder); + subscribeRemoveSystemFolder(self.draftsFolder); + subscribeRemoveSystemFolder(self.spamFolder); + subscribeRemoveSystemFolder(self.trashFolder); + subscribeRemoveSystemFolder(self.archiveFolder); addSubscribablesTo(self, { sentFolder: fSetSystemFolderType(FolderType.Sent), diff --git a/dev/Stores/User/GnuPG.js b/dev/Stores/User/GnuPG.js index 7dafd5129..b35f0a8a0 100644 --- a/dev/Stores/User/GnuPG.js +++ b/dev/Stores/User/GnuPG.js @@ -2,7 +2,6 @@ import ko from 'ko'; import { Capa } from 'Common/Enums'; import { SettingsCapa } from 'Common/Globals'; -import { delegateRunOnDestroy } from 'Common/UtilsUser'; //import { EmailModel } from 'Model/Email'; //import { OpenPgpKeyModel } from 'Model/OpenPgpKey'; @@ -60,7 +59,6 @@ export const GnuPGUserStore = new class { } else { this.publicKeys.remove(key); } - delegateRunOnDestroy(key); } }, { KeyId: key.id, diff --git a/dev/Stores/User/Message.js b/dev/Stores/User/Message.js index d070f1c4c..7a05f7542 100644 --- a/dev/Stores/User/Message.js +++ b/dev/Stores/User/Message.js @@ -4,7 +4,8 @@ import { koComputable } from 'External/ko'; import { Scope, Notification } from 'Common/Enums'; import { MessageSetAction } from 'Common/EnumsUser'; import { $htmlCL, elementById } from 'Common/Globals'; -import { arrayLength, pInt, pString, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils'; +import { arrayLength, pInt, pString } from 'Common/Utils'; +import { addObservablesTo, addComputablesTo, addSubscribablesTo } from 'External/ko'; import { getFolderInboxName, diff --git a/dev/Stores/User/Notification.js b/dev/Stores/User/Notification.js index 94083905c..d9c0e670a 100644 --- a/dev/Stores/User/Notification.js +++ b/dev/Stores/User/Notification.js @@ -1,6 +1,6 @@ import { SMAudio } from 'Common/Audio'; import * as Links from 'Common/Links'; -import { addObservablesTo } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; import { fireEvent } from 'Common/Globals'; /** diff --git a/dev/Stores/User/OpenPGP.js b/dev/Stores/User/OpenPGP.js index 020c769d4..5e929ec13 100644 --- a/dev/Stores/User/OpenPGP.js +++ b/dev/Stores/User/OpenPGP.js @@ -5,7 +5,6 @@ import ko from 'ko'; import { arrayLength } from 'Common/Utils'; -import { delegateRunOnDestroy } from 'Common/UtilsUser'; import Remote from 'Remote/User/Fetch'; @@ -82,7 +81,6 @@ class OpenPgpKeyModel { OpenPGPUserStore.publicKeys.remove(this); storeOpenPgpKeys(OpenPGPUserStore.publicKeys, publicKeysItem); } - delegateRunOnDestroy(this); } } /* diff --git a/dev/Stores/User/Settings.js b/dev/Stores/User/Settings.js index ef9f76442..50597f36b 100644 --- a/dev/Stores/User/Settings.js +++ b/dev/Stores/User/Settings.js @@ -2,7 +2,8 @@ import ko from 'ko'; import { koComputable } from 'External/ko'; import { Layout, EditorDefaultType } from 'Common/EnumsUser'; -import { pInt, addObservablesTo } from 'Common/Utils'; +import { pInt } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; import { $htmlCL, SettingsGet, fireEvent } from 'Common/Globals'; import { ThemeStore } from 'Stores/Theme'; diff --git a/dev/View/Popup/FolderSystem.js b/dev/View/Popup/FolderSystem.js index 92004cc36..4e2a929e3 100644 --- a/dev/View/Popup/FolderSystem.js +++ b/dev/View/Popup/FolderSystem.js @@ -1,9 +1,9 @@ import ko from 'ko'; -import { koComputable } from 'External/ko'; +import { koComputable, addSubscribablesTo } from 'External/ko'; import { SetSystemFoldersNotification } from 'Common/EnumsUser'; import { UNUSED_OPTION_VALUE } from 'Common/Consts'; -import { defaultOptionsAfterRender, addSubscribablesTo } from 'Common/Utils'; +import { defaultOptionsAfterRender } from 'Common/Utils'; import { folderListOptionsBuilder } from 'Common/UtilsUser'; import { initOnStartOrLangChange, i18n } from 'Common/Translator'; diff --git a/dev/View/Popup/SieveScript.js b/dev/View/Popup/SieveScript.js index a408fab49..e67cc404d 100644 --- a/dev/View/Popup/SieveScript.js +++ b/dev/View/Popup/SieveScript.js @@ -1,7 +1,7 @@ import ko from 'ko'; import { getNotification, i18nToNodes } from 'Common/Translator'; -import { addObservablesTo } from 'Common/Utils'; +import { addObservablesTo } from 'External/ko'; import { delegateRunOnDestroy } from 'Common/UtilsUser'; import Remote from 'Remote/User/Fetch'; diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js index 4ab0ff619..c78137ef6 100644 --- a/dev/View/User/MailBox/FolderList.js +++ b/dev/View/User/MailBox/FolderList.js @@ -4,7 +4,7 @@ import { Scope } from 'Common/Enums'; import { moveAction } from 'Common/Globals'; import { mailBox, settings } from 'Common/Links'; import { setFolderHash } from 'Common/Cache'; -import { addComputablesTo } from 'Common/Utils'; +import { addComputablesTo } from 'External/ko'; import { AppUserStore } from 'Stores/User/App'; import { SettingsUserStore } from 'Stores/User/Settings'; diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js index 5450d6cce..147743ce6 100644 --- a/dev/View/User/MailBox/MessageView.js +++ b/dev/View/User/MailBox/MessageView.js @@ -215,12 +215,15 @@ export class MailMessageView extends AbstractViewRight { }, fullScreenMode: value => { + value && currentMessage() && AppUserStore.focusedState(Scope.MessageView); if (this.oContent) { value ? this.oContent.requestFullscreen() : exitFullscreen(); } else { $htmlCL.toggle('rl-message-fullscreen', value); } - } + }, + + showFullInfo: value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0') }); this.lastReplyAction(Local.get(ClientSideKeyName.LastReplyAction) || ComposeType.Reply); @@ -274,11 +277,6 @@ export class MailMessageView extends AbstractViewRight { } onBuild(dom) { - this.fullScreenMode.subscribe(value => - value && currentMessage() && AppUserStore.focusedState(Scope.MessageView)); - - this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0')); - const el = dom.querySelector('.b-content'); this.oContent = initFullscreen(el, () => this.fullScreenMode(getFullscreenElement() === el)); @@ -334,7 +332,7 @@ export class MailMessageView extends AbstractViewRight { } }); - AppUserStore.focusedState.subscribe((value) => { + AppUserStore.focusedState.subscribe(value => { if (Scope.MessageView !== value) { this.scrollMessageToTop(); this.scrollMessageToLeft();