diff --git a/src/mixins/HomeMixin.js b/src/mixins/HomeMixin.js new file mode 100644 index 00000000..8c9895ac --- /dev/null +++ b/src/mixins/HomeMixin.js @@ -0,0 +1,123 @@ +/** + * Mixin for all homepages (default home, minimal home, workspace, etc) + */ +// import ErrorHandler from '@/utils/ErrorHandler'; + +import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults'; +import { searchTiles } from '@/utils/Search'; + +const HomeMixin = { + props: {}, + computed: { + sections() { + return this.$store.getters.sections; + }, + appConfig() { + return this.$store.getters.appConfig; + }, + pageInfo() { + return this.$store.getters.pageInfo; + }, + isEditMode() { + return this.$store.state.editMode; + }, + modalOpen() { + return this.$store.state.modalOpen; + }, + }, + data: () => ({ + searchValue: '', + }), + methods: { + updateModalVisibility(modalState) { + this.$store.commit('SET_MODAL_OPEN', modalState); + }, + /* Updates local data with search value, triggered from filter comp */ + searching(searchValue) { + this.searchValue = searchValue || ''; + }, + /* Returns true if there is one or more sections in the config */ + checkTheresData(sections) { + const localSections = localStorage[localStorageKeys.CONF_SECTIONS]; + return (sections && sections.length >= 1) || (localSections && localSections.length >= 1); + }, + /* Returns only the tiles that match the users search query */ + filterTiles(allTiles) { + if (!allTiles) return []; + return searchTiles(allTiles, this.searchValue); + }, + /* 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) { + if (section.icon && section.icon.includes(prefix)) isNeeded = true; + if (section.items) { + section.items.forEach((item) => { + 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; + }, + /* Injects font-awesome's script tag, only if needed */ + initiateFontAwesome() { + if (this.appConfig.enableFontAwesome || this.checkIfFontAwesomeNeeded()) { + const fontAwesomeScript = document.createElement('script'); + const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey; + 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; + else { + let itemsFound = true; + this.sections.forEach((section) => { + if (section.widgets && section.widgets.length > 0) itemsFound = false; + if (this.filterTiles(section.items, this.searchValue).length > 0) itemsFound = false; + }); + return itemsFound; + } + }, + /* If user has a background image, then generate CSS attributes */ + getBackgroundImage() { + if (this.appConfig && this.appConfig.backgroundImg) { + return `background: url('${this.appConfig.backgroundImg}');background-size:cover;`; + } + return ''; + }, + /* Extracts the site name from domain, used for the searching functionality */ + getDomainFromUrl(url) { + if (!url) return ''; + const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/; + const domainPattern = url.match(urlPattern); + return domainPattern ? domainPattern[1] : ''; + }, + }, +}; + +export default HomeMixin; diff --git a/src/views/Home.vue b/src/views/Home.vue index 63ad1dd6..77320bb3 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -60,20 +60,20 @@