Refactor client (#4307)
* wip * wip * wip * wip * wip * wip * wip * Fix bug * 🎨 * 🎨 * 🎨
This commit is contained in:
syuilo
GitHub
parent
efd0368e56
commit
ba1492f977
|
|
@ -1,10 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-notes">
|
<div class="mk-notes">
|
||||||
|
<slot name="header"></slot>
|
||||||
|
|
||||||
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
|
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
|
||||||
|
|
||||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
|
||||||
|
|
||||||
<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
|
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
||||||
|
|
||||||
<div class="placeholder" v-if="fetching">
|
<div class="placeholder" v-if="fetching">
|
||||||
<template v-for="i in 10">
|
<template v-for="i in 10">
|
||||||
|
|
@ -23,8 +25,8 @@
|
||||||
</template>
|
</template>
|
||||||
</component>
|
</component>
|
||||||
|
|
||||||
<footer v-if="more">
|
<footer v-if="cursor != null">
|
||||||
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
||||||
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
||||||
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -43,24 +45,25 @@ const displayLimit = 30;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n(),
|
i18n: i18n(),
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
XNote
|
XNote
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
more: {
|
makePromise: {
|
||||||
type: Function,
|
required: true
|
||||||
required: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
requestInitPromise: null as () => Promise<any[]>,
|
|
||||||
notes: [],
|
notes: [],
|
||||||
queue: [],
|
queue: [],
|
||||||
fetching: true,
|
fetching: true,
|
||||||
moreFetching: false
|
moreFetching: false,
|
||||||
|
inited: false,
|
||||||
|
cursor: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -76,6 +79,10 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
},
|
},
|
||||||
|
|
@ -97,27 +104,41 @@ export default Vue.extend({
|
||||||
Vue.set((this as any).notes, i, note);
|
Vue.set((this as any).notes, i, note);
|
||||||
},
|
},
|
||||||
|
|
||||||
init(promiseGenerator: () => Promise<any[]>) {
|
reload() {
|
||||||
this.requestInitPromise = promiseGenerator;
|
|
||||||
this.resolveInitPromise();
|
|
||||||
},
|
|
||||||
|
|
||||||
resolveInitPromise() {
|
|
||||||
this.queue = [];
|
this.queue = [];
|
||||||
this.notes = [];
|
this.notes = [];
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
init() {
|
||||||
this.fetching = true;
|
this.fetching = true;
|
||||||
|
this.makePromise().then(x => {
|
||||||
const promise = this.requestInitPromise();
|
if (Array.isArray(x)) {
|
||||||
|
this.notes = x;
|
||||||
promise.then(notes => {
|
} else {
|
||||||
this.notes = notes;
|
this.notes = x.notes;
|
||||||
this.requestInitPromise = null;
|
this.cursor = x.cursor;
|
||||||
|
}
|
||||||
|
this.inited = true;
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
this.$emit('inited');
|
||||||
}, e => {
|
}, e => {
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
more() {
|
||||||
|
if (this.cursor == null || this.moreFetching) return;
|
||||||
|
this.moreFetching = true;
|
||||||
|
this.makePromise(this.cursor).then(x => {
|
||||||
|
this.notes = this.notes.concat(x.notes);
|
||||||
|
this.cursor = x.cursor;
|
||||||
|
this.moreFetching = false;
|
||||||
|
}, e => {
|
||||||
|
this.moreFetching = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
prepend(note, silent = false) {
|
prepend(note, silent = false) {
|
||||||
// 弾く
|
// 弾く
|
||||||
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
||||||
|
|
@ -151,10 +172,6 @@ export default Vue.extend({
|
||||||
this.notes.push(note);
|
this.notes.push(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
tail() {
|
|
||||||
return this.notes[this.notes.length - 1];
|
|
||||||
},
|
|
||||||
|
|
||||||
releaseQueue() {
|
releaseQueue() {
|
||||||
for (const n of this.queue) {
|
for (const n of this.queue) {
|
||||||
this.prepend(n, true);
|
this.prepend(n, true);
|
||||||
|
|
@ -162,15 +179,6 @@ export default Vue.extend({
|
||||||
this.queue = [];
|
this.queue = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
async loadMore() {
|
|
||||||
if (this.more == null) return;
|
|
||||||
if (this.moreFetching) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
await this.more();
|
|
||||||
this.moreFetching = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
onScroll() {
|
onScroll() {
|
||||||
if (this.isScrollTop()) {
|
if (this.isScrollTop()) {
|
||||||
this.releaseQueue();
|
this.releaseQueue();
|
||||||
|
|
@ -178,7 +186,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
if (this.$store.state.settings.fetchOnScroll !== false) {
|
if (this.$store.state.settings.fetchOnScroll !== false) {
|
||||||
const current = window.scrollY + window.innerHeight;
|
const current = window.scrollY + window.innerHeight;
|
||||||
if (current > document.body.offsetHeight - 8) this.loadMore();
|
if (current > document.body.offsetHeight - 8) this.more();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -187,6 +195,11 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-notes
|
.mk-notes
|
||||||
|
background var(--face)
|
||||||
|
box-shadow var(--shadow)
|
||||||
|
border-radius var(--round)
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
.transition
|
.transition
|
||||||
.mk-notes-enter
|
.mk-notes-enter
|
||||||
.mk-notes-leave-to
|
.mk-notes-leave-to
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
|
||||||
|
<template slot="header">
|
||||||
|
<slot></slot>
|
||||||
|
</template>
|
||||||
|
</mk-notes>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -13,10 +17,28 @@ export default Vue.extend({
|
||||||
props: ['list'],
|
props: ['list'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
connection: null,
|
||||||
moreFetching: false,
|
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
|
||||||
existMore: false,
|
listId: this.list.id,
|
||||||
connection: null
|
limit: fetchLimit + 1,
|
||||||
|
untilId: cursor ? cursor : 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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -37,63 +59,15 @@ export default Vue.extend({
|
||||||
this.connection.on('note', this.onNote);
|
this.connection.on('note', this.onNote);
|
||||||
this.connection.on('userAdded', this.onUserAdded);
|
this.connection.on('userAdded', this.onUserAdded);
|
||||||
this.connection.on('userRemoved', this.onUserRemoved);
|
this.connection.on('userRemoved', this.onUserRemoved);
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/user-list-timeline', {
|
|
||||||
listId: this.list.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
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();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/user-list-timeline', {
|
|
||||||
listId: this.list.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) (this.$refs.timeline as any).append(n);
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
},
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
// Prepend a note
|
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
},
|
},
|
||||||
onUserAdded() {
|
onUserAdded() {
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
},
|
},
|
||||||
onUserRemoved() {
|
onUserRemoved() {
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null"/>
|
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -13,23 +13,36 @@ export default Vue.extend({
|
||||||
XNotes
|
XNotes
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
connection: null,
|
||||||
moreFetching: false,
|
makePromise: cursor => this.$root.api('notes/mentions', {
|
||||||
existMore: false,
|
limit: fetchLimit + 1,
|
||||||
connection: null
|
untilId: cursor ? cursor : undefined,
|
||||||
|
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||||
|
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||||
|
includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
|
||||||
|
visibility: 'specified'
|
||||||
|
}).then(notes => {
|
||||||
|
if (notes.length == fetchLimit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.connection = this.$root.stream.useSharedConnection('main');
|
this.connection = this.$root.stream.useSharedConnection('main');
|
||||||
this.connection.on('mention', this.onNote);
|
this.connection.on('mention', this.onNote);
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -37,55 +50,6 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/mentions', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
|
|
||||||
visibility: 'specified'
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/mentions', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
|
|
||||||
visibility: 'specified'
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
// Prepend a note
|
// Prepend a note
|
||||||
if (note.visibility == 'specified') {
|
if (note.visibility == 'specified') {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null"/>
|
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</div>
|
</div>
|
||||||
</x-column>
|
</x-column>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -28,58 +28,28 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('i/favorites', {
|
||||||
moreFetching: false,
|
limit: fetchLimit + 1,
|
||||||
existMore: false,
|
untilId: cursor ? cursor : undefined,
|
||||||
|
}).then(notes => {
|
||||||
|
notes = notes.map(x => x.note);
|
||||||
|
if (notes.length == fetchLimit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('i/favorites', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes.map(x => x.note));
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('i/favorites', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.timeline.focus();
|
this.$refs.timeline.focus();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<x-notes ref="timeline" :more="null"/>
|
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</div>
|
</div>
|
||||||
</x-column>
|
</x-column>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -27,31 +27,17 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
faNewspaper,
|
||||||
faNewspaper
|
makePromise: cursor => this.$root.api('notes/featured', {
|
||||||
|
limit: 20,
|
||||||
|
}).then(notes => {
|
||||||
|
notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||||
|
return notes;
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/featured', {
|
|
||||||
limit: 20,
|
|
||||||
}).then(notes => {
|
|
||||||
notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.timeline.focus();
|
this.$refs.timeline.focus();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
|
<x-notes ref="timeline" :make-promise="makePromise" :media-view="mediaView" @inited="() => $emit('loaded')"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -32,16 +32,35 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
connection: null,
|
||||||
moreFetching: false,
|
makePromise: cursor => this.$root.api('notes/search_by_tag', {
|
||||||
existMore: false,
|
limit: fetchLimit + 1,
|
||||||
connection: null
|
untilId: cursor ? cursor : undefined,
|
||||||
|
withFiles: this.mediaOnly,
|
||||||
|
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||||
|
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||||
|
includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
|
||||||
|
query: this.tagTl.query
|
||||||
|
}).then(notes => {
|
||||||
|
if (notes.length == fetchLimit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
mediaOnly() {
|
mediaOnly() {
|
||||||
this.fetch();
|
this.$refs.timeline.reload();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -51,8 +70,6 @@ export default Vue.extend({
|
||||||
q: this.tagTl.query
|
q: this.tagTl.query
|
||||||
});
|
});
|
||||||
this.connection.on('note', this.onNote);
|
this.connection.on('note', this.onNote);
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -60,61 +77,8 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/search_by_tag', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
withFiles: this.mediaOnly,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
|
|
||||||
query: this.tagTl.query
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/search_by_tag', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
withFiles: this.mediaOnly,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
|
|
||||||
query: this.tagTl.query
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
if (this.mediaOnly && note.files.length == 0) return;
|
if (this.mediaOnly && note.files.length == 0) return;
|
||||||
|
|
||||||
// Prepend a note
|
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
|
<x-notes ref="timeline" :make-promise="makePromise" :media-view="mediaView" @inited="() => $emit('loaded')"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -32,16 +32,35 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
connection: null,
|
||||||
moreFetching: false,
|
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
|
||||||
existMore: false,
|
listId: this.list.id,
|
||||||
connection: null
|
limit: fetchLimit + 1,
|
||||||
|
untilId: cursor ? cursor : undefined,
|
||||||
|
withFiles: this.mediaOnly,
|
||||||
|
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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
mediaOnly() {
|
mediaOnly() {
|
||||||
this.fetch();
|
this.$refs.timeline.reload();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -53,8 +72,6 @@ export default Vue.extend({
|
||||||
this.connection.on('note', this.onNote);
|
this.connection.on('note', this.onNote);
|
||||||
this.connection.on('userAdded', this.onUserAdded);
|
this.connection.on('userAdded', this.onUserAdded);
|
||||||
this.connection.on('userRemoved', this.onUserRemoved);
|
this.connection.on('userRemoved', this.onUserRemoved);
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -62,70 +79,17 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/user-list-timeline', {
|
|
||||||
listId: this.list.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
withFiles: this.mediaOnly,
|
|
||||||
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();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/user-list-timeline', {
|
|
||||||
listId: this.list.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
withFiles: this.mediaOnly,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
if (this.mediaOnly && note.files.length == 0) return;
|
if (this.mediaOnly && note.files.length == 0) return;
|
||||||
|
|
||||||
// Prepend a note
|
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
onUserAdded() {
|
onUserAdded() {
|
||||||
this.fetch();
|
this.$refs.timeline.reload();
|
||||||
},
|
},
|
||||||
|
|
||||||
onUserRemoved() {
|
onUserRemoved() {
|
||||||
this.fetch();
|
this.$refs.timeline.reload();
|
||||||
},
|
},
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null"/>
|
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -13,23 +13,35 @@ export default Vue.extend({
|
||||||
XNotes
|
XNotes
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
connection: null,
|
||||||
moreFetching: false,
|
makePromise: cursor => this.$root.api('notes/mentions', {
|
||||||
existMore: false,
|
limit: fetchLimit + 1,
|
||||||
connection: null
|
untilId: cursor ? cursor : 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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.connection = this.$root.stream.useSharedConnection('main');
|
this.connection = this.$root.stream.useSharedConnection('main');
|
||||||
this.connection.on('mention', this.onNote);
|
this.connection.on('mention', this.onNote);
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -37,55 +49,7 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/mentions', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
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();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/mentions', {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
// Prepend a note
|
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
|
<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
|
||||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
|
||||||
|
|
||||||
|
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
||||||
|
|
||||||
<div class="placeholder" v-if="fetching">
|
<div class="placeholder" v-if="fetching">
|
||||||
<template v-for="i in 10">
|
<template v-for="i in 10">
|
||||||
|
|
@ -8,8 +10,6 @@
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
|
|
||||||
|
|
||||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition notes" ref="notes" tag="div">
|
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition notes" ref="notes" tag="div">
|
||||||
<template v-for="(note, i) in _notes">
|
<template v-for="(note, i) in _notes">
|
||||||
|
|
@ -27,8 +27,8 @@
|
||||||
</template>
|
</template>
|
||||||
</component>
|
</component>
|
||||||
|
|
||||||
<footer v-if="more">
|
<footer v-if="cursor != null">
|
||||||
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
||||||
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
||||||
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -40,13 +40,13 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import i18n from '../../../i18n';
|
import i18n from '../../../i18n';
|
||||||
import shouldMuteNote from '../../../common/scripts/should-mute-note';
|
import shouldMuteNote from '../../../common/scripts/should-mute-note';
|
||||||
|
|
||||||
import XNote from '../components/note.vue';
|
import XNote from '../components/note.vue';
|
||||||
|
|
||||||
const displayLimit = 20;
|
const displayLimit = 20;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n(),
|
i18n: i18n(),
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
XNote
|
XNote
|
||||||
},
|
},
|
||||||
|
|
@ -54,9 +54,8 @@ export default Vue.extend({
|
||||||
inject: ['column', 'isScrollTop', 'count'],
|
inject: ['column', 'isScrollTop', 'count'],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
more: {
|
makePromise: {
|
||||||
type: Function,
|
required: true
|
||||||
required: false
|
|
||||||
},
|
},
|
||||||
mediaView: {
|
mediaView: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
@ -68,11 +67,12 @@ export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
rootEl: null,
|
rootEl: null,
|
||||||
requestInitPromise: null as () => Promise<any[]>,
|
|
||||||
notes: [],
|
notes: [],
|
||||||
queue: [],
|
queue: [],
|
||||||
fetching: true,
|
fetching: true,
|
||||||
moreFetching: false
|
moreFetching: false,
|
||||||
|
inited: false,
|
||||||
|
cursor: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -97,6 +97,7 @@ export default Vue.extend({
|
||||||
created() {
|
created() {
|
||||||
this.column.$on('top', this.onTop);
|
this.column.$on('top', this.onTop);
|
||||||
this.column.$on('bottom', this.onBottom);
|
this.column.$on('bottom', this.onBottom);
|
||||||
|
this.init();
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -113,27 +114,41 @@ export default Vue.extend({
|
||||||
Vue.set((this as any).notes, i, note);
|
Vue.set((this as any).notes, i, note);
|
||||||
},
|
},
|
||||||
|
|
||||||
init(promiseGenerator: () => Promise<any[]>) {
|
reload() {
|
||||||
this.requestInitPromise = promiseGenerator;
|
|
||||||
this.resolveInitPromise();
|
|
||||||
},
|
|
||||||
|
|
||||||
resolveInitPromise() {
|
|
||||||
this.queue = [];
|
this.queue = [];
|
||||||
this.notes = [];
|
this.notes = [];
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
init() {
|
||||||
this.fetching = true;
|
this.fetching = true;
|
||||||
|
this.makePromise().then(x => {
|
||||||
const promise = this.requestInitPromise();
|
if (Array.isArray(x)) {
|
||||||
|
this.notes = x;
|
||||||
promise.then(notes => {
|
} else {
|
||||||
this.notes = notes;
|
this.notes = x.notes;
|
||||||
this.requestInitPromise = null;
|
this.cursor = x.cursor;
|
||||||
|
}
|
||||||
|
this.inited = true;
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
this.$emit('inited');
|
||||||
}, e => {
|
}, e => {
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
more() {
|
||||||
|
if (this.cursor == null || this.moreFetching) return;
|
||||||
|
this.moreFetching = true;
|
||||||
|
this.makePromise(this.cursor).then(x => {
|
||||||
|
this.notes = this.notes.concat(x.notes);
|
||||||
|
this.cursor = x.cursor;
|
||||||
|
this.moreFetching = false;
|
||||||
|
}, e => {
|
||||||
|
this.moreFetching = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
prepend(note, silent = false) {
|
prepend(note, silent = false) {
|
||||||
// 弾く
|
// 弾く
|
||||||
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
||||||
|
|
@ -160,10 +175,6 @@ export default Vue.extend({
|
||||||
this.notes.push(note);
|
this.notes.push(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
tail() {
|
|
||||||
return this.notes[this.notes.length - 1];
|
|
||||||
},
|
|
||||||
|
|
||||||
releaseQueue() {
|
releaseQueue() {
|
||||||
for (const n of this.queue) {
|
for (const n of this.queue) {
|
||||||
this.prepend(n, true);
|
this.prepend(n, true);
|
||||||
|
|
@ -171,21 +182,12 @@ export default Vue.extend({
|
||||||
this.queue = [];
|
this.queue = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
async loadMore() {
|
|
||||||
if (this.more == null) return;
|
|
||||||
if (this.moreFetching) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
await this.more();
|
|
||||||
this.moreFetching = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
onTop() {
|
onTop() {
|
||||||
this.releaseQueue();
|
this.releaseQueue();
|
||||||
},
|
},
|
||||||
|
|
||||||
onBottom() {
|
onBottom() {
|
||||||
this.loadMore();
|
this.more();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null"/>
|
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</div>
|
</div>
|
||||||
</x-column>
|
</x-column>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -25,12 +25,24 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('notes/search', {
|
||||||
moreFetching: false,
|
limit: limit + 1,
|
||||||
existMore: false,
|
offset: cursor ? cursor : undefined,
|
||||||
offset: 0,
|
query: this.q
|
||||||
empty: false,
|
}).then(notes => {
|
||||||
notAvailable: false
|
if (notes.length == limit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: cursor ? cursor + limit : limit
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -41,59 +53,9 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
$route: 'fetch'
|
$route() {
|
||||||
},
|
this.$refs.timeline.reload();
|
||||||
|
|
||||||
created() {
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/search', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
query: this.q
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == 0) this.empty = true;
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
}, (e: string) => {
|
|
||||||
this.fetching = false;
|
|
||||||
if (e === 'searching not available') this.notAvailable = true;
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
more() {
|
|
||||||
this.offset += limit;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/search', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
query: this.q
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</p>
|
</p>
|
||||||
<p class="desc">{{ $t('disabled-timeline.description') }}</p>
|
<p class="desc">{{ $t('disabled-timeline.description') }}</p>
|
||||||
</div>
|
</div>
|
||||||
<x-notes v-else ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
|
<x-notes v-else ref="timeline" :make-promise="makePromise" :media-view="mediaView" @inited="() => $emit('loaded')"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -44,12 +44,10 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
|
||||||
moreFetching: false,
|
|
||||||
existMore: false,
|
|
||||||
connection: null,
|
connection: null,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
faMinusCircle
|
faMinusCircle,
|
||||||
|
makePromise: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -79,6 +77,28 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.connection = this.stream;
|
this.connection = this.stream;
|
||||||
|
|
||||||
|
|
@ -93,8 +113,6 @@ export default Vue.extend({
|
||||||
meta.disableLocalTimeline && ['local', 'hybrid'].includes(this.src) ||
|
meta.disableLocalTimeline && ['local', 'hybrid'].includes(this.src) ||
|
||||||
meta.disableGlobalTimeline && ['global'].includes(this.src));
|
meta.disableGlobalTimeline && ['global'].includes(this.src));
|
||||||
});
|
});
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -102,64 +120,13 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api(this.endpoint, {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
withFiles: this.mediaOnly,
|
|
||||||
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();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api(this.endpoint, {
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
withFiles: this.mediaOnly,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
if (this.mediaOnly && note.files.length == 0) return;
|
if (this.mediaOnly && note.files.length == 0) return;
|
||||||
|
|
||||||
// Prepend a note
|
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
onChangeFollowing() {
|
onChangeFollowing() {
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
},
|
},
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<ui-container>
|
<ui-container>
|
||||||
<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
|
<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
|
||||||
<div>
|
<div>
|
||||||
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
|
<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</div>
|
</div>
|
||||||
</ui-container>
|
</ui-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,7 +35,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import i18n from '../../../i18n';
|
import i18n from '../../../i18n';
|
||||||
import parseAcct from '../../../../../misc/acct/parse';
|
|
||||||
import XNotes from './deck.notes.vue';
|
import XNotes from './deck.notes.vue';
|
||||||
import XNote from '../components/note.vue';
|
import XNote from '../components/note.vue';
|
||||||
import { concat } from '../../../../../prelude/array';
|
import { concat } from '../../../../../prelude/array';
|
||||||
|
|
@ -45,6 +44,7 @@ const fetchLimit = 10;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n('deck/deck.user-column.vue'),
|
i18n: i18n('deck/deck.user-column.vue'),
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
XNotes,
|
XNotes,
|
||||||
XNote
|
XNote
|
||||||
|
|
@ -59,10 +59,30 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
existMore: false,
|
|
||||||
moreFetching: false,
|
|
||||||
withFiles: false,
|
withFiles: false,
|
||||||
images: [],
|
images: [],
|
||||||
|
makePromise: cursor => this.$root.api('users/notes', {
|
||||||
|
userId: this.user.id,
|
||||||
|
limit: fetchLimit + 1,
|
||||||
|
untilId: cursor ? cursor : undefined,
|
||||||
|
withFiles: this.withFiles,
|
||||||
|
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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -72,10 +92,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
fetch() {
|
||||||
this.$nextTick(() => {
|
|
||||||
(this.$refs.timeline as any).init(() => this.initTl());
|
|
||||||
});
|
|
||||||
|
|
||||||
const image = [
|
const image = [
|
||||||
'image/jpeg',
|
'image/jpeg',
|
||||||
'image/png',
|
'image/png',
|
||||||
|
|
@ -177,52 +193,6 @@ export default Vue.extend({
|
||||||
chart.render();
|
chart.render();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
initTl() {
|
|
||||||
return new Promise((res, rej) => {
|
|
||||||
this.$root.api('users/notes', {
|
|
||||||
userId: this.user.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilDate: new Date().getTime() + 1000 * 86400 * 365,
|
|
||||||
withFiles: this.withFiles,
|
|
||||||
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();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
}, rej);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchMoreNotes() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('users/notes', {
|
|
||||||
userId: this.user.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime(),
|
|
||||||
withFiles: this.withFiles,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) (this.$refs.timeline as any).append(n);
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="oxgbmvii">
|
<div>
|
||||||
<div class="notes">
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited">
|
||||||
<header>
|
<header slot="header" class="oxgbmvii">
|
||||||
<span><fa icon="search"/> {{ q }}</span>
|
<span><fa icon="search"/> {{ q }}</span>
|
||||||
</header>
|
</header>
|
||||||
<p v-if="!fetching && notAvailable">{{ $t('not-available') }}</p>
|
</mk-notes>
|
||||||
<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
|
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -22,27 +19,40 @@ export default Vue.extend({
|
||||||
i18n: i18n('desktop/views/pages/search.vue'),
|
i18n: i18n('desktop/views/pages/search.vue'),
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('notes/search', {
|
||||||
moreFetching: false,
|
limit: limit + 1,
|
||||||
existMore: false,
|
offset: cursor ? cursor : undefined,
|
||||||
offset: 0,
|
query: this.q
|
||||||
empty: false,
|
}).then(notes => {
|
||||||
notAvailable: false
|
if (notes.length == limit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: cursor ? cursor + limit : limit
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
$route: 'fetch'
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
q(): string {
|
q(): string {
|
||||||
return this.$route.query.q;
|
return this.$route.query.q;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.$refs.timeline.reload();
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
document.addEventListener('keydown', this.onDocumentKeydown);
|
document.addEventListener('keydown', this.onDocumentKeydown);
|
||||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
|
Progress.start();
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
document.removeEventListener('keydown', this.onDocumentKeydown);
|
document.removeEventListener('keydown', this.onDocumentKeydown);
|
||||||
|
|
@ -56,75 +66,23 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fetch() {
|
inited() {
|
||||||
this.fetching = true;
|
Progress.done();
|
||||||
Progress.start();
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/search', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
query: this.q
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == 0) this.empty = true;
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
Progress.done();
|
|
||||||
}, (e: string) => {
|
|
||||||
this.fetching = false;
|
|
||||||
Progress.done();
|
|
||||||
if (e === 'searching not available') this.notAvailable = true;
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
},
|
},
|
||||||
more() {
|
|
||||||
this.offset += limit;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/search', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
query: this.q
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.oxgbmvii
|
.oxgbmvii
|
||||||
> .notes
|
padding 0 8px
|
||||||
background var(--face)
|
z-index 10
|
||||||
box-shadow var(--shadow)
|
background var(--faceHeader)
|
||||||
border-radius var(--round)
|
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
||||||
overflow hidden
|
|
||||||
|
|
||||||
> header
|
> span
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
z-index 10
|
font-size 0.9em
|
||||||
background var(--faceHeader)
|
line-height 42px
|
||||||
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
color var(--text)
|
||||||
|
|
||||||
> span
|
|
||||||
padding 0 8px
|
|
||||||
font-size 0.9em
|
|
||||||
line-height 42px
|
|
||||||
color var(--text)
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited">
|
||||||
<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
|
<header class="wqraeznr" slot="header">
|
||||||
|
<span><fa icon="hashtag"/> {{ $route.params.tag }}</span>
|
||||||
|
</header>
|
||||||
|
</mk-notes>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -16,21 +19,35 @@ export default Vue.extend({
|
||||||
i18n: i18n('desktop/views/pages/tag.vue'),
|
i18n: i18n('desktop/views/pages/tag.vue'),
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('notes/search_by_tag', {
|
||||||
moreFetching: false,
|
limit: limit + 1,
|
||||||
existMore: false,
|
offset: cursor ? cursor : undefined,
|
||||||
offset: 0,
|
tag: this.$route.params.tag
|
||||||
empty: false
|
}).then(notes => {
|
||||||
|
if (notes.length == limit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: cursor ? cursor + limit : limit
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: 'fetch'
|
$route() {
|
||||||
|
this.$refs.timeline.reload();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
document.addEventListener('keydown', this.onDocumentKeydown);
|
document.addEventListener('keydown', this.onDocumentKeydown);
|
||||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
|
Progress.start();
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
document.removeEventListener('keydown', this.onDocumentKeydown);
|
document.removeEventListener('keydown', this.onDocumentKeydown);
|
||||||
|
|
@ -44,73 +61,23 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fetch() {
|
inited() {
|
||||||
this.fetching = true;
|
Progress.done();
|
||||||
Progress.start();
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/search_by_tag', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
tag: this.$route.params.tag
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == 0) this.empty = true;
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
Progress.done();
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
},
|
||||||
more() {
|
|
||||||
this.offset += limit;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/search_by_tag', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
tag: this.$route.params.tag
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" scoped>
|
||||||
.notes
|
.wqraeznr
|
||||||
background var(--face)
|
padding 0 8px
|
||||||
box-shadow var(--shadow)
|
z-index 10
|
||||||
border-radius var(--round)
|
background var(--faceHeader)
|
||||||
overflow hidden
|
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
||||||
|
|
||||||
.empty
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 32px
|
|
||||||
max-width 400px
|
|
||||||
text-align center
|
|
||||||
color #999
|
|
||||||
|
|
||||||
> [data-icon]
|
|
||||||
display block
|
|
||||||
margin-bottom 16px
|
|
||||||
font-size 3em
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
|
> span
|
||||||
|
padding 0 8px
|
||||||
|
font-size 0.9em
|
||||||
|
line-height 42px
|
||||||
|
color var(--text)
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,11 @@
|
||||||
<router-link to="/explore">{{ $t('@.empty-timeline-info.explore') }}</router-link>
|
<router-link to="/explore">{{ $t('@.empty-timeline-info.explore') }}</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
|
||||||
<p :class="$style.empty" slot="empty">
|
<template slot="header">
|
||||||
|
<slot></slot>
|
||||||
|
</template>
|
||||||
|
<p slot="empty">
|
||||||
<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
|
<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
|
||||||
</p>
|
</p>
|
||||||
</mk-notes>
|
</mk-notes>
|
||||||
|
|
@ -21,6 +24,7 @@ const fetchLimit = 10;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n('desktop/views/components/timeline.core.vue'),
|
i18n: i18n('desktop/views/components/timeline.core.vue'),
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
src: {
|
src: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -33,9 +37,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
|
||||||
moreFetching: false,
|
|
||||||
existMore: false,
|
|
||||||
connection: null,
|
connection: null,
|
||||||
date: null,
|
date: null,
|
||||||
baseQuery: {
|
baseQuery: {
|
||||||
|
|
@ -44,21 +45,18 @@ export default Vue.extend({
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||||
},
|
},
|
||||||
query: {},
|
query: {},
|
||||||
endpoint: null
|
endpoint: null,
|
||||||
|
makePromise: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
alone(): boolean {
|
alone(): boolean {
|
||||||
return this.$store.state.i.followingCount == 0;
|
return this.$store.state.i.followingCount == 0;
|
||||||
},
|
|
||||||
|
|
||||||
canFetchMore(): boolean {
|
|
||||||
return !this.moreFetching && !this.fetching && this.existMore;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
created() {
|
||||||
const prepend = note => {
|
const prepend = note => {
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
};
|
};
|
||||||
|
|
@ -109,7 +107,25 @@ export default Vue.extend({
|
||||||
this.connection.on('mention', onNote);
|
this.connection.on('mention', onNote);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.fetch();
|
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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -117,57 +133,8 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api(this.endpoint, Object.assign({
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilDate: this.date ? this.date.getTime() : undefined
|
|
||||||
}, this.baseQuery, this.query)).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
if (!this.canFetchMore) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api(this.endpoint, Object.assign({
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id
|
|
||||||
}, this.baseQuery, this.query));
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
(this.$refs.timeline as any).focus();
|
(this.$refs.timeline as any).focus();
|
||||||
},
|
|
||||||
|
|
||||||
warp(date) {
|
|
||||||
this.date = date;
|
|
||||||
this.fetch();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -186,20 +153,3 @@ export default Vue.extend({
|
||||||
margin 0 0 8px 0
|
margin 0 0 8px 0
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
|
||||||
.empty
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 32px
|
|
||||||
max-width 400px
|
|
||||||
text-align center
|
|
||||||
color #999
|
|
||||||
|
|
||||||
> [data-icon]
|
|
||||||
display block
|
|
||||||
margin-bottom 16px
|
|
||||||
font-size 3em
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-timeline">
|
<div class="pwbzawku">
|
||||||
<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
|
<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<header>
|
<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
|
||||||
<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
|
<header class="zahtxcqi">
|
||||||
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
|
<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
|
||||||
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
|
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
|
||||||
<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
|
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
|
||||||
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
|
<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
|
||||||
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
|
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
|
||||||
<div class="buttons">
|
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
|
||||||
<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
|
<div class="buttons">
|
||||||
<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
|
<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
|
||||||
<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
|
<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
|
||||||
<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
|
<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
|
||||||
</div>
|
<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
|
||||||
</header>
|
</div>
|
||||||
<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
|
</header>
|
||||||
<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
|
</component>
|
||||||
<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
|
|
||||||
<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
|
|
||||||
<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
|
|
||||||
<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
|
|
||||||
<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
|
|
||||||
<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -51,6 +45,16 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
options(): any {
|
||||||
|
return {
|
||||||
|
...(this.src == 'list' ? { list: this.list } : { src: this.src }),
|
||||||
|
...(this.src == 'tag' ? { tagTl: this.tagTl } : {}),
|
||||||
|
key: this.src == 'list' ? this.list.id : this.src
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
src() {
|
src() {
|
||||||
this.saveSrc();
|
this.saveSrc();
|
||||||
|
|
@ -186,88 +190,82 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-timeline
|
.pwbzawku
|
||||||
> .form
|
> .form
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
box-shadow var(--shadow)
|
box-shadow var(--shadow)
|
||||||
border-radius var(--round)
|
border-radius var(--round)
|
||||||
|
|
||||||
> .main
|
.zahtxcqi
|
||||||
background var(--face)
|
padding 0 8px
|
||||||
box-shadow var(--shadow)
|
z-index 10
|
||||||
border-radius var(--round)
|
background var(--faceHeader)
|
||||||
overflow hidden
|
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
||||||
|
|
||||||
> header
|
> .buttons
|
||||||
padding 0 8px
|
position absolute
|
||||||
z-index 10
|
z-index 2
|
||||||
background var(--faceHeader)
|
top 0
|
||||||
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
right 0
|
||||||
|
padding-right 8px
|
||||||
|
|
||||||
> .buttons
|
> button
|
||||||
position absolute
|
padding 0 8px
|
||||||
z-index 2
|
font-size 0.9em
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
padding-right 8px
|
|
||||||
|
|
||||||
> button
|
|
||||||
padding 0 8px
|
|
||||||
font-size 0.9em
|
|
||||||
line-height 42px
|
|
||||||
color var(--faceTextButton)
|
|
||||||
|
|
||||||
> .badge
|
|
||||||
position absolute
|
|
||||||
top -4px
|
|
||||||
right 4px
|
|
||||||
font-size 10px
|
|
||||||
color var(--notificationIndicator)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color var(--faceTextButtonHover)
|
|
||||||
|
|
||||||
&[data-active]
|
|
||||||
color var(--primary)
|
|
||||||
cursor default
|
|
||||||
|
|
||||||
&:before
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom 0
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
height 2px
|
|
||||||
background var(--primary)
|
|
||||||
|
|
||||||
> span
|
|
||||||
display inline-block
|
|
||||||
padding 0 10px
|
|
||||||
line-height 42px
|
line-height 42px
|
||||||
font-size 12px
|
color var(--faceTextButton)
|
||||||
user-select none
|
|
||||||
|
> .badge
|
||||||
|
position absolute
|
||||||
|
top -4px
|
||||||
|
right 4px
|
||||||
|
font-size 10px
|
||||||
|
color var(--notificationIndicator)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--faceTextButtonHover)
|
||||||
|
|
||||||
&[data-active]
|
&[data-active]
|
||||||
color var(--primary)
|
color var(--primary)
|
||||||
cursor default
|
cursor default
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
content ""
|
content ""
|
||||||
display block
|
display block
|
||||||
position absolute
|
position absolute
|
||||||
bottom 0
|
bottom 0
|
||||||
left -8px
|
left 0
|
||||||
width calc(100% + 16px)
|
width 100%
|
||||||
height 2px
|
height 2px
|
||||||
background var(--primary)
|
background var(--primary)
|
||||||
|
|
||||||
&:not([data-active])
|
> span
|
||||||
color var(--desktopTimelineSrc)
|
display inline-block
|
||||||
cursor pointer
|
padding 0 10px
|
||||||
|
line-height 42px
|
||||||
|
font-size 12px
|
||||||
|
user-select none
|
||||||
|
|
||||||
&:hover
|
&[data-active]
|
||||||
color var(--desktopTimelineSrcHover)
|
color var(--primary)
|
||||||
|
cursor default
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
bottom 0
|
||||||
|
left -8px
|
||||||
|
width calc(100% + 16px)
|
||||||
|
height 2px
|
||||||
|
background var(--primary)
|
||||||
|
|
||||||
|
&:not([data-active])
|
||||||
|
color var(--desktopTimelineSrc)
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--desktopTimelineSrcHover)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
</ui-container>
|
</ui-container>
|
||||||
</div>
|
</div>
|
||||||
<x-photos :user="user"/>
|
<x-photos :user="user"/>
|
||||||
<x-timeline class="timeline" ref="tl" :user="user"/>
|
<x-timeline ref="tl" :user="user"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -51,7 +51,4 @@ export default Vue.extend({
|
||||||
> *
|
> *
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
|
|
||||||
> .timeline
|
|
||||||
box-shadow var(--shadow)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
|
<div>
|
||||||
<header>
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
|
||||||
<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
|
<header slot="header" class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
|
||||||
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
|
<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
|
||||||
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
|
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
|
||||||
<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
|
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
|
||||||
</header>
|
<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
</header>
|
||||||
<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>
|
<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>
|
||||||
</mk-notes>
|
</mk-notes>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,29 +20,47 @@ const fetchLimit = 10;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n('desktop/views/pages/user/user.timeline.vue'),
|
i18n: i18n('desktop/views/pages/user/user.timeline.vue'),
|
||||||
|
|
||||||
props: ['user'],
|
props: ['user'],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
fetching: true,
|
||||||
moreFetching: false,
|
|
||||||
existMore: false,
|
|
||||||
mode: 'default',
|
mode: 'default',
|
||||||
unreadCount: 0,
|
unreadCount: 0,
|
||||||
date: null
|
date: null,
|
||||||
|
makePromise: cursor => this.$root.api('users/notes', {
|
||||||
|
userId: this.user.id,
|
||||||
|
limit: fetchLimit + 1,
|
||||||
|
includeReplies: this.mode == 'with-replies',
|
||||||
|
includeMyRenotes: this.mode != 'my-posts',
|
||||||
|
withFiles: this.mode == 'with-media',
|
||||||
|
untilId: cursor ? cursor : undefined
|
||||||
|
}).then(notes => {
|
||||||
|
if (notes.length == fetchLimit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
mode() {
|
mode() {
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
document.addEventListener('keydown', this.onDocumentKeydown);
|
document.addEventListener('keydown', this.onDocumentKeydown);
|
||||||
|
|
||||||
this.fetch(() => this.$emit('loaded'));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -58,58 +76,9 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
fetch(cb?) {
|
|
||||||
this.fetching = true;
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('users/notes', {
|
|
||||||
userId: this.user.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilDate: this.date ? this.date.getTime() : new Date().getTime() + 1000 * 86400 * 365,
|
|
||||||
includeReplies: this.mode == 'with-replies',
|
|
||||||
includeMyRenotes: this.mode != 'my-posts',
|
|
||||||
withFiles: this.mode == 'with-media'
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
if (cb) cb();
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('users/notes', {
|
|
||||||
userId: this.user.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
includeReplies: this.mode == 'with-replies',
|
|
||||||
includeMyRenotes: this.mode != 'my-posts',
|
|
||||||
withFiles: this.mode == 'with-media',
|
|
||||||
untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
warp(date) {
|
warp(date) {
|
||||||
this.date = date;
|
this.date = date;
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -117,59 +86,38 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.oh5y2r7l5lx8j6jj791ykeiwgihheguk
|
.oh5y2r7l5lx8j6jj791ykeiwgihheguk
|
||||||
background var(--face)
|
padding 0 8px
|
||||||
border-radius var(--round)
|
z-index 10
|
||||||
overflow hidden
|
background var(--faceHeader)
|
||||||
|
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
|
||||||
|
|
||||||
> header
|
> span
|
||||||
padding 0 8px
|
display inline-block
|
||||||
z-index 10
|
padding 0 10px
|
||||||
background var(--faceHeader)
|
line-height 42px
|
||||||
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
|
font-size 12px
|
||||||
|
user-select none
|
||||||
|
|
||||||
> span
|
&[data-active]
|
||||||
display inline-block
|
color var(--primary)
|
||||||
padding 0 10px
|
cursor default
|
||||||
line-height 42px
|
font-weight bold
|
||||||
font-size 12px
|
|
||||||
user-select none
|
|
||||||
|
|
||||||
&[data-active]
|
&:before
|
||||||
color var(--primary)
|
content ""
|
||||||
cursor default
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
&:before
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom 0
|
|
||||||
left -8px
|
|
||||||
width calc(100% + 16px)
|
|
||||||
height 2px
|
|
||||||
background var(--primary)
|
|
||||||
|
|
||||||
&:not([data-active])
|
|
||||||
color var(--desktopTimelineSrc)
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color var(--desktopTimelineSrcHover)
|
|
||||||
|
|
||||||
> .mk-notes
|
|
||||||
|
|
||||||
> .empty
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 32px
|
|
||||||
max-width 400px
|
|
||||||
text-align center
|
|
||||||
color var(--text)
|
|
||||||
|
|
||||||
> [data-icon]
|
|
||||||
display block
|
display block
|
||||||
margin-bottom 16px
|
position absolute
|
||||||
font-size 3em
|
bottom 0
|
||||||
color var(--faceHeaderText);
|
left -8px
|
||||||
|
width calc(100% + 16px)
|
||||||
|
height 2px
|
||||||
|
background var(--primary)
|
||||||
|
|
||||||
|
&:not([data-active])
|
||||||
|
color var(--desktopTimelineSrc)
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--desktopTimelineSrcHover)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,3 +9,15 @@
|
||||||
html
|
html
|
||||||
height 100%
|
height 100%
|
||||||
background var(--bg)
|
background var(--bg)
|
||||||
|
|
||||||
|
main
|
||||||
|
width 100%
|
||||||
|
max-width 680px
|
||||||
|
margin 0 auto
|
||||||
|
padding 8px
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
padding 16px
|
||||||
|
|
||||||
|
@media (min-width 600px)
|
||||||
|
padding 32px
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-notes">
|
<div class="ivaojijs">
|
||||||
<slot name="head"></slot>
|
<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
|
||||||
|
|
||||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
||||||
|
|
||||||
<div class="placeholder" v-if="fetching">
|
<div class="placeholder" v-if="fetching">
|
||||||
<template v-for="i in 10">
|
<template v-for="i in 10">
|
||||||
|
|
@ -10,8 +10,6 @@
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
|
|
||||||
|
|
||||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
|
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
|
||||||
<template v-for="(note, i) in _notes">
|
<template v-for="(note, i) in _notes">
|
||||||
|
|
@ -23,8 +21,8 @@
|
||||||
</template>
|
</template>
|
||||||
</component>
|
</component>
|
||||||
|
|
||||||
<footer v-if="more">
|
<footer v-if="cursor != null">
|
||||||
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
||||||
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
||||||
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -41,20 +39,21 @@ const displayLimit = 30;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n(),
|
i18n: i18n(),
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
more: {
|
makePromise: {
|
||||||
type: Function,
|
required: true
|
||||||
required: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
requestInitPromise: null as () => Promise<any[]>,
|
|
||||||
notes: [],
|
notes: [],
|
||||||
queue: [],
|
queue: [],
|
||||||
fetching: true,
|
fetching: true,
|
||||||
moreFetching: false
|
moreFetching: false,
|
||||||
|
inited: false,
|
||||||
|
cursor: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -80,6 +79,10 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
},
|
},
|
||||||
|
|
@ -97,27 +100,41 @@ export default Vue.extend({
|
||||||
Vue.set((this as any).notes, i, note);
|
Vue.set((this as any).notes, i, note);
|
||||||
},
|
},
|
||||||
|
|
||||||
init(promiseGenerator: () => Promise<any[]>) {
|
reload() {
|
||||||
this.requestInitPromise = promiseGenerator;
|
|
||||||
this.resolveInitPromise();
|
|
||||||
},
|
|
||||||
|
|
||||||
resolveInitPromise() {
|
|
||||||
this.queue = [];
|
this.queue = [];
|
||||||
this.notes = [];
|
this.notes = [];
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
init() {
|
||||||
this.fetching = true;
|
this.fetching = true;
|
||||||
|
this.makePromise().then(x => {
|
||||||
const promise = this.requestInitPromise();
|
if (Array.isArray(x)) {
|
||||||
|
this.notes = x;
|
||||||
promise.then(notes => {
|
} else {
|
||||||
this.notes = notes;
|
this.notes = x.notes;
|
||||||
this.requestInitPromise = null;
|
this.cursor = x.cursor;
|
||||||
|
}
|
||||||
|
this.inited = true;
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
this.$emit('inited');
|
||||||
}, e => {
|
}, e => {
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
more() {
|
||||||
|
if (this.cursor == null || this.moreFetching) return;
|
||||||
|
this.moreFetching = true;
|
||||||
|
this.makePromise(this.cursor).then(x => {
|
||||||
|
this.notes = this.notes.concat(x.notes);
|
||||||
|
this.cursor = x.cursor;
|
||||||
|
this.moreFetching = false;
|
||||||
|
}, e => {
|
||||||
|
this.moreFetching = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
prepend(note, silent = false) {
|
prepend(note, silent = false) {
|
||||||
// 弾く
|
// 弾く
|
||||||
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
||||||
|
|
@ -144,10 +161,6 @@ export default Vue.extend({
|
||||||
this.notes.push(note);
|
this.notes.push(note);
|
||||||
},
|
},
|
||||||
|
|
||||||
tail() {
|
|
||||||
return this.notes[this.notes.length - 1];
|
|
||||||
},
|
|
||||||
|
|
||||||
releaseQueue() {
|
releaseQueue() {
|
||||||
for (const n of this.queue) {
|
for (const n of this.queue) {
|
||||||
this.prepend(n, true);
|
this.prepend(n, true);
|
||||||
|
|
@ -155,15 +168,6 @@ export default Vue.extend({
|
||||||
this.queue = [];
|
this.queue = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
async loadMore() {
|
|
||||||
if (this.more == null) return;
|
|
||||||
if (this.moreFetching) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
await this.more();
|
|
||||||
this.moreFetching = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
onScroll() {
|
onScroll() {
|
||||||
if (this.isScrollTop()) {
|
if (this.isScrollTop()) {
|
||||||
this.releaseQueue();
|
this.releaseQueue();
|
||||||
|
|
@ -176,7 +180,7 @@ export default Vue.extend({
|
||||||
if (this.$el.offsetHeight == 0) return;
|
if (this.$el.offsetHeight == 0) return;
|
||||||
|
|
||||||
const current = window.scrollY + window.innerHeight;
|
const current = window.scrollY + window.innerHeight;
|
||||||
if (current > document.body.offsetHeight - 8) this.loadMore();
|
if (current > document.body.offsetHeight - 8) this.more();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -184,7 +188,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-notes
|
.ivaojijs
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background var(--face)
|
background var(--face)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -14,19 +14,31 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
connection: null,
|
||||||
moreFetching: false,
|
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
|
||||||
existMore: false,
|
listId: this.list.id,
|
||||||
connection: null
|
limit: fetchLimit + 1,
|
||||||
|
untilId: cursor ? cursor : 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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
|
||||||
canFetchMore(): boolean {
|
|
||||||
return !this.moreFetching && !this.fetching && this.existMore;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
$route: 'init'
|
$route: 'init'
|
||||||
},
|
},
|
||||||
|
|
@ -48,59 +60,6 @@ export default Vue.extend({
|
||||||
this.connection.on('note', this.onNote);
|
this.connection.on('note', this.onNote);
|
||||||
this.connection.on('userAdded', this.onUserAdded);
|
this.connection.on('userAdded', this.onUserAdded);
|
||||||
this.connection.on('userRemoved', this.onUserRemoved);
|
this.connection.on('userRemoved', this.onUserRemoved);
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/user-list-timeline', {
|
|
||||||
listId: this.list.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
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();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
if (!this.canFetchMore) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/user-list-timeline', {
|
|
||||||
listId: this.list.id,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id,
|
|
||||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
|
||||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onNote(note) {
|
onNote(note) {
|
||||||
|
|
@ -109,11 +68,11 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
onUserAdded() {
|
onUserAdded() {
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
},
|
},
|
||||||
|
|
||||||
onUserRemoved() {
|
onUserRemoved() {
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-user-timeline">
|
<div class="mk-user-timeline">
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
|
||||||
<div slot="empty">
|
<div slot="empty">
|
||||||
<fa :icon="['far', 'comments']"/>
|
<fa :icon="['far', 'comments']"/>
|
||||||
{{ withMedia ? this.$t('no-notes-with-media') : this.$t('no-notes') }}
|
{{ withMedia ? this.$t('no-notes-with-media') : this.$t('no-notes') }}
|
||||||
|
|
@ -17,73 +17,31 @@ const fetchLimit = 10;
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
i18n: i18n('mobile/views/components/user-timeline.vue'),
|
i18n: i18n('mobile/views/components/user-timeline.vue'),
|
||||||
|
|
||||||
props: ['user', 'withMedia'],
|
props: ['user', 'withMedia'],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('users/notes', {
|
||||||
existMore: false,
|
|
||||||
moreFetching: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
canFetchMore(): boolean {
|
|
||||||
return !this.moreFetching && !this.fetching && this.existMore;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('users/notes', {
|
|
||||||
userId: this.user.id,
|
|
||||||
withFiles: this.withMedia,
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilDate: new Date().getTime() + 1000 * 86400 * 365
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
if (!this.canFetchMore) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api('users/notes', {
|
|
||||||
userId: this.user.id,
|
userId: this.user.id,
|
||||||
withFiles: this.withMedia,
|
|
||||||
limit: fetchLimit + 1,
|
limit: fetchLimit + 1,
|
||||||
untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
|
withFiles: this.withMedia,
|
||||||
});
|
untilId: cursor ? cursor : undefined
|
||||||
|
}).then(notes => {
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
if (notes.length == fetchLimit + 1) {
|
||||||
notes.pop();
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
} else {
|
} else {
|
||||||
this.existMore = false;
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
}
|
}
|
||||||
for (const n of notes) {
|
})
|
||||||
(this.$refs.timeline as any).append(n);
|
};
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -26,18 +26,3 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
main
|
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -76,21 +76,11 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
main
|
main
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
> * > .post
|
> * > .post
|
||||||
margin-bottom 8px
|
margin-bottom 8px
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 16px
|
|
||||||
|
|
||||||
> * > .post
|
> * > .post
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -51,21 +51,11 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
main
|
main
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
> * > .post
|
> * > .post
|
||||||
margin-bottom 8px
|
margin-bottom 8px
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 16px
|
|
||||||
|
|
||||||
> * > .post
|
> * > .post
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
</div>
|
</div>
|
||||||
</ui-container>
|
</ui-container>
|
||||||
|
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
|
||||||
<div slot="empty">
|
<div slot="empty">
|
||||||
<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
|
<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,9 +36,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
|
||||||
moreFetching: false,
|
|
||||||
existMore: false,
|
|
||||||
streamManager: null,
|
streamManager: null,
|
||||||
connection: null,
|
connection: null,
|
||||||
unreadCount: 0,
|
unreadCount: 0,
|
||||||
|
|
@ -49,21 +46,18 @@ export default Vue.extend({
|
||||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||||
},
|
},
|
||||||
query: {},
|
query: {},
|
||||||
endpoint: null
|
endpoint: null,
|
||||||
|
makePromise: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
alone(): boolean {
|
alone(): boolean {
|
||||||
return this.$store.state.i.followingCount == 0;
|
return this.$store.state.i.followingCount == 0;
|
||||||
},
|
|
||||||
|
|
||||||
canFetchMore(): boolean {
|
|
||||||
return !this.moreFetching && !this.fetching && this.existMore;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
created() {
|
||||||
const prepend = note => {
|
const prepend = note => {
|
||||||
(this.$refs.timeline as any).prepend(note);
|
(this.$refs.timeline as any).prepend(note);
|
||||||
};
|
};
|
||||||
|
|
@ -114,7 +108,25 @@ export default Vue.extend({
|
||||||
this.connection.on('mention', onNote);
|
this.connection.on('mention', onNote);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.fetch();
|
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,
|
||||||
|
cursor: notes[notes.length - 1].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -122,57 +134,13 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
|
||||||
this.fetching = true;
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api(this.endpoint, Object.assign({
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilDate: this.date ? this.date.getTime() : undefined
|
|
||||||
}, this.baseQuery, this.query)).then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
this.$emit('loaded');
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
more() {
|
|
||||||
if (!this.canFetchMore) return;
|
|
||||||
|
|
||||||
this.moreFetching = true;
|
|
||||||
|
|
||||||
const promise = this.$root.api(this.endpoint, Object.assign({
|
|
||||||
limit: fetchLimit + 1,
|
|
||||||
untilId: (this.$refs.timeline as any).tail().id
|
|
||||||
}, this.baseQuery, this.query));
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == fetchLimit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
(this.$refs.timeline as any).focus();
|
(this.$refs.timeline as any).focus();
|
||||||
},
|
},
|
||||||
|
|
||||||
warp(date) {
|
warp(date) {
|
||||||
this.date = date;
|
this.date = date;
|
||||||
this.fetch();
|
(this.$refs.timeline as any).reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -233,17 +233,6 @@ main
|
||||||
font-size 10px
|
font-size 10px
|
||||||
color var(--notificationIndicator)
|
color var(--notificationIndicator)
|
||||||
|
|
||||||
> .tl
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
|
|
|
||||||
|
|
@ -56,18 +56,6 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
main
|
main
|
||||||
text-align center
|
text-align center
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
> div
|
|
||||||
margin 0 auto
|
|
||||||
padding 0
|
|
||||||
max-width 600px
|
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
margin-top 16px
|
margin-top 16px
|
||||||
|
|
|
||||||
|
|
@ -39,18 +39,3 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
main
|
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -57,17 +57,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
main
|
main
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
> div
|
> div
|
||||||
display flex
|
display flex
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,7 @@
|
||||||
<span slot="header"><fa icon="search"/> {{ q }}</span>
|
<span slot="header"><fa icon="search"/> {{ q }}</span>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ $t('not-found', { q }) }}</p>
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
|
||||||
</main>
|
</main>
|
||||||
</mk-ui>
|
</mk-ui>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -20,15 +19,30 @@ export default Vue.extend({
|
||||||
i18n: i18n('mobile/views/pages/search.vue'),
|
i18n: i18n('mobile/views/pages/search.vue'),
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('notes/search', {
|
||||||
moreFetching: false,
|
limit: limit + 1,
|
||||||
existMore: false,
|
offset: cursor ? cursor : undefined,
|
||||||
empty: false,
|
query: this.q
|
||||||
offset: 0
|
}).then(notes => {
|
||||||
|
if (notes.length == limit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: cursor ? cursor + limit : limit
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: 'fetch'
|
$route() {
|
||||||
|
this.$refs.timeline.reload();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
q(): string {
|
q(): string {
|
||||||
|
|
@ -37,68 +51,11 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
document.title = `%i18n:@search%: ${this.q} | ${this.$root.instanceName}`;
|
document.title = `%i18n:@search%: ${this.q} | ${this.$root.instanceName}`;
|
||||||
|
|
||||||
this.fetch();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
inited() {
|
||||||
this.fetching = true;
|
Progress.done();
|
||||||
Progress.start();
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/search', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
query: this.q
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == 0) this.empty = true;
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
Progress.done();
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
},
|
||||||
more() {
|
|
||||||
this.offset += limit;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/search', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
query: this.q
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
|
||||||
.notes
|
|
||||||
margin 8px auto
|
|
||||||
max-width 500px
|
|
||||||
width calc(100% - 16px)
|
|
||||||
background #fff
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
margin 16px auto
|
|
||||||
width calc(100% - 32px)
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -383,9 +383,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
main
|
main
|
||||||
margin 0 auto
|
|
||||||
max-width 600px
|
|
||||||
width 100%
|
|
||||||
|
|
||||||
> .signed-in-as
|
> .signed-in-as
|
||||||
margin 16px
|
margin 16px
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,7 @@
|
||||||
<span slot="header"><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</span>
|
<span slot="header"><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</span>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<p v-if="!fetching && empty"><fa icon="search"/> {{ $t('no-posts-found', { q: $route.params.tag }) }}</p>
|
<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
|
||||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
|
||||||
</main>
|
</main>
|
||||||
</mk-ui>
|
</mk-ui>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -20,66 +19,35 @@ export default Vue.extend({
|
||||||
i18n: i18n('mobile/views/pages/tag.vue'),
|
i18n: i18n('mobile/views/pages/tag.vue'),
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
makePromise: cursor => this.$root.api('notes/search_by_tag', {
|
||||||
moreFetching: false,
|
limit: limit + 1,
|
||||||
existMore: false,
|
offset: cursor ? cursor : undefined,
|
||||||
offset: 0,
|
tag: this.$route.params.tag
|
||||||
empty: false
|
}).then(notes => {
|
||||||
|
if (notes.length == limit + 1) {
|
||||||
|
notes.pop();
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: cursor ? cursor + limit : limit
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
notes: notes,
|
||||||
|
cursor: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: 'fetch'
|
$route() {
|
||||||
},
|
this.$refs.timeline.reload();
|
||||||
mounted() {
|
}
|
||||||
this.$nextTick(() => {
|
|
||||||
this.fetch();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
inited() {
|
||||||
this.fetching = true;
|
Progress.done();
|
||||||
Progress.start();
|
|
||||||
|
|
||||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
|
||||||
this.$root.api('notes/search_by_tag', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
tag: this.$route.params.tag
|
|
||||||
}).then(notes => {
|
|
||||||
if (notes.length == 0) this.empty = true;
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
this.existMore = true;
|
|
||||||
}
|
|
||||||
res(notes);
|
|
||||||
this.fetching = false;
|
|
||||||
Progress.done();
|
|
||||||
}, rej);
|
|
||||||
}));
|
|
||||||
},
|
},
|
||||||
more() {
|
|
||||||
this.offset += limit;
|
|
||||||
|
|
||||||
const promise = this.$root.api('notes/search_by_tag', {
|
|
||||||
limit: limit + 1,
|
|
||||||
offset: this.offset,
|
|
||||||
tag: this.$route.params.tag
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then(notes => {
|
|
||||||
if (notes.length == limit + 1) {
|
|
||||||
notes.pop();
|
|
||||||
} else {
|
|
||||||
this.existMore = false;
|
|
||||||
}
|
|
||||||
for (const n of notes) {
|
|
||||||
(this.$refs.timeline as any).append(n);
|
|
||||||
}
|
|
||||||
this.moreFetching = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -46,18 +46,3 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
main
|
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -53,20 +53,3 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
|
|
||||||
|
|
||||||
main
|
|
||||||
width 100%
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.root.home
|
.root.home
|
||||||
max-width 600px
|
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
> .mk-note-detail
|
> .mk-note-detail
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<template slot="header" v-if="!fetching"><img :src="avator" alt="">
|
<template slot="header" v-if="!fetching"><img :src="avator" alt="">
|
||||||
<mk-user-name :user="user"/>
|
<mk-user-name :user="user"/>
|
||||||
</template>
|
</template>
|
||||||
<main v-if="!fetching">
|
<div class="wwtwuxyh" v-if="!fetching">
|
||||||
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</p></div>
|
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</p></div>
|
||||||
<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></p></div>
|
<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></p></div>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -65,15 +65,15 @@
|
||||||
<a :data-active="page == 'media'" @click="page = 'media'"><fa icon="image"/> {{ $t('media') }}</a>
|
<a :data-active="page == 'media'" @click="page = 'media'"><fa icon="image"/> {{ $t('media') }}</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="body">
|
<main>
|
||||||
<template v-if="$route.name == 'user'">
|
<template v-if="$route.name == 'user'">
|
||||||
<x-home v-if="page == 'home'" :user="user"/>
|
<x-home v-if="page == 'home'" :user="user"/>
|
||||||
<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
|
<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
|
||||||
<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
|
<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
|
||||||
</template>
|
</template>
|
||||||
<router-view :user="user"></router-view>
|
<router-view :user="user"></router-view>
|
||||||
</div>
|
</main>
|
||||||
</main>
|
</div>
|
||||||
</mk-ui>
|
</mk-ui>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -146,7 +146,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
main
|
.wwtwuxyh
|
||||||
$bg = var(--face)
|
$bg = var(--face)
|
||||||
|
|
||||||
> .is-suspended
|
> .is-suspended
|
||||||
|
|
@ -314,7 +314,7 @@ main
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
max-width 600px
|
max-width 616px
|
||||||
|
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
|
|
@ -335,16 +335,4 @@ main
|
||||||
color var(--primary)
|
color var(--primary)
|
||||||
border-color var(--primary)
|
border-color var(--primary)
|
||||||
|
|
||||||
> .body
|
|
||||||
max-width 680px
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
color var(--text)
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
@media (min-width 600px)
|
|
||||||
padding 32px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue