This commit is contained in:
syuilo 2018-02-05 14:25:19 +09:00
parent d14a7922b9
commit 18e1628e2a
3 changed files with 154 additions and 146 deletions

View file

@ -1,36 +1,38 @@
<mk-time>
<time datetime={ opts.time }>
<span if={ mode == 'relative' }>{ relative }</span>
<span if={ mode == 'absolute' }>{ absolute }</span>
<span if={ mode == 'detail' }>{ absolute } ({ relative })</span>
<template>
<time>
<span v-if=" mode == 'relative' ">{{ relative }}</span>
<span v-if=" mode == 'absolute' ">{{ absolute }}</span>
<span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>
</time>
<script>
this.time = new Date(this.opts.time);
this.mode = this.opts.mode || 'relative';
this.tickid = null;
</template>
this.absolute =
this.time.getFullYear() + '年' +
(this.time.getMonth() + 1) + '月' +
this.time.getDate() + '日' +
' ' +
this.time.getHours() + '時' +
this.time.getMinutes() + '分';
<script>
export default {
props: ['time', 'mode'],
data: {
mode: 'relative',
tickId: null,
},
created: function() {
this.absolute =
this.time.getFullYear() + '年' +
(this.time.getMonth() + 1) + '月' +
this.time.getDate() + '日' +
' ' +
this.time.getHours() + '時' +
this.time.getMinutes() + '分';
this.on('mount', () => {
if (this.mode == 'relative' || this.mode == 'detail') {
this.tick();
this.tickid = setInterval(this.tick, 1000);
this.tickId = setInterval(this.tick, 1000);
}
});
this.on('unmount', () => {
},
destroyed: function() {
if (this.mode === 'relative' || this.mode === 'detail') {
clearInterval(this.tickid);
clearInterval(this.tickId);
}
});
this.tick = () => {
},
tick: function() {
const now = new Date();
const ago = (now - this.time) / 1000/*ms*/;
this.relative =
@ -44,7 +46,6 @@
ago >= 0 ? '%i18n:common.time.just_now%' :
ago < 0 ? '%i18n:common.time.future%' :
'%i18n:common.time.unknown%';
this.update();
};
</script>
</mk-time>
}
};
</script>

View file

@ -1,117 +0,0 @@
<mk-url-preview>
<a href={ url } target="_blank" title={ url } if={ !loading }>
<div class="thumbnail" if={ thumbnail } style={ 'background-image: url(' + thumbnail + ')' }></div>
<article>
<header>
<h1>{ title }</h1>
</header>
<p>{ description }</p>
<footer>
<img class="icon" if={ icon } src={ icon }/>
<p>{ sitename }</p>
</footer>
</article>
</a>
<style>
:scope
display block
font-size 16px
> a
display block
border solid 1px #eee
border-radius 4px
overflow hidden
&:hover
text-decoration none
border-color #ddd
> article > header > h1
text-decoration underline
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
& + article
left 100px
width calc(100% - 100px)
> article
padding 16px
> header
margin-bottom 8px
> h1
margin 0
font-size 1em
color #555
> p
margin 0
color #777
font-size 0.8em
> footer
margin-top 8px
height 16px
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> p
display inline-block
margin 0
color #666
font-size 0.8em
line-height 16px
vertical-align top
@media (max-width 500px)
font-size 8px
> a
border none
> .thumbnail
width 70px
& + article
left 70px
width calc(100% - 70px)
> article
padding 8px
</style>
<script>
this.mixin('api');
this.url = this.opts.url;
this.loading = true;
this.on('mount', () => {
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.loading = false;
this.update();
});
});
});
</script>
</mk-url-preview>

View file

@ -0,0 +1,124 @@
<template>
<a :href="url" target="_blank" :title="url" v-if="!fetching">
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
<article>
<header>
<h1>{{ title }}</h1>
</header>
<p>{{ description }}</p>
<footer>
<img class="icon" v-if="icon" :src="icon"/>
<p>{{ sitename }}</p>
</footer>
</article>
</a>
</template>
<script lang="typescript">
export default {
props: ['url'],
created: function() {
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;
});
});
},
data: {
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null
}
};
</script>
<style lang="stylus" scoped>
:scope
display block
font-size 16px
> a
display block
border solid 1px #eee
border-radius 4px
overflow hidden
&:hover
text-decoration none
border-color #ddd
> article > header > h1
text-decoration underline
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
& + article
left 100px
width calc(100% - 100px)
> article
padding 16px
> header
margin-bottom 8px
> h1
margin 0
font-size 1em
color #555
> p
margin 0
color #777
font-size 0.8em
> footer
margin-top 8px
height 16px
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> p
display inline-block
margin 0
color #666
font-size 0.8em
line-height 16px
vertical-align top
@media (max-width 500px)
font-size 8px
> a
border none
> .thumbnail
width 70px
& + article
left 70px
width calc(100% - 70px)
> article
padding 8px
</style>