2017-01-11 20:55:38 +00:00
|
|
|
<mk-time>
|
2017-01-11 21:00:12 +00:00
|
|
|
<time datetime={ opts.time }><span if={ mode == 'relative' }>{ relative }</span><span if={ mode == 'absolute' }>{ absolute }</span><span if={ mode == 'detail' }>{ absolute } ({ relative })</span></time>
|
2017-01-11 20:55:38 +00:00
|
|
|
<script>
|
2017-02-20 00:53:57 +00:00
|
|
|
this.time = new Date this.opts.time
|
|
|
|
this.mode = this.opts.mode || 'relative'
|
|
|
|
this.tickid = null
|
2016-12-28 22:49:51 +00:00
|
|
|
|
2017-02-20 00:53:57 +00:00
|
|
|
this.absolute =
|
|
|
|
@time.get-full-year! + '年' +
|
|
|
|
@time.get-month! + 1 + '月' +
|
|
|
|
@time.get-date! + '日' +
|
2017-01-11 20:55:38 +00:00
|
|
|
' ' +
|
2017-02-20 00:53:57 +00:00
|
|
|
@time.get-hours! + '時' +
|
|
|
|
@time.get-minutes! + '分'
|
2016-12-28 22:49:51 +00:00
|
|
|
|
2017-02-20 00:53:57 +00:00
|
|
|
this.on('mount', () => {
|
|
|
|
if @mode == 'relative' or @mode == 'detail'
|
2017-01-11 20:55:38 +00:00
|
|
|
@tick!
|
2017-02-20 00:53:57 +00:00
|
|
|
this.tickid = set-interval @tick, 1000ms
|
2016-12-28 22:49:51 +00:00
|
|
|
|
2017-02-20 00:53:57 +00:00
|
|
|
this.on('unmount', () => {
|
|
|
|
if @mode == 'relative' or @mode == 'detail'
|
2017-01-11 20:55:38 +00:00
|
|
|
clear-interval @tickid
|
2016-12-28 22:49:51 +00:00
|
|
|
|
2017-02-20 00:53:57 +00:00
|
|
|
tick() {
|
2017-01-11 20:55:38 +00:00
|
|
|
now = new Date!
|
|
|
|
ago = (now - @time) / 1000ms
|
2017-02-20 00:53:57 +00:00
|
|
|
this.relative = switch
|
2017-01-11 20:55:38 +00:00
|
|
|
| ago >= 31536000s => ~~(ago / 31536000s) + '年前'
|
|
|
|
| ago >= 2592000s => ~~(ago / 2592000s) + 'ヶ月前'
|
|
|
|
| ago >= 604800s => ~~(ago / 604800s) + '週間前'
|
|
|
|
| ago >= 86400s => ~~(ago / 86400s) + '日前'
|
|
|
|
| ago >= 3600s => ~~(ago / 3600s) + '時間前'
|
|
|
|
| ago >= 60s => ~~(ago / 60s) + '分前'
|
|
|
|
| ago >= 10s => ~~(ago % 60s) + '秒前'
|
|
|
|
| ago >= 0s => 'たった今'
|
|
|
|
| ago < 0s => '未来'
|
|
|
|
| _ => 'なぞのじかん'
|
2017-02-20 00:53:57 +00:00
|
|
|
this.update();
|
2017-01-11 20:55:38 +00:00
|
|
|
</script>
|
|
|
|
</mk-time>
|