Sharkey/src/client/scripts/paging.ts

137 lines
3.2 KiB
TypeScript
Raw Normal View History

2019-05-20 21:07:11 +03:00
import Vue from 'vue';
export default (opts) => ({
data() {
return {
items: [],
2019-06-13 12:15:35 +03:00
offset: 0,
2019-05-20 21:07:11 +03:00
fetching: true,
moreFetching: false,
inited: false,
2020-02-09 15:00:38 +02:00
more: false,
backed: false,
2019-05-20 21:07:11 +03:00
};
},
computed: {
empty(): boolean {
return this.items.length == 0 && !this.fetching && this.inited;
},
error(): boolean {
return !this.fetching && !this.inited;
},
2019-05-20 21:07:11 +03:00
},
watch: {
pagination() {
this.init();
}
},
created() {
opts.displayLimit = opts.displayLimit || 30;
this.init();
},
methods: {
isScrollTop() {
return window.scrollY <= 8;
},
2019-05-20 21:07:11 +03:00
updateItem(i, item) {
Vue.set((this as any).items, i, item);
},
reload() {
this.items = [];
this.init();
},
async init() {
this.fetching = true;
if (opts.before) opts.before(this);
2019-05-20 21:07:11 +03: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, {
limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
2019-05-20 21:07:11 +03:00
...params
}).then(x => {
if (!this.pagination.noPaging && (x.length === (this.pagination.limit || 10) + 1)) {
2019-05-20 21:07:11 +03:00
x.pop();
this.items = x;
this.more = true;
} else {
this.items = x;
this.more = false;
}
2019-06-13 12:15:35 +03:00
this.offset = x.length;
2019-05-20 21:07:11 +03:00
this.inited = true;
this.fetching = false;
if (opts.after) opts.after(this, null);
2019-05-20 21:07:11 +03:00
}, e => {
this.fetching = false;
if (opts.after) opts.after(this, e);
2019-05-20 21:07:11 +03:00
});
},
async fetchMore() {
if (!this.more || this.moreFetching || this.items.length === 0) return;
this.moreFetching = true;
2020-02-09 15:00:38 +02:00
this.backed = true;
2019-05-20 21:07:11 +03: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, {
2019-05-20 21:07:11 +03:00
limit: (this.pagination.limit || 10) + 1,
...(this.pagination.offsetMode ? {
2019-06-13 12:15:35 +03:00
offset: this.offset,
} : {
untilId: this.items[this.items.length - 1].id,
}),
2019-05-20 21:07:11 +03:00
...params
}).then(x => {
if (x.length === (this.pagination.limit || 10) + 1) {
2019-05-20 21:07:11 +03:00
x.pop();
this.items = this.items.concat(x);
this.more = true;
} else {
this.items = this.items.concat(x);
this.more = false;
}
2019-06-13 12:15:35 +03:00
this.offset += x.length;
2019-05-20 21:07:11 +03:00
this.moreFetching = false;
}, e => {
this.moreFetching = false;
});
},
prepend(item, silent = false) {
if (opts.onPrepend) {
const cancel = opts.onPrepend(this, item, silent);
if (cancel) return;
}
// Prepend the item
this.items.unshift(item);
2019-05-20 21:07:11 +03:00
if (this.isScrollTop()) {
2019-05-20 21:07:11 +03:00
// オーバーフローしたら古い投稿は捨てる
if (this.items.length >= opts.displayLimit) {
this.items = this.items.slice(0, opts.displayLimit);
this.more = true;
}
}
},
append(item) {
this.items.push(item);
},
remove(find) {
this.items = this.items.filter(x => !find(x));
2019-05-20 21:07:11 +03:00
},
}
});