Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-11 23:35:32 +09:00
parent ea2b5a5aac
commit cbec4229d3
2 changed files with 108 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

199
src/web/app/common/views/components/url-preview.vue
View file

@ -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>

23
src/web/app/desktop/views/components/timeline-post.vue
View file

@ -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);