Implement image viewer (#363)

This commit is contained in:
TAKAHASHI Shuuji 2023-01-08 02:34:11 +09:00 committed by GitHub
parent 326bdec94a
commit 925ff6edcd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 2 deletions

View file

@ -1699,6 +1699,47 @@ form .post {
transition: 0.2s;
}
/* Image viewer */
#image-viewer {
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
margin: 0;
width: 100dvw;
height: 100dvh;
background: rgb(0 0 0 / 75%);
transition: opacity 350ms;
z-index: 100;
}
#image-viewer picture, #image-viewer img {
display: block;
}
#image-viewer img {
max-height: calc(100dvh - 8em);
max-width: 100dvw;
}
#image-viewer figcaption {
width: 100%;
padding: 1em;
background-color: black;
color: var(--color-text-main);
text-align: center;
}
#image-viewer button {
position: fixed;
right: 10px;
top: 10px;
color: var(--color-text-main);
background: transparent;
cursor: pointer;
}
/* Accessibility */
.screenreader-text {

View file

@ -0,0 +1,34 @@
<script type="text/hyperscript">
def imageviewer.show(source)
set source_url to (<img /> in source) @data-original-url
set source_alt to (<img /> in source) @alt
set image to <#image-viewer img />
set figcaption to <#image-viewer figcaption />
-- fill information
set image@src to source_url
set image@alt to source_alt
set figcaption's textContent to source_alt
-- show image viewer
show #image-viewer with display:flex
transition #image-viewer's opacity from 0 to 1 over 300ms
focus() on first <#image-viewer button />
end
def imageviewer.close()
transition #image-viewer's opacity to 0 over 300ms
hide #image-viewer
set <#image-viewer img /> @src to ''
set <#image-viewer img /> @alt to ''
set <#image-viewer figcaption />'s textContent to ''
end
</script>
<figure id="image-viewer" style="display: none" _="on click imageviewer.close()">
<picture>
<img src="" alt=""/>
</picture>
<figcaption></figcaption>
<button aria-label="Close">
<i class="fa fa-3x fa-times"></i>
</button>
</figure>

View file

@ -43,8 +43,9 @@
<div class="attachments">
{% for attachment in post.attachments.all %}
{% if attachment.is_image %}
<a href="{{ attachment.full_url.relative }}" class="image">
<img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name }}" loading="lazy" />
<a href="{{ attachment.full_url.relative }}" class="image" target="_blank"
_="on click halt the event then call imageviewer.show(me)">
<img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name|default:'(no description)' }}" loading="lazy" data-original-url="{{ attachment.full_url.relative }}">
</a>
{% elif attachment.is_video %}
<a href="{{ attachment.full_url.relative }}" class="video">

View file

@ -73,6 +73,7 @@
</header>
{% block full_content %}
{% include 'activities/_modal_image.html' %}
{% block pre_content %}
{% endblock %}
<div class="columns">

View file

@ -27,6 +27,7 @@
</header>
<div id="main-content">
{% include "activities/_modal_image.html" %}
{% block content %}
{% endblock %}
</div>