81 lines
1.3 KiB
HTML
81 lines
1.3 KiB
HTML
|
<mk-detailed-post-window>
|
||
|
<div class="bg" ref="bg" onclick={ bgClick }></div>
|
||
|
<div class="main" ref="main" if={ !fetching }>
|
||
|
<mk-post-detail ref="detail" post={ post }/>
|
||
|
</div>
|
||
|
<style>
|
||
|
:scope
|
||
|
display block
|
||
|
opacity 0
|
||
|
|
||
|
> .bg
|
||
|
display block
|
||
|
position fixed
|
||
|
z-index 1000
|
||
|
top 0
|
||
|
left 0
|
||
|
width 100%
|
||
|
height 100%
|
||
|
background rgba(0, 0, 0, 0.7)
|
||
|
|
||
|
> .main
|
||
|
display block
|
||
|
position fixed
|
||
|
z-index 1000
|
||
|
top 20%
|
||
|
left 0
|
||
|
right 0
|
||
|
margin 0 auto 0 auto
|
||
|
padding 0
|
||
|
width 638px
|
||
|
text-align center
|
||
|
|
||
|
> mk-post-detail
|
||
|
margin 0 auto
|
||
|
|
||
|
</style>
|
||
|
<script>
|
||
|
import anime from 'animejs';
|
||
|
|
||
|
this.mixin('api');
|
||
|
|
||
|
this.fetching = true;
|
||
|
this.post = null;
|
||
|
|
||
|
this.on('mount', () => {
|
||
|
anime({
|
||
|
targets: this.root,
|
||
|
opacity: 1,
|
||
|
duration: 100,
|
||
|
easing: 'linear'
|
||
|
});
|
||
|
|
||
|
this.api('posts/show', {
|
||
|
post_id: this.opts.post
|
||
|
}).then(post => {
|
||
|
|
||
|
this.update({
|
||
|
fetching: false,
|
||
|
post: post
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
this.close = () => {
|
||
|
this.refs.bg.style.pointerEvents = 'none';
|
||
|
this.refs.main.style.pointerEvents = 'none';
|
||
|
anime({
|
||
|
targets: this.root,
|
||
|
opacity: 0,
|
||
|
duration: 300,
|
||
|
easing: 'linear',
|
||
|
complete: () => this.unmount()
|
||
|
});
|
||
|
};
|
||
|
|
||
|
this.bgClick = () => {
|
||
|
this.close();
|
||
|
};
|
||
|
</script>
|
||
|
</mk-detailed-post-window>
|