From 5511b6e0136ee3f585527d0371268556265811b7 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 21 May 2019 03:07:11 +0900 Subject: [PATCH] Refactoring --- .../app/common/scripts/note-subscriber.ts | 2 - src/client/app/common/scripts/paging.ts | 169 ++++++++++++++++ .../app/common/views/components/user-list.vue | 63 ++---- .../app/common/views/deck/deck.direct.vue | 33 +--- .../views/deck/deck.favorites-column.vue | 58 ------ .../views/deck/deck.featured-column.vue | 46 ----- .../app/common/views/deck/deck.hashtag-tl.vue | 38 ++-- .../app/common/views/deck/deck.list-tl.vue | 38 ++-- .../app/common/views/deck/deck.mentions.vue | 34 ++-- .../app/common/views/deck/deck.notes.vue | 139 +++----------- .../common/views/deck/deck.notification.vue | 17 +- .../common/views/deck/deck.search-column.vue | 27 +-- src/client/app/common/views/deck/deck.tl.vue | 38 ++-- .../views/deck/deck.user-column.home.vue | 49 ++--- src/client/app/common/views/pages/explore.vue | 67 +++---- .../app/common/views/pages/favorites.vue | 44 +++++ .../app/common/views/pages/featured.vue | 44 +++++ .../app/common/views/pages/followers.vue | 29 +-- .../app/common/views/pages/following.vue | 29 +-- src/client/app/desktop/script.ts | 8 +- .../desktop/views/components/detail-notes.vue | 56 ++++++ .../app/desktop/views/components/notes.vue | 180 +++++------------ .../views/components/user-list-timeline.vue | 37 ++-- .../app/desktop/views/home/favorites.vue | 83 -------- .../app/desktop/views/home/featured.vue | 55 ------ src/client/app/desktop/views/home/search.vue | 27 +-- src/client/app/desktop/views/home/tag.vue | 27 +-- .../app/desktop/views/home/timeline.core.vue | 33 +--- .../desktop/views/home/user/user.timeline.vue | 41 ++-- src/client/app/mobile/script.ts | 8 +- .../mobile/views/components/detail-notes.vue | 52 +++++ .../app/mobile/views/components/notes.vue | 181 ++++-------------- .../mobile/views/components/notification.vue | 17 +- .../mobile/views/components/notifications.vue | 85 ++------ .../views/components/user-list-timeline.vue | 39 ++-- .../mobile/views/components/user-timeline.vue | 35 +--- .../app/mobile/views/pages/favorites.vue | 86 --------- .../app/mobile/views/pages/featured.vue | 61 ------ .../app/mobile/views/pages/home.timeline.vue | 33 +--- src/client/app/mobile/views/pages/search.vue | 37 ++-- src/client/app/mobile/views/pages/tag.vue | 27 +-- 41 files changed, 764 insertions(+), 1408 deletions(-) create mode 100644 src/client/app/common/scripts/paging.ts delete mode 100644 src/client/app/common/views/deck/deck.favorites-column.vue delete mode 100644 src/client/app/common/views/deck/deck.featured-column.vue create mode 100644 src/client/app/common/views/pages/favorites.vue create mode 100644 src/client/app/common/views/pages/featured.vue create mode 100644 src/client/app/desktop/views/components/detail-notes.vue delete mode 100644 src/client/app/desktop/views/home/favorites.vue delete mode 100644 src/client/app/desktop/views/home/featured.vue create mode 100644 src/client/app/mobile/views/components/detail-notes.vue delete mode 100644 src/client/app/mobile/views/pages/favorites.vue delete mode 100644 src/client/app/mobile/views/pages/featured.vue diff --git a/src/client/app/common/scripts/note-subscriber.ts b/src/client/app/common/scripts/note-subscriber.ts index d881fe01c..5b31a9f9d 100644 --- a/src/client/app/common/scripts/note-subscriber.ts +++ b/src/client/app/common/scripts/note-subscriber.ts @@ -144,8 +144,6 @@ export default prop => ({ break; } } - - this.$emit(`update:${prop}`, this.$_ns_note_); }, } }); diff --git a/src/client/app/common/scripts/paging.ts b/src/client/app/common/scripts/paging.ts new file mode 100644 index 000000000..458ee7e5c --- /dev/null +++ b/src/client/app/common/scripts/paging.ts @@ -0,0 +1,169 @@ +import Vue from 'vue'; + +export default (opts) => ({ + data() { + return { + items: [], + queue: [], + fetching: true, + moreFetching: false, + inited: false, + more: false + }; + }, + + computed: { + empty(): boolean { + return this.items.length == 0 && !this.fetching && this.inited; + }, + + error(): boolean { + return !this.fetching && !this.inited; + } + }, + + watch: { + queue(x) { + if (opts.onQueueChanged) opts.onQueueChanged(this, x); + }, + + pagination() { + this.init(); + } + }, + + created() { + opts.displayLimit = opts.displayLimit || 30; + this.init(); + }, + + mounted() { + if (opts.captureWindowScroll) { + this.isScrollTop = () => { + return window.scrollY <= 8; + }; + + window.addEventListener('scroll', this.onWindowScroll, { passive: true }); + } + }, + + beforeDestroy() { + if (opts.captureWindowScroll) { + window.removeEventListener('scroll', this.onWindowScroll); + } + }, + + methods: { + updateItem(i, item) { + Vue.set((this as any).items, i, item); + }, + + reload() { + this.queue = []; + this.items = []; + this.init(); + }, + + async init() { + this.fetching = true; + let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params; + if (params && params.then) params = await params; + await this.$root.api(this.pagination.endpoint, { + limit: (this.pagination.limit || 10) + 1, + ...params + }).then(x => { + if (x.length == (this.pagination.limit || 10) + 1) { + x.pop(); + this.items = x; + this.more = true; + } else { + this.items = x; + this.more = false; + } + this.inited = true; + this.fetching = false; + }, e => { + this.fetching = false; + }); + }, + + async fetchMore() { + if (!this.more || this.moreFetching || this.items.length === 0) return; + this.moreFetching = true; + let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params; + if (params && params.then) params = await params; + await this.$root.api(this.pagination.endpoint, { + limit: (this.pagination.limit || 10) + 1, + untilId: this.items[this.items.length - 1].id, + ...params + }).then(x => { + if (x.length == (this.pagination.limit || 10) + 1) { + x.pop(); + this.items = this.items.concat(x); + this.more = true; + } else { + this.items = this.items.concat(x); + this.more = false; + } + this.moreFetching = false; + }, e => { + this.moreFetching = false; + }); + }, + + prepend(item, silent = false) { + if (opts.onPrepend) { + const cancel = opts.onPrepend(this, item, silent); + if (cancel) return; + } + + if (this.isScrollTop()) { + // Prepend the item + this.items.unshift(item); + + // オーバーフローしたら古い投稿は捨てる + if (this.items.length >= opts.displayLimit) { + this.items = this.items.slice(0, opts.displayLimit); + this.more = true; + } + } else { + this.queue.push(item); + } + }, + + append(item) { + this.items.push(item); + }, + + releaseQueue() { + for (const n of this.queue) { + this.prepend(n, true); + } + this.queue = []; + }, + + onWindowScroll() { + if (this.isScrollTop()) { + this.onTop(); + } + + if (this.$store.state.settings.fetchOnScroll) { + // 親要素が display none だったら弾く + // https://github.com/syuilo/misskey/issues/1569 + // http://d.hatena.ne.jp/favril/20091105/1257403319 + if (this.$el.offsetHeight == 0) return; + + const current = window.scrollY + window.innerHeight; + if (current > document.body.offsetHeight - 8) this.onBottom(); + } + }, + + onTop() { + this.releaseQueue(); + }, + + onBottom() { + this.fetchMore(); + } + } +}); diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue index 6761886b0..d6cf75001 100644 --- a/src/client/app/common/views/components/user-list.vue +++ b/src/client/app/common/views/components/user-list.vue @@ -2,13 +2,13 @@ - +
-
+

{{ $t('no-users') }}

-
+
@@ -21,8 +21,8 @@
-
@@ -31,60 +31,31 @@ diff --git a/src/client/app/common/views/deck/deck.featured-column.vue b/src/client/app/common/views/deck/deck.featured-column.vue deleted file mode 100644 index d2c44e74c..000000000 --- a/src/client/app/common/views/deck/deck.featured-column.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/src/client/app/common/views/deck/deck.hashtag-tl.vue b/src/client/app/common/views/deck/deck.hashtag-tl.vue index 6f89f6a23..94d2efc43 100644 --- a/src/client/app/common/views/deck/deck.hashtag-tl.vue +++ b/src/client/app/common/views/deck/deck.hashtag-tl.vue @@ -1,13 +1,11 @@ diff --git a/src/client/app/common/views/deck/deck.notification.vue b/src/client/app/common/views/deck/deck.notification.vue index 3ced7b7e2..8a21bedb9 100644 --- a/src/client/app/common/views/deck/deck.notification.vue +++ b/src/client/app/common/views/deck/deck.notification.vue @@ -81,15 +81,15 @@
@@ -105,17 +105,6 @@ export default Vue.extend({ getNoteSummary }; }, - methods: { - onNoteUpdated(note) { - switch (this.notification.type) { - case 'quote': - case 'reply': - case 'mention': - Vue.set(this.notification, 'note', note); - break; - } - } - } }); diff --git a/src/client/app/common/views/deck/deck.search-column.vue b/src/client/app/common/views/deck/deck.search-column.vue index 17ee2ef45..a2d1142fb 100644 --- a/src/client/app/common/views/deck/deck.search-column.vue +++ b/src/client/app/common/views/deck/deck.search-column.vue @@ -5,7 +5,7 @@
- +
@@ -16,8 +16,6 @@ import XColumn from './deck.column.vue'; import XNotes from './deck.notes.vue'; import { genSearchQuery } from '../../../common/scripts/gen-search-query'; -const limit = 20; - export default Vue.extend({ components: { XColumn, @@ -26,24 +24,11 @@ export default Vue.extend({ data() { return { - makePromise: async cursor => this.$root.api('notes/search', { - limit: limit + 1, - offset: cursor ? cursor : undefined, - ...(await genSearchQuery(this, this.q)) - }).then(notes => { - if (notes.length == limit + 1) { - notes.pop(); - return { - notes: notes, - cursor: cursor ? cursor + limit : limit - }; - } else { - return { - notes: notes, - more: false - }; - } - }) + pagination: { + endpoint: 'notes/search', + limit: 20, + params: () => genSearchQuery(this, this.q) + } }; }, diff --git a/src/client/app/common/views/deck/deck.tl.vue b/src/client/app/common/views/deck/deck.tl.vue index 9284f06ee..e6c716070 100644 --- a/src/client/app/common/views/deck/deck.tl.vue +++ b/src/client/app/common/views/deck/deck.tl.vue @@ -6,7 +6,7 @@

{{ $t('disabled-timeline.description') }}

- + diff --git a/src/client/app/common/views/pages/featured.vue b/src/client/app/common/views/pages/featured.vue new file mode 100644 index 000000000..42c97e09f --- /dev/null +++ b/src/client/app/common/views/pages/featured.vue @@ -0,0 +1,44 @@ + + + diff --git a/src/client/app/common/views/pages/followers.vue b/src/client/app/common/views/pages/followers.vue index 1d68d71e8..b546e69ae 100644 --- a/src/client/app/common/views/pages/followers.vue +++ b/src/client/app/common/views/pages/followers.vue @@ -1,7 +1,5 @@ + + diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue index b051ff51c..cb8b9c3ce 100644 --- a/src/client/app/desktop/views/components/notes.vue +++ b/src/client/app/desktop/views/components/notes.vue @@ -4,9 +4,9 @@
-
{{ $t('@.no-notes') }}
+
{{ $t('@.no-notes') }}
- +