mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 15:45:58 +09:00
Code

✌️

Browse Source
This commit is contained in:
syuilo 2017-12-10 21:57:17 +09:00
parent 1c39ae0424
commit 6bf5a4edff
1 changed files with 58 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/web/app/desktop/tags/images-viewer.tag
View File

@ -1,17 +1,71 @@
<mk-images-viewer> <mk-images-viewer>
<virtual each={ image in images }> <virtual each={ image in images }>
<mk-images-viewer-image ref="wrap" image={ image } images={ images }/> <mk-images-viewer-image image={ image } images={ images }/>
</virtual> </virtual>
<style> <style>
:scope :scope
display grid display grid
grid-gap .25em
</style>
<script>
this.images = this.opts.images;
this.on('mount', () => {
if (this.images.length == 1) {
this.root.style.gridTemplateRows = '256px';
this.tags['mk-images-viewer-image'].root.style.gridColumn = '1 / 2';
this.tags['mk-images-viewer-image'].root.style.gridRow = '1 / 2';
} else if (this.images.length == 2) {
this.root.style.gridTemplateColumns = '50% 50%';
this.root.style.gridTemplateRows = '256px';
this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 2';
this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
} else if (this.images.length == 3) {
this.root.style.gridTemplateColumns = '70% 30%';
this.root.style.gridTemplateRows = '128px 128px';
this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 3';
this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
this.tags['mk-images-viewer-image'][2].root.style.gridColumn = '2 / 3';
this.tags['mk-images-viewer-image'][2].root.style.gridRow = '2 / 3';
} else if (this.images.length == 4) {
this.root.style.gridTemplateColumns = '50% 50%';
this.root.style.gridTemplateRows = '128px 128px';
this.tags['mk-images-viewer-image'][0].root.style.gridColumn = '1 / 2';
this.tags['mk-images-viewer-image'][0].root.style.gridRow = '1 / 2';
this.tags['mk-images-viewer-image'][1].root.style.gridColumn = '2 / 3';
this.tags['mk-images-viewer-image'][1].root.style.gridRow = '1 / 2';
this.tags['mk-images-viewer-image'][2].root.style.gridColumn = '1 / 2';
this.tags['mk-images-viewer-image'][2].root.style.gridRow = '2 / 3';
this.tags['mk-images-viewer-image'][3].root.style.gridColumn = '2 / 3';
this.tags['mk-images-viewer-image'][3].root.style.gridRow = '2 / 3';
}
});
</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>
<style>
:scope
display block
overflow hidden overflow hidden
border-radius 4px border-radius 4px
grid-gap .25em
> div > div
cursor zoom-in cursor zoom-in
overflow hidden overflow hidden
width 100%
height 100%
background-position center background-position center
> img > img
@ -23,24 +77,7 @@
&:not(:hover) &:not(:hover)
background-size cover background-size cover
&:nth-child(1):nth-last-child(3)
grid-row 1 / 3
</style> </style>
<script>
this.images = this.opts.images;
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> <script>
this.mousemove = e => { this.mousemove = e => {
const rect = this.refs.view.getBoundingClientRect(); const rect = this.refs.view.getBoundingClientRect();
@ -54,7 +91,7 @@
this.mouseleave = () => { this.mouseleave = () => {
this.refs.view.style.backgroundPosition = ""; this.refs.view.style.backgroundPosition = "";
} };
this.click = () => { this.click = () => {
riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), { riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
@ -64,4 +101,4 @@
this.image = this.opts.image; this.image = this.opts.image;
</script> </script>
</mk-images-viewer-image> </mk-images-viewer-image>