Replace jquery in top-nav component (#2620)

src/renderer/components/top-nav/top-nav.js

@@ -3,7 +3,6 @@ import { mapActions } from 'vuex'
 import FtInput from '../ft-input/ft-input.vue'
 import FtSearchFilters from '../ft-search-filters/ft-search-filters.vue'
 import FtProfileSelector from '../ft-profile-selector/ft-profile-selector.vue'
-import $ from 'jquery'
 import debounce from 'lodash.debounce'
 import ytSuggest from 'youtube-suggest'
 
@@ -19,7 +18,7 @@ export default Vue.extend({
   data: () => {
     return {
       component: this,
-      windowWidth: 0,
+      showSearchContainer: true,
       showFilters: false,
       searchFilterValueChanged: false,
       historyIndex: 1,
@@ -77,11 +76,8 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    const appWidth = $(window).width()
-
-    if (appWidth <= 680) {
-      const searchContainer = $('.searchContainer').get(0)
-      searchContainer.style.display = 'none'
+    if (window.innerWidth <= 680) {
+      this.showSearchContainer = false
     }
 
     // Store is not up-to-date when the component mounts, so we use timeout.
@@ -91,31 +87,21 @@ export default Vue.extend({
       }
     }, 0)
 
-    window.addEventListener('resize', function (event) {
-      const width = event.srcElement.innerWidth
-      const searchContainer = $('.searchContainer').get(0)
-
-      if (width > 680) {
-        searchContainer.style.display = ''
-      } else {
-        searchContainer.style.display = 'none'
-      }
+    window.addEventListener('resize', () => {
+      this.showSearchContainer = window.innerWidth > 680
     })
 
     this.debounceSearchResults = debounce(this.getSearchSuggestions, 200)
   },
   methods: {
     goToSearch: async function (query, { event }) {
-      const appWidth = $(window).width()
       const doCreateNewWindow = event && event.shiftKey
 
-      if (appWidth <= 680) {
-        const searchContainer = $('.searchContainer').get(0)
-        searchContainer.blur()
-        searchContainer.style.display = 'none'
+      if (window.innerWidth <= 680) {
+        this.$refs.searchContainer.blur()
+        this.showSearchContainer = false
       } else {
-        const searchInput = $('.searchInput input').get(0)
-        searchInput.blur()
+        this.searchInput.blur()
       }
 
       this.getYoutubeUrlInfo(query).then((result) => {
@@ -204,7 +190,9 @@ export default Vue.extend({
     },
 
     focusSearch: function () {
+      if (!this.hideSearchBar) {
         this.searchInput.focus()
+      }
     },
 
     getSearchSuggestionsDebounce: function (query) {
@@ -263,14 +251,7 @@ export default Vue.extend({
     },
 
     toggleSearchContainer: function () {
-      const searchContainer = $('.searchContainer').get(0)
-
-      if (searchContainer.style.display === 'none') {
-        searchContainer.style.display = ''
-      } else {
-        searchContainer.style.display = 'none'
-      }
-
+      this.showSearchContainer = !this.showSearchContainer
       this.showFilters = false
     },
 
@@ -281,8 +262,8 @@ export default Vue.extend({
     navigateHistory: function() {
       if (!this.isForwardOrBack) {
         this.historyIndex = window.history.length
-        $('#historyArrowBack').removeClass('fa-arrow-left')
-        $('#historyArrowForward').addClass('fa-arrow-right')
+        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
+        this.$refs.historyArrowForward.classList.add('fa-arrow-right')
       } else {
         this.isForwardOrBack = false
       }
@@ -294,9 +275,9 @@ export default Vue.extend({
 
       if (this.historyIndex > 1) {
         this.historyIndex--
-        $('#historyArrowForward').removeClass('fa-arrow-right')
+        this.$refs.historyArrowForward.classList.remove('fa-arrow-right')
         if (this.historyIndex === 1) {
-          $('#historyArrowBack').addClass('fa-arrow-left')
+          this.$refs.historyArrowBack.classList.add('fa-arrow-left')
         }
       }
     },
@@ -307,10 +288,10 @@ export default Vue.extend({
 
       if (this.historyIndex < window.history.length) {
         this.historyIndex++
-        $('#historyArrowBack').removeClass('fa-arrow-left')
+        this.$refs.historyArrowBack.classList.remove('fa-arrow-left')
 
         if (this.historyIndex === window.history.length) {
-          $('#historyArrowForward').addClass('fa-arrow-right')
+          this.$refs.historyArrowForward.classList.add('fa-arrow-right')
         }
       }
     },

src/renderer/components/top-nav/top-nav.vue

@@ -13,7 +13,7 @@
         @keypress="toggleSideNav"
       />
       <font-awesome-icon
-        id="historyArrowBack"
+        ref="historyArrowBack"
         class="navBackIcon navIcon fa-arrow-left"
         :icon="['fas', 'arrow-left']"
         role="button"
@@ -23,7 +23,7 @@
         @keypress="historyBack"
       />
       <font-awesome-icon
-        id="historyArrowForward"
+        ref="historyArrowForward"
         class="navForwardIcon navIcon fa-arrow-right"
         :icon="['fas', 'arrow-right']"
         role="button"
@@ -65,9 +65,13 @@
       </div>
     </div>
     <div class="middle">
-      <div class="searchContainer">
-        <ft-input
+      <div
         v-if="!hideSearchBar"
+        v-show="showSearchContainer"
+        ref="searchContainer"
+        class="searchContainer"
+      >
+        <ft-input
           ref="searchInput"
           :placeholder="$t('Search / Go to URL')"
           class="searchInput"
@@ -80,7 +84,6 @@
           @click="goToSearch"
         />
         <font-awesome-icon
-          v-if="!hideSearchBar"
           class="navFilterIcon navIcon"
           :class="{ filterChanged: searchFilterValueChanged }"
           :icon="['fas', 'filter']"