decouple pull-refresh controller from paginator (14128743) · Commits · Radio LOHRO / LOHROthek / thekno

src/components/generic/Paginator.vue

+7 −38

Original line number	Diff line number	Diff line
		@@ -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

0 → 100644

+35 −0

Original line number	Diff line number	Diff line
		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)
		}
		}
		}
		})()