From 2ab7a5acc18d99bd55075596db1fb5092f90ad35 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 10 Dec 2017 21:57:17 +0900
Subject: [PATCH] :v:

---
 src/web/app/desktop/tags/images-viewer.tag | 79 ++++++++++++++++------
 1 file changed, 58 insertions(+), 21 deletions(-)

diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
index 0369ea9f6..1ad382dda 100644
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ b/src/web/app/desktop/tags/images-viewer.tag
@@ -1,17 +1,71 @@
 <mk-images-viewer>
 	<virtual each={ image in images }>
-		<mk-images-viewer-image ref="wrap" image={ image } images={ images }/>
+		<mk-images-viewer-image image={ image } images={ images }/>
 	</virtual>
 	<style>
 		:scope
 			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
 			border-radius 4px
-			grid-gap .25em
 
 			> div
 				cursor zoom-in
 				overflow hidden
+				width 100%
+				height 100%
 				background-position center
 
 				> img
@@ -23,24 +77,7 @@
 				&:not(:hover)
 					background-size cover
 
-				&:nth-child(1):nth-last-child(3)
-					grid-row 1 / 3
 	</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>
 		this.mousemove = e => {
 			const rect = this.refs.view.getBoundingClientRect();
@@ -54,7 +91,7 @@
 
 		this.mouseleave = () => {
 			this.refs.view.style.backgroundPosition = "";
-		}
+		};
 
 		this.click = () => {
 			riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
@@ -64,4 +101,4 @@
 
 		this.image = this.opts.image;
 	</script>
-</mk-images-viewer-image>
\ No newline at end of file
+</mk-images-viewer-image>