Refactoring
This commit is contained in:
@@ -123,10 +123,10 @@ init((launch, os) => {
|
||||
{ path: '/notes/:note', name: 'note', component: () => import('../common/views/deck/deck.note-column.vue').then(m => m.default) },
|
||||
{ path: '/search', component: () => import('../common/views/deck/deck.search-column.vue').then(m => m.default) },
|
||||
{ path: '/tags/:tag', name: 'tag', component: () => import('../common/views/deck/deck.hashtag-column.vue').then(m => m.default) },
|
||||
{ path: '/featured', name: 'featured', component: () => import('../common/views/deck/deck.featured-column.vue').then(m => m.default) },
|
||||
{ path: '/featured', name: 'featured', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/featured.vue').then(m => m.default), platform: 'deck' }) },
|
||||
{ path: '/explore', name: 'explore', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default) }) },
|
||||
{ path: '/explore/tags/:tag', name: 'explore-tag', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default), tag: route.params.tag }) },
|
||||
{ path: '/i/favorites', component: () => import('../common/views/deck/deck.favorites-column.vue').then(m => m.default) },
|
||||
{ path: '/i/favorites', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/favorites.vue').then(m => m.default), platform: 'deck' }) },
|
||||
{ path: '/i/pages', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/pages.vue').then(m => m.default) }) },
|
||||
{ path: '/i/lists', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) }) },
|
||||
{ path: '/i/lists/:listId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.listId }) },
|
||||
@@ -138,7 +138,7 @@ init((launch, os) => {
|
||||
]),
|
||||
{ path: '/signup', name: 'signup', component: MkSignup },
|
||||
{ path: '/i/settings', name: 'settings', component: () => import('./views/pages/settings.vue').then(m => m.default) },
|
||||
{ path: '/i/favorites', name: 'favorites', component: MkFavorites },
|
||||
{ path: '/i/favorites', name: 'favorites', component: UI, props: route => ({ component: () => import('../common/views/pages/favorites.vue').then(m => m.default), platform: 'mobile' }) },
|
||||
{ path: '/i/pages', name: 'pages', component: UI, props: route => ({ component: () => import('../common/views/pages/pages.vue').then(m => m.default) }) },
|
||||
{ path: '/i/lists', name: 'user-lists', component: UI, props: route => ({ component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) }) },
|
||||
{ path: '/i/lists/:list', component: UI, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.list }) },
|
||||
@@ -157,7 +157,7 @@ init((launch, os) => {
|
||||
{ path: '/selectdrive', component: MkSelectDrive },
|
||||
{ path: '/search', component: MkSearch },
|
||||
{ path: '/tags/:tag', component: MkTag },
|
||||
{ path: '/featured', name: 'featured', component: () => import('./views/pages/featured.vue').then(m => m.default) },
|
||||
{ path: '/featured', name: 'featured', component: UI, props: route => ({ component: () => import('../common/views/pages/featured.vue').then(m => m.default), platform: 'mobile' }) },
|
||||
{ path: '/explore', name: 'explore', component: UI, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default) }) },
|
||||
{ path: '/explore/tags/:tag', name: 'explore-tag', component: UI, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default), tag: route.params.tag }) },
|
||||
{ path: '/share', component: MkShare },
|
||||
|
52
src/client/app/mobile/views/components/detail-notes.vue
Normal file
52
src/client/app/mobile/views/components/detail-notes.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="fdcvngpy">
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<template v-for="note in notes">
|
||||
<mk-note-detail class="post" :note="note" :key="note.id"/>
|
||||
</template>
|
||||
</sequential-entrance>
|
||||
<ui-button v-if="more" @click="fetchMore()">{{ $t('@.load-more') }}</ui-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import paging from '../../../common/scripts/paging';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
|
||||
mixins: [
|
||||
paging({
|
||||
captureWindowScroll: true,
|
||||
}),
|
||||
],
|
||||
|
||||
props: {
|
||||
pagination: {
|
||||
required: true
|
||||
},
|
||||
extract: {
|
||||
required: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
notes() {
|
||||
return this.extract ? this.extract(this.items) : this.items;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.fdcvngpy
|
||||
> * > .post
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
> * > .post
|
||||
margin-bottom 16px
|
||||
|
||||
</style>
|
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="ivaojijs" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
||||
<div class="empty" v-if="notes.length == 0 && !fetching && inited">{{ $t('@.no-notes') }}</div>
|
||||
<div class="empty" v-if="empty">{{ $t('@.no-notes') }}</div>
|
||||
|
||||
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
||||
<mk-error v-if="error" @retry="init()"/>
|
||||
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
@@ -13,8 +13,8 @@
|
||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
|
||||
<template v-for="(note, i) in _notes">
|
||||
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
|
||||
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
||||
<mk-note :note="note" :key="note.id"/>
|
||||
<p class="date" :key="note.id + '_date'" v-if="i != items.length - 1 && note._date != _notes[i + 1]._date">
|
||||
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
|
||||
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
||||
</p>
|
||||
@@ -34,157 +34,52 @@
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import shouldMuteNote from '../../../common/scripts/should-mute-note';
|
||||
|
||||
const displayLimit = 30;
|
||||
import paging from '../../../common/scripts/paging';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
|
||||
props: {
|
||||
makePromise: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
paging({
|
||||
captureWindowScroll: true,
|
||||
|
||||
data() {
|
||||
return {
|
||||
notes: [],
|
||||
queue: [],
|
||||
fetching: true,
|
||||
moreFetching: false,
|
||||
inited: false,
|
||||
more: false
|
||||
};
|
||||
onQueueChanged: (self, x) => {
|
||||
if (x.length > 0) {
|
||||
self.$store.commit('indicate', true);
|
||||
} else {
|
||||
self.$store.commit('indicate', false);
|
||||
}
|
||||
},
|
||||
|
||||
onPrepend: (self, note) => {
|
||||
// 弾く
|
||||
if (shouldMuteNote(self.$store.state.i, self.$store.state.settings, note)) return false;
|
||||
|
||||
// タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
|
||||
if (document.hidden || !self.isScrollTop()) {
|
||||
self.$store.commit('pushBehindNote', note);
|
||||
}
|
||||
}
|
||||
}),
|
||||
],
|
||||
|
||||
props: {
|
||||
pagination: {
|
||||
required: true
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
_notes(): any[] {
|
||||
return (this.notes as any).map(note => {
|
||||
const date = new Date(note.createdAt).getDate();
|
||||
const month = new Date(note.createdAt).getMonth() + 1;
|
||||
note._date = date;
|
||||
note._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
|
||||
return note;
|
||||
return (this.items as any).map(item => {
|
||||
const date = new Date(item.createdAt).getDate();
|
||||
const month = new Date(item.createdAt).getMonth() + 1;
|
||||
item._date = date;
|
||||
item._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
|
||||
return item;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
queue(x) {
|
||||
if (x.length > 0) {
|
||||
this.$store.commit('indicate', true);
|
||||
} else {
|
||||
this.$store.commit('indicate', false);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.onScroll);
|
||||
},
|
||||
|
||||
methods: {
|
||||
isScrollTop() {
|
||||
return window.scrollY <= 8;
|
||||
},
|
||||
|
||||
onNoteUpdated(i, note) {
|
||||
Vue.set((this as any).notes, i, note);
|
||||
},
|
||||
|
||||
reload() {
|
||||
this.queue = [];
|
||||
this.notes = [];
|
||||
this.init();
|
||||
},
|
||||
|
||||
async init() {
|
||||
this.fetching = true;
|
||||
await (this.makePromise()).then(x => {
|
||||
if (Array.isArray(x)) {
|
||||
this.notes = x;
|
||||
} else {
|
||||
this.notes = x.notes;
|
||||
this.more = x.more;
|
||||
}
|
||||
this.inited = true;
|
||||
this.fetching = false;
|
||||
this.$emit('inited');
|
||||
}, e => {
|
||||
this.fetching = false;
|
||||
});
|
||||
},
|
||||
|
||||
async fetchMore() {
|
||||
if (!this.more || this.moreFetching || this.notes.length === 0) return;
|
||||
this.moreFetching = true;
|
||||
await (this.makePromise(this.notes[this.notes.length - 1].id)).then(x => {
|
||||
this.notes = this.notes.concat(x.notes);
|
||||
this.more = x.more;
|
||||
this.moreFetching = false;
|
||||
}, e => {
|
||||
this.moreFetching = false;
|
||||
});
|
||||
},
|
||||
|
||||
prepend(note, silent = false) {
|
||||
// 弾く
|
||||
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
||||
|
||||
// タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
|
||||
if (document.hidden || !this.isScrollTop()) {
|
||||
this.$store.commit('pushBehindNote', note);
|
||||
}
|
||||
|
||||
if (this.isScrollTop()) {
|
||||
// Prepend the note
|
||||
this.notes.unshift(note);
|
||||
|
||||
// オーバーフローしたら古い投稿は捨てる
|
||||
if (this.notes.length >= displayLimit) {
|
||||
this.notes = this.notes.slice(0, displayLimit);
|
||||
this.more = true;
|
||||
}
|
||||
} else {
|
||||
this.queue.push(note);
|
||||
}
|
||||
},
|
||||
|
||||
append(note) {
|
||||
this.notes.push(note);
|
||||
},
|
||||
|
||||
releaseQueue() {
|
||||
for (const n of this.queue) {
|
||||
this.prepend(n, true);
|
||||
}
|
||||
this.queue = [];
|
||||
},
|
||||
|
||||
onScroll() {
|
||||
if (this.isScrollTop()) {
|
||||
this.releaseQueue();
|
||||
}
|
||||
|
||||
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.fetchMore();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@@ -71,15 +71,15 @@
|
||||
</div>
|
||||
|
||||
<template v-if="notification.type == 'quote'">
|
||||
<mk-note :note="notification.note" @update:note="onNoteUpdated"/>
|
||||
<mk-note :note="notification.note"/>
|
||||
</template>
|
||||
|
||||
<template v-if="notification.type == 'reply'">
|
||||
<mk-note :note="notification.note" @update:note="onNoteUpdated"/>
|
||||
<mk-note :note="notification.note"/>
|
||||
</template>
|
||||
|
||||
<template v-if="notification.type == 'mention'">
|
||||
<mk-note :note="notification.note" @update:note="onNoteUpdated"/>
|
||||
<mk-note :note="notification.note"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -95,17 +95,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@@ -10,41 +10,49 @@
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications" tag="div">
|
||||
<template v-for="(notification, i) in _notifications">
|
||||
<mk-notification :notification="notification" :key="notification.id"/>
|
||||
<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
|
||||
<p class="date" :key="notification.id + '_date'" v-if="i != items.length - 1 && notification._date != _notifications[i + 1]._date">
|
||||
<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
|
||||
<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
|
||||
</p>
|
||||
</template>
|
||||
</component>
|
||||
|
||||
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
|
||||
<template v-if="fetchingMoreNotifications"><fa icon="spinner" pulse fixed-width/></template>
|
||||
{{ fetchingMoreNotifications ? $t('@.loading') : $t('@.load-more') }}
|
||||
<button class="more" v-if="more" @click="fetchMore" :disabled="moreFetching">
|
||||
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
||||
{{ moreFetching ? $t('@.loading') : $t('@.load-more') }}
|
||||
</button>
|
||||
|
||||
<p class="empty" v-if="notifications.length == 0 && !fetching">{{ $t('empty') }}</p>
|
||||
<p class="empty" v-if="empty">{{ $t('empty') }}</p>
|
||||
|
||||
<mk-error v-if="error" @retry="init()"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import paging from '../../../common/scripts/paging';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/components/notifications.vue'),
|
||||
|
||||
mixins: [
|
||||
paging({}),
|
||||
],
|
||||
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
fetchingMoreNotifications: false,
|
||||
notifications: [],
|
||||
moreNotifications: false,
|
||||
connection: null
|
||||
connection: null,
|
||||
pagination: {
|
||||
endpoint: 'i/notifications',
|
||||
limit: 15,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
_notifications(): any[] {
|
||||
return (this.notifications as any).map(notification => {
|
||||
return (this.items as any).map(notification => {
|
||||
const date = new Date(notification.createdAt).getDate();
|
||||
const month = new Date(notification.createdAt).getMonth() + 1;
|
||||
notification._date = date;
|
||||
@@ -55,76 +63,23 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
|
||||
this.connection = this.$root.stream.useSharedConnection('main');
|
||||
|
||||
this.connection.on('notification', this.onNotification);
|
||||
|
||||
const max = 15;
|
||||
|
||||
this.$root.api('i/notifications', {
|
||||
limit: max + 1
|
||||
}).then(notifications => {
|
||||
if (notifications.length == max + 1) {
|
||||
this.moreNotifications = true;
|
||||
notifications.pop();
|
||||
}
|
||||
|
||||
this.notifications = notifications;
|
||||
this.fetching = false;
|
||||
this.$emit('fetched');
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.onScroll);
|
||||
this.connection.dispose();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchMoreNotifications() {
|
||||
if (this.fetchingMoreNotifications) return;
|
||||
|
||||
this.fetchingMoreNotifications = true;
|
||||
|
||||
const max = 30;
|
||||
|
||||
this.$root.api('i/notifications', {
|
||||
limit: max + 1,
|
||||
untilId: this.notifications[this.notifications.length - 1].id
|
||||
}).then(notifications => {
|
||||
if (notifications.length == max + 1) {
|
||||
this.moreNotifications = true;
|
||||
notifications.pop();
|
||||
} else {
|
||||
this.moreNotifications = false;
|
||||
}
|
||||
this.notifications = this.notifications.concat(notifications);
|
||||
this.fetchingMoreNotifications = false;
|
||||
});
|
||||
},
|
||||
|
||||
onNotification(notification) {
|
||||
// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
|
||||
this.$root.stream.send('readNotification', {
|
||||
id: notification.id
|
||||
});
|
||||
|
||||
this.notifications.unshift(notification);
|
||||
this.prepend(notification);
|
||||
},
|
||||
|
||||
onScroll() {
|
||||
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.fetchMoreNotifications();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@@ -1,14 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||
</div>
|
||||
<mk-notes ref="timeline" :pagination="pagination" @inited="() => $emit('loaded')"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
const fetchLimit = 10;
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['list'],
|
||||
|
||||
@@ -16,28 +12,17 @@ export default Vue.extend({
|
||||
return {
|
||||
connection: null,
|
||||
date: null,
|
||||
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
|
||||
listId: this.list.id,
|
||||
limit: fetchLimit + 1,
|
||||
untilId: cursor ? cursor : undefined,
|
||||
untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
|
||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
more: true
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
notes: notes,
|
||||
more: false
|
||||
};
|
||||
}
|
||||
})
|
||||
pagination: {
|
||||
endpoint: 'notes/user-list-timeline',
|
||||
limit: 10,
|
||||
params: init => ({
|
||||
listId: this.list.id,
|
||||
untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined),
|
||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||
})
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
@@ -1,15 +1,11 @@
|
||||
<template>
|
||||
<div class="mk-user-timeline">
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||
</div>
|
||||
<mk-notes ref="timeline" :pagination="pagination" @inited="() => $emit('loaded')"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
|
||||
const fetchLimit = 10;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/components/user-timeline.vue'),
|
||||
|
||||
@@ -18,26 +14,15 @@ export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
makePromise: cursor => this.$root.api('users/notes', {
|
||||
userId: this.user.id,
|
||||
limit: fetchLimit + 1,
|
||||
withFiles: this.withMedia,
|
||||
untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
|
||||
untilId: cursor ? cursor : undefined
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
more: true
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
notes: notes,
|
||||
more: false
|
||||
};
|
||||
}
|
||||
})
|
||||
pagination: {
|
||||
endpoint: 'users/notes',
|
||||
limit: 10,
|
||||
params: init => ({
|
||||
userId: this.user.id,
|
||||
withFiles: this.withMedia,
|
||||
untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined),
|
||||
})
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<mk-ui>
|
||||
<template #header><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('@.favorites') }}</template>
|
||||
|
||||
<main>
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<template v-for="favorite in favorites">
|
||||
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
||||
</template>
|
||||
</sequential-entrance>
|
||||
<ui-button v-if="existMore" @click="fetchMore()">{{ $t('@.load-more') }}</ui-button>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
favorites: [],
|
||||
existMore: false,
|
||||
moreFetching: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.title = `${this.$root.instanceName} | ${this.$t('@.favorites')}`;
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
this.fetching = true;
|
||||
|
||||
this.$root.api('i/favorites', {
|
||||
limit: 11
|
||||
}).then(favorites => {
|
||||
if (favorites.length == 11) {
|
||||
this.existMore = true;
|
||||
favorites.pop();
|
||||
}
|
||||
|
||||
this.favorites = favorites;
|
||||
this.fetching = false;
|
||||
|
||||
Progress.done();
|
||||
});
|
||||
},
|
||||
fetchMore() {
|
||||
this.moreFetching = true;
|
||||
this.$root.api('i/favorites', {
|
||||
limit: 11,
|
||||
untilId: this.favorites[this.favorites.length - 1].id
|
||||
}).then(favorites => {
|
||||
if (favorites.length == 11) {
|
||||
this.existMore = true;
|
||||
favorites.pop();
|
||||
} else {
|
||||
this.existMore = false;
|
||||
}
|
||||
|
||||
this.favorites = this.favorites.concat(favorites);
|
||||
this.moreFetching = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
> * > .post
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
> * > .post
|
||||
margin-bottom 16px
|
||||
|
||||
</style>
|
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<mk-ui>
|
||||
<template #header><span style="margin-right:4px;"><fa :icon="faNewspaper"/></span>{{ $t('@.featured-notes') }}</template>
|
||||
|
||||
<main>
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<template v-for="note in notes">
|
||||
<mk-note-detail class="post" :note="note" :key="note.id"/>
|
||||
</template>
|
||||
</sequential-entrance>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(''),
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
notes: [],
|
||||
faNewspaper
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
this.fetching = true;
|
||||
|
||||
this.$root.api('notes/featured', {
|
||||
limit: 30
|
||||
}).then(notes => {
|
||||
notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
this.notes = notes;
|
||||
this.fetching = false;
|
||||
|
||||
Progress.done();
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
> * > .post
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
> * > .post
|
||||
margin-bottom 16px
|
||||
|
||||
</style>
|
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</ui-container>
|
||||
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||
<mk-notes ref="timeline" :pagination="pagination" @inited="() => $emit('loaded')"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,8 +15,6 @@
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
|
||||
const fetchLimit = 10;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/home.timeline.vue'),
|
||||
|
||||
@@ -43,7 +41,7 @@ export default Vue.extend({
|
||||
},
|
||||
query: {},
|
||||
endpoint: null,
|
||||
makePromise: null
|
||||
pagination: null
|
||||
};
|
||||
},
|
||||
|
||||
@@ -110,25 +108,14 @@ export default Vue.extend({
|
||||
this.connection.on('mention', onNote);
|
||||
}
|
||||
|
||||
this.makePromise = cursor => this.$root.api(this.endpoint, {
|
||||
limit: fetchLimit + 1,
|
||||
untilDate: cursor ? undefined : (this.date ? this.date.getTime() : undefined),
|
||||
untilId: cursor ? cursor : undefined,
|
||||
...this.baseQuery, ...this.query
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
more: true
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
notes: notes,
|
||||
more: false
|
||||
};
|
||||
}
|
||||
});
|
||||
this.pagination = {
|
||||
endpoint: this.endpoint,
|
||||
limit: 10,
|
||||
params: init => ({
|
||||
untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined),
|
||||
...this.baseQuery, ...this.query
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
@@ -3,7 +3,7 @@
|
||||
<template #header><fa icon="search"/> {{ q }}</template>
|
||||
|
||||
<main>
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
|
||||
<mk-notes ref="timeline" :pagination="pagination" @inited="inited"/>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
@@ -14,42 +14,27 @@ import i18n from '../../../i18n';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import { genSearchQuery } from '../../../common/scripts/gen-search-query';
|
||||
|
||||
const limit = 20;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/search.vue'),
|
||||
data() {
|
||||
return {
|
||||
makePromise: async cursor => this.$root.api('notes/search', {
|
||||
limit: limit + 1,
|
||||
untilId: cursor ? cursor : undefined,
|
||||
...(await genSearchQuery(this, this.q))
|
||||
}).then(notes => {
|
||||
if (notes.length == limit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
more: true
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
notes: notes,
|
||||
more: false
|
||||
};
|
||||
}
|
||||
})
|
||||
pagination: {
|
||||
endpoint: 'notes/search',
|
||||
limit: 20,
|
||||
params: () => genSearchQuery(this, this.q)
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.$refs.timeline.reload();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
q(): string {
|
||||
return this.$route.query.q;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.$refs.timeline.reload();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = `${this.$t('search')}: ${this.q} | ${this.$root.instanceName}`;
|
||||
},
|
||||
|
@@ -3,7 +3,7 @@
|
||||
<template #header><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</template>
|
||||
|
||||
<main>
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
|
||||
<mk-notes ref="timeline" :pagination="pagination" @inited="inited"/>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
@@ -13,30 +13,17 @@ import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
|
||||
const limit = 20;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/tag.vue'),
|
||||
data() {
|
||||
return {
|
||||
makePromise: cursor => this.$root.api('notes/search-by-tag', {
|
||||
limit: limit + 1,
|
||||
untilId: cursor ? cursor : undefined,
|
||||
tag: this.$route.params.tag
|
||||
}).then(notes => {
|
||||
if (notes.length == limit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
more: true
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
notes: notes,
|
||||
more: false
|
||||
};
|
||||
pagination: {
|
||||
endpoint: 'notes/search-by-tag',
|
||||
limit: 20,
|
||||
params: {
|
||||
tag: this.$route.params.tag
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
Reference in New Issue
Block a user