From 513be9d662e68ec0d322084234cbfb813192cd33 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 8 Aug 2021 22:43:37 +0100 Subject: [PATCH] :zap: Adds efficiency checks to determine which icon CDNs are needed --- src/views/Home.vue | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index d8d56764..42adf811 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -43,7 +43,7 @@ import SettingsContainer from '@/components/Settings/SettingsContainer.vue'; import ItemGroup from '@/components/LinkItems/ItemGroup.vue'; -import Defaults, { localStorageKeys } from '@/utils/defaults'; +import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults'; export default { name: 'home', @@ -160,16 +160,21 @@ export default { availibleThemes.Default = '#'; return availibleThemes; }, - /* Checks if any of the icons are Font Awesome glyphs */ - checkIfFontAwesomeNeeded() { + /* Checks if any sections or items use icons from a given CDN */ + checkIfIconLibraryNeeded(prefix) { let isNeeded = false; if (!this.sections) return false; this.sections.forEach((section) => { - if (section.icon && section.icon.includes('fa-')) isNeeded = true; + if (section.icon && section.icon.includes(prefix)) isNeeded = true; section.items.forEach((item) => { - if (item.icon && item.icon.includes('fa-')) isNeeded = true; + if (item.icon && item.icon.includes(prefix)) isNeeded = true; }); }); + return isNeeded; + }, + /* Checks if any of the icons are Font Awesome glyphs */ + checkIfFontAwesomeNeeded() { + let isNeeded = this.checkIfIconLibraryNeeded('fa-'); const currentTheme = localStorage[localStorageKeys.THEME]; // Some themes require FA if (['material', 'material-dark'].includes(currentTheme)) isNeeded = true; return isNeeded; @@ -179,10 +184,23 @@ export default { if (this.appConfig.enableFontAwesome || this.checkIfFontAwesomeNeeded()) { const fontAwesomeScript = document.createElement('script'); const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey; - fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`); + fontAwesomeScript.setAttribute('src', `${iconCdns.fa}/${faKey}.js`); document.head.appendChild(fontAwesomeScript); } }, + /* Checks if any of the icons are Material Design Icons */ + checkIfMdiNeeded() { + return this.checkIfIconLibraryNeeded('mdi-'); + }, + /* Injects Material Design Icons, only if needed */ + initiateMaterialDesignIcons() { + if (this.checkIfMdiNeeded()) { + const mdiStylesheet = document.createElement('link'); + mdiStylesheet.setAttribute('rel', 'stylesheet'); + mdiStylesheet.setAttribute('href', iconCdns.mdi); + document.head.appendChild(mdiStylesheet); + } + }, /* Returns true if there is more than 1 sub-result visible during searching */ checkIfResults() { if (!this.sections) return false; @@ -204,6 +222,7 @@ export default { }, mounted() { this.initiateFontAwesome(); + this.initiateMaterialDesignIcons(); this.layout = this.layoutOrientation; this.itemSizeBound = this.iconSize; },