mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-12-05 10:18:05 +09:00
channel以外mk-images-viewer化・mk-images-viewer強化
This commit is contained in:
parent
29bb21d7e5
commit
dc14be59d6
@ -1,32 +1,46 @@
|
||||
<mk-images-viewer>
|
||||
<div class="image" ref="view" onmousemove={ mousemove } style={ 'background-image: url(' + image.url + '?thumbnail' } onclick={ click }><img src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
|
||||
<virtual each={ image in images }>
|
||||
<mk-images-viewer-image ref="wrap" image={ image } images={ images }/>
|
||||
</virtual>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
display grid
|
||||
overflow hidden
|
||||
border-radius 4px
|
||||
grid-gap .25em
|
||||
|
||||
> .image
|
||||
> div
|
||||
cursor zoom-in
|
||||
overflow hidden
|
||||
background-position center
|
||||
|
||||
> img
|
||||
display block
|
||||
max-height 256px
|
||||
max-width 100%
|
||||
margin 0 auto
|
||||
|
||||
&:hover
|
||||
> img
|
||||
visibility hidden
|
||||
visibility hidden
|
||||
max-width: 100%
|
||||
max-height: 256px
|
||||
|
||||
&:not(:hover)
|
||||
background-image none !important
|
||||
background-size cover
|
||||
|
||||
&:nth-child(1):nth-last-child(3)
|
||||
grid-row 1 / 3
|
||||
</style>
|
||||
<script>
|
||||
this.images = this.opts.images;
|
||||
this.image = this.images[0];
|
||||
|
||||
this.on('mount', () => {
|
||||
if(this.images.length >= 3) this.refs.wrap.style.gridAutoRows = "9em";
|
||||
if(this.images.length == 2) this.refs.wrap.style.gridAutoRows = "12em";
|
||||
if(this.images.length == 1) this.refs.wrap.style.gridAutoRows = "256px";
|
||||
if(this.images.length == 4 || this.images.length == 2) this.refs.wrap.style.gridTemplateColumns = "repeat(2, 1fr)";
|
||||
if(this.images.length == 3) this.refs.wrap.style.gridTemplateColumns = "65% 1fr";
|
||||
})
|
||||
</script>
|
||||
</mk-images-viewer>
|
||||
|
||||
<mk-images-viewer-image>
|
||||
<div ref="view" onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail?size=512' } onclick={ click }><img ref="image" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
|
||||
<script>
|
||||
this.mousemove = e => {
|
||||
const rect = this.refs.view.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
@ -34,12 +48,19 @@
|
||||
const xp = mouseX / this.refs.view.offsetWidth * 100;
|
||||
const yp = mouseY / this.refs.view.offsetHeight * 100;
|
||||
this.refs.view.style.backgroundPosition = xp + '% ' + yp + '%';
|
||||
this.refs.view.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
|
||||
};
|
||||
|
||||
this.mouseleave = () => {
|
||||
this.refs.view.style.backgroundPosition = "";
|
||||
}
|
||||
|
||||
this.click = () => {
|
||||
riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
|
||||
image: this.image
|
||||
});
|
||||
};
|
||||
|
||||
this.image = this.opts.image;
|
||||
</script>
|
||||
</mk-images-viewer>
|
||||
</mk-images-viewer-image>
|
@ -9,7 +9,7 @@
|
||||
<span class="username">@{ post.user.username }</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a class="time" href={ '/' + this.post.user.username + '/' + this.post.id }>
|
||||
<a class="time" href={ '/' + post.user.username + '/' + post.id }>
|
||||
<mk-time time={ post.created_at }/>
|
||||
</a>
|
||||
</div>
|
||||
@ -17,9 +17,7 @@
|
||||
<div class="body">
|
||||
<div class="text" ref="text"></div>
|
||||
<div class="media" if={ post.media }>
|
||||
<virtual each={ file in post.media }>
|
||||
<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
|
||||
</virtual>
|
||||
<mk-images-viewer images={ post.media }/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -37,7 +37,7 @@
|
||||
<div class="body">
|
||||
<div class="text" ref="text"></div>
|
||||
<div class="media" if={ p.media }>
|
||||
<virtual each={ file in p.media }><img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/></virtual>
|
||||
<mk-images-viewer images={ p.media }/>
|
||||
</div>
|
||||
<mk-poll if={ p.poll } post={ p }/>
|
||||
</div>
|
||||
@ -208,11 +208,6 @@
|
||||
> mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
> .media
|
||||
> img
|
||||
display block
|
||||
max-width 100%
|
||||
|
||||
> footer
|
||||
font-size 1.2em
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user