hotfix; infinitescrolling

ipfs-search · Oct 29, 2022 · 4572018 · 4572018
1 parent b2dffd1
commit 4572018
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -18,27 +18,41 @@
       title="ipfs-search.com"
     />
 
-  <!-- HTML Meta Tags -->
-  <title>ipfs-search.com</title>
-  <meta name="description" content="Search for images, documents, video and music on the Interplanetary Filesystem.">
+    <!-- HTML Meta Tags -->
+    <title>ipfs-search.com</title>
+    <meta
+      name="description"
+      content="Search for images, documents, video and music on the Interplanetary Filesystem."
+    />
 
-  <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="https://ipfs-search.com">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="ipfs-search.com">
-  <meta property="og:description" content="Search for images, documents, video and music on the Interplanetary Filesystem.">
-  <meta property="og:image" content="https://github.com/ipfs-search/blog/blob/main/assets/images/ipfs_search_og_image.png?raw=true">
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://ipfs-search.com" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="ipfs-search.com" />
+    <meta
+      property="og:description"
+      content="Search for images, documents, video and music on the Interplanetary Filesystem."
+    />
+    <meta
+      property="og:image"
+      content="https://github.com/ipfs-search/blog/blob/main/assets/images/ipfs_search_og_image.png?raw=true"
+    />
 
-  <!-- Twitter Meta Tags -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:domain" content="ipfs-search.com">
-  <meta property="twitter:url" content="https://ipfs-search.com">
-  <meta name="twitter:title" content="ipfs-search.com">
-  <meta name="twitter:description" content="Search for images, documents, video and music on the Interplanetary Filesystem.">
-  <meta name="twitter:image" content="https://github.com/ipfs-search/blog/blob/main/assets/images/ipfs_search_og_image.png?raw=true">
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="ipfs-search.com" />
+    <meta property="twitter:url" content="https://ipfs-search.com" />
+    <meta name="twitter:title" content="ipfs-search.com" />
+    <meta
+      name="twitter:description"
+      content="Search for images, documents, video and music on the Interplanetary Filesystem."
+    />
+    <meta
+      name="twitter:image"
+      content="https://github.com/ipfs-search/blog/blob/main/assets/images/ipfs_search_og_image.png?raw=true"
+    />
 
-  <!-- Meta Tags Generated via https://www.opengraph.xyz -->
-
+    <!-- Meta Tags Generated via https://www.opengraph.xyz -->
   </head>
   <body>
     <noscript>

diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { mdiMagnifyExpand, mdiPlaylistPlay, mdiPlaylistPlus, mdiDotsHorizontal } from "@mdi/js";
+import { mdiPlaylistPlay, mdiPlaylistPlus, mdiDotsHorizontal } from "@mdi/js";
 import CardContent from "@/components/searchViewComponents/subcomponents/genericCardContent.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
 import { Types, TypeListNames, TypeIcons } from "@/helpers/typeHelper";

diff --git a/src/composables/useFileListComposable.js b/src/composables/useFileListComposable.js
@@ -8,6 +8,9 @@ import durationToColor from "@/helpers/durationToColor";
 import mime from "mime";
 import { Types } from "@/helpers/typeHelper";
 import getResourceURL from "@/helpers/resourceURL";
+import { enterSearchQuery } from "@/router";
+
+const infiniteScrollMargin = 200;
 
 export const useFileListComposable = ({ fileType }) => {
   const route = useRoute();
@@ -45,12 +48,32 @@ export const useFileListComposable = ({ fileType }) => {
     return pageHits.value;
   }
 
+  /*
+   * See if the the page scrolled so far down that empty space opens up at the bottom.
+   * Also update the url
+   * used by ImageList
+   */
+  const infiniteScroll = () => {
+    const { scrollTop, scrollHeight } = document.getElementById("search-view");
+    // calculate, which page is currently in view
+    const scrollPage = Math.floor(loadedPages.value * (scrollTop / scrollHeight)) + 1;
+    // if needed, change the page in the URL
+    if (store.state.query.page !== scrollPage) {
+      enterSearchQuery(route.query, scrollPage, "replace");
+    }
+    const nearBottom = window.innerHeight + infiniteScrollMargin > scrollHeight - scrollTop;
+    if (nearBottom && !loading.value) {
+      return store.dispatch(`results/${fileType}/fetchPage`, { page: loadedPages.value + 1 });
+    }
+  };
+
   return {
     pageHits,
     loading,
     anyFileType,
     infinite,
     loadedPages,
+    infiniteScroll,
     slicedHits,
   };
 };