From 6aa9ef24f08ca3f3eac377be7d5c3e5a5d55c667 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 22 Dec 2023 18:56:38 +0530
Subject: [PATCH 01/17] feat: update to vue-virtual-scroller 1.1.2

---
 .../assets/src/views/PdfRendererIndex.vue        | 13 +++++++------
 kolibri/plugins/pdf_viewer/package.json          |  2 +-
 yarn.lock                                        | 16 ++++++++--------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 6583a97df5b..39f2bf90678 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -84,17 +84,18 @@
           :layout8="{ span: showSideBar ? 6 : 8 }"
           :layout12="{ span: showSideBar ? 9 : 12 }"
         >
-          <RecycleList
+          <RecycleScroller
             id="pdf-container"
             ref="recycleList"
+            v-slot="{ item }"
             :items="pdfPages"
-            :itemHeight="itemHeight"
+            :itemSize="itemHeight"
             :emitUpdate="true"
             class="pdf-container scroller-height"
             keyField="index"
             @update="handleUpdate"
           >
-            <template #default="{ item }">
+            <template>
               <PdfPage
                 :key="item.index"
                 :pageNum="item.index + 1"
@@ -107,7 +108,7 @@
                 :eventBus="eventBus"
               />
             </template>
-          </RecycleList>
+          </RecycleScroller>
         </KGridItem>
       </KGrid>
     </template>
@@ -123,7 +124,7 @@
   import throttle from 'lodash/throttle';
   import debounce from 'lodash/debounce';
   import logger from 'kolibri.lib.logging';
-  import { RecycleList } from 'vue-virtual-scroller';
+  import { RecycleScroller } from 'vue-virtual-scroller';
   import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
   // polyfill necessary for recycle list
   import 'intersection-observer';
@@ -146,7 +147,7 @@
     components: {
       SideBar,
       PdfPage,
-      RecycleList,
+      RecycleScroller,
       CoreFullscreen,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
diff --git a/kolibri/plugins/pdf_viewer/package.json b/kolibri/plugins/pdf_viewer/package.json
index 822ada18cb8..2dcfa45540f 100644
--- a/kolibri/plugins/pdf_viewer/package.json
+++ b/kolibri/plugins/pdf_viewer/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "intersection-observer": "0.12.2",
     "pdfjs-dist": "^2.16.105",
-    "vue-virtual-scroller": "0.12.0",
+    "vue-virtual-scroller": "1.1.2",
     "web-streams-polyfill": "^3.2.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index ffdbe66d37c..581785cde4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11598,12 +11598,12 @@ vue-meta@^2.4.0:
   dependencies:
     deepmerge "^4.2.2"
 
-vue-observe-visibility@^0.4.1:
+vue-observe-visibility@^0.4.4:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
   integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
 
-vue-resize@^0.4.4:
+vue-resize@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
   integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
@@ -11634,14 +11634,14 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-virtual-scroller@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-0.12.0.tgz#42f8fd7b299cd4d4fd1f5e14676792c229b890e2"
-  integrity sha512-01hKN99psA9Hq6zJajQc8H63sgqjpytHC8IyO+WKm6JzdVi8LeJQQqMrz5iUAFW6ZDGk+hvxaAqqcnJv+X8vYg==
+vue-virtual-scroller@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.1.2.tgz#b8a6362f177abf3f2149ce1eac18013c71fe353b"
+  integrity sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==
   dependencies:
     scrollparent "^2.0.1"
-    vue-observe-visibility "^0.4.1"
-    vue-resize "^0.4.4"
+    vue-observe-visibility "^0.4.4"
+    vue-resize "^0.4.5"
 
 vue2-teleport@^1.0.1:
   version "1.0.1"

From d851068575a20aa29d4d2c34918f45f746931a29 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 22 Dec 2023 20:48:42 +0530
Subject: [PATCH 02/17] feat: dynamic scroller

---
 .../assets/src/views/PdfRendererIndex.vue     | 53 +++++++++++--------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 39f2bf90678..53ecc6d60c0 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -84,31 +84,39 @@
           :layout8="{ span: showSideBar ? 6 : 8 }"
           :layout12="{ span: showSideBar ? 9 : 12 }"
         >
-          <RecycleScroller
+          <DynamicScroller
             id="pdf-container"
             ref="recycleList"
-            v-slot="{ item }"
             :items="pdfPages"
-            :itemSize="itemHeight"
+            :minItemSize="itemHeight"
             :emitUpdate="true"
             class="pdf-container scroller-height"
             keyField="index"
             @update="handleUpdate"
           >
-            <template>
-              <PdfPage
-                :key="item.index"
-                :pageNum="item.index + 1"
-                :pdfPage="pdfPages[item.index].page"
-                :pageReady="pdfPages[item.index].resolved"
-                :firstPageHeight="firstPageHeight || 0"
-                :firstPageWidth="firstPageWidth || 0"
-                :scale="scale || 1"
-                :totalPages="pdfPages.length"
-                :eventBus="eventBus"
-              />
+            <template #default="{ item }">
+              <DynamicScrollerItem
+                :item="item"
+                :active="active"
+                :sizeDependencies="[
+                  item.height,
+                ]"
+                :data-index="index"
+              >
+                <PdfPage
+                  :key="item.index"
+                  :pageNum="item.index + 1"
+                  :pdfPage="pdfPages[item.index].page"
+                  :pageReady="pdfPages[item.index].resolved"
+                  :firstPageHeight="firstPageHeight || 0"
+                  :firstPageWidth="firstPageWidth || 0"
+                  :scale="scale || 1"
+                  :totalPages="pdfPages.length"
+                  :eventBus="eventBus"
+                />
+              </DynamicScrollerItem>
             </template>
-          </RecycleScroller>
+          </DynamicScroller>
         </KGridItem>
       </KGrid>
     </template>
@@ -124,7 +132,7 @@
   import throttle from 'lodash/throttle';
   import debounce from 'lodash/debounce';
   import logger from 'kolibri.lib.logging';
-  import { RecycleScroller } from 'vue-virtual-scroller';
+  import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
   import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
   // polyfill necessary for recycle list
   import 'intersection-observer';
