decouple pull-refresh controller from paginator

src/components/generic/Paginator.vue

@@ -18,47 +18,12 @@
 </template>
 
 <script>
-  import { debounce } from 'throttle-debounce'
+  import { pullRefreshController } from '../../util/dom'
   import { createQueryString } from '../../util'
   import { decodeHash, manipulateHash } from '../../util/encoder'
 
   const getQueryString = url => url ? new URL(url).search.substring(1) : null
 
-  const pullRefreshController = (() => {
-    let startY
-
-    const refresh = debounce(350, false, () => {
-      for (const paginator of paginators) {
-        paginator.collection.clearCache()
-        paginator.reset()
-      }
-    })
-
-    document.body.addEventListener('touchstart', e => {
-      startY = e.touches[0].pageY
-    }, { passive: true })
-
-    document.body.addEventListener('touchmove', e => {
-      const y = e.touches[0].pageY
-      if (document.scrollingElement.scrollTop === 0 && y > startY) {
-        refresh()
-      }
-    }, { passive: true })
-
-    const paginators = []
-    return {
-      add (paginator) {
-        paginators.push(paginator)
-      },
-      remove (paginator) {
-        const index = paginators.indexOf(paginator)
-        if (index !== -1) {
-          paginators.splice(index, 1)
-        }
-      }
-    }
-  })()
-
   export default {
     props: {
       collection: {
@@ -182,6 +147,10 @@
         this.page = typeof page === 'number' ? Math.max(1, page) : 1
         this.updateFrom(this.currentQueryString, true)
       },
+      refresh () {
+        this.collection.clearCache()
+        this.reset()
+      },
       prev () {
         if (this.hasPrev) {
           this.page -= 1
@@ -203,10 +172,10 @@
     created () {
       const hashData = decodeHash(this.$route.hash.substring(1))
       this.reset(this.id && hashData[this.id] ? parseInt(hashData[this.id]) : null)
-      pullRefreshController.add(this)
+      pullRefreshController.subscribe(this)
     },
     beforeDestroy () {
-      pullRefreshController.remove(this)
+      pullRefreshController.unsubscribe(this)
     },
     watch: {
       allFilters: {

src/util/dom.js

+import { debounce } from 'throttle-debounce'
+
+export const pullRefreshController = (() => {
+  let startY
+
+  const refresh = debounce(350, false, () => {
+    for (const subscriber of subscribers) {
+      subscriber.refresh()
+    }
+  })
+
+  document.body.addEventListener('touchstart', e => {
+    startY = e.touches[0].pageY
+  }, { passive: true })
+
+  document.body.addEventListener('touchmove', e => {
+    const y = e.touches[0].pageY
+    if (document.scrollingElement.scrollTop === 0 && y > startY) {
+      refresh()
+    }
+  }, { passive: true })
+
+  const subscribers = []
+  return {
+    subscribe (subscriber) {
+      subscribers.push(subscriber)
+    },
+    unsubscribe (subscriber) {
+      const index = subscribers.indexOf(subscriber)
+      if (index !== -1) {
+        subscribers.splice(index, 1)
+      }
+    }
+  }
+})()