From e51bd95a8d5e7bd006ab2f3db67b9c3cc2cab7cf Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sun, 10 Dec 2017 20:39:26 +0900 Subject: [PATCH 1/3] =?UTF-8?q?channel=E4=BB=A5=E5=A4=96mk-images-viewer?= =?UTF-8?q?=E5=8C=96=E3=83=BBmk-images-viewer=E5=BC=B7=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/web/app/desktop/tags/images-viewer.tag | 49 ++++++++++++++------ src/web/app/desktop/tags/post-detail-sub.tag | 6 +-- src/web/app/desktop/tags/post-detail.tag | 7 +-- 3 files changed, 38 insertions(+), 24 deletions(-) diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag index 44a61cb74..3edd1300b 100644 --- a/src/web/app/desktop/tags/images-viewer.tag +++ b/src/web/app/desktop/tags/images-viewer.tag @@ -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> \ No newline at end of file diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag index e22386df9..99899929d 100644 --- a/src/web/app/desktop/tags/post-detail-sub.tag +++ b/src/web/app/desktop/tags/post-detail-sub.tag @@ -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> diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag index 37f90a6ff..23f7a4198 100644 --- a/src/web/app/desktop/tags/post-detail.tag +++ b/src/web/app/desktop/tags/post-detail.tag @@ -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 From 4da6fafe43b61c191e193b6bef985ae2c30e0f3c Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sun, 10 Dec 2017 20:49:12 +0900 Subject: [PATCH 2/3] =?UTF-8?q?URL=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/web/app/desktop/tags/images-viewer.tag | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag index 3edd1300b..9fd6b8de9 100644 --- a/src/web/app/desktop/tags/images-viewer.tag +++ b/src/web/app/desktop/tags/images-viewer.tag @@ -39,7 +39,7 @@ </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> + <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(); From 3cd0c45176b85870c345c32e5ba19f71a63309c2 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sun, 10 Dec 2017 21:01:25 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E6=8E=A8=E6=B8=AC=E3=81=A7CSS=E3=82=92?= =?UTF-8?q?=E5=8B=95=E3=81=8B=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/web/app/desktop/tags/images-viewer.tag | 1 + src/web/app/desktop/tags/post-detail-sub.tag | 5 ----- src/web/app/desktop/tags/timeline.tag | 5 ----- 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag index 9fd6b8de9..0369ea9f6 100644 --- a/src/web/app/desktop/tags/images-viewer.tag +++ b/src/web/app/desktop/tags/images-viewer.tag @@ -15,6 +15,7 @@ background-position center > img + display block visibility hidden max-width: 100% max-height: 256px diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag index 99899929d..ab45b5523 100644 --- a/src/web/app/desktop/tags/post-detail-sub.tag +++ b/src/web/app/desktop/tags/post-detail-sub.tag @@ -105,11 +105,6 @@ > mk-url-preview margin-top 8px - > .media - > img - display block - max-width 100% - </style> <script> import compile from '../../common/scripts/text-compiler'; diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag index 08e658a3c..77e4a573b 100644 --- a/src/web/app/desktop/tags/timeline.tag +++ b/src/web/app/desktop/tags/timeline.tag @@ -357,11 +357,6 @@ background $theme-color border-radius 4px - > .media - > img - display block - max-width 100% - > mk-poll font-size 80%