🔥 Refactors minimal search to share code of parent search

src/components/MinimalView/MinimalSearch.vue

@@ -1,202 +1,39 @@
 <template>
-  <form @submit.prevent="searchSubmitted">
+  <SearchBar
-    <div class="minimal-search-wrap">
+    ref="MinimalSearchBar"
-      <input
+    @user-is-searchin="userIsTypingSomething"
-        id="filter-tiles"
+    :active="true"
-        v-model="input"
+    :minimalSearch="true"
-        ref="filter"
-        class="minimal-search"
-        :placeholder="$t('search.search-placeholder')"
-        v-on:input="userIsTypingSomething"
-        @keydown.esc="clearFilterInput"
   />
-      <p v-if="webSearchEnabled && input.length > 0" class="web-search-note">
-        {{ $t('search.enter-to-search-web') }}
-      </p>
-    </div>
-      <i v-if="input.length > 0"
-        class="clear-search"
-        :title="$t('search.clear-search-tooltip')"
-        @click="clearFilterInput">x</i>
-  </form>
 </template>
 
 <script>
-
+import SearchBar from '@/components/Settings/SearchBar';
-import router from '@/router';
-import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
-import ErrorHandler from '@/utils/ErrorHandler';
-import { getCustomKeyShortcuts } from '@/utils/ConfigHelpers';
-import {
-  searchEngineUrls,
-  defaultSearchEngine,
-  defaultSearchOpeningMethod,
-} from '@/utils/defaults';
 
 export default {
   name: 'MinimalSearch',
   inject: ['config'],
+  components: {
+    SearchBar,
+  },
   props: {
     active: Boolean,
   },
   data() {
     return {
       input: '', // Users current search term
-      akn: new ArrowKeyNavigation(), // Class that manages arrow key naviagtion
-      getCustomKeyShortcuts,
     };
   },
-  computed: {
-    webSearchEnabled() {
-      const { appConfig } = this.config;
-      if (appConfig && appConfig.webSearch) {
-        return !appConfig.webSearch.disableWebSearch;
-      }
-      return true;
-    },
-  },
   methods: {
     /* Emmits users's search term up to parent */
-    userIsTypingSomething() {
+    userIsTypingSomething(searchValue) {
-      this.$emit('user-is-searchin', this.input);
+      this.input = searchValue;
+      this.$emit('user-is-searchin', searchValue);
     },
-    /* Resets everything to initial state, when user is finished */
+    /* Emmits an event to reset state when user is finished searching */
-    clearFilterInput() {
+    clearMinFilterInput() {
-      this.input = ''; // Clear input model
+      this.$refs.MinimalSearchBar.clearFilterInput();
-      this.userIsTypingSomething(); // Emmit new empty value
-      document.activeElement.blur(); // Remove focus
-      this.akn.resetIndex(); // Reset current element index
     },
-    /* Launches a given app when hotkey pressed */
-    handleHotKey(key) {
-      const usersHotKeys = this.getCustomKeyShortcuts();
-      usersHotKeys.forEach((hotkey) => {
-        if (hotkey.hotkey === parseInt(key, 10)) {
-          if (hotkey.url) window.open(hotkey.url, '_blank');
-        }
-      });
-    },
-    /* Filter results as user types */
-    startFiltering(event) {
-      const currentElem = document.activeElement.id;
-      const { key, keyCode } = event;
-      /* If a modal is open, then do nothing */
-      if (!this.active) return;
-      if (/^[a-zA-Z]$/.test(key) && currentElem !== 'filter-tiles') {
-        /* Letter key pressed - start searching */
-        if (this.$refs.filter) this.$refs.filter.focus();
-        this.userIsTypingSomething();
-      } else if (/^[0-9]$/.test(key)) {
-        /* Number key pressed, check if user has a custom binding */
-        this.handleHotKey(key);
-      } else if (keyCode >= 37 && keyCode <= 40) {
-      /* Arrow key pressed - start navigation */
-        this.akn.arrowNavigation(keyCode);
-      } else if (keyCode === 27) {
-      /* Esc key pressed - reset form */
-        this.clearFilterInput();
-      }
-    },
-    /* Open web search results in users desired method */
-    launchWebSearch(url, method) {
-      switch (method) {
-        case 'newtab':
-          window.open(url, '_blank');
-          break;
-        case 'sametab':
-          window.open(url, '_self');
-          break;
-        case 'workspace':
-          router.push({ name: 'workspace', query: { url } });
-          break;
-        default:
-          ErrorHandler(`Unknown opening method: ${method}`);
-          window.open(url, '_blank');
-      }
-    },
-    /* If web search enabled, then launch search results when enter is pressed */
-    searchSubmitted() {
-      // Get search preferences from appConfig
-      const { appConfig } = this.config;
-      const searchPrefs = appConfig.webSearch || {};
-      if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
-        const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
-        // Get search engine, and make URL
-        const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
-        let searchUrl = searchEngineUrls[searchEngine];
-        if (!searchUrl) ErrorHandler(`Search engine not found - ${searchEngine}`);
-        if (searchEngine === 'custom' && searchPrefs.customSearchEngine) {
-          searchUrl = searchPrefs.customSearchEngine;
-        }
-        // Append users encoded query onto search URL, and launch
-        searchUrl += encodeURIComponent(this.input);
-        this.launchWebSearch(searchUrl, openingMethod);
-      }
-    },
-  },
-  mounted() {
-    window.addEventListener('keydown', this.startFiltering);
-  },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.startFiltering);
   },
 };
 </script>
-
-<style scoped lang="scss">
-
-@import '@/styles/media-queries.scss';
-
-  form {
-    display: flex;
-    align-items: center;
-    .minimal-search-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      p.web-search-note {
-        margin: 0;
-        color: var(--minimal-view-search-color);
-        opacity: var(--dimming-factor);
-      }
-    }
-    input {
-      display: inline-block;
-      width: 80%;
-      max-width: 400px;
-      font-size: 1.2rem;
-      padding: 0.5rem 1rem;
-      margin: 1rem auto;
-      outline: none;
-      border: 1px solid var(--outline-color);
-      border-radius: var(--curve-factor);
-      background: var(--minimal-view-search-background);
-      color: var(--minimal-view-search-color);
-      &:focus {
-        border-color: var(--minimal-view-search-color);
-        opacity: var(--dimming-factor);
-      }
-    }
-    .clear-search {
-      color: var(--minimal-view-search-color);
-      padding: 0.15rem 0.5rem 0.2rem 0.5rem;
-      font-style: normal;
-      font-size: 1rem;
-      opacity: var(--dimming-factor);
-      border-radius: 50px;
-      cursor: pointer;
-      right: 0.5rem;
-      top: 1rem;
-      border: 1px solid var(--minimal-view-search-color);
-      font-size: 1rem;
-      margin: 0.5rem;
-      &:hover {
-        opacity: 1;
-        color: var(--minimal-view-search-background);
-        background: var(--minimal-view-search-color);
-      }
-    }
-  }
-
-</style>

src/components/Settings/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="searchSubmitted">
+  <form @submit.prevent="searchSubmitted" :class="minimalSearch ? 'minimal' : 'normal'">
     <label for="filter-tiles">{{ $t('search.search-label') }}</label>
     <div class="search-wrap">
       <input
@@ -38,6 +38,7 @@ export default {
   inject: ['config'],
   props: {
     active: Boolean,
+    minimalSearch: Boolean, // If true, then keep it simple
   },
   data() {
     return {
@@ -148,13 +149,7 @@ export default {
 
 @import '@/styles/media-queries.scss';
 
-  section {
+  form.normal {
-    display: flex;
-    align-items: center;
-    align-items: stretch;
-    background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
-  }
-  form {
     display: flex;
     align-items: center;
     border-radius: 0 0 var(--curve-factor-navbar) 0;
@@ -216,13 +211,13 @@ export default {
   }
 
   @include tablet {
-    form {
+    form.normal {
       display: block;
       text-align: center;
     }
   }
   @include phone {
-    form {
+    form.nomral {
       flex: 1;
       border-radius: 0;
       text-align: center;
@@ -230,4 +225,57 @@ export default {
       display: block;
     }
   }
+
+  form.minimal {
+    display: flex;
+    align-items: center;
+    label { display: none; }
+    .search-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      p.web-search-note {
+        margin: 0;
+        color: var(--minimal-view-search-color);
+        opacity: var(--dimming-factor);
+      }
+    }
+    input {
+      display: inline-block;
+      width: 80%;
+      max-width: 400px;
+      font-size: 1.2rem;
+      padding: 0.5rem 1rem;
+      margin: 1rem auto;
+      outline: none;
+      border: 1px solid var(--outline-color);
+      border-radius: var(--curve-factor);
+      background: var(--minimal-view-search-background);
+      color: var(--minimal-view-search-color);
+      &:focus {
+        border-color: var(--minimal-view-search-color);
+        opacity: var(--dimming-factor);
+      }
+    }
+    .clear-search {
+      color: var(--minimal-view-search-color);
+      padding: 0.15rem 0.5rem 0.2rem 0.5rem;
+      font-style: normal;
+      font-size: 1rem;
+      opacity: var(--dimming-factor);
+      border-radius: 50px;
+      cursor: pointer;
+      right: 0.5rem;
+      top: 1rem;
+      border: 1px solid var(--minimal-view-search-color);
+      font-size: 1rem;
+      margin: 0.5rem;
+      &:hover {
+        opacity: 1;
+        color: var(--minimal-view-search-background);
+        background: var(--minimal-view-search-color);
+      }
+    }
+  }
 </style>

src/utils/Search.js

@@ -24,7 +24,7 @@ const getDomainFromUrl = (url) => {
  */
 const filterHelper = (compareStr, searchStr) => {
   if (!compareStr) return false;
-  const process = (input) => input.toString().toLowerCase().replace(/[^\w\s]/gi, '');
+  const process = (input) => input && input.toString().toLowerCase().replace(/[^\w\s]/gi, '');
   return process(compareStr).includes(process(searchStr));
 };
 
@@ -37,6 +37,7 @@ const filterHelper = (compareStr, searchStr) => {
  * @returns A filtered array of tiles
  */
 export const searchTiles = (allTiles, searchTerm) => {
+  if (!searchTerm) return allTiles; // If no search term, then return all
   if (!allTiles) return []; // If no data, then skip
   return allTiles.filter((tile) => {
     const {

src/views/Minimal.vue

@@ -10,7 +10,9 @@
       <router-link to="/">
         <h1>{{ pageInfo.title }}</h1>
       </router-link>
-      <MinimalSearch @user-is-searchin="(s) => { this.searchValue = s; }" :active="!modalOpen" />
+      <MinimalSearch
+        @user-is-searchin="(s) => { this.searchValue = s; }"
+        :active="!modalOpen" ref="filterComp" />
     </div>
     <div v-if="checkTheresData(sections)"
       :class="`item-group-container ${!tabbedView ? 'showing-all' : ''}`">
@@ -82,7 +84,7 @@ export default {
   watch: {
     /* When the theme changes, then call the update method */
     searchValue() {
-      this.tabbedView = !(this.searchValue.length > 0);
+      this.tabbedView = !this.searchValue || this.searchValue.length === 0;
     },
   },
   methods: {
@@ -111,7 +113,7 @@ export default {
     },
     /* Clears input field, once a searched item is opened */
     finishedSearching() {
-      this.$refs.filterComp.clearFilterInput();
+      this.$refs.filterComp.clearMinFilterInput();
     },
     /* Extracts the site name from domain, used for the searching functionality */
     getDomainFromUrl(url) {