mirror of
https://github.com/misskey-dev/misskey
synced 2024-06-26 12:28:27 +02:00
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>
|