summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/web/app/desktop/tags/images-viewer.tag104
-rw-r--r--src/web/app/desktop/tags/images.tag100
-rw-r--r--src/web/app/desktop/tags/index.ts2
-rw-r--r--src/web/app/desktop/tags/post-detail-sub.tag2
-rw-r--r--src/web/app/desktop/tags/post-detail.tag2
-rw-r--r--src/web/app/desktop/tags/sub-post-content.tag2
-rw-r--r--src/web/app/desktop/tags/timeline.tag2
-rw-r--r--src/web/app/mobile/tags/images-viewer.tag26
-rw-r--r--src/web/app/mobile/tags/images.tag78
-rw-r--r--src/web/app/mobile/tags/index.ts2
-rw-r--r--src/web/app/mobile/tags/post-detail.tag2
-rw-r--r--src/web/app/mobile/tags/sub-post-content.tag2
-rw-r--r--src/web/app/mobile/tags/timeline.tag2
13 files changed, 187 insertions, 139 deletions
diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag
deleted file mode 100644
index 1ad382dda8..0000000000
--- a/src/web/app/desktop/tags/images-viewer.tag
+++ /dev/null
@@ -1,104 +0,0 @@
-<mk-images-viewer>
- <virtual each={ image in 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
-
- > div
- cursor zoom-in
- overflow hidden
- width 100%
- height 100%
- background-position center
-
- > img
- display block
- visibility hidden
- max-width: 100%
- max-height: 256px
-
- &:not(:hover)
- background-size cover
-
- </style>
- <script>
- this.mousemove = e => {
- const rect = this.refs.view.getBoundingClientRect();
- const mouseX = e.clientX - rect.left;
- const mouseY = e.clientY - rect.top;
- 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-image>
diff --git a/src/web/app/desktop/tags/images.tag b/src/web/app/desktop/tags/images.tag
new file mode 100644
index 0000000000..ce67d26a9f
--- /dev/null
+++ b/src/web/app/desktop/tags/images.tag
@@ -0,0 +1,100 @@
+<mk-images>
+ <virtual each={ image in images }>
+ <mk-images-image image={ image }/>
+ </virtual>
+ <style>
+ :scope
+ display grid
+ grid-gap 4px
+ height 256px
+ </style>
+ <script>
+ this.images = this.opts.images;
+
+ this.on('mount', () => {
+ if (this.images.length == 1) {
+ this.root.style.gridTemplateRows = '1fr';
+
+ this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
+ } else if (this.images.length == 2) {
+ this.root.style.gridTemplateColumns = '1fr 1fr';
+ this.root.style.gridTemplateRows = '1fr';
+
+ this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+ } else if (this.images.length == 3) {
+ this.root.style.gridTemplateColumns = '1fr 0.5fr';
+ this.root.style.gridTemplateRows = '1fr 1fr';
+
+ this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
+ this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+ } else if (this.images.length == 4) {
+ this.root.style.gridTemplateColumns = '1fr 1fr';
+ this.root.style.gridTemplateRows = '1fr 1fr';
+
+ this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+ this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
+ }
+ });
+ </script>
+</mk-images>
+
+<mk-images-image>
+ <a ref="view" href={ image.url } onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click } title={ image.name }></a>
+ <style>
+ :scope
+ display block
+ overflow hidden
+ border-radius 4px
+
+ > a
+ display block
+ cursor zoom-in
+ overflow hidden
+ width 100%
+ height 100%
+ background-position center
+
+ &:not(:hover)
+ background-size cover
+
+ </style>
+ <script>
+ this.image = this.opts.image;
+
+ this.mousemove = e => {
+ const rect = this.refs.view.getBoundingClientRect();
+ const mouseX = e.clientX - rect.left;
+ const mouseY = e.clientY - rect.top;
+ 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 = ev => {
+ ev.preventDefault();
+ riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
+ image: this.image
+ });
+ return false;
+ };
+ </script>
+</mk-images-image>
diff --git a/src/web/app/desktop/tags/index.ts b/src/web/app/desktop/tags/index.ts
index 3ec1d108aa..30a13b584d 100644
--- a/src/web/app/desktop/tags/index.ts
+++ b/src/web/app/desktop/tags/index.ts
@@ -76,7 +76,7 @@ require('./set-avatar-suggestion.tag');
require('./set-banner-suggestion.tag');
require('./repost-form.tag');
require('./sub-post-content.tag');
-require('./images-viewer.tag');
+require('./images.tag');
require('./image-dialog.tag');
require('./donation.tag');
require('./users-list.tag');
diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag
index ab45b55234..cccd85c474 100644
--- a/src/web/app/desktop/tags/post-detail-sub.tag
+++ b/src/web/app/desktop/tags/post-detail-sub.tag
@@ -17,7 +17,7 @@
<div class="body">
<div class="text" ref="text"></div>
<div class="media" if={ post.media }>
- <mk-images-viewer images={ post.media }/>
+ <mk-images 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 23f7a41985..47c71a6c12 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 }>
- <mk-images-viewer images={ p.media }/>
+ <mk-images images={ p.media }/>
</div>
<mk-poll if={ p.poll } post={ p }/>
</div>
diff --git a/src/web/app/desktop/tags/sub-post-content.tag b/src/web/app/desktop/tags/sub-post-content.tag
index 8989ff1c5b..1a81b545b6 100644
--- a/src/web/app/desktop/tags/sub-post-content.tag
+++ b/src/web/app/desktop/tags/sub-post-content.tag
@@ -8,7 +8,7 @@
</div>
<details if={ post.media }>
<summary>({ post.media.length }つのメディア)</summary>
- <mk-images-viewer images={ post.media }/>
+ <mk-images images={ post.media }/>
</details>
<details if={ post.poll }>
<summary>投票</summary>
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
index 77e4a573b1..ed77a9e608 100644
--- a/src/web/app/desktop/tags/timeline.tag
+++ b/src/web/app/desktop/tags/timeline.tag
@@ -120,7 +120,7 @@
<a class="quote" if={ p.repost != null }>RP:</a>
</div>
<div class="media" if={ p.media }>
- <mk-images-viewer images={ p.media }/>
+ <mk-images images={ p.media }/>
</div>
<mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
<div class="repost" if={ p.repost }>%fa:quote-right -flip-h%
diff --git a/src/web/app/mobile/tags/images-viewer.tag b/src/web/app/mobile/tags/images-viewer.tag
deleted file mode 100644
index 8ef4a50be0..0000000000
--- a/src/web/app/mobile/tags/images-viewer.tag
+++ /dev/null
@@ -1,26 +0,0 @@
-<mk-images-viewer>
- <div class="image" ref="view" onclick={ click }><img ref="img" src={ image.url + '?thumbnail&size=512' } alt={ image.name } title={ image.name }/></div>
- <style>
- :scope
- display block
- overflow hidden
- border-radius 4px
-
- > .image
-
- > img
- display block
- max-height 256px
- max-width 100%
- margin 0 auto
-
- </style>
- <script>
- this.images = this.opts.images;
- this.image = this.images[0];
-
- this.click = () => {
- window.open(this.image.url);
- };
- </script>
-</mk-images-viewer>
diff --git a/src/web/app/mobile/tags/images.tag b/src/web/app/mobile/tags/images.tag
new file mode 100644
index 0000000000..aaa80e4fd1
--- /dev/null
+++ b/src/web/app/mobile/tags/images.tag
@@ -0,0 +1,78 @@
+<mk-images>
+ <virtual each={ image in images }>
+ <mk-images-image image={ image }/>
+ </virtual>
+ <style>
+ :scope
+ display grid
+ grid-gap 4px
+ height 256px
+
+ @media (max-width 500px)
+ height 192px
+ </style>
+ <script>
+ this.images = this.opts.images;
+
+ this.on('mount', () => {
+ if (this.images.length == 1) {
+ this.root.style.gridTemplateRows = '1fr';
+
+ this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
+ } else if (this.images.length == 2) {
+ this.root.style.gridTemplateColumns = '1fr 1fr';
+ this.root.style.gridTemplateRows = '1fr';
+
+ this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+ } else if (this.images.length == 3) {
+ this.root.style.gridTemplateColumns = '1fr 0.5fr';
+ this.root.style.gridTemplateRows = '1fr 1fr';
+
+ this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
+ this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+ } else if (this.images.length == 4) {
+ this.root.style.gridTemplateColumns = '1fr 1fr';
+ this.root.style.gridTemplateRows = '1fr 1fr';
+
+ this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
+ this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
+ this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
+ this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
+ this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
+ }
+ });
+ </script>
+</mk-images>
+
+<mk-images-image>
+ <a ref="view" href={ image.url } target="_blank" style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } title={ image.name }></a>
+ <style>
+ :scope
+ display block
+ overflow hidden
+ border-radius 4px
+
+ > a
+ display block
+ overflow hidden
+ width 100%
+ height 100%
+ background-position center
+ background-size cover
+
+ </style>
+ <script>
+ this.image = this.opts.image;
+ </script>
+</mk-images-image>
diff --git a/src/web/app/mobile/tags/index.ts b/src/web/app/mobile/tags/index.ts
index 19952c20cd..fd5952ea13 100644
--- a/src/web/app/mobile/tags/index.ts
+++ b/src/web/app/mobile/tags/index.ts
@@ -25,7 +25,7 @@ require('./home-timeline.tag');
require('./timeline.tag');
require('./post-preview.tag');
require('./sub-post-content.tag');
-require('./images-viewer.tag');
+require('./images.tag');
require('./drive.tag');
require('./drive-selector.tag');
require('./drive-folder-selector.tag');
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 9f212a2496..1816d1bf93 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -34,7 +34,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 images={ p.media }/>
</div>
<mk-poll if={ p.poll } post={ p }/>
</div>
diff --git a/src/web/app/mobile/tags/sub-post-content.tag b/src/web/app/mobile/tags/sub-post-content.tag
index 9436b6c1d7..adeb84dea0 100644
--- a/src/web/app/mobile/tags/sub-post-content.tag
+++ b/src/web/app/mobile/tags/sub-post-content.tag
@@ -2,7 +2,7 @@
<div class="body"><a class="reply" if={ post.reply_id }>%fa:reply%</a><span ref="text"></span><a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a></div>
<details if={ post.media }>
<summary>({ post.media.length }個のメディア)</summary>
- <mk-images-viewer images={ post.media }/>
+ <mk-images images={ post.media }/>
</details>
<details if={ post.poll }>
<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>
diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag
index 19f90a1c11..9e85f97da3 100644
--- a/src/web/app/mobile/tags/timeline.tag
+++ b/src/web/app/mobile/tags/timeline.tag
@@ -172,7 +172,7 @@
<a class="quote" if={ p.repost != null }>RP:</a>
</div>
<div class="media" if={ p.media }>
- <mk-images-viewer images={ p.media }/>
+ <mk-images images={ p.media }/>
</div>
<mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
<span class="app" if={ p.app }>via <b>{ p.app.name }</b></span>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-25 20:24:05 +0000