wip
This commit is contained in:
こぴなたみぽ
parent
202ac80fa8
commit
4f2041c1d9
2 changed files with 99 additions and 92 deletions
|
|
@ -70,104 +70,111 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
import compile from '../../common/scripts/text-compiler';
|
import compile from '../../common/scripts/text-compiler';
|
||||||
import dateStringify from '../../common/scripts/date-stringify';
|
import dateStringify from '../../common/scripts/date-stringify';
|
||||||
|
|
||||||
this.mixin('i');
|
export default Vue.extend({
|
||||||
this.mixin('api');
|
props: ['post'],
|
||||||
this.mixin('user-preview');
|
data() {
|
||||||
|
return {
|
||||||
|
connection: null,
|
||||||
|
connectionId: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isRepost(): boolean {
|
||||||
|
return (this.post.repost &&
|
||||||
|
this.post.text == null &&
|
||||||
|
this.post.media_ids == null &&
|
||||||
|
this.post.poll == null);
|
||||||
|
},
|
||||||
|
p(): any {
|
||||||
|
return this.isRepost ? this.post.repost : this.post;
|
||||||
|
},
|
||||||
|
reactionsCount(): number {
|
||||||
|
return this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
||||||
|
},
|
||||||
|
title(): string {
|
||||||
|
return dateStringify(this.p.created_at);
|
||||||
|
},
|
||||||
|
url(): string {
|
||||||
|
return `/${this.p.user.username}/${this.p.id}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.connection = this.$root.$data.os.stream.getConnection();
|
||||||
|
this.connectionId = this.$root.$data.os.stream.use();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.capture(true);
|
||||||
|
|
||||||
|
if (this.$root.$data.os.isSignedIn) {
|
||||||
|
this.connection.on('_connected_', this.onStreamConnected);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.p.text) {
|
||||||
|
const tokens = this.p.ast;
|
||||||
|
|
||||||
|
this.$refs.text.innerHTML = this.$refs.text.innerHTML.replace('<p class="dummy"></p>', compile(tokens));
|
||||||
|
|
||||||
|
Array.from(this.$refs.text.children).forEach(e => {
|
||||||
|
if (e.tagName == 'MK-URL') riot.mount(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
// URLをプレビュー
|
||||||
|
tokens
|
||||||
|
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
||||||
|
.map(t => {
|
||||||
|
riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
|
||||||
|
url: t.url
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.decapture(true);
|
||||||
|
this.connection.off('_connected_', this.onStreamConnected);
|
||||||
|
this.$root.$data.os.stream.dispose(this.connectionId);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
capture(withHandler = false) {
|
||||||
|
if (this.$root.$data.os.isSignedIn) {
|
||||||
|
this.connection.send({
|
||||||
|
type: 'capture',
|
||||||
|
id: this.post.id
|
||||||
|
});
|
||||||
|
if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
decapture(withHandler = false) {
|
||||||
|
if (this.$root.$data.os.isSignedIn) {
|
||||||
|
this.connection.send({
|
||||||
|
type: 'decapture',
|
||||||
|
id: this.post.id
|
||||||
|
});
|
||||||
|
if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onStreamConnected() {
|
||||||
|
this.capture();
|
||||||
|
},
|
||||||
|
onStreamPostUpdated(data) {
|
||||||
|
const post = data.post;
|
||||||
|
if (post.id == this.post.id) {
|
||||||
|
this.$emit('update:post', post);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="typescript">
|
||||||
|
|
||||||
this.mixin('stream');
|
|
||||||
this.connection = this.stream.getConnection();
|
|
||||||
this.connectionId = this.stream.use();
|
|
||||||
|
|
||||||
this.isDetailOpened = false;
|
this.isDetailOpened = false;
|
||||||
|
|
||||||
this.set = post => {
|
|
||||||
this.post = post;
|
|
||||||
this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
|
|
||||||
this.p = this.isRepost ? this.post.repost : this.post;
|
|
||||||
this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
|
|
||||||
this.title = dateStringify(this.p.created_at);
|
|
||||||
this.url = `/${this.p.user.username}/${this.p.id}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.set(this.opts.post);
|
|
||||||
|
|
||||||
this.refresh = post => {
|
|
||||||
this.set(post);
|
|
||||||
this.update();
|
|
||||||
if (this.$refs.reactionsViewer) this.$refs.reactionsViewer.update({
|
|
||||||
post
|
|
||||||
});
|
|
||||||
if (this.$refs.pollViewer) this.$refs.pollViewer.init(post);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onStreamPostUpdated = data => {
|
|
||||||
const post = data.post;
|
|
||||||
if (post.id == this.post.id) {
|
|
||||||
this.refresh(post);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onStreamConnected = () => {
|
|
||||||
this.capture();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.capture = withHandler => {
|
|
||||||
if (this.SIGNIN) {
|
|
||||||
this.connection.send({
|
|
||||||
type: 'capture',
|
|
||||||
id: this.post.id
|
|
||||||
});
|
|
||||||
if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.decapture = withHandler => {
|
|
||||||
if (this.SIGNIN) {
|
|
||||||
this.connection.send({
|
|
||||||
type: 'decapture',
|
|
||||||
id: this.post.id
|
|
||||||
});
|
|
||||||
if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.capture(true);
|
|
||||||
|
|
||||||
if (this.SIGNIN) {
|
|
||||||
this.connection.on('_connected_', this.onStreamConnected);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.p.text) {
|
|
||||||
const tokens = this.p.ast;
|
|
||||||
|
|
||||||
this.$refs.text.innerHTML = this.$refs.text.innerHTML.replace('<p class="dummy"></p>', compile(tokens));
|
|
||||||
|
|
||||||
Array.from(this.$refs.text.children).forEach(e => {
|
|
||||||
if (e.tagName == 'MK-URL') riot.mount(e);
|
|
||||||
});
|
|
||||||
|
|
||||||
// URLをプレビュー
|
|
||||||
tokens
|
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
|
||||||
.map(t => {
|
|
||||||
riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
|
|
||||||
url: t.url
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.on('unmount', () => {
|
|
||||||
this.decapture(true);
|
|
||||||
this.connection.off('_connected_', this.onStreamConnected);
|
|
||||||
this.stream.dispose(this.connectionId);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.reply = () => {
|
this.reply = () => {
|
||||||
riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
|
riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
|
||||||
reply: this.p
|
reply: this.p
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-timeline" ref="root">
|
<div class="mk-timeline" ref="root">
|
||||||
<template v-for="(post, i) in _posts">
|
<template v-for="(post, i) in _posts">
|
||||||
<mk-timeline-post :post="post" :key="post.id"/>
|
<mk-timeline-post :post.sync="post" :key="post.id"/>
|
||||||
<p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && _post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
|
<p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && _post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
|
||||||
</template>
|
</template>
|
||||||
<footer data-yield="footer">
|
<footer data-yield="footer">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue