wip
This commit is contained in:
syuilo
parent
ea2b5a5aac
commit
cbec4229d3
2 changed files with 108 additions and 114 deletions
|
|
@ -1,126 +1,123 @@
|
||||||
<template>
|
<template>
|
||||||
<a :href="url" target="_blank" :title="url" v-if="!fetching">
|
<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
|
||||||
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
|
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<h1>{{ title }}</h1>
|
<h1>{{ title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
<p>{{ description }}</p>
|
<p>{{ description }}</p>
|
||||||
<footer>
|
<footer>
|
||||||
<img class="icon" v-if="icon" :src="icon"/>
|
<img class="icon" v-if="icon" :src="icon"/>
|
||||||
<p>{{ sitename }}</p>
|
<p>{{ sitename }}</p>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="ts">
|
||||||
export default {
|
import Vue from 'vue';
|
||||||
props: ['url'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
fetching: true,
|
|
||||||
title: null,
|
|
||||||
description: null,
|
|
||||||
thumbnail: null,
|
|
||||||
icon: null,
|
|
||||||
sitename: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
fetch('/api:url?url=' + this.url).then(res => {
|
|
||||||
res.json().then(info => {
|
|
||||||
this.title = info.title;
|
|
||||||
this.description = info.description;
|
|
||||||
this.thumbnail = info.thumbnail;
|
|
||||||
this.icon = info.icon;
|
|
||||||
this.sitename = info.sitename;
|
|
||||||
|
|
||||||
this.fetching = false;
|
export default Vue.extend({
|
||||||
});
|
props: ['url'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fetching: true,
|
||||||
|
title: null,
|
||||||
|
description: null,
|
||||||
|
thumbnail: null,
|
||||||
|
icon: null,
|
||||||
|
sitename: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
fetch('/api:url?url=' + this.url).then(res => {
|
||||||
|
res.json().then(info => {
|
||||||
|
this.title = info.title;
|
||||||
|
this.description = info.description;
|
||||||
|
this.thumbnail = info.thumbnail;
|
||||||
|
this.icon = info.icon;
|
||||||
|
this.sitename = info.sitename;
|
||||||
|
|
||||||
|
this.fetching = false;
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
};
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
:scope
|
.mk-url-preview
|
||||||
display block
|
display block
|
||||||
font-size 16px
|
font-size 16px
|
||||||
|
border solid 1px #eee
|
||||||
|
border-radius 4px
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
> a
|
&:hover
|
||||||
display block
|
text-decoration none
|
||||||
border solid 1px #eee
|
border-color #ddd
|
||||||
border-radius 4px
|
|
||||||
overflow hidden
|
|
||||||
|
|
||||||
&:hover
|
> article > header > h1
|
||||||
text-decoration none
|
text-decoration underline
|
||||||
border-color #ddd
|
|
||||||
|
|
||||||
> article > header > h1
|
> .thumbnail
|
||||||
text-decoration underline
|
position absolute
|
||||||
|
width 100px
|
||||||
|
height 100%
|
||||||
|
background-position center
|
||||||
|
background-size cover
|
||||||
|
|
||||||
> .thumbnail
|
& + article
|
||||||
position absolute
|
left 100px
|
||||||
width 100px
|
width calc(100% - 100px)
|
||||||
height 100%
|
|
||||||
background-position center
|
|
||||||
background-size cover
|
|
||||||
|
|
||||||
& + article
|
> article
|
||||||
left 100px
|
padding 16px
|
||||||
width calc(100% - 100px)
|
|
||||||
|
|
||||||
> article
|
> header
|
||||||
padding 16px
|
margin-bottom 8px
|
||||||
|
|
||||||
> header
|
> h1
|
||||||
margin-bottom 8px
|
margin 0
|
||||||
|
font-size 1em
|
||||||
|
color #555
|
||||||
|
|
||||||
> h1
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 1em
|
color #777
|
||||||
color #555
|
font-size 0.8em
|
||||||
|
|
||||||
> p
|
> footer
|
||||||
margin 0
|
margin-top 8px
|
||||||
color #777
|
height 16px
|
||||||
font-size 0.8em
|
|
||||||
|
|
||||||
> footer
|
> img
|
||||||
margin-top 8px
|
display inline-block
|
||||||
height 16px
|
width 16px
|
||||||
|
height 16px
|
||||||
|
margin-right 4px
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
> img
|
> p
|
||||||
display inline-block
|
display inline-block
|
||||||
width 16px
|
margin 0
|
||||||
height 16px
|
color #666
|
||||||
margin-right 4px
|
font-size 0.8em
|
||||||
vertical-align top
|
line-height 16px
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
> p
|
@media (max-width 500px)
|
||||||
display inline-block
|
font-size 8px
|
||||||
margin 0
|
border none
|
||||||
color #666
|
|
||||||
font-size 0.8em
|
|
||||||
line-height 16px
|
|
||||||
vertical-align top
|
|
||||||
|
|
||||||
@media (max-width 500px)
|
> .thumbnail
|
||||||
font-size 8px
|
width 70px
|
||||||
|
|
||||||
> a
|
& + article
|
||||||
border none
|
left 70px
|
||||||
|
width calc(100% - 70px)
|
||||||
|
|
||||||
> .thumbnail
|
> article
|
||||||
width 70px
|
padding 8px
|
||||||
|
|
||||||
& + article
|
|
||||||
left 70px
|
|
||||||
width calc(100% - 70px)
|
|
||||||
|
|
||||||
> article
|
|
||||||
padding 8px
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@
|
||||||
<a class="reply" v-if="p.reply">%fa:reply%</a>
|
<a class="reply" v-if="p.reply">%fa:reply%</a>
|
||||||
<mk-post-html :ast="p.ast" :i="$root.$data.os.i"/>
|
<mk-post-html :ast="p.ast" :i="$root.$data.os.i"/>
|
||||||
<a class="quote" v-if="p.repost">RP:</a>
|
<a class="quote" v-if="p.repost">RP:</a>
|
||||||
|
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="media" v-if="p.media">
|
<div class="media" v-if="p.media">
|
||||||
<mk-images :images="p.media"/>
|
<mk-images :images="p.media"/>
|
||||||
|
|
@ -101,6 +102,15 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
url(): string {
|
url(): string {
|
||||||
return `/${this.p.user.username}/${this.p.id}`;
|
return `/${this.p.user.username}/${this.p.id}`;
|
||||||
|
},
|
||||||
|
urls(): string[] {
|
||||||
|
if (this.p.ast) {
|
||||||
|
return this.p.ast
|
||||||
|
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
||||||
|
.map(t => t.url);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -113,19 +123,6 @@ export default Vue.extend({
|
||||||
if (this.$root.$data.os.isSignedIn) {
|
if (this.$root.$data.os.isSignedIn) {
|
||||||
this.connection.on('_connected_', this.onStreamConnected);
|
this.connection.on('_connected_', this.onStreamConnected);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.p.text) {
|
|
||||||
const tokens = this.p.ast;
|
|
||||||
|
|
||||||
// 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() {
|
beforeDestroy() {
|
||||||
this.decapture(true);
|
this.decapture(true);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue