feat: infinite scrolling (#17)

Related to: https://github.com/filebrowser/filebrowser/issues/155

src/components/Search.vue

@@ -61,7 +61,7 @@
 
         </template>
         <ul v-else-if="search.length > 0">
-          <li v-for="s in search">
+          <li v-for="s in results">
             <router-link @click.native="close" :to="'./' + s.path">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
@@ -94,7 +94,8 @@ export default {
       scrollable: null,
       search: [],
       commands: [],
-      reload: false
+      reload: false,
+      resultsCount: 50
     }
   },
   watch: {
@@ -162,6 +163,9 @@ export default {
     // The command, without the leading symbol ('$') with or without a following space (' ')
     command () {
       return this.value[1] === ' ' ? this.value.slice(2) : this.value.slice(1)
+    },
+    results () {
+      return this.search.slice(0, this.resultsCount)
     }
   },
   mounted () {
@@ -175,6 +179,12 @@ export default {
         this.$store.commit('closeHovers')
       }
     })
+
+    this.scrollable.addEventListener('scroll', (event) => {
+      if (this.scrollable.scrollTop === (this.scrollable.scrollHeight - this.scrollable.offsetHeight)) {
+        this.resultsCount += 50
+      }
+    })
   },
   methods: {
     // Sets the search to active.
@@ -212,6 +222,7 @@ export default {
       this.value = ''
       this.active = false
       this.ongoing = false
+      this.resultsCount = 50
       this.search = []
       this.commands = []
     },
@@ -257,6 +268,8 @@ export default {
         return
       }
 
+      let results = []
+
       // In case of being a search.
       api.search(path, this.value,
         (event) => {
@@ -265,12 +278,11 @@ export default {
             response.path = response.path.substring(1)
           }
 
-          this.search.push(response)
-          this.scrollable.scrollTop = this.scrollable.scrollHeight
+          results.push(response)
         },
         (event) => {
           this.ongoing = false
-          this.scrollable.scrollTop = this.scrollable.scrollHeight
+          this.search = results
         }
       )
     }

src/components/files/Listing.vue

@@ -48,10 +48,10 @@
 
     <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
     <div v-if="req.numDirs > 0">
-      <item v-for="(item, index) in req.items"
+      <item v-for="(item) in dirs"
         v-if="item.isDir"
         :key="base64(item.name)"
-        v-bind:index="index"
+        v-bind:index="item.index"
         v-bind:name="item.name"
         v-bind:isDir="item.isDir"
         v-bind:url="item.url"
@@ -63,10 +63,10 @@
 
     <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
     <div v-if="req.numFiles > 0">
-      <item v-for="(item, index) in req.items"
+      <item v-for="(item) in files"
         v-if="!item.isDir"
         :key="base64(item.name)"
-        v-bind:index="index"
+        v-bind:index="item.index"
         v-bind:name="item.name"
         v-bind:isDir="item.isDir"
         v-bind:url="item.url"
@@ -97,6 +97,11 @@ import buttons from '@/utils/buttons'
 export default {
   name: 'listing',
   components: { Item },
+  data: function () {
+    return {
+      show: 50
+    }
+  },
   computed: {
     ...mapState(['req', 'selected', 'user']),
     nameSorted () {
@@ -111,6 +116,32 @@ export default {
     ascOrdered () {
       return (this.req.order === 'asc')
     },
+    items () {
+      const dirs = []
+      const files = []
+
+      this.req.items.forEach((item, index) => {
+        item.index = index
+
+        if (item.isDir) {
+          dirs.push(item)
+        } else {
+          files.push(item)
+        }
+      })
+
+      return { dirs, files }
+    },
+    dirs () {
+      return this.items.dirs.slice(0, this.show)
+    },
+    files () {
+      let show = this.show - this.items.dirs.length
+
+      if (show < 0) show = 0
+
+      return this.items.files.slice(0, show)
+    },
     nameIcon () {
       if (this.nameSorted && !this.ascOrdered) {
         return 'arrow_upward'
@@ -140,6 +171,7 @@ export default {
     // Add the needed event listeners to the window and document.
     window.addEventListener('keydown', this.keyEvent)
     window.addEventListener('resize', this.resizeEvent)
+    window.addEventListener('scroll', this.scrollEvent)
     document.addEventListener('dragover', this.preventDefault)
     document.addEventListener('drop', this.drop)
   },
@@ -147,6 +179,7 @@ export default {
     // Remove event listeners before destroying this page.
     window.removeEventListener('keydown', this.keyEvent)
     window.removeEventListener('resize', this.resizeEvent)
+    window.removeEventListener('scroll', this.scrollEvent)
     document.removeEventListener('dragover', this.preventDefault)
     document.removeEventListener('drop', this.drop)
   },
@@ -229,6 +262,11 @@ export default {
       if (columns === 0) columns = 1
       items.style.width = `calc(${100 / columns}% - 1em)`
     },
+    scrollEvent () {
+      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+        this.show += 50
+      }
+    },
     dragEnter (event) {
       // When the user starts dragging an item, put every
       // file on the listing with 50% opacity.