rename gallery.js to dialog.js, keep close string in meta.js

This commit is contained in:
madrilene 2025-01-27 07:26:05 +01:00
parent 37cdc1915b
commit a063d227d3
3 changed files with 7 additions and 2 deletions

View file

@ -58,6 +58,9 @@ export const details = {
expand: 'expand all', expand: 'expand all',
collapse: 'collapse all' collapse: 'collapse all'
}; };
export const dialog = {
close: 'Close'
};
export const navigation = { export const navigation = {
navLabel: 'Menu', navLabel: 'Menu',
ariaTop: 'Main', ariaTop: 'Main',

View file

@ -2,7 +2,7 @@
<div class="gallery | grid mt-l-xl" role="list"> <div class="gallery | grid mt-l-xl" role="list">
{%- for item in gallery -%} {%- for item in gallery -%}
<dialog class="flow modal{{ loop.index }}"> <dialog class="flow modal{{ loop.index }}">
<button class="button" autofocus>Close</button> <button class="button" autofocus>{{ meta.dialog.close }}</button>
{%- image item.image, item.alt, item.caption -%} {%- image item.image, item.alt, item.caption -%}
</dialog> </dialog>
<button data-index="{{ loop.index }}">{%- image item.image, item.alt -%}</button> <button data-index="{{ loop.index }}">{%- image item.image, item.alt -%}</button>
@ -14,6 +14,6 @@
{% endcss %} {% endcss %}
{% js "defer" %} {% js "defer" %}
{% include "scripts/gallery.js" %} {% include "scripts/dialog.js" %}
{% endjs %} {% endjs %}
</is-land> </is-land>

View file

@ -1,3 +1,5 @@
// manages the behavior of modal several dialogs on a page: open / close buttons and light dismiss.
const buttons = document.querySelectorAll('button[data-index]'); const buttons = document.querySelectorAll('button[data-index]');
const modals = document.querySelectorAll('dialog'); const modals = document.querySelectorAll('dialog');
const closeButtons = document.querySelectorAll('dialog button'); const closeButtons = document.querySelectorAll('dialog button');