@@ -145,11 +153,12 @@
   export default {
     name: 'PdfRendererIndex',
     components: {
-      SideBar,
-      PdfPage,
-      RecycleScroller,
-      CoreFullscreen,
-    },
+    SideBar,
+    PdfPage,
+    DynamicScroller,
+    CoreFullscreen,
+    DynamicScrollerItem
+},
     mixins: [responsiveWindowMixin, commonCoreStrings],
     data: () => ({
       progress: null,

From 36c83eb8518b1a2860d0bd2c0b4d2d9bc2bc4d56 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 22 Dec 2023 21:09:05 +0530
Subject: [PATCH 03/17] fix: preloading offset pages

---
 kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 53ecc6d60c0..02fdb0977fb 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -90,6 +90,7 @@
             :items="pdfPages"
             :minItemSize="itemHeight"
             :emitUpdate="true"
+            :buffer="1.5 * itemHeight"
             class="pdf-container scroller-height"
             keyField="index"
             @update="handleUpdate"

From 4702ab57ae23cf4e3b5b52bd99c6eadc2109daab Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 22 Dec 2023 23:25:49 +0530
Subject: [PATCH 04/17] chore: add theditor to authors

---
 AUTHORS.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/AUTHORS.md b/AUTHORS.md
index b7383333720..fd43e7e59a6 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -99,3 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
 | Mazen Oweiss | moweiss |
+| Nikhil Sharma | ThEditor |
\ No newline at end of file

From 7d8488ee834bac61f6ecf356731bdf0b7c94f5e2 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Sat, 23 Dec 2023 14:29:47 +0530
Subject: [PATCH 05/17] revert: preloading offset pages

---
 kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 02fdb0977fb..53ecc6d60c0 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -90,7 +90,6 @@
             :items="pdfPages"
             :minItemSize="itemHeight"
             :emitUpdate="true"
-            :buffer="1.5 * itemHeight"
             class="pdf-container scroller-height"
             keyField="index"
             @update="handleUpdate"

From 740426b3c31c65f8c39ae58e2a5a77d08316a3ab Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Sat, 30 Dec 2023 02:00:23 +0530
Subject: [PATCH 06/17] chore: variable mode recyclable scroller

---
 .../assets/src/views/PdfRendererIndex.vue     |  58 +-
 .../assets/src/views/RecyclableScroller.vue   | 839 ++++++++++++++++++
 yarn.lock                                     |   6 +-
 3 files changed, 869 insertions(+), 34 deletions(-)
 create mode 100644 kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 53ecc6d60c0..b325d29deeb 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -84,39 +84,29 @@
           :layout8="{ span: showSideBar ? 6 : 8 }"
           :layout12="{ span: showSideBar ? 9 : 12 }"
         >
-          <DynamicScroller
+          <RecyclableScroller
             id="pdf-container"
             ref="recycleList"
             :items="pdfPages"
-            :minItemSize="itemHeight"
             :emitUpdate="true"
             class="pdf-container scroller-height"
             keyField="index"
             @update="handleUpdate"
           >
             <template #default="{ item }">
-              <DynamicScrollerItem
-                :item="item"
-                :active="active"
-                :sizeDependencies="[
-                  item.height,
-                ]"
-                :data-index="index"
-              >
-                <PdfPage
-                  :key="item.index"
-                  :pageNum="item.index + 1"
-                  :pdfPage="pdfPages[item.index].page"
-                  :pageReady="pdfPages[item.index].resolved"
-                  :firstPageHeight="firstPageHeight || 0"
-                  :firstPageWidth="firstPageWidth || 0"
-                  :scale="scale || 1"
-                  :totalPages="pdfPages.length"
-                  :eventBus="eventBus"
-                />
-              </DynamicScrollerItem>
+              <PdfPage
+                :key="item.index"
+                :pageNum="item.index + 1"
+                :pdfPage="pdfPages[item.index].page"
+                :pageReady="pdfPages[item.index].resolved"
+                :firstPageHeight="firstPageHeight || 0"
+                :firstPageWidth="firstPageWidth || 0"
+                :scale="scale || 1"
+                :totalPages="pdfPages.length"
+                :eventBus="eventBus"
+              />
             </template>
-          </DynamicScroller>
+          </RecyclableScroller>
         </KGridItem>
       </KGrid>
     </template>
@@ -132,8 +122,6 @@
   import throttle from 'lodash/throttle';
   import debounce from 'lodash/debounce';
   import logger from 'kolibri.lib.logging';
-  import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
-  import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
   // polyfill necessary for recycle list
   import 'intersection-observer';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -141,6 +129,7 @@
   import CoreFullscreen from 'kolibri.coreVue.components.CoreFullscreen';
   import '../utils/domPolyfills';
   import { EventBus } from '../utils/event_utils';
+  import RecyclableScroller from './RecyclableScroller';
   import PdfPage from './PdfPage';
   import SideBar from './SideBar';
 
@@ -155,9 +144,10 @@
     components: {
     SideBar,
     PdfPage,
-    DynamicScroller,
     CoreFullscreen,
-    DynamicScrollerItem
+    RecyclableScroller,
+    // DynamicScroller,
+    // DynamicScrollerItem
 },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     data: () => ({
@@ -195,9 +185,9 @@
       documentLoading() {
         return this.progress < 1;
       },
-      itemHeight() {
-        return this.firstPageHeight * this.scale + MARGIN;
-      },
+      // itemHeight() {
+      //   return this.firstPageHeight * this.scale + MARGIN;
+      // },
       savedLocation() {
         if (this.extraFields && this.extraFields.contentState) {
           return this.extraFields.contentState.savedLocation;
@@ -299,15 +289,21 @@
       };
       this.eventBus = new EventBus();
       this.prepComponentData = loadingPdf.promise
-        .then(pdfDocument => {
+        .then(async pdfDocument => {
           // Get initial info from the loaded pdf document
           this.pdfDocument = pdfDocument;
           this.totalPages = this.pdfDocument.numPages;
           // init pdfPages array
           for (let i = 0; i < this.totalPages; i++) {
+            const pageSize = await this.pdfDocument.getPage(i + 1).then(page => {
+              return page.getViewport({ scale: 1 }).height;
+            });
             this.pdfPages.push({
               page: null,
               resolved: false,
+              size: () => {
+                return pageSize * this.scale + MARGIN;
+              },
               index: i,
             });
           }
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
new file mode 100644
index 00000000000..14503b74474
--- /dev/null
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -0,0 +1,839 @@
+<template>
+  <div
+    v-observe-visibility="handleVisibilityChange"
+    class="vue-recycle-scroller"
+    :class="{
+      ready,
+      'page-mode': pageMode,
+      [`direction-${direction}`]: true,
+    }"
+    @scroll.passive="handleScroll"
+  >
+    <div
+      v-if="$slots.before"
+      ref="before"
+      class="vue-recycle-scroller__slot"
+    >
+      <slot
+        name="before"
+      ></slot>
+    </div>
+  
+    <component
+      :is="listTag"
+      ref="wrapper"
+      :style="{ [direction === 'vertical' ? 'minHeight' : 'minWidth']: totalSize + 'px' }"
+      class="vue-recycle-scroller__item-wrapper"
+      :class="listClass"
+    >
+      <component
+        :is="itemTag"
+        v-for="view of pool"
+        :key="view.nr.id"
+        :style="ready ? {
+          transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) `
+            + `translate${direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,
+          width: gridItems ? `${direction === 'vertical' ? itemSecondarySize || 
+            itemSize : itemSize}px` : undefined,
+          height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize || 
+            itemSize : itemSize}px` : undefined,
+        } : null"
+        class="vue-recycle-scroller__item-view"
+        :class="[
+          itemClass,
+          {
+            hover: !skipHover && hoverKey === view.nr.key
+          },
+        ]"
+        v-on="skipHover ? {} : {
+          mouseenter: () => { hoverKey = view.nr.key },
+          mouseleave: () => { hoverKey = null },
+        }"
+      >
+        <slot
+          :item="view.item"
+          :index="view.nr.index"
+          :active="view.nr.used"
+        ></slot>
+      </component>
+  
+      <slot
+        name="empty"
+      ></slot>
+    </component>
+  
+    <div
+      v-if="$slots.after"
+      ref="after"
+      class="vue-recycle-scroller__slot"
+    >
+      <slot
+        name="after"
+      ></slot>
+    </div>
+  
+    <ResizeObserver @notify="handleResize" />
+  </div>
+</template>
+  
+<script>
+  import { ResizeObserver } from 'vue-resize'
+  import { ObserveVisibility } from 'vue-observe-visibility'
+  import ScrollParent from 'scrollparent'
+  
+  let uid = 0;
+
+  function simpleArray () {
+    return this.items.length && typeof this.items[0] !== 'object'
+  }
+
+  const props = {
+    items: {
+      type: Array,
+      required: true,
+    },
+
+    keyField: {
+      type: String,
+      default: 'id',
+    },
+
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: (value) => ['vertical', 'horizontal'].includes(value),
+    },
+
+    listTag: {
+      type: String,
+      default: 'div',
+    },
+
+    itemTag: {
+      type: String,
+      default: 'div',
+    },
+  }
+
+  const config = {
+    itemsLimit: 1000
+  };
+  let supportsPassive = false;
+  if (typeof window !== 'undefined') {
+  supportsPassive = false
+  try {
+    var opts = Object.defineProperty({}, 'passive', {
+      get() {
+        return supportsPassive = true
+      },
+    })
+    window.addEventListener('test', null, opts)
+  } catch (e) {
+    // pass
+  }
+  }
+  
+  export default {
+    name: 'RecyclableScroller',
+  
+    components: {
+      ResizeObserver,
+    },
+  
+    directives: {
+      ObserveVisibility,
+    },
+  
+    props: {
+      ...props,
+  
+      itemSize: {
+        type: Number,
+        default: null,
+      },
+  
+      gridItems: {
+        type: Number,
+        default: undefined,
+      },
+  
+      itemSecondarySize: {
+        type: Number,
+        default: undefined,
+      },
+  
+      minItemSize: {
+        type: [Number, String],
+        default: null,
+      },
+  
+      sizeField: {
+        type: String,
+        default: 'size',
+      },
+  
+      typeField: {
+        type: String,
+        default: 'type',
+      },
+  
+      buffer: {
+        type: Number,
+        default: 200,
+      },
+  
+      pageMode: {
+        type: Boolean,
+        default: false,
+      },
+  
+      prerender: {
+        type: Number,
+        default: 0,
+      },
+  
+      emitUpdate: {
+        type: Boolean,
+        default: false,
+      },
+  
+      skipHover: {
+        type: Boolean,
+        default: false,
+      },
+  
+      listTag: {
+        type: String,
+        default: 'div',
+      },
+  
+      itemTag: {
+        type: String,
+        default: 'div',
+      },
+  
+      listClass: {
+        type: [String, Object, Array],
+        default: '',
+      },
+  
+      itemClass: {
+        type: [String, Object, Array],
+        default: '',
+      },
+    },
+  
+    data () {
+      return {
+        pool: [],
+        totalSize: 0,
+        ready: false,
+        hoverKey: null,
+      }
+    },
+  
+    computed: {
+      sizes () {
+        if (this.itemSize === null) {
+          const sizes = {
+            '-1': { accumulator: 0 },
+          }
+          const items = this.items
+          const field = this.sizeField
+          const minItemSize = this.minItemSize
+          let computedMinSize = 10000
+          let accumulator = 0
+          let current
+          for (let i = 0, l = items.length; i < l; i++) {
+            // sizeField can be a number or a function returning a number
+            current = ((typeof items[i][field] === 'function') ? items[i][field]() : items[i][field]) || minItemSize;
+
+            if (current < computedMinSize) {
+              computedMinSize = current
+            }
+            accumulator += current
+            sizes[i] = { accumulator, size: current }
+          }
+          // eslint-disable-next-line
+          this.$_computedMinItemSize = computedMinSize
+          return sizes
+        }
+        return []
+      },
+  
+      simpleArray,
+    },
+  
+    watch: {
+      items () {
+        this.updateVisibleItems(true)
+      },
+  
+      pageMode () {
+        this.applyPageMode()
+        this.updateVisibleItems(false)
+      },
+  
+      sizes: {
+        handler () {
+          this.updateVisibleItems(false)
+        },
+        deep: true,
+      },
+  
+      gridItems () {
+        this.updateVisibleItems(true)
+      },
+  
+      itemSecondarySize () {
+        this.updateVisibleItems(true)
+      },
+    },
+  
+    created () {
+      this.$_startIndex = 0
+      this.$_endIndex = 0
+      this.$_views = new Map()
+      this.$_unusedViews = new Map()
+      this.$_scrollDirty = false
+      this.$_lastUpdateScrollPosition = 0
+  
+      // In SSR mode, we also prerender the same number of item for the first render
+      // to avoir mismatch between server and client templates
+      if (this.prerender) {
+        this.$_prerender = true
+        this.updateVisibleItems(false)
+      }
+  
+      if (this.gridItems && !this.itemSize) {
+        console.error('[vue-recycle-scroller] You must provide an itemSize when using gridItems')
+      }
+    },
+  
+    mounted () {
+      this.applyPageMode()
+      this.$nextTick(() => {
+        // In SSR mode, render the real number of visible items
+        this.$_prerender = false
+        this.updateVisibleItems(true)
+        this.ready = true
+      })
+    },
+  
+    activated () {
+      const lastPosition = this.$_lastUpdateScrollPosition
+      if (typeof lastPosition === 'number') {
+        this.$nextTick(() => {
+          this.scrollToPosition(lastPosition)
+        })
+      }
+    },
+  
+    beforeDestroy () {
+      this.removeListeners()
+    },
+  
+    methods: {
+      addView (pool, index, item, key, type) {
+        const view = {
+          item,
+          position: 0,
+        }
+        const nonReactive = {
+          id: uid++,
+          index,
+          used: true,
+          key,
+          type,
+        }
+        Object.defineProperty(view, 'nr', {
+          configurable: false,
+          value: nonReactive,
+        })
+        pool.push(view)
+        return view
+      },
+  
+      unuseView (view, fake = false) {
+        const unusedViews = this.$_unusedViews
+        const type = view.nr.type
+        let unusedPool = unusedViews.get(type)
+        if (!unusedPool) {
+          unusedPool = []
+          unusedViews.set(type, unusedPool)
+        }
+        unusedPool.push(view)
+        if (!fake) {
+          view.nr.used = false
+          view.position = -9999
+          this.$_views.delete(view.nr.key)
+        }
+      },
+  
+      handleResize () {
+        this.$emit('resize')
+        if (this.ready) this.updateVisibleItems(false)
+      },
+  
+      handleScroll () {
+        if (!this.$_scrollDirty) {
+          this.$_scrollDirty = true
+          requestAnimationFrame(() => {
+            this.$_scrollDirty = false
+            const { continuous } = this.updateVisibleItems(false, true)
+  
+            // It seems sometimes chrome doesn't fire scroll event :/
+            // When non continous scrolling is ending, we force a refresh
+            if (!continuous) {
+              clearTimeout(this.$_refreshTimout)
+              this.$_refreshTimout = setTimeout(this.handleScroll, 100)
+            }
+          })
+        }
+      },
+  
+      handleVisibilityChange (isVisible, entry) {
+        if (this.ready) {
+          if (isVisible || entry.boundingClientRect.width !== 0 || 
+            entry.boundingClientRect.height !== 0) {
+            this.$emit('visible')
+            requestAnimationFrame(() => {
+              this.updateVisibleItems(false)
+            })
+          } else {
+            this.$emit('hidden')
+          }
+        }
+      },
+  
+      updateVisibleItems (checkItem, checkPositionDiff = false) {
+        const itemSize = this.itemSize
+        const gridItems = this.gridItems || 1
+        const itemSecondarySize = this.itemSecondarySize || itemSize
+        const minItemSize = this.$_computedMinItemSize
+        const typeField = this.typeField
+        const keyField = this.simpleArray ? null : this.keyField
+        const items = this.items
+        const count = items.length
+        const sizes = this.sizes
+        const views = this.$_views
+        const unusedViews = this.$_unusedViews
+        const pool = this.pool
+        let startIndex, endIndex
+        let totalSize
+        let visibleStartIndex, visibleEndIndex
+  
+        if (!count) {
+          startIndex = endIndex = visibleStartIndex = visibleEndIndex = totalSize = 0
+        } else if (this.$_prerender) {
+          startIndex = visibleStartIndex = 0
+          endIndex = visibleEndIndex = Math.min(this.prerender, items.length)
+          totalSize = null
+        } else {
+          const scroll = this.getScroll()
+  
+          // Skip update if use hasn't scrolled enough
+          if (checkPositionDiff) {
+            let positionDiff = scroll.start - this.$_lastUpdateScrollPosition
+            if (positionDiff < 0) positionDiff = -positionDiff
+            if ((itemSize === null && positionDiff < minItemSize) || positionDiff < itemSize) {
+              return {
+                continuous: true,
+              }
+            }
+          }
+          this.$_lastUpdateScrollPosition = scroll.start
+  
+          const buffer = this.buffer
+          scroll.start -= buffer
+          scroll.end += buffer
+  
+          // account for leading slot
+          let beforeSize = 0
+          if (this.$refs.before) {
+            beforeSize = this.$refs.before.scrollHeight
+            scroll.start -= beforeSize
+          }
+  
+          // account for trailing slot
+          if (this.$refs.after) {
+            const afterSize = this.$refs.after.scrollHeight
+            scroll.end += afterSize
+          }
+  
+          // Variable size mode
+          if (itemSize === null) {
+            let h
+            let a = 0
+            let b = count - 1
+            let i = ~~(count / 2)
+            let oldI
+  
+            // Searching for startIndex
+            do {
+              oldI = i
+              h = sizes[i].accumulator
+              if (h < scroll.start) {
+                a = i
+              } else if (i < count - 1 && sizes[i + 1].accumulator > scroll.start) {
+                b = i
+              }
+              i = ~~((a + b) / 2)
+            } while (i !== oldI)
+            i < 0 && (i = 0)
+            startIndex = i
+  
+            // For container style
+            totalSize = sizes[count - 1].accumulator
+  
+            // Searching for endIndex
+            for (endIndex = i; endIndex < count && 
+              sizes[endIndex].accumulator < scroll.end; endIndex++);
+            if (endIndex === -1) {
+              endIndex = items.length - 1
+            } else {
+              endIndex++
+              // Bounds
+              endIndex > count && (endIndex = count)
+            }
+  
+            // search visible startIndex
+            for (visibleStartIndex = startIndex; visibleStartIndex < count && 
+              (beforeSize + sizes[visibleStartIndex].accumulator) < scroll.start;
+              visibleStartIndex++);
+  
+            // search visible endIndex
+            for (visibleEndIndex = visibleStartIndex; visibleEndIndex < count && 
+              (beforeSize + sizes[visibleEndIndex].accumulator) < scroll.end;
+              visibleEndIndex++);
+          } else {
+            // Fixed size mode
+            startIndex = ~~(scroll.start / itemSize * gridItems)
+            const remainer = startIndex % gridItems
+            startIndex -= remainer
+            endIndex = Math.ceil(scroll.end / itemSize * gridItems)
+            visibleStartIndex = Math.max(0, 
+              Math.floor((scroll.start - beforeSize) / itemSize * gridItems))
+            visibleEndIndex = Math.floor((scroll.end - beforeSize) / itemSize * gridItems)
+  
+            // Bounds
+            startIndex < 0 && (startIndex = 0)
+            endIndex > count && (endIndex = count)
+            visibleStartIndex < 0 && (visibleStartIndex = 0)
+            visibleEndIndex > count && (visibleEndIndex = count)
+  
+            totalSize = Math.ceil(count / gridItems) * itemSize
+          }
+        }
+  
+        if (endIndex - startIndex > config.itemsLimit) {
+          this.itemsLimitError()
+        }
+  
+        this.totalSize = totalSize
+  
+        let view
+  
+        const continuous = startIndex <= this.$_endIndex && endIndex >= this.$_startIndex
+  
+        if (this.$_continuous !== continuous) {
+          if (continuous) {
+            views.clear()
+            unusedViews.clear()
+            for (let i = 0, l = pool.length; i < l; i++) {
+              view = pool[i]
+              this.unuseView(view)
+            }
+          }
+          this.$_continuous = continuous
+        } else if (continuous) {
+          for (let i = 0, l = pool.length; i < l; i++) {
+            view = pool[i]
+            if (view.nr.used) {
+              // Update view item index
+              if (checkItem) {
+                view.nr.index = items.indexOf(view.item)
+              }
+  
+              // Check if index is still in visible range
+              if (
+                view.nr.index === -1 ||
+                view.nr.index < startIndex ||
+                view.nr.index >= endIndex
+              ) {
+                this.unuseView(view)
+              }
+            }
+          }
+        }
+  
+        const unusedIndex = continuous ? null : new Map()
+  
+        let item, type, unusedPool
+        let v
+        for (let i = startIndex; i < endIndex; i++) {
+          item = items[i]
+          const key = keyField ? item[keyField] : item
+          if (key == null) {
+            throw new Error(`Key is ${key} on item (keyField is '${keyField}')`)
+          }
+          view = views.get(key)
+  
+          if (!itemSize && !sizes[i].size) {
+            if (view) this.unuseView(view)
+            continue
+          }
+  
+          // No view assigned to item
+          if (!view) {
+            if (i === items.length - 1) this.$emit('scroll-end')
+            if (i === 0) this.$emit('scroll-start')
+  
+            type = item[typeField]
+            unusedPool = unusedViews.get(type)
+  
+            if (continuous) {
+              // Reuse existing view
+              if (unusedPool && unusedPool.length) {
+                view = unusedPool.pop()
+                view.item = item
+                view.nr.used = true
+                view.nr.index = i
+                view.nr.key = key
+                view.nr.type = type
+              } else {
+                view = this.addView(pool, i, item, key, type)
+              }
+            } else {
+              // Use existing view
+              // We don't care if they are already used
+              // because we are not in continous scrolling
+              v = unusedIndex.get(type) || 0
+  
+              if (!unusedPool || v >= unusedPool.length) {
+                view = this.addView(pool, i, item, key, type)
+                this.unuseView(view, true)
+                unusedPool = unusedViews.get(type)
+              }
+  
+              view = unusedPool[v]
+              view.item = item
+              view.nr.used = true
+              view.nr.index = i
+              view.nr.key = key
+              view.nr.type = type
+              unusedIndex.set(type, v + 1)
+              v++
+            }
+            views.set(key, view)
+          } else {
+            view.nr.used = true
+            view.item = item
+          }
+  
+          // Update position
+          if (itemSize === null) {
+            view.position = sizes[i - 1].accumulator
+            view.offset = 0
+          } else {
+            view.position = Math.floor(i / gridItems) * itemSize
+            view.offset = (i % gridItems) * itemSecondarySize
+          }
+        }
+  
+        this.$_startIndex = startIndex
+        this.$_endIndex = endIndex
+  
+        if (this.emitUpdate) this.$emit('update', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
+  
+        // After the user has finished scrolling
+        // Sort views so text selection is correct
+        clearTimeout(this.$_sortTimer)
+        this.$_sortTimer = setTimeout(this.sortViews, 300)
+  
+        return {
+          continuous,
+        }
+      },
+  
+      getListenerTarget () {
+        let target = ScrollParent(this.$el)
+        // Fix global scroll target for Chrome and Safari
+        if (window.document && (target === window.document.documentElement
+          || target === window.document.body)) {
+          target = window
+        }
+        return target
+      },
+  
+      getScroll () {
+        const { $el: el, direction } = this
+        const isVertical = direction === 'vertical'
+        let scrollState
+  
+        if (this.pageMode) {
+          const bounds = el.getBoundingClientRect()
+          const boundsSize = isVertical ? bounds.height : bounds.width
+          let start = -(isVertical ? bounds.top : bounds.left)
+          let size = isVertical ? window.innerHeight : window.innerWidth
+          if (start < 0) {
+            size += start
+            start = 0
+          }
+          if (start + size > boundsSize) {
+            size = boundsSize - start
+          }
+          scrollState = {
+            start,
+            end: start + size,
+          }
+        } else if (isVertical) {
+          scrollState = {
+            start: el.scrollTop,
+            end: el.scrollTop + el.clientHeight,
+          }
+        } else {
+          scrollState = {
+            start: el.scrollLeft,
+            end: el.scrollLeft + el.clientWidth,
+          }
+        }
+  
+        return scrollState
+      },
+  
+      applyPageMode () {
+        if (this.pageMode) {
+          this.addListeners()
+        } else {
+          this.removeListeners()
+        }
+      },
+  
+      addListeners () {
+        this.listenerTarget = this.getListenerTarget()
+        this.listenerTarget.addEventListener('scroll', this.handleScroll, supportsPassive
+          ? {
+              passive: true,
+            }
+          : false)
+        this.listenerTarget.addEventListener('resize', this.handleResize)
+      },
+  
+      removeListeners () {
+        if (!this.listenerTarget) {
+          return
+        }
+  
+        this.listenerTarget.removeEventListener('scroll', this.handleScroll)
+        this.listenerTarget.removeEventListener('resize', this.handleResize)
+  
+        this.listenerTarget = null
+      },
+  
+      // scrollToItem (index) {
+      //   let scroll
+      //   if (this.itemSize === null) {
+      //     scroll = index > 0 ? this.sizes[index - 1].accumulator : 0
+      //   } else {
+      //     scroll = Math.floor(index / this.gridItems) * this.itemSize
+      //   }
+      //   this.scrollToPosition(scroll)
+      // },
+  
+      scrollToPosition (position) {
+        const direction = this.direction === 'vertical'
+          ? { scroll: 'scrollTop', start: 'top' }
+          : { scroll: 'scrollLeft', start: 'left' }
+  
+        let viewport
+        let scrollDirection
+        let scrollDistance
+  
+        if (this.pageMode) {
+          const viewportEl = ScrollParent(this.$el)
+          // HTML doesn't overflow like other elements
+          const scrollTop = viewportEl.tagName === 'HTML' ? 0 : viewportEl[direction.scroll]
+          const bounds = viewportEl.getBoundingClientRect()
+  
+          const scroller = this.$el.getBoundingClientRect()
+          const scrollerPosition = scroller[direction.start] - bounds[direction.start]
+  
+          viewport = viewportEl
+          scrollDirection = direction.scroll
+          scrollDistance = position + scrollTop + scrollerPosition
+        } else {
+          viewport = this.$el
+          scrollDirection = direction.scroll
+          scrollDistance = position
+        }
+  
+        viewport[scrollDirection] = scrollDistance
+      },
+  
+      itemsLimitError () {
+        setTimeout(() => {
+          console.log('It seems the scroller element isn\'t scrolling, so it tries to render all the items at once.', 'Scroller:', this.$el)
+          console.log('Make sure the scroller has a fixed height (or width) and \'overflow-y\' (or \'overflow-x\') set to \'auto\' so it can scroll correctly and only render the items visible in the scroll viewport.')
+        })
+        throw new Error('Rendered items limit reached')
+      },
+  
+      sortViews () {
+        this.pool.sort((viewA, viewB) => viewA.nr.index - viewB.nr.index)
+      },
+    },
+  }
+  </script>
+  
+  <style>
+  .vue-recycle-scroller {
+    position: relative;
+  }
+  
+  .vue-recycle-scroller.direction-vertical:not(.page-mode) {
+    overflow-y: auto;
+  }
+  
+  .vue-recycle-scroller.direction-horizontal:not(.page-mode) {
+    overflow-x: auto;
+  }
+  
+  .vue-recycle-scroller.direction-horizontal {
+    display: flex;
+  }
+  
+  .vue-recycle-scroller__slot {
+    flex: auto 0 0;
+  }
+  
+  .vue-recycle-scroller__item-wrapper {
+    flex: 1;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .vue-recycle-scroller.ready .vue-recycle-scroller__item-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+  }
+  
+  .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
+    width: 100%;
+  }
+  
+  .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
+    height: 100%;
+  }
+  
+  .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
+    width: 100%;
+  }
+  
+  .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view {
+    height: 100%;
+  }
+  </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 581785cde4f..854d2b878d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10042,9 +10042,9 @@ screenfull@^5.2.0:
   integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
 
 scrollparent@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
-  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.1.0.tgz#6cae915c953835886a6ba0d77fdc2bb1ed09076d"
+  integrity sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==
 
 scss-parser@^1.0.6:
   version "1.0.6"

From 5982d4a8634b6392ad57483a0488066a8ad3176a Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 5 Jan 2024 11:54:55 +0530
Subject: [PATCH 07/17] fix: linting issues

---
 AUTHORS.md                                    |   2 +-
 .../assets/src/views/PdfRendererIndex.vue     |  14 +-
 .../assets/src/views/RecyclableScroller.vue   | 850 +++++++++---------
 3 files changed, 449 insertions(+), 417 deletions(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index fd43e7e59a6..82e5b95ac22 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -99,4 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
 | Mazen Oweiss | moweiss |
-| Nikhil Sharma | ThEditor |
\ No newline at end of file
+| Nikhil Sharma | ThEditor |
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index b325d29deeb..811ee9e5b0c 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -142,13 +142,13 @@
   export default {
     name: 'PdfRendererIndex',
     components: {
-    SideBar,
-    PdfPage,
-    CoreFullscreen,
-    RecyclableScroller,
-    // DynamicScroller,
-    // DynamicScrollerItem
-},
+      SideBar,
+      PdfPage,
+      CoreFullscreen,
+      RecyclableScroller,
+      // DynamicScroller,
+      // DynamicScrollerItem
+    },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     data: () => ({
       progress: null,
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
index 14503b74474..bcdce2c792c 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -1,4 +1,5 @@
 <template>
+
   <div
     v-observe-visibility="handleVisibilityChange"
     class="vue-recycle-scroller"
@@ -12,18 +13,18 @@
     <div
       v-if="$slots.before"
       ref="before"
-      class="vue-recycle-scroller__slot"
+      class="vue-recycle-scroller-slot"
     >
       <slot
         name="before"
       ></slot>
     </div>
-  
+
     <component
       :is="listTag"
       ref="wrapper"
       :style="{ [direction === 'vertical' ? 'minHeight' : 'minWidth']: totalSize + 'px' }"
-      class="vue-recycle-scroller__item-wrapper"
+      class="vue-recycle-scroller-item-wrapper"
       :class="listClass"
     >
       <component
@@ -38,7 +39,7 @@
           height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize || 
             itemSize : itemSize}px` : undefined,
         } : null"
-        class="vue-recycle-scroller__item-view"
+        class="vue-recycle-scroller-item-view"
         :class="[
           itemClass,
           {
@@ -56,35 +57,38 @@
           :active="view.nr.used"
         ></slot>
       </component>
-  
+
       <slot
         name="empty"
       ></slot>
     </component>
-  
+
     <div
       v-if="$slots.after"
       ref="after"
-      class="vue-recycle-scroller__slot"
+      class="vue-recycle-scroller-slot"
     >
       <slot
         name="after"
       ></slot>
     </div>
-  
+
     <ResizeObserver @notify="handleResize" />
   </div>
+
 </template>
-  
+
+
 <script>
-  import { ResizeObserver } from 'vue-resize'
-  import { ObserveVisibility } from 'vue-observe-visibility'
-  import ScrollParent from 'scrollparent'
-  
+
+  import { ResizeObserver } from 'vue-resize';
+  import { ObserveVisibility } from 'vue-observe-visibility';
+  import ScrollParent from 'scrollparent';
+
   let uid = 0;
 
-  function simpleArray () {
-    return this.items.length && typeof this.items[0] !== 'object'
+  function simpleArray() {
+    return this.items.length && typeof this.items[0] !== 'object';
   }
 
   const props = {
@@ -101,7 +105,7 @@
     direction: {
       type: String,
       default: 'vertical',
-      validator: (value) => ['vertical', 'horizontal'].includes(value),
+      validator: value => ['vertical', 'horizontal'].includes(value),
     },
 
     listTag: {
@@ -113,624 +117,643 @@
       type: String,
       default: 'div',
     },
-  }
+  };
 
   const config = {
-    itemsLimit: 1000
+    itemsLimit: 1000,
   };
   let supportsPassive = false;
   if (typeof window !== 'undefined') {
-  supportsPassive = false
-  try {
-    var opts = Object.defineProperty({}, 'passive', {
-      get() {
-        return supportsPassive = true
-      },
-    })
-    window.addEventListener('test', null, opts)
-  } catch (e) {
-    // pass
-  }
+    supportsPassive = false;
+    try {
+      var opts = Object.defineProperty({}, 'passive', {
+        get() {
+          return (supportsPassive = true);
+        },
+      });
+      window.addEventListener('test', null, opts);
+    } catch (e) {
+      // pass
+    }
   }
-  
+
   export default {
     name: 'RecyclableScroller',
-  
+
     components: {
       ResizeObserver,
     },
-  
+
     directives: {
       ObserveVisibility,
     },
-  
+
     props: {
       ...props,
-  
+
       itemSize: {
         type: Number,
         default: null,
       },
-  
+
       gridItems: {
         type: Number,
         default: undefined,
       },
-  
+
       itemSecondarySize: {
         type: Number,
         default: undefined,
       },
-  
+
       minItemSize: {
         type: [Number, String],
         default: null,
       },
-  
+
       sizeField: {
         type: String,
         default: 'size',
       },
-  
+
       typeField: {
         type: String,
         default: 'type',
       },
-  
+
       buffer: {
         type: Number,
         default: 200,
       },
-  
+
       pageMode: {
         type: Boolean,
         default: false,
       },
-  
+
       prerender: {
         type: Number,
         default: 0,
       },
-  
+
       emitUpdate: {
         type: Boolean,
         default: false,
       },
-  
+
       skipHover: {
         type: Boolean,
         default: false,
       },
-  
+
       listTag: {
         type: String,
         default: 'div',
       },
-  
+
       itemTag: {
         type: String,
         default: 'div',
       },
-  
+
       listClass: {
         type: [String, Object, Array],
         default: '',
       },
-  
+
       itemClass: {
         type: [String, Object, Array],
         default: '',
       },
     },
-  
-    data () {
+
+    data() {
       return {
         pool: [],
         totalSize: 0,
         ready: false,
         hoverKey: null,
-      }
+      };
     },
-  
+
     computed: {
-      sizes () {
+      sizes() {
         if (this.itemSize === null) {
           const sizes = {
             '-1': { accumulator: 0 },
-          }
-          const items = this.items
-          const field = this.sizeField
-          const minItemSize = this.minItemSize
-          let computedMinSize = 10000
-          let accumulator = 0
-          let current
+          };
+          const items = this.items;
+          const field = this.sizeField;
+          const minItemSize = this.minItemSize;
+          let computedMinSize = 10000;
+          let accumulator = 0;
+          let current;
           for (let i = 0, l = items.length; i < l; i++) {
             // sizeField can be a number or a function returning a number
-            current = ((typeof items[i][field] === 'function') ? items[i][field]() : items[i][field]) || minItemSize;
+            current =
+              (typeof items[i][field] === 'function' ? items[i][field]() : items[i][field]) ||
+              minItemSize;
 
             if (current < computedMinSize) {
-              computedMinSize = current
+              computedMinSize = current;
             }
-            accumulator += current
-            sizes[i] = { accumulator, size: current }
+            accumulator += current;
+            sizes[i] = { accumulator, size: current };
           }
           // eslint-disable-next-line
-          this.$_computedMinItemSize = computedMinSize
-          return sizes
+          this.$_computedMinItemSize = computedMinSize;
+          return sizes;
         }
-        return []
+        return [];
       },
-  
+
       simpleArray,
     },
-  
+
     watch: {
-      items () {
-        this.updateVisibleItems(true)
+      items() {
+        this.updateVisibleItems(true);
       },
-  
-      pageMode () {
-        this.applyPageMode()
-        this.updateVisibleItems(false)
+
+      pageMode() {
+        this.applyPageMode();
+        this.updateVisibleItems(false);
       },
-  
+
       sizes: {
-        handler () {
-          this.updateVisibleItems(false)
+        handler() {
+          this.updateVisibleItems(false);
         },
         deep: true,
       },
-  
-      gridItems () {
-        this.updateVisibleItems(true)
+
+      gridItems() {
+        this.updateVisibleItems(true);
       },
-  
-      itemSecondarySize () {
-        this.updateVisibleItems(true)
+
+      itemSecondarySize() {
+        this.updateVisibleItems(true);
       },
     },
-  
-    created () {
-      this.$_startIndex = 0
-      this.$_endIndex = 0
-      this.$_views = new Map()
-      this.$_unusedViews = new Map()
-      this.$_scrollDirty = false
-      this.$_lastUpdateScrollPosition = 0
-  
+
+    created() {
+      this.$_startIndex = 0;
+      this.$_endIndex = 0;
+      this.$_views = new Map();
+      this.$_unusedViews = new Map();
+      this.$_scrollDirty = false;
+      this.$_lastUpdateScrollPosition = 0;
+
       // In SSR mode, we also prerender the same number of item for the first render
       // to avoir mismatch between server and client templates
       if (this.prerender) {
-        this.$_prerender = true
-        this.updateVisibleItems(false)
+        this.$_prerender = true;
+        this.updateVisibleItems(false);
       }
-  
+
       if (this.gridItems && !this.itemSize) {
-        console.error('[vue-recycle-scroller] You must provide an itemSize when using gridItems')
+        console.error('[vue-recycle-scroller] You must provide an itemSize when using gridItems');
       }
     },
-  
-    mounted () {
-      this.applyPageMode()
+
+    mounted() {
+      this.applyPageMode();
       this.$nextTick(() => {
         // In SSR mode, render the real number of visible items
-        this.$_prerender = false
-        this.updateVisibleItems(true)
-        this.ready = true
-      })
+        this.$_prerender = false;
+        this.updateVisibleItems(true);
+        this.ready = true;
+      });
     },
-  
-    activated () {
-      const lastPosition = this.$_lastUpdateScrollPosition
+
+    activated() {
+      const lastPosition = this.$_lastUpdateScrollPosition;
       if (typeof lastPosition === 'number') {
         this.$nextTick(() => {
-          this.scrollToPosition(lastPosition)
-        })
+          this.scrollToPosition(lastPosition);
+        });
       }
     },
-  
-    beforeDestroy () {
-      this.removeListeners()
+
+    beforeDestroy() {
+      this.removeListeners();
     },
-  
+
     methods: {
-      addView (pool, index, item, key, type) {
+      addView(pool, index, item, key, type) {
         const view = {
           item,
           position: 0,
-        }
+        };
         const nonReactive = {
           id: uid++,
           index,
           used: true,
           key,
           type,
-        }
+        };
         Object.defineProperty(view, 'nr', {
           configurable: false,
           value: nonReactive,
-        })
-        pool.push(view)
-        return view
+        });
+        pool.push(view);
+        return view;
       },
-  
-      unuseView (view, fake = false) {
-        const unusedViews = this.$_unusedViews
-        const type = view.nr.type
-        let unusedPool = unusedViews.get(type)
+
+      unuseView(view, fake = false) {
+        const unusedViews = this.$_unusedViews;
+        const type = view.nr.type;
+        let unusedPool = unusedViews.get(type);
         if (!unusedPool) {
-          unusedPool = []
-          unusedViews.set(type, unusedPool)
+          unusedPool = [];
+          unusedViews.set(type, unusedPool);
         }
-        unusedPool.push(view)
+        unusedPool.push(view);
         if (!fake) {
-          view.nr.used = false
-          view.position = -9999
-          this.$_views.delete(view.nr.key)
+          view.nr.used = false;
+          view.position = -9999;
+          this.$_views.delete(view.nr.key);
         }
       },
-  
-      handleResize () {
-        this.$emit('resize')
-        if (this.ready) this.updateVisibleItems(false)
+
+      handleResize() {
+        this.$emit('resize');
+        if (this.ready) this.updateVisibleItems(false);
       },
-  
-      handleScroll () {
+
+      handleScroll() {
         if (!this.$_scrollDirty) {
-          this.$_scrollDirty = true
+          this.$_scrollDirty = true;
           requestAnimationFrame(() => {
-            this.$_scrollDirty = false
-            const { continuous } = this.updateVisibleItems(false, true)
-  
+            this.$_scrollDirty = false;
+            const { continuous } = this.updateVisibleItems(false, true);
+
             // It seems sometimes chrome doesn't fire scroll event :/
             // When non continous scrolling is ending, we force a refresh
             if (!continuous) {
-              clearTimeout(this.$_refreshTimout)
-              this.$_refreshTimout = setTimeout(this.handleScroll, 100)
+              clearTimeout(this.$_refreshTimout);
+              this.$_refreshTimout = setTimeout(this.handleScroll, 100);
             }
-          })
+          });
         }
       },
-  
-      handleVisibilityChange (isVisible, entry) {
+
+      handleVisibilityChange(isVisible, entry) {
         if (this.ready) {
-          if (isVisible || entry.boundingClientRect.width !== 0 || 
-            entry.boundingClientRect.height !== 0) {
-            this.$emit('visible')
+          if (
+            isVisible ||
+            entry.boundingClientRect.width !== 0 ||
+            entry.boundingClientRect.height !== 0
+          ) {
+            this.$emit('visible');
             requestAnimationFrame(() => {
-              this.updateVisibleItems(false)
-            })
+              this.updateVisibleItems(false);
+            });
           } else {
-            this.$emit('hidden')
+            this.$emit('hidden');
           }
         }
       },
-  
-      updateVisibleItems (checkItem, checkPositionDiff = false) {
-        const itemSize = this.itemSize
-        const gridItems = this.gridItems || 1
-        const itemSecondarySize = this.itemSecondarySize || itemSize
-        const minItemSize = this.$_computedMinItemSize
-        const typeField = this.typeField
-        const keyField = this.simpleArray ? null : this.keyField
-        const items = this.items
-        const count = items.length
-        const sizes = this.sizes
-        const views = this.$_views
-        const unusedViews = this.$_unusedViews
-        const pool = this.pool
-        let startIndex, endIndex
-        let totalSize
-        let visibleStartIndex, visibleEndIndex
-  
+
+      updateVisibleItems(checkItem, checkPositionDiff = false) {
+        const itemSize = this.itemSize;
+        const gridItems = this.gridItems || 1;
+        const itemSecondarySize = this.itemSecondarySize || itemSize;
+        const minItemSize = this.$_computedMinItemSize;
+        const typeField = this.typeField;
+        const keyField = this.simpleArray ? null : this.keyField;
+        const items = this.items;
+        const count = items.length;
+        const sizes = this.sizes;
+        const views = this.$_views;
+        const unusedViews = this.$_unusedViews;
+        const pool = this.pool;
+        let startIndex, endIndex;
+        let totalSize;
+        let visibleStartIndex, visibleEndIndex;
+
         if (!count) {
-          startIndex = endIndex = visibleStartIndex = visibleEndIndex = totalSize = 0
+          startIndex = endIndex = visibleStartIndex = visibleEndIndex = totalSize = 0;
         } else if (this.$_prerender) {
-          startIndex = visibleStartIndex = 0
-          endIndex = visibleEndIndex = Math.min(this.prerender, items.length)
-          totalSize = null
+          startIndex = visibleStartIndex = 0;
+          endIndex = visibleEndIndex = Math.min(this.prerender, items.length);
+          totalSize = null;
         } else {
-          const scroll = this.getScroll()
-  
+          const scroll = this.getScroll();
+
           // Skip update if use hasn't scrolled enough
           if (checkPositionDiff) {
-            let positionDiff = scroll.start - this.$_lastUpdateScrollPosition
-            if (positionDiff < 0) positionDiff = -positionDiff
+            let positionDiff = scroll.start - this.$_lastUpdateScrollPosition;
+            if (positionDiff < 0) positionDiff = -positionDiff;
             if ((itemSize === null && positionDiff < minItemSize) || positionDiff < itemSize) {
               return {
                 continuous: true,
-              }
+              };
             }
           }
-          this.$_lastUpdateScrollPosition = scroll.start
-  
-          const buffer = this.buffer
-          scroll.start -= buffer
-          scroll.end += buffer
-  
+          this.$_lastUpdateScrollPosition = scroll.start;
+
+          const buffer = this.buffer;
+          scroll.start -= buffer;
+          scroll.end += buffer;
+
           // account for leading slot
-          let beforeSize = 0
+          let beforeSize = 0;
           if (this.$refs.before) {
-            beforeSize = this.$refs.before.scrollHeight
-            scroll.start -= beforeSize
+            beforeSize = this.$refs.before.scrollHeight;
+            scroll.start -= beforeSize;
           }
-  
+
           // account for trailing slot
           if (this.$refs.after) {
-            const afterSize = this.$refs.after.scrollHeight
-            scroll.end += afterSize
+            const afterSize = this.$refs.after.scrollHeight;
+            scroll.end += afterSize;
           }
-  
+
           // Variable size mode
           if (itemSize === null) {
-            let h
-            let a = 0
-            let b = count - 1
-            let i = ~~(count / 2)
-            let oldI
-  
+            let h;
+            let a = 0;
+            let b = count - 1;
+            let i = ~~(count / 2);
+            let oldI;
+
             // Searching for startIndex
             do {
-              oldI = i
-              h = sizes[i].accumulator
+              oldI = i;
+              h = sizes[i].accumulator;
               if (h < scroll.start) {
-                a = i
+                a = i;
               } else if (i < count - 1 && sizes[i + 1].accumulator > scroll.start) {
-                b = i
+                b = i;
               }
-              i = ~~((a + b) / 2)
-            } while (i !== oldI)
-            i < 0 && (i = 0)
-            startIndex = i
-  
+              i = ~~((a + b) / 2);
+            } while (i !== oldI);
+            i < 0 && (i = 0);
+            startIndex = i;
+
             // For container style
-            totalSize = sizes[count - 1].accumulator
-  
+            totalSize = sizes[count - 1].accumulator;
+
             // Searching for endIndex
-            for (endIndex = i; endIndex < count && 
-              sizes[endIndex].accumulator < scroll.end; endIndex++);
+            for (
+              endIndex = i;
+              endIndex < count && sizes[endIndex].accumulator < scroll.end;
+              endIndex++
+            );
             if (endIndex === -1) {
-              endIndex = items.length - 1
+              endIndex = items.length - 1;
             } else {
-              endIndex++
+              endIndex++;
               // Bounds
-              endIndex > count && (endIndex = count)
+              endIndex > count && (endIndex = count);
             }
-  
+
             // search visible startIndex
-            for (visibleStartIndex = startIndex; visibleStartIndex < count && 
-              (beforeSize + sizes[visibleStartIndex].accumulator) < scroll.start;
-              visibleStartIndex++);
-  
+            for (
+              visibleStartIndex = startIndex;
+              visibleStartIndex < count &&
+              beforeSize + sizes[visibleStartIndex].accumulator < scroll.start;
+              visibleStartIndex++
+            );
+
             // search visible endIndex
-            for (visibleEndIndex = visibleStartIndex; visibleEndIndex < count && 
-              (beforeSize + sizes[visibleEndIndex].accumulator) < scroll.end;
-              visibleEndIndex++);
+            for (
+              visibleEndIndex = visibleStartIndex;
+              visibleEndIndex < count &&
+              beforeSize + sizes[visibleEndIndex].accumulator < scroll.end;
+              visibleEndIndex++
+            );
           } else {
             // Fixed size mode
-            startIndex = ~~(scroll.start / itemSize * gridItems)
-            const remainer = startIndex % gridItems
-            startIndex -= remainer
-            endIndex = Math.ceil(scroll.end / itemSize * gridItems)
-            visibleStartIndex = Math.max(0, 
-              Math.floor((scroll.start - beforeSize) / itemSize * gridItems))
-            visibleEndIndex = Math.floor((scroll.end - beforeSize) / itemSize * gridItems)
-  
+            startIndex = ~~((scroll.start / itemSize) * gridItems);
+            const remainer = startIndex % gridItems;
+            startIndex -= remainer;
+            endIndex = Math.ceil((scroll.end / itemSize) * gridItems);
+            visibleStartIndex = Math.max(
+              0,
+              Math.floor(((scroll.start - beforeSize) / itemSize) * gridItems)
+            );
+            visibleEndIndex = Math.floor(((scroll.end - beforeSize) / itemSize) * gridItems);
+
             // Bounds
-            startIndex < 0 && (startIndex = 0)
-            endIndex > count && (endIndex = count)
-            visibleStartIndex < 0 && (visibleStartIndex = 0)
-            visibleEndIndex > count && (visibleEndIndex = count)
-  
-            totalSize = Math.ceil(count / gridItems) * itemSize
+            startIndex < 0 && (startIndex = 0);
+            endIndex > count && (endIndex = count);
+            visibleStartIndex < 0 && (visibleStartIndex = 0);
+            visibleEndIndex > count && (visibleEndIndex = count);
+
+            totalSize = Math.ceil(count / gridItems) * itemSize;
           }
         }
-  
+
         if (endIndex - startIndex > config.itemsLimit) {
-          this.itemsLimitError()
+          this.itemsLimitError();
         }
-  
-        this.totalSize = totalSize
-  
-        let view
-  
-        const continuous = startIndex <= this.$_endIndex && endIndex >= this.$_startIndex
-  
+
+        this.totalSize = totalSize;
+
+        let view;
+
+        const continuous = startIndex <= this.$_endIndex && endIndex >= this.$_startIndex;
+
         if (this.$_continuous !== continuous) {
           if (continuous) {
-            views.clear()
-            unusedViews.clear()
+            views.clear();
+            unusedViews.clear();
             for (let i = 0, l = pool.length; i < l; i++) {
-              view = pool[i]
-              this.unuseView(view)
+              view = pool[i];
+              this.unuseView(view);
             }
           }
-          this.$_continuous = continuous
+          this.$_continuous = continuous;
         } else if (continuous) {
           for (let i = 0, l = pool.length; i < l; i++) {
-            view = pool[i]
+            view = pool[i];
             if (view.nr.used) {
               // Update view item index
               if (checkItem) {
-                view.nr.index = items.indexOf(view.item)
+                view.nr.index = items.indexOf(view.item);
               }
-  
+
               // Check if index is still in visible range
-              if (
-                view.nr.index === -1 ||
-                view.nr.index < startIndex ||
-                view.nr.index >= endIndex
-              ) {
-                this.unuseView(view)
+              if (view.nr.index === -1 || view.nr.index < startIndex || view.nr.index >= endIndex) {
+                this.unuseView(view);
               }
             }
           }
         }
-  
-        const unusedIndex = continuous ? null : new Map()
-  
-        let item, type, unusedPool
-        let v
+
+        const unusedIndex = continuous ? null : new Map();
+
+        let item, type, unusedPool;
+        let v;
         for (let i = startIndex; i < endIndex; i++) {
-          item = items[i]
-          const key = keyField ? item[keyField] : item
+          item = items[i];
+          const key = keyField ? item[keyField] : item;
           if (key == null) {
-            throw new Error(`Key is ${key} on item (keyField is '${keyField}')`)
+            throw new Error(`Key is ${key} on item (keyField is '${keyField}')`);
           }
-          view = views.get(key)
-  
+          view = views.get(key);
+
           if (!itemSize && !sizes[i].size) {
-            if (view) this.unuseView(view)
-            continue
+            if (view) this.unuseView(view);
+            continue;
           }
-  
+
           // No view assigned to item
           if (!view) {
-            if (i === items.length - 1) this.$emit('scroll-end')
-            if (i === 0) this.$emit('scroll-start')
-  
-            type = item[typeField]
-            unusedPool = unusedViews.get(type)
-  
+            if (i === items.length - 1) this.$emit('scroll-end');
+            if (i === 0) this.$emit('scroll-start');
+
+            type = item[typeField];
+            unusedPool = unusedViews.get(type);
+
             if (continuous) {
               // Reuse existing view
               if (unusedPool && unusedPool.length) {
-                view = unusedPool.pop()
-                view.item = item
-                view.nr.used = true
-                view.nr.index = i
-                view.nr.key = key
-                view.nr.type = type
+                view = unusedPool.pop();
+                view.item = item;
+                view.nr.used = true;
+                view.nr.index = i;
+                view.nr.key = key;
+                view.nr.type = type;
               } else {
-                view = this.addView(pool, i, item, key, type)
+                view = this.addView(pool, i, item, key, type);
               }
             } else {
               // Use existing view
               // We don't care if they are already used
               // because we are not in continous scrolling
-              v = unusedIndex.get(type) || 0
-  
+              v = unusedIndex.get(type) || 0;
+
               if (!unusedPool || v >= unusedPool.length) {
-                view = this.addView(pool, i, item, key, type)
-                this.unuseView(view, true)
-                unusedPool = unusedViews.get(type)
+                view = this.addView(pool, i, item, key, type);
+                this.unuseView(view, true);
+                unusedPool = unusedViews.get(type);
               }
-  
-              view = unusedPool[v]
-              view.item = item
-              view.nr.used = true
-              view.nr.index = i
-              view.nr.key = key
-              view.nr.type = type
-              unusedIndex.set(type, v + 1)
-              v++
+
+              view = unusedPool[v];
+              view.item = item;
+              view.nr.used = true;
+              view.nr.index = i;
+              view.nr.key = key;
+              view.nr.type = type;
+              unusedIndex.set(type, v + 1);
+              v++;
             }
-            views.set(key, view)
+            views.set(key, view);
           } else {
-            view.nr.used = true
-            view.item = item
+            view.nr.used = true;
+            view.item = item;
           }
-  
+
           // Update position
           if (itemSize === null) {
-            view.position = sizes[i - 1].accumulator
-            view.offset = 0
+            view.position = sizes[i - 1].accumulator;
+            view.offset = 0;
           } else {
-            view.position = Math.floor(i / gridItems) * itemSize
-            view.offset = (i % gridItems) * itemSecondarySize
+            view.position = Math.floor(i / gridItems) * itemSize;
+            view.offset = (i % gridItems) * itemSecondarySize;
           }
         }
-  
-        this.$_startIndex = startIndex
-        this.$_endIndex = endIndex
-  
-        if (this.emitUpdate) this.$emit('update', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
-  
+
+        this.$_startIndex = startIndex;
+        this.$_endIndex = endIndex;
+
+        if (this.emitUpdate)
+          this.$emit('update', startIndex, endIndex, visibleStartIndex, visibleEndIndex);
+
         // After the user has finished scrolling
         // Sort views so text selection is correct
-        clearTimeout(this.$_sortTimer)
-        this.$_sortTimer = setTimeout(this.sortViews, 300)
-  
+        clearTimeout(this.$_sortTimer);
+        this.$_sortTimer = setTimeout(this.sortViews, 300);
+
         return {
           continuous,
-        }
+        };
       },
-  
-      getListenerTarget () {
-        let target = ScrollParent(this.$el)
+
+      getListenerTarget() {
+        let target = ScrollParent(this.$el);
         // Fix global scroll target for Chrome and Safari
-        if (window.document && (target === window.document.documentElement
-          || target === window.document.body)) {
-          target = window
+        if (
+          window.document &&
+          (target === window.document.documentElement || target === window.document.body)
+        ) {
+          target = window;
         }
-        return target
+        return target;
       },
-  
-      getScroll () {
-        const { $el: el, direction } = this
-        const isVertical = direction === 'vertical'
-        let scrollState
-  
+
+      getScroll() {
+        const { $el: el, direction } = this;
+        const isVertical = direction === 'vertical';
+        let scrollState;
+
         if (this.pageMode) {
-          const bounds = el.getBoundingClientRect()
-          const boundsSize = isVertical ? bounds.height : bounds.width
-          let start = -(isVertical ? bounds.top : bounds.left)
-          let size = isVertical ? window.innerHeight : window.innerWidth
+          const bounds = el.getBoundingClientRect();
+          const boundsSize = isVertical ? bounds.height : bounds.width;
+          let start = -(isVertical ? bounds.top : bounds.left);
+          let size = isVertical ? window.innerHeight : window.innerWidth;
           if (start < 0) {
-            size += start
-            start = 0
+            size += start;
+            start = 0;
           }
           if (start + size > boundsSize) {
-            size = boundsSize - start
+            size = boundsSize - start;
           }
           scrollState = {
             start,
             end: start + size,
-          }
+          };
         } else if (isVertical) {
           scrollState = {
             start: el.scrollTop,
             end: el.scrollTop + el.clientHeight,
-          }
+          };
         } else {
           scrollState = {
             start: el.scrollLeft,
             end: el.scrollLeft + el.clientWidth,
-          }
+          };
         }
-  
-        return scrollState
+
+        return scrollState;
       },
-  
-      applyPageMode () {
+
+      applyPageMode() {
         if (this.pageMode) {
-          this.addListeners()
+          this.addListeners();
         } else {
-          this.removeListeners()
+          this.removeListeners();
         }
       },
-  
-      addListeners () {
-        this.listenerTarget = this.getListenerTarget()
-        this.listenerTarget.addEventListener('scroll', this.handleScroll, supportsPassive
-          ? {
-              passive: true,
-            }
-          : false)
-        this.listenerTarget.addEventListener('resize', this.handleResize)
+
+      addListeners() {
+        this.listenerTarget = this.getListenerTarget();
+        this.listenerTarget.addEventListener(
+          'scroll',
+          this.handleScroll,
+          supportsPassive
+            ? {
+                passive: true,
+              }
+            : false
+        );
+        this.listenerTarget.addEventListener('resize', this.handleResize);
       },
-  
-      removeListeners () {
+
+      removeListeners() {
         if (!this.listenerTarget) {
-          return
+          return;
         }
-  
-        this.listenerTarget.removeEventListener('scroll', this.handleScroll)
-        this.listenerTarget.removeEventListener('resize', this.handleResize)
-  
-        this.listenerTarget = null
+
+        this.listenerTarget.removeEventListener('scroll', this.handleScroll);
+        this.listenerTarget.removeEventListener('resize', this.handleResize);
+
+        this.listenerTarget = null;
       },
-  
+
       // scrollToItem (index) {
       //   let scroll
       //   if (this.itemSize === null) {
@@ -740,53 +763,62 @@
       //   }
       //   this.scrollToPosition(scroll)
       // },
-  
-      scrollToPosition (position) {
-        const direction = this.direction === 'vertical'
-          ? { scroll: 'scrollTop', start: 'top' }
-          : { scroll: 'scrollLeft', start: 'left' }
-  
-        let viewport
-        let scrollDirection
-        let scrollDistance
-  
+
+      scrollToPosition(position) {
+        const direction =
+          this.direction === 'vertical'
+            ? { scroll: 'scrollTop', start: 'top' }
+            : { scroll: 'scrollLeft', start: 'left' };
+
+        let viewport;
+        let scrollDirection;
+        let scrollDistance;
+
         if (this.pageMode) {
-          const viewportEl = ScrollParent(this.$el)
+          const viewportEl = ScrollParent(this.$el);
           // HTML doesn't overflow like other elements
-          const scrollTop = viewportEl.tagName === 'HTML' ? 0 : viewportEl[direction.scroll]
-          const bounds = viewportEl.getBoundingClientRect()
-  
-          const scroller = this.$el.getBoundingClientRect()
-          const scrollerPosition = scroller[direction.start] - bounds[direction.start]
-  
-          viewport = viewportEl
-          scrollDirection = direction.scroll
-          scrollDistance = position + scrollTop + scrollerPosition
+          const scrollTop = viewportEl.tagName === 'HTML' ? 0 : viewportEl[direction.scroll];
+          const bounds = viewportEl.getBoundingClientRect();
+
+          const scroller = this.$el.getBoundingClientRect();
+          const scrollerPosition = scroller[direction.start] - bounds[direction.start];
+
+          viewport = viewportEl;
+          scrollDirection = direction.scroll;
+          scrollDistance = position + scrollTop + scrollerPosition;
         } else {
-          viewport = this.$el
-          scrollDirection = direction.scroll
-          scrollDistance = position
+          viewport = this.$el;
+          scrollDirection = direction.scroll;
+          scrollDistance = position;
         }
-  
-        viewport[scrollDirection] = scrollDistance
+
+        viewport[scrollDirection] = scrollDistance;
       },
-  
-      itemsLimitError () {
+
+      itemsLimitError() {
         setTimeout(() => {
-          console.log('It seems the scroller element isn\'t scrolling, so it tries to render all the items at once.', 'Scroller:', this.$el)
-          console.log('Make sure the scroller has a fixed height (or width) and \'overflow-y\' (or \'overflow-x\') set to \'auto\' so it can scroll correctly and only render the items visible in the scroll viewport.')
-        })
-        throw new Error('Rendered items limit reached')
+          console.log(
+            "It seems the scroller element isn't scrolling, so it tries to render all the items at once.",
+            'Scroller:',
+            this.$el
+          );
+          console.log(
+            "Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport."
+          );
+        });
+        throw new Error('Rendered items limit reached');
       },
-  
-      sortViews () {
-        this.pool.sort((viewA, viewB) => viewA.nr.index - viewB.nr.index)
+
+      sortViews() {
+        this.pool.sort((viewA, viewB) => viewA.nr.index - viewB.nr.index);
       },
     },
-  }
-  </script>
-  
-  <style>
+  };
+
+</script>
+
+
+<style>
   .vue-recycle-scroller {
     position: relative;
   }
@@ -803,37 +835,37 @@
     display: flex;
   }
   
-  .vue-recycle-scroller__slot {
+  .vue-recycle-scroller-slot {
     flex: auto 0 0;
   }
   
-  .vue-recycle-scroller__item-wrapper {
+  .vue-recycle-scroller-item-wrapper {
     flex: 1;
     box-sizing: border-box;
     overflow: hidden;
     position: relative;
   }
   
-  .vue-recycle-scroller.ready .vue-recycle-scroller__item-view {
+  .vue-recycle-scroller.ready .vue-recycle-scroller-item-view {
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
   }
   
-  .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
+  .vue-recycle-scroller.direction-vertical .vue-recycle-scroller-item-wrapper {
     width: 100%;
   }
   
-  .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
+  .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller-item-wrapper {
     height: 100%;
   }
   
-  .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
+  .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller-item-view {
     width: 100%;
   }
   
-  .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view {
+  .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller-item-view {
     height: 100%;
   }
-  </style>
\ No newline at end of file
+</style>
\ No newline at end of file

From 12490d24673f703b646291c60a554ba4dc57ad7d Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 5 Jan 2024 12:20:53 +0530
Subject: [PATCH 08/17] chore: add recyclescroller credits

---
 .../pdf_viewer/assets/src/views/RecyclableScroller.vue     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
index bcdce2c792c..db517532be2 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -1,3 +1,10 @@
+<!--
+  This file has been modified to adapt the component to the needs of Kolibri
+  The original file is available at:
+  https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
+ -->
+
+
 <template>
 
   <div

From b00e9815c4f1af0e41a44155b046ddf83de590e1 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 5 Jan 2024 12:50:31 +0530
Subject: [PATCH 09/17] chore: dynamic height loading

---
 .../assets/src/views/PdfRendererIndex.vue     | 55 +++++++++----------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 811ee9e5b0c..4fceb78402b 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -293,44 +293,34 @@
           // Get initial info from the loaded pdf document
           this.pdfDocument = pdfDocument;
           this.totalPages = this.pdfDocument.numPages;
+          // Is either the first page or the saved last page visited
+          const firstPageToRender = parseInt(this.getSavedPosition() * this.totalPages);
+
+          const firstPage = await this.getPage(firstPageToRender + 1);
+          const viewPort = firstPage.getViewport({ scale: 1 });
+          this.firstPageHeight = viewPort.height;
+          this.firstPageWidth = viewPort.width;
+          this.scale = this.$el.clientWidth / (this.firstPageWidth * this.screenSizeMultiplier);
+
           // init pdfPages array
+          // ensuring that firstPageToRender is resolved so that we do not refetch the page
           for (let i = 0; i < this.totalPages; i++) {
-            const pageSize = await this.pdfDocument.getPage(i + 1).then(page => {
-              return page.getViewport({ scale: 1 }).height;
-            });
             this.pdfPages.push({
-              page: null,
-              resolved: false,
+              page: i == firstPageToRender ? firstPage : null,
+              resolved: i == firstPageToRender,
               size: () => {
-                return pageSize * this.scale + MARGIN;
+                return this.firstPageHeight * this.scale + MARGIN;
               },
               index: i,
             });
           }
-          // Is either the first page or the saved last page visited
-          const firstPageToRender = parseInt(this.getSavedPosition() * this.totalPages);
-          return this.getPage(firstPageToRender + 1).then(firstPage => {
-            const viewPort = firstPage.getViewport({ scale: 1 });
-            this.firstPageHeight = viewPort.height;
-            this.firstPageWidth = viewPort.width;
-            this.scale = this.$el.clientWidth / (this.firstPageWidth * this.screenSizeMultiplier);
-
-            // Set the firstPageToRender into the pdfPages object so that we do not refetch the page
-            // from PDFJS when we do our initial render
-            // splice so changes are detected
-            this.pdfPages.splice(firstPageToRender, 1, {
-              ...this.pdfPages[firstPageToRender],
-              page: firstPage,
-              resolved: true,
-            });
-            pdfDocument.getOutline().then(outline => {
-              this.outline = outline;
-              this.showSideBar = outline && outline.length > 0 && this.windowIsLarge; // Remove if other tabs are already implemented
-              // Reduce the scale slightly if we are showing the sidebar
-              // at first load.
-              this.scale = this.showSideBar ? 0.75 * this.scale : this.scale;
-            });
-          });
+
+          const outline = await pdfDocument.getOutline();
+          this.outline = outline;
+          this.showSideBar = outline && outline.length > 0 && this.windowIsLarge; // Remove if other tabs are already implemented
+          // Reduce the scale slightly if we are showing the sidebar
+          // at first load.
+          this.scale = this.showSideBar ? 0.75 * this.scale : this.scale;
         })
         .catch(error => {
           this.reportLoadingError(error);
@@ -378,11 +368,16 @@
         if (pageNum > 0 && pageNum <= this.totalPages && !this.pdfPages[pageNum - 1].resolved) {
           const pageIndex = pageNum - 1;
           this.getPage(pageNum).then(pdfPage => {
+            const { height } = pdfPage.getViewport({ scale: 1 });
+
             // splice so changes are detected
             this.pdfPages.splice(pageIndex, 1, {
               ...this.pdfPages[pageIndex],
               page: pdfPage,
               resolved: true,
+              size: () => {
+                return height * this.scale + MARGIN;
+              },
             });
           });
         }

From 54490df836a784225b18579394a64eca8a64d0ca Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 5 Jan 2024 13:08:09 +0530
Subject: [PATCH 10/17] chore: scroll buffer & item height

---
 .../pdf_viewer/assets/src/views/PdfRendererIndex.vue       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 4fceb78402b..da1fa9a5be8 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -88,6 +88,7 @@
             id="pdf-container"
             ref="recycleList"
             :items="pdfPages"
+            :buffer="itemHeight * 2"
             :emitUpdate="true"
             class="pdf-container scroller-height"
             keyField="index"
@@ -185,9 +186,9 @@
       documentLoading() {
         return this.progress < 1;
       },
-      // itemHeight() {
-      //   return this.firstPageHeight * this.scale + MARGIN;
-      // },
+      itemHeight() {
+        return this.firstPageHeight * this.scale + MARGIN;
+      },
       savedLocation() {
         if (this.extraFields && this.extraFields.contentState) {
           return this.extraFields.contentState.savedLocation;

From bdaf4c48b235d27609e5b33a15f99bce9989ef01 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 5 Jan 2024 13:20:16 +0530
Subject: [PATCH 11/17] docs: modifications to recyclescroller

---
 .../pdf_viewer/assets/src/views/RecyclableScroller.vue      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
index db517532be2..c3720383dc1 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -2,6 +2,12 @@
   This file has been modified to adapt the component to the needs of Kolibri
   The original file is available at:
   https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
+
+  Modifications:
+    - file reformmatted
+    - class names with underscores (_) have been replaced by a hyphen (-)
+    - sizeField in variable height mode can now be a number 
+      or a function returning a number (Line 264, Original 198)
  -->
 
 

From 2b0024bc7695bc79175d4a2ed32ed276c440994a Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 5 Jan 2024 21:43:52 +0530
Subject: [PATCH 12/17] refactor: lint fix

---
 .../plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
index c3720383dc1..e2170af747d 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -881,4 +881,4 @@
   .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller-item-view {
     height: 100%;
   }
-</style>
\ No newline at end of file
+</style>

From fd4693408b647383fccd07f8690715b2abafdec3 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Sat, 6 Jan 2024 16:55:52 +0530
Subject: [PATCH 13/17] refactor: cleanup

---
 .../assets/src/views/PdfRendererIndex.vue     |  2 --
 .../assets/src/views/RecyclableScroller.vue   | 26 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index da1fa9a5be8..5db2a2cb85e 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -147,8 +147,6 @@
       PdfPage,
       CoreFullscreen,
       RecyclableScroller,
-      // DynamicScroller,
-      // DynamicScrollerItem
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     data: () => ({
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
index e2170af747d..c46827d7682 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -6,7 +6,7 @@
   Modifications:
     - file reformmatted
     - class names with underscores (_) have been replaced by a hyphen (-)
-    - sizeField in variable height mode can now be a number 
+    - sizeField in variable height mode can now be a number
       or a function returning a number (Line 264, Original 198)
  -->
 
@@ -47,9 +47,9 @@
         :style="ready ? {
           transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) `
             + `translate${direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,
-          width: gridItems ? `${direction === 'vertical' ? itemSecondarySize || 
+          width: gridItems ? `${direction === 'vertical' ? itemSecondarySize ||
             itemSize : itemSize}px` : undefined,
-          height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize || 
+          height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize ||
             itemSize : itemSize}px` : undefined,
         } : null"
         class="vue-recycle-scroller-item-view"
@@ -835,49 +835,49 @@
   .vue-recycle-scroller {
     position: relative;
   }
-  
+
   .vue-recycle-scroller.direction-vertical:not(.page-mode) {
     overflow-y: auto;
   }
-  
+
   .vue-recycle-scroller.direction-horizontal:not(.page-mode) {
     overflow-x: auto;
   }
-  
+
   .vue-recycle-scroller.direction-horizontal {
     display: flex;
   }
-  
+
   .vue-recycle-scroller-slot {
     flex: auto 0 0;
   }
-  
+
   .vue-recycle-scroller-item-wrapper {
     flex: 1;
     box-sizing: border-box;
     overflow: hidden;
     position: relative;
   }
-  
+
   .vue-recycle-scroller.ready .vue-recycle-scroller-item-view {
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
   }
-  
+
   .vue-recycle-scroller.direction-vertical .vue-recycle-scroller-item-wrapper {
     width: 100%;
   }
-  
+
   .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller-item-wrapper {
     height: 100%;
   }
-  
+
   .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller-item-view {
     width: 100%;
   }
-  
+
   .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller-item-view {
     height: 100%;
   }

From 979391eb5e57e8ca21bbde051f1a8bf95e77a9fb Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Wed, 24 Jan 2024 17:14:53 +0530
Subject: [PATCH 14/17] fix: mobile scrolling

---
 .../plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 5db2a2cb85e..36ad3e0d8a9 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -691,8 +691,8 @@
     margin: 0 auto;
   }
   // enable horizontal scrolling
-  /deep/ .recycle-list {
-    .item-wrapper {
+  /deep/ .vue-recycle-scroller {
+    .vue-recycle-scroller-item-wrapper {
       overflow-x: auto;
     }
   }

From fa6100e7d3e15e18991f8ad72c1d84b1b4057d3f Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Wed, 24 Jan 2024 17:51:06 +0530
Subject: [PATCH 15/17] fix: extra space at pdf end

---
 .../assets/src/views/PdfRendererIndex.vue         | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 36ad3e0d8a9..2cc9382a655 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -736,4 +736,19 @@
     height: 100%;
   }
 
+  /deep/ .resize-observer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: transparent;
+    pointer-events: none;
+    display: block;
+    overflow: hidden;
+    opacity: 0;
+  }
+
 </style>

From 3ac661401c5b8aa2afa30b434e43c3eee81549f8 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Thu, 25 Jan 2024 16:51:59 +0530
Subject: [PATCH 16/17] refactor: lint fix

---
 .../pdf_viewer/assets/src/views/PdfRendererIndex.vue      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 2cc9382a655..07a27ec7298 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -741,13 +741,13 @@
     top: 0;
     left: 0;
     z-index: -1;
+    display: block;
     width: 100%;
     height: 100%;
-    border: none;
-    background-color: transparent;
-    pointer-events: none;
-    display: block;
     overflow: hidden;
+    pointer-events: none;
+    background-color: transparent;
+    border: none;
     opacity: 0;
   }
 

From 9b9509811a7eab60f193d2c95814f916db7ac440 Mon Sep 17 00:00:00 2001
From: theditor <theditormcpe@gmail.com>
Date: Fri, 26 Jan 2024 11:39:45 +0530
Subject: [PATCH 17/17] refactor: more lint fixes

---
 .../pdf_viewer/assets/src/views/PdfRendererIndex.vue     | 2 +-
 .../pdf_viewer/assets/src/views/RecyclableScroller.vue   | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 07a27ec7298..c933014b5ff 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -747,7 +747,7 @@
     overflow: hidden;
     pointer-events: none;
     background-color: transparent;
-    border: none;
+    border: 0;
     opacity: 0;
   }
 
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
index c46827d7682..308e89a50a5 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/RecyclableScroller.vue
@@ -97,6 +97,9 @@
   import { ResizeObserver } from 'vue-resize';
   import { ObserveVisibility } from 'vue-observe-visibility';
   import ScrollParent from 'scrollparent';
+  import logger from 'kolibri.lib.logging';
+
+  const logging = logger.getLogger(__filename);
 
   let uid = 0;
 
@@ -325,7 +328,7 @@
       }
 
       if (this.gridItems && !this.itemSize) {
-        console.error('[vue-recycle-scroller] You must provide an itemSize when using gridItems');
+        logging.error('[vue-recycle-scroller] You must provide an itemSize when using gridItems');
       }
     },
 
@@ -810,12 +813,12 @@
 
       itemsLimitError() {
         setTimeout(() => {
-          console.log(
+          logging.debug(
             "It seems the scroller element isn't scrolling, so it tries to render all the items at once.",
             'Scroller:',
             this.$el
           );
-          console.log(
+          logging.debug(
             "Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport."
           );
         });