0
0
switched/src/client/scripts/paging.ts

189 lines
5.1 KiB
TypeScript
Raw Normal View History

2019-05-21 03:07:11 +09:00
import Vue from 'vue';
import { getScrollPosition, onScrollTop } from './scroll';
2020-02-12 06:01:59 +09:00
const SECOND_FETCH_LIMIT = 30;
2019-05-21 03:07:11 +09:00
export default (opts) => ({
data() {
return {
items: [],
2020-02-12 06:01:59 +09:00
queue: [],
2019-06-13 18:15:35 +09:00
offset: 0,
2019-05-21 03:07:11 +09:00
fetching: true,
moreFetching: false,
inited: false,
2020-02-09 22:00:38 +09:00
more: false,
backed: false,
2020-02-12 06:01:59 +09:00
isBackTop: false,
ilObserver: new IntersectionObserver(
(entries) => entries.some((entry) => entry.isIntersecting)
&& !this.moreFetching
&& !this.fetching
&& this.fetchMore()
),
loadMoreElement: null as Element,
unsubscribeInfiniteScrollMutation: null as any,
2019-05-21 03:07:11 +09:00
};
},
computed: {
empty(): boolean {
2020-04-04 08:46:54 +09:00
return this.items.length === 0 && !this.fetching && this.inited;
2019-05-21 03:07:11 +09:00
},
error(): boolean {
return !this.fetching && !this.inited;
},
2019-05-21 03:07:11 +09:00
},
watch: {
pagination() {
this.init();
2020-02-19 04:08:35 +09:00
},
queue() {
this.$emit('queue', this.queue.length);
2019-05-21 03:07:11 +09:00
}
},
created() {
opts.displayLimit = opts.displayLimit || 30;
this.init();
2020-02-12 06:01:59 +09:00
this.$on('hook:activated', () => {
this.isBackTop = false;
});
this.$on('hook:deactivated', () => {
this.isBackTop = window.scrollY === 0;
});
2019-05-21 03:07:11 +09:00
},
mounted() {
this.$nextTick(() => {
if (this.$refs.loadMore) {
this.loadMoreElement = this.$refs.loadMore instanceof Element ? this.$refs.loadMore : this.$refs.loadMore.$el;
if (this.$store.state.device.enableInfiniteScroll) this.ilObserver.observe(this.loadMoreElement);
this.loadMoreElement.addEventListener('click', this.fetchMore);
this.unsubscribeInfiniteScrollMutation = this.$store.subscribe(mutation => {
if (mutation.type !== 'device/setInfiniteScrollEnabling') return;
if (mutation.payload) return this.ilObserver.observe(this.loadMoreElement);
return this.ilObserver.unobserve(this.loadMoreElement);
});
}
});
},
beforeDestroy() {
this.ilObserver.disconnect();
if (this.$refs.loadMore) this.loadMoreElement.removeEventListener('click', this.fetchMore);
if (this.unsubscribeInfiniteScrollMutation) this.unsubscribeInfiniteScrollMutation();
},
2019-05-21 03:07:11 +09:00
methods: {
updateItem(i, item) {
Vue.set((this as any).items, i, item);
},
reload() {
this.items = [];
this.init();
},
async init() {
2020-02-23 02:28:07 +09:00
this.queue = [];
2019-05-21 03:07:11 +09:00
this.fetching = true;
if (opts.before) opts.before(this);
2019-05-21 03:07:11 +09:00
let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params;
if (params && params.then) params = await params;
const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
await this.$root.api(endpoint, {
2020-02-16 22:15:49 +09:00
...params,
limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
2020-02-16 22:15:49 +09:00
}).then(items => {
2020-02-18 18:19:11 +09:00
if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
2020-02-16 22:15:49 +09:00
items.pop();
this.items = this.pagination.reversed ? [...items].reverse() : items;
2019-05-21 03:07:11 +09:00
this.more = true;
} else {
2020-02-16 22:15:49 +09:00
this.items = this.pagination.reversed ? [...items].reverse() : items;
2019-05-21 03:07:11 +09:00
this.more = false;
}
2020-02-16 22:15:49 +09:00
this.offset = items.length;
2019-05-21 03:07:11 +09:00
this.inited = true;
this.fetching = false;
if (opts.after) opts.after(this, null);
2019-05-21 03:07:11 +09:00
}, e => {
this.fetching = false;
if (opts.after) opts.after(this, e);
2019-05-21 03:07:11 +09:00
});
},
async fetchMore() {
if (!this.more || this.moreFetching || this.items.length === 0) return;
this.moreFetching = true;
2020-02-09 22:00:38 +09:00
this.backed = true;
2019-05-21 03:07:11 +09:00
let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
if (params && params.then) params = await params;
const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
await this.$root.api(endpoint, {
2020-02-16 22:15:49 +09:00
...params,
limit: SECOND_FETCH_LIMIT + 1,
...(this.pagination.offsetMode ? {
2019-06-13 18:15:35 +09:00
offset: this.offset,
2020-02-16 22:15:49 +09:00
} : this.pagination.reversed ? {
sinceId: this.items[0].id,
2019-06-13 18:15:35 +09:00
} : {
untilId: this.items[this.items.length - 1].id,
}),
2020-02-16 22:15:49 +09:00
}).then(items => {
2020-02-18 18:19:11 +09:00
if (items.length > SECOND_FETCH_LIMIT) {
2020-02-16 22:15:49 +09:00
items.pop();
this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
2019-05-21 03:07:11 +09:00
this.more = true;
} else {
2020-02-16 22:15:49 +09:00
this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
2019-05-21 03:07:11 +09:00
this.more = false;
}
2020-02-16 22:15:49 +09:00
this.offset += items.length;
2019-05-21 03:07:11 +09:00
this.moreFetching = false;
}, e => {
this.moreFetching = false;
});
},
2020-02-12 06:01:59 +09:00
prepend(item) {
const isTop = this.isBackTop || (document.body.contains(this.$el) && (getScrollPosition(this.$el) === 0));
2019-05-21 03:07:11 +09:00
2020-02-12 06:01:59 +09:00
if (isTop) {
// Prepend the item
this.items.unshift(item);
2019-05-21 03:07:11 +09:00
2020-02-12 02:52:43 +09:00
// オーバーフローしたら古いアイテムは捨てる
2019-05-21 03:07:11 +09:00
if (this.items.length >= opts.displayLimit) {
this.items = this.items.slice(0, opts.displayLimit);
this.more = true;
}
2020-02-12 06:01:59 +09:00
} else {
this.queue.push(item);
onScrollTop(this.$el, () => {
for (const item of this.queue) {
this.prepend(item);
}
this.queue = [];
});
2019-05-21 03:07:11 +09:00
}
},
append(item) {
this.items.push(item);
},
remove(find) {
this.items = this.items.filter(x => !find(x));
2019-05-21 03:07:11 +09:00
},
}
});