🚧 A homepage mixin for sharing logic

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;