1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<template>
<div class="mk-timeline">
<header>
<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
</header>
<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XCore from './timeline.core.vue';
export default Vue.extend({
components: {
XCore
},
data() {
return {
src: 'home'
};
},
mounted() {
document.addEventListener('keydown', this.onKeydown);
window.addEventListener('scroll', this.onScroll);
console.log(this.$refs.tl);
(this.$refs.tl as any).$once('loaded', () => {
this.$emit('loaded');
});
},
beforeDestroy() {
document.removeEventListener('keydown', this.onKeydown);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
onScroll() {
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) (this.$refs.tl as any).more();
}
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
(this.$refs.tl as any).focus();
}
}
},
warp(date) {
(this.$refs.tl as any).warp(date);
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-timeline
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> header
padding 0 8px
z-index 10
box-shadow 0 1px rgba(0, 0, 0, 0.08)
> span
display inline-block
padding 0 10px
line-height 42px
font-size 12px
user-select none
&[data-is-active]
color $theme-color
cursor default
font-weight bold
&:before
content ""
display block
position absolute
bottom 0
left -8px
width calc(100% + 16px)
height 2px
background $theme-color
&:not([data-is-active])
color #6f7477
cursor pointer
&:hover
color #525a5f
</style>
|
