wip
This commit is contained in:
syuilo
parent
d14a7922b9
commit
18e1628e2a
3 changed files with 154 additions and 146 deletions
|
|
@ -1,36 +1,38 @@
|
||||||
<mk-time>
|
<template>
|
||||||
<time datetime={ opts.time }>
|
<time>
|
||||||
<span if={ mode == 'relative' }>{ relative }</span>
|
<span v-if=" mode == 'relative' ">{{ relative }}</span>
|
||||||
<span if={ mode == 'absolute' }>{ absolute }</span>
|
<span v-if=" mode == 'absolute' ">{{ absolute }}</span>
|
||||||
<span if={ mode == 'detail' }>{ absolute } ({ relative })</span>
|
<span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>
|
||||||
</time>
|
</time>
|
||||||
<script>
|
</template>
|
||||||
this.time = new Date(this.opts.time);
|
|
||||||
this.mode = this.opts.mode || 'relative';
|
|
||||||
this.tickid = null;
|
|
||||||
|
|
||||||
this.absolute =
|
<script>
|
||||||
this.time.getFullYear() + '年' +
|
export default {
|
||||||
(this.time.getMonth() + 1) + '月' +
|
props: ['time', 'mode'],
|
||||||
this.time.getDate() + '日' +
|
data: {
|
||||||
' ' +
|
mode: 'relative',
|
||||||
this.time.getHours() + '時' +
|
tickId: null,
|
||||||
this.time.getMinutes() + '分';
|
},
|
||||||
|
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') {
|
if (this.mode == 'relative' || this.mode == 'detail') {
|
||||||
this.tick();
|
this.tick();
|
||||||
this.tickid = setInterval(this.tick, 1000);
|
this.tickId = setInterval(this.tick, 1000);
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
|
destroyed: function() {
|
||||||
this.on('unmount', () => {
|
|
||||||
if (this.mode === 'relative' || this.mode === 'detail') {
|
if (this.mode === 'relative' || this.mode === 'detail') {
|
||||||
clearInterval(this.tickid);
|
clearInterval(this.tickId);
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
|
tick: function() {
|
||||||
this.tick = () => {
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const ago = (now - this.time) / 1000/*ms*/;
|
const ago = (now - this.time) / 1000/*ms*/;
|
||||||
this.relative =
|
this.relative =
|
||||||
|
|
@ -44,7 +46,6 @@
|
||||||
ago >= 0 ? '%i18n:common.time.just_now%' :
|
ago >= 0 ? '%i18n:common.time.just_now%' :
|
||||||
ago < 0 ? '%i18n:common.time.future%' :
|
ago < 0 ? '%i18n:common.time.future%' :
|
||||||
'%i18n:common.time.unknown%';
|
'%i18n:common.time.unknown%';
|
||||||
this.update();
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-time>
|
|
||||||
|
|
@ -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>
|
|
||||||
124
src/web/app/common/tags/url-preview.vue
Normal file
124
src/web/app/common/tags/url-preview.vue
Normal 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>
|
||||||
Loading…
Reference in a new issue