From 04c11ddc49056ff2eb435e5fe1d33b20f91dc210 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Tue, 8 Nov 2022 10:53:14 +0100 Subject: [PATCH] Move changeTheme and convertThemeName to Themes.js --- dev/App/User.js | 4 +- dev/Common/Utils.js | 42 ------------------- dev/Remote/AbstractFetch.js | 38 ++++++++--------- dev/Settings/Admin/General.js | 6 +-- dev/Settings/User/Themes.js | 3 +- dev/Stores/Theme.js | 77 ++++++++++++++++++++++++----------- 6 files changed, 76 insertions(+), 94 deletions(-) diff --git a/dev/App/User.js b/dev/App/User.js index 969ec32ec..2d1b10de8 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -1,7 +1,7 @@ import 'External/User/ko'; import { SMAudio } from 'Common/Audio'; -import { isArray, pString, changeTheme } from 'Common/Utils'; +import { isArray, pString } from 'Common/Utils'; import { mailToHelper, setLayoutResizer, dropdownsDetectVisibility } from 'Common/UtilsUser'; import { @@ -38,7 +38,7 @@ import { IdentityUserStore } from 'Stores/User/Identity'; import { FolderUserStore } from 'Stores/User/Folder'; import { PgpUserStore } from 'Stores/User/Pgp'; import { MessagelistUserStore } from 'Stores/User/Messagelist'; -import { ThemeStore } from 'Stores/Theme'; +import { ThemeStore, changeTheme } from 'Stores/Theme'; import { LanguageStore } from 'Stores/Language'; import { MessageUserStore } from 'Stores/User/Message'; diff --git a/dev/Common/Utils.js b/dev/Common/Utils.js index 8a9e9be8c..5bd662ccb 100644 --- a/dev/Common/Utils.js +++ b/dev/Common/Utils.js @@ -1,9 +1,3 @@ -import { SaveSettingStatus } from 'Common/Enums'; -import { elementById } from 'Common/Globals'; - -let __themeTimer = 0, - __themeJson = null; - export const isArray = Array.isArray, arrayLength = array => isArray(array) && array.length, @@ -19,12 +13,6 @@ export const return isNaN(value) || !isFinite(value) ? defaultValue : value; }, - convertThemeName = theme => theme - .replace(/@custom$/, '') - .replace(/([A-Z])/g, ' $1') - .replace(/[^a-zA-Z0-9]+/g, ' ') - .trim(), - defaultOptionsAfterRender = (domItem, item) => item && undefined !== item.disabled && domItem?.classList.toggle('disabled', domItem.disabled = item.disabled), @@ -37,34 +25,4 @@ export const */ b64EncodeJSONSafe = data => b64EncodeJSON(data).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''), - changeTheme = (value, themeTrigger = ()=>0) => { - const themeStyle = elementById('app-theme-style'), - clearTimer = () => { - __themeTimer = setTimeout(() => themeTrigger(SaveSettingStatus.Idle), 1000); - __themeJson = null; - }, - url = themeStyle.dataset.href.replace(/(Admin|User)\/-\/[^/]+\//, '$1/-/' + value + '/') + 'Json/'; - - clearTimeout(__themeTimer); - - themeTrigger(SaveSettingStatus.Saving); - - if (__themeJson) { - __themeJson.abort(); - } - let init = {}; - if (window.AbortController) { - __themeJson = new AbortController(); - init.signal = __themeJson.signal; - } - rl.fetchJSON(url, init) - .then(data => { - if (2 === arrayLength(data)) { - themeStyle.textContent = data[1]; - themeTrigger(SaveSettingStatus.Success); - } - }) - .then(clearTimer, clearTimer); - }, - getKeyByValue = (o, v) => Object.keys(o).find(key => o[key] === v); diff --git a/dev/Remote/AbstractFetch.js b/dev/Remote/AbstractFetch.js index 58b92b57b..638919dd1 100644 --- a/dev/Remote/AbstractFetch.js +++ b/dev/Remote/AbstractFetch.js @@ -32,22 +32,19 @@ oRequests = {}, abort = (sAction, sReason, bClearOnly) => { if (oRequests[sAction]) { - if (!bClearOnly && oRequests[sAction].abort) { -// oRequests[sAction].__aborted = true; - oRequests[sAction].abort(sReason || 'AbortError'); - } - + bClearOnly || oRequests[sAction].abort(sReason || 'AbortError'); oRequests[sAction] = null; delete oRequests[sAction]; } }, -fetchJSON = (action, sGetAdd, params, timeout, jsonCallback) => { - params = params || {}; - if (params instanceof FormData) { - params.set('Action', action); - } else { - params.Action = action; +fetchJSON = (action, sUrl, params, timeout, jsonCallback) => { + if (params) { + if (params instanceof FormData) { + params.set('Action', action); + } else { + params.Action = action; + } } // Don't abort, read https://github.com/the-djmaze/snappymail/issues/487 // abort(action); @@ -56,7 +53,7 @@ fetchJSON = (action, sGetAdd, params, timeout, jsonCallback) => { oRequests[action] = controller; // Currently there is no way to combine multiple signals, so AbortSignal.timeout() not possible timeout && setTimeout(() => abort(action, 'TimeoutError'), timeout); - return rl.fetchJSON(getURL(sGetAdd), {signal: signal}, sGetAdd ? null : params).then(jsonCallback).catch(err => { + return rl.fetchJSON(sUrl, {signal: signal}, params).then(jsonCallback).catch(err => { err.aborted = signal.aborted; err.reason = signal.reason; return Promise.reject(err); @@ -123,15 +120,13 @@ export class AbstractFetchRemote * @param {?number=} iTimeout * @param {string=} sGetAdd = '' */ - request(sAction, fCallback, params, iTimeout, sGetAdd, abortActions) { + request(sAction, fCallback, params, iTimeout, sGetAdd) { params = params || {}; const start = Date.now(); - abortActions && console.error('abortActions is obsolete'); - - fetchJSON(sAction, sGetAdd, - params, + fetchJSON(sAction, getURL(sGetAdd), + sGetAdd ? null : (params || {}), undefined === iTimeout ? 30000 : pInt(iTimeout), data => { let cached = false; @@ -141,9 +136,6 @@ export class AbstractFetchRemote let iError = 0; if (sAction && oRequests[sAction]) { - if (oRequests[sAction].__aborted) { - iError = 2; - } abort(sAction, 0, 1); } @@ -195,9 +187,13 @@ export class AbstractFetchRemote } } + get(action, url) { + return fetchJSON(action, url); + } + post(action, fTrigger, params, timeOut) { this.setTrigger(fTrigger, true); - return fetchJSON(action, '', params, pInt(timeOut, 30000), + return fetchJSON(action, getURL(), params || {}, pInt(timeOut, 30000), data => { abort(action, 0, 1); diff --git a/dev/Settings/Admin/General.js b/dev/Settings/Admin/General.js index 683fced6e..e9476ad6e 100644 --- a/dev/Settings/Admin/General.js +++ b/dev/Settings/Admin/General.js @@ -1,9 +1,7 @@ import ko from 'ko'; import { - isArray, - changeTheme, - convertThemeName + isArray } from 'Common/Utils'; import { addObservablesTo, addSubscribablesTo, addComputablesTo } from 'External/ko'; @@ -17,7 +15,7 @@ import { showScreenPopup } from 'Knoin/Knoin'; import Remote from 'Remote/Admin/Fetch'; -import { ThemeStore } from 'Stores/Theme'; +import { ThemeStore, convertThemeName, changeTheme } from 'Stores/Theme'; import { LanguageStore } from 'Stores/Language'; import { LanguagesPopupView } from 'View/Popup/Languages'; diff --git a/dev/Settings/User/Themes.js b/dev/Settings/User/Themes.js index 095132264..8ed6b53ed 100644 --- a/dev/Settings/User/Themes.js +++ b/dev/Settings/User/Themes.js @@ -1,12 +1,11 @@ import { addObservablesTo } from 'External/ko'; import { SaveSettingStatus, UploadErrorCode } from 'Common/Enums'; -import { changeTheme, convertThemeName } from 'Common/Utils'; import { themePreviewLink, serverRequest } from 'Common/Links'; import { i18n } from 'Common/Translator'; import { SettingsCapa } from 'Common/Globals'; -import { ThemeStore } from 'Stores/Theme'; +import { ThemeStore, convertThemeName, changeTheme } from 'Stores/Theme'; import Remote from 'Remote/User/Fetch'; diff --git a/dev/Stores/Theme.js b/dev/Stores/Theme.js index 82a151c5d..01c7a4afa 100644 --- a/dev/Stores/Theme.js +++ b/dev/Stores/Theme.js @@ -1,34 +1,65 @@ import ko from 'ko'; import { doc, $htmlCL, elementById, leftPanelDisabled, Settings, SettingsGet } from 'Common/Globals'; -import { isArray } from 'Common/Utils'; +import { isArray, arrayLength } from 'Common/Utils'; import { serverRequestRaw } from 'Common/Links'; +import { SaveSettingStatus } from 'Common/Enums'; -export const ThemeStore = { - theme: ko.observable(''), - themes: ko.observableArray(), - userBackgroundName: ko.observable(''), - userBackgroundHash: ko.observable(''), - fontSansSerif: ko.observable(''), - fontSerif: ko.observable(''), - fontMono: ko.observable(''), - isMobile: ko.observable($htmlCL.contains('rl-mobile')), +let __themeTimer = 0; - populate: () => { - const themes = Settings.app('themes'); +export const + ThemeStore = { + theme: ko.observable(''), + themes: ko.observableArray(), + userBackgroundName: ko.observable(''), + userBackgroundHash: ko.observable(''), + fontSansSerif: ko.observable(''), + fontSerif: ko.observable(''), + fontMono: ko.observable(''), + isMobile: ko.observable($htmlCL.contains('rl-mobile')), - ThemeStore.themes(isArray(themes) ? themes : []); - ThemeStore.theme(SettingsGet('Theme')); - if (!ThemeStore.isMobile()) { - ThemeStore.userBackgroundName(SettingsGet('UserBackgroundName')); - ThemeStore.userBackgroundHash(SettingsGet('UserBackgroundHash')); + populate: () => { + const themes = Settings.app('themes'); + + ThemeStore.themes(isArray(themes) ? themes : []); + ThemeStore.theme(SettingsGet('Theme')); + if (!ThemeStore.isMobile()) { + ThemeStore.userBackgroundName(SettingsGet('UserBackgroundName')); + ThemeStore.userBackgroundHash(SettingsGet('UserBackgroundHash')); + } + ThemeStore.fontSansSerif(SettingsGet('fontSansSerif')); + ThemeStore.fontSerif(SettingsGet('fontSerif')); + ThemeStore.fontMono(SettingsGet('fontMono')); + + leftPanelDisabled(ThemeStore.isMobile()); } - ThemeStore.fontSansSerif(SettingsGet('fontSansSerif')); - ThemeStore.fontSerif(SettingsGet('fontSerif')); - ThemeStore.fontMono(SettingsGet('fontMono')); + }, - leftPanelDisabled(ThemeStore.isMobile()); - } -}; + changeTheme = (value, themeTrigger = ()=>0) => { + const themeStyle = elementById('app-theme-style'), + clearTimer = () => { + __themeTimer = setTimeout(() => themeTrigger(SaveSettingStatus.Idle), 1000); + }, + url = themeStyle.dataset.href.replace(/(Admin|User)\/-\/[^/]+\//, '$1/-/' + value + '/') + 'Json/'; + + clearTimeout(__themeTimer); + + themeTrigger(SaveSettingStatus.Saving); + + rl.app.Remote.abort('theme').get('theme', url) + .then(data => { + if (2 === arrayLength(data)) { + themeStyle.textContent = data[1]; + themeTrigger(SaveSettingStatus.Success); + } + clearTimer(); + }, clearTimer); + }, + + convertThemeName = theme => theme + .replace(/@custom$/, '') + .replace(/([A-Z])/g, ' $1') + .replace(/[^a-zA-Z0-9]+/g, ' ') + .trim(); ThemeStore.isMobile.subscribe(value => $htmlCL.toggle('rl-mobile', value));