@nationalarchives/frontend 0.11.3 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nationalarchives/all+analytics.js +1 -1
- package/nationalarchives/all+analytics.js.map +1 -1
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/all.js +1 -1
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/components/accordion/macro-options.json +2 -0
- package/nationalarchives/components/breadcrumbs/fixtures.json +21 -0
- package/nationalarchives/components/breadcrumbs/macro-options.json +9 -0
- package/nationalarchives/components/breadcrumbs/template.njk +1 -1
- package/nationalarchives/components/gallery/analytics.js +1 -1
- package/nationalarchives/components/gallery/fixtures.json +3 -3
- package/nationalarchives/components/gallery/gallery.js +1 -1
- package/nationalarchives/components/gallery/gallery.js.map +1 -1
- package/nationalarchives/components/gallery/gallery.mjs +9 -7
- package/nationalarchives/components/gallery/template.njk +2 -2
- package/nationalarchives/components/global-header/fixtures.json +40 -2
- package/nationalarchives/components/global-header/global-header.css +1 -1
- package/nationalarchives/components/global-header/global-header.css.map +1 -1
- package/nationalarchives/components/global-header/global-header.scss +1 -2
- package/nationalarchives/components/global-header/macro-options.json +7 -0
- package/nationalarchives/components/global-header/template.njk +5 -0
- package/nationalarchives/components/header/fixtures.json +116 -5
- package/nationalarchives/components/header/macro-options.json +7 -0
- package/nationalarchives/components/header/template.njk +5 -0
- package/nationalarchives/components/phase-banner/macro-options.json +0 -6
- package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.scss +0 -2
- package/nationalarchives/components/phase-banner/template.njk +0 -3
- package/nationalarchives/components/picture/picture.css +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/picture/picture.scss +4 -0
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/package.json +1 -1
|
@@ -29,14 +29,23 @@
|
|
|
29
29
|
"name": "noCollapse",
|
|
30
30
|
"type": "boolean",
|
|
31
31
|
"required": false,
|
|
32
|
+
"default": false,
|
|
32
33
|
"description": "When true, the breadcrumbs will not collapse to the first and last item only on smaller devices."
|
|
33
34
|
},
|
|
34
35
|
{
|
|
35
36
|
"name": "structuredData",
|
|
36
37
|
"type": "boolean",
|
|
37
38
|
"required": false,
|
|
39
|
+
"default": false,
|
|
38
40
|
"description": "When true, structured data markup is added to the breadcrumbs."
|
|
39
41
|
},
|
|
42
|
+
{
|
|
43
|
+
"name": "labelText",
|
|
44
|
+
"type": "string",
|
|
45
|
+
"required": false,
|
|
46
|
+
"default": "Breadcrumbs",
|
|
47
|
+
"description": "A custom value to use as the `aria-label`."
|
|
48
|
+
},
|
|
40
49
|
{
|
|
41
50
|
"name": "classes",
|
|
42
51
|
"type": "string",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
|
|
4
4
|
{%- endif -%}
|
|
5
5
|
{%- set classes = containerClasses | join(' ') -%}
|
|
6
|
-
<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="Breadcrumbs"{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
|
|
6
|
+
<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="{{ params.labelText or 'Breadcrumbs' }}"{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
|
|
7
7
|
<ol class="tna-breadcrumbs__list" {%- if params.structuredData %} itemscope itemtype="https://schema.org/BreadcrumbList"{% endif %}>
|
|
8
8
|
{%- for item in params.items %}
|
|
9
9
|
<li class="tna-breadcrumbs__item" {%- if params.structuredData %} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"{% endif %}>
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
],
|
|
30
30
|
"id": "test-gallery"
|
|
31
31
|
},
|
|
32
|
-
"html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"
|
|
32
|
+
"html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "bounded",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"id": "test-gallery",
|
|
61
61
|
"bounded": true
|
|
62
62
|
},
|
|
63
|
-
"html": "<section class=\"tna-gallery tna-gallery--bounded\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"
|
|
63
|
+
"html": "<section class=\"tna-gallery tna-gallery--bounded\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
"name": "with title and text",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
],
|
|
94
94
|
"id": "test-gallery"
|
|
95
95
|
},
|
|
96
|
-
"html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"><h3 class=\"tna-heading-m\">My gallery</h3><p>Lorem ipsum</p></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the My gallery gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"
|
|
96
|
+
"html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"><h3 class=\"tna-heading-m\">My gallery</h3><p>Lorem ipsum</p></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the My gallery gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
|
|
97
97
|
}
|
|
98
98
|
]
|
|
99
99
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{Gallery:()=>o});var o=function(){return t=function t(e){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$itemsContainer=e&&e.querySelector(".tna-gallery__items"),this.$items=this.$itemsContainer&&this.$itemsContainer.querySelectorAll(".tna-gallery__item"),this.$navigation=e&&e.querySelector(".tna-gallery__navigation"),this.$navigationItems=this.$navigation&&e.querySelectorAll(".tna-gallery__navigation-item"),this.$options=e&&e.querySelector(".tna-gallery__options"),this.$navigationButtons=e&&e.querySelector(".tna-gallery__navigation-buttons"),this.$module&&this.$itemsContainer&&this.$items&&this.$navigation&&this.$navigationItems&&this.$options&&this.$navigationButtons&&(this.$module.classList.add("tna-gallery--interactive"),this.$showIndex=this.$options.querySelector('button[value="show-index"]'),this.$enterFullscreen=this.$options.querySelector('button[value="enter-fullscreen"]'),this.$exitFullscreen=this.$options.querySelector('button[value="exit-fullscreen"]'),this.$navigationButtonPrev=this.$navigationButtons.querySelector(".tna-gallery__navigation-prev"),this.$navigationButtonNext=this.$navigationButtons.querySelector(".tna-gallery__navigation-next"),this.$module.addEventListener("fullscreenchange",(function(){return i.syncFullScreen()})),this.setup(),this.allowGridIndex=this.$module.dataset.showgrid||!1,this.allowGridIndex?this.showIndex():(this.currentId=this.$items[0].id,this.showItem(this.currentId)))},e=[{key:"setup",value:function(){var t,e,i,n,r,o,s,l=this;this.$items.forEach((function(t){t.setAttribute("hidden",""),t.setAttribute("aria-hidden","true")})),this.$navigation.removeAttribute("hidden"),this.$navigationItems.forEach((function(t){t.addEventListener("click",(function(){l.showItem(t.getAttribute("aria-controls")
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{Gallery:()=>o});var o=function(){return t=function t(e){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$itemsContainer=e&&e.querySelector(".tna-gallery__items"),this.$items=this.$itemsContainer&&this.$itemsContainer.querySelectorAll(".tna-gallery__item"),this.$navigation=e&&e.querySelector(".tna-gallery__navigation"),this.$navigationItems=this.$navigation&&e.querySelectorAll(".tna-gallery__navigation-item"),this.$options=e&&e.querySelector(".tna-gallery__options"),this.$navigationButtons=e&&e.querySelector(".tna-gallery__navigation-buttons"),this.$module&&this.$itemsContainer&&this.$items&&this.$navigation&&this.$navigationItems&&this.$options&&this.$navigationButtons&&(this.$module.classList.add("tna-gallery--interactive"),this.$showIndex=this.$options.querySelector('button[value="show-index"]'),this.$enterFullscreen=this.$options.querySelector('button[value="enter-fullscreen"]'),this.$exitFullscreen=this.$options.querySelector('button[value="exit-fullscreen"]'),this.$navigationButtonPrev=this.$navigationButtons.querySelector(".tna-gallery__navigation-prev"),this.$navigationButtonNext=this.$navigationButtons.querySelector(".tna-gallery__navigation-next"),this.$module.addEventListener("fullscreenchange",(function(){return i.syncFullScreen()})),this.setup(),this.allowGridIndex=this.$module.dataset.showgrid||!1,this.allowGridIndex?this.showIndex():(this.currentId=this.$items[0].id,this.showItem(this.currentId)))},e=[{key:"setup",value:function(){var t,e,i,n,r,o,s,l=this;this.$items.forEach((function(t){var e;t.setAttribute("hidden",""),t.setAttribute("aria-hidden","true"),null===(e=t.querySelector(".tna-gallery__item-header"))||void 0===e||e.setAttribute("aria-hidden","true")})),this.$navigation.removeAttribute("hidden"),this.$navigationItems.forEach((function(t){t.addEventListener("click",(function(){l.showItem(t.getAttribute("aria-controls")),l.$itemsContainer.setAttribute("tabindex","0"),l.$itemsContainer.focus()}))})),this.$module.addEventListener("keydown",(function(t){var e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":l.showPreviousItem(),e=!0;break;case"ArrowRight":case"ArrowDown":l.showNextItem(),e=!0;break;case"Home":l.showFirstItem(),e=!0;break;case"End":l.showLastItem(),e=!0}e&&(t.stopPropagation(),t.preventDefault())})),this.$options.removeAttribute("hidden"),document.fullscreenEnabled&&this.$enterFullscreen&&this.$exitFullscreen&&(null===(r=this.$enterFullscreen)||void 0===r||r.addEventListener("click",(function(){return l.enterFullScreen()})),null===(o=this.$exitFullscreen)||void 0===o||o.addEventListener("click",(function(){return l.exitFullScreen()})),null===(s=this.$enterFullscreen)||void 0===s||s.removeAttribute("hidden")),null===(t=this.$showIndex)||void 0===t||t.addEventListener("click",(function(){return l.showIndex()})),null===(e=this.$navigationButtons)||void 0===e||e.removeAttribute("hidden"),null===(i=this.$navigationButtonPrev)||void 0===i||i.addEventListener("click",(function(){l.showPreviousItem()})),null===(n=this.$navigationButtonNext)||void 0===n||n.addEventListener("click",(function(){l.showNextItem()})),this.$liveRegion=document.createElement("div"),this.$liveRegion.setAttribute("aria-live","polite"),this.$liveRegion.setAttribute("aria-atomic","true"),this.$liveRegion.setAttribute("class","tna-gallery__item-header"),this.$itemsContainer.prepend(this.$liveRegion),this.$itemsContainer.classList.add("tna-gallery__items--hide-item-titles"),this.$itemsContainer.addEventListener("blur",(function(){return l.$itemsContainer.removeAttribute("tabindex")}))}},{key:"showIndex",value:function(){var t;this.showItem(""),this.$itemsContainer.classList.add("tna-gallery__items--hide-items"),null===(t=this.$showIndex)||void 0===t||t.setAttribute("hidden","")}},{key:"showItem",value:function(t){var e,i=this;this.$items.forEach((function(e){t&&e.id===t?(e.removeAttribute("hidden"),e.removeAttribute("aria-hidden")):(e.setAttribute("hidden",""),e.setAttribute("aria-hidden","true"))})),this.$navigationItems.forEach((function(e){t&&e.getAttribute("aria-controls")===t?(e.setAttribute("aria-current","true"),i.isFullScreen()&&e.scrollIntoView({block:"nearest"})):e.setAttribute("aria-current","false")})),this.allowGridIndex&&(null===(e=this.$showIndex)||void 0===e||e.removeAttribute("hidden")),this.$itemsContainer.classList.remove("tna-gallery__items--hide-items"),this.currentId=t,this.$liveRegion.textContent="Image ".concat(this.getCurrentItemIndex()+1," of ").concat(this.$items.length)}},{key:"getCurrentItemIndex",value:function(){var t=this;return Array.from(this.$items).findIndex((function(e){return e.id===t.currentId}))}},{key:"showPreviousItem",value:function(){var t=this.getCurrentItemIndex()-1;t<0&&(t=this.$items.length-1),this.showItem(this.$items[t].id)}},{key:"showNextItem",value:function(){var t=this.getCurrentItemIndex()+1;t>=this.$items.length&&(t=0),this.showItem(this.$items[t].id)}},{key:"showFirstItem",value:function(){this.showItem(this.$items[0].id)}},{key:"showLastItem",value:function(){this.showItem(this.$items[this.$items.length-1].id)}},{key:"isFullScreen",value:function(){return document.fullscreenElement}},{key:"enterFullScreen",value:function(){this.$module.requestFullscreen(),this.syncFullScreen(),this.$module.focus()}},{key:"exitFullScreen",value:function(){document.exitFullscreen(),this.syncFullScreen()}},{key:"syncFullScreen",value:function(){this.isFullScreen()?(this.$enterFullscreen.setAttribute("hidden",""),this.$exitFullscreen.removeAttribute("hidden")):(this.$exitFullscreen.setAttribute("hidden",""),this.$enterFullscreen.removeAttribute("hidden"))}}],e&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
|
|
2
2
|
//# sourceMappingURL=gallery.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$itemsContainer =\n $module && $module.querySelector(\".tna-gallery__items\");\n this.$items =\n this.$itemsContainer &&\n this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n this.$navigation =\n $module && $module.querySelector(\".tna-gallery__navigation\");\n this.$navigationItems =\n this.$navigation &&\n $module.querySelectorAll(\".tna-gallery__navigation-item\");\n this.$options = $module && $module.querySelector(\".tna-gallery__options\");\n this.$navigationButtons =\n $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n if (\n !this.$module ||\n !this.$itemsContainer ||\n !this.$items ||\n !this.$navigation ||\n !this.$navigationItems ||\n !this.$options ||\n !this.$navigationButtons\n ) {\n return;\n }\n\n this.$module.classList.add(\"tna-gallery--interactive\");\n\n this.$showIndex = this.$options.querySelector('button[value=\"show-index\"]');\n this.$enterFullscreen = this.$options.querySelector(\n 'button[value=\"enter-fullscreen\"]',\n );\n this.$exitFullscreen = this.$options.querySelector(\n 'button[value=\"exit-fullscreen\"]',\n );\n\n this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-prev\",\n );\n this.$navigationButtonNext = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-next\",\n );\n\n this.$module.addEventListener(\"fullscreenchange\", () =>\n this.syncFullScreen(),\n );\n\n this.setup();\n this.allowGridIndex = this.$module.dataset[\"showgrid\"] || false;\n if (this.allowGridIndex) {\n this.showIndex();\n } else {\n this.currentId = this.$items[0].id;\n this.showItem(this.currentId);\n }\n }\n\n setup() {\n this.$items.forEach(($item) => {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n });\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigationItems.forEach(($item) => {\n $item.addEventListener(\"click\", () => {\n this.showItem($item.getAttribute(\"aria-controls\"), true);\n this.$itemsContainer.focus();\n });\n });\n this.$module.addEventListener(\"keydown\", (e) => {\n let preventDefaultKeyAction = false;\n switch (e.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.showPreviousItem();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.showNextItem();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.showFirstItem();\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.showLastItem();\n preventDefaultKeyAction = true;\n break;\n }\n if (preventDefaultKeyAction) {\n e.stopPropagation();\n e.preventDefault();\n }\n });\n this.$options.removeAttribute(\"hidden\");\n if (\n document.fullscreenEnabled &&\n this.$enterFullscreen &&\n this.$exitFullscreen\n ) {\n this.$enterFullscreen?.addEventListener(\"click\", () =>\n this.enterFullScreen(),\n );\n this.$exitFullscreen?.addEventListener(\"click\", () =>\n this.exitFullScreen(),\n );\n this.$enterFullscreen?.removeAttribute(\"hidden\");\n }\n this.$showIndex?.addEventListener(\"click\", () => this.showIndex());\n this.$navigationButtons?.removeAttribute(\"hidden\");\n this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n this.showPreviousItem();\n });\n this.$navigationButtonNext?.addEventListener(\"click\", () => {\n this.showNextItem();\n });\n\n this.$liveRegion = document.createElement(\"div\");\n this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n this.$itemsContainer.prepend(this.$liveRegion);\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n }\n\n showIndex() {\n this.showItem(\"\");\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-items\");\n this.$showIndex?.setAttribute(\"hidden\", \"\");\n }\n\n showItem(id, focus = false) {\n this.$items.forEach(($item) => {\n if (id && $item.id === id) {\n $item.removeAttribute(\"hidden\");\n $item.removeAttribute(\"aria-hidden\");\n if (focus) {\n $item.setAttribute(\"tabindex\", \"0\");\n $item.focus();\n }\n } else {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n }\n $item.setAttribute(\"tabindex\", \"-1\");\n });\n this.$navigationItems.forEach(($item) => {\n if (id) {\n if ($item.getAttribute(\"aria-controls\") === id) {\n $item.setAttribute(\"aria-current\", \"true\");\n if (this.isFullScreen()) {\n $item.scrollIntoView({ block: \"nearest\" });\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n });\n if (this.allowGridIndex) {\n this.$showIndex?.removeAttribute(\"hidden\");\n }\n this.$itemsContainer.classList.remove(\"tna-gallery__items--hide-items\");\n this.currentId = id;\n this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n }\n\n getCurrentItemIndex() {\n return Array.from(this.$items).findIndex(\n ($item) => $item.id === this.currentId,\n );\n }\n\n showPreviousItem() {\n let nextIndexToShow = this.getCurrentItemIndex() - 1;\n if (nextIndexToShow < 0) {\n nextIndexToShow = this.$items.length - 1;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showNextItem() {\n let nextIndexToShow = this.getCurrentItemIndex() + 1;\n if (nextIndexToShow >= this.$items.length) {\n nextIndexToShow = 0;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showFirstItem() {\n this.showItem(this.$items[0].id);\n }\n\n showLastItem() {\n this.showItem(this.$items[this.$items.length - 1].id);\n }\n\n isFullScreen() {\n return document.fullscreenElement;\n }\n\n enterFullScreen() {\n this.$module.requestFullscreen();\n this.syncFullScreen();\n this.$module.focus();\n }\n\n exitFullScreen() {\n document.exitFullscreen();\n this.syncFullScreen();\n }\n\n syncFullScreen() {\n if (this.isFullScreen()) {\n this.$enterFullscreen.setAttribute(\"hidden\", \"\");\n this.$exitFullscreen.removeAttribute(\"hidden\");\n } else {\n this.$exitFullscreen.setAttribute(\"hidden\", \"\");\n this.$enterFullscreen.removeAttribute(\"hidden\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","$module","_this","_classCallCheck","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$options","$navigationButtons","classList","add","$showIndex","$enterFullscreen","$exitFullscreen","$navigationButtonPrev","$navigationButtonNext","addEventListener","syncFullScreen","setup","allowGridIndex","dataset","showIndex","currentId","id","showItem","_this$$showIndex","_this$$navigationButt","_this$$navigationButt2","_this$$navigationButt3","_this$$enterFullscree","_this$$exitFullscreen","_this$$enterFullscree2","_this2","forEach","$item","setAttribute","removeAttribute","getAttribute","focus","e","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","document","fullscreenEnabled","enterFullScreen","exitFullScreen","$liveRegion","createElement","prepend","_this$$showIndex2","_this$$showIndex3","_this3","arguments","length","undefined","isFullScreen","scrollIntoView","block","remove","textContent","concat","getCurrentItemIndex","_this4","Array","from","findIndex","nextIndexToShow","fullscreenElement","requestFullscreen","exitFullscreen"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$itemsContainer =\n $module && $module.querySelector(\".tna-gallery__items\");\n this.$items =\n this.$itemsContainer &&\n this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n this.$navigation =\n $module && $module.querySelector(\".tna-gallery__navigation\");\n this.$navigationItems =\n this.$navigation &&\n $module.querySelectorAll(\".tna-gallery__navigation-item\");\n this.$options = $module && $module.querySelector(\".tna-gallery__options\");\n this.$navigationButtons =\n $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n if (\n !this.$module ||\n !this.$itemsContainer ||\n !this.$items ||\n !this.$navigation ||\n !this.$navigationItems ||\n !this.$options ||\n !this.$navigationButtons\n ) {\n return;\n }\n\n this.$module.classList.add(\"tna-gallery--interactive\");\n\n this.$showIndex = this.$options.querySelector('button[value=\"show-index\"]');\n this.$enterFullscreen = this.$options.querySelector(\n 'button[value=\"enter-fullscreen\"]',\n );\n this.$exitFullscreen = this.$options.querySelector(\n 'button[value=\"exit-fullscreen\"]',\n );\n\n this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-prev\",\n );\n this.$navigationButtonNext = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-next\",\n );\n\n this.$module.addEventListener(\"fullscreenchange\", () =>\n this.syncFullScreen(),\n );\n\n this.setup();\n this.allowGridIndex = this.$module.dataset[\"showgrid\"] || false;\n if (this.allowGridIndex) {\n this.showIndex();\n } else {\n this.currentId = this.$items[0].id;\n this.showItem(this.currentId);\n }\n }\n\n setup() {\n this.$items.forEach(($item) => {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n $item\n .querySelector(\".tna-gallery__item-header\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n });\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigationItems.forEach(($item) => {\n $item.addEventListener(\"click\", () => {\n this.showItem($item.getAttribute(\"aria-controls\"));\n this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n this.$itemsContainer.focus();\n });\n });\n this.$module.addEventListener(\"keydown\", (e) => {\n let preventDefaultKeyAction = false;\n switch (e.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.showPreviousItem();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.showNextItem();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.showFirstItem();\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.showLastItem();\n preventDefaultKeyAction = true;\n break;\n }\n if (preventDefaultKeyAction) {\n e.stopPropagation();\n e.preventDefault();\n }\n });\n this.$options.removeAttribute(\"hidden\");\n if (\n document.fullscreenEnabled &&\n this.$enterFullscreen &&\n this.$exitFullscreen\n ) {\n this.$enterFullscreen?.addEventListener(\"click\", () =>\n this.enterFullScreen(),\n );\n this.$exitFullscreen?.addEventListener(\"click\", () =>\n this.exitFullScreen(),\n );\n this.$enterFullscreen?.removeAttribute(\"hidden\");\n }\n this.$showIndex?.addEventListener(\"click\", () => this.showIndex());\n this.$navigationButtons?.removeAttribute(\"hidden\");\n this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n this.showPreviousItem();\n });\n this.$navigationButtonNext?.addEventListener(\"click\", () => {\n this.showNextItem();\n });\n\n this.$liveRegion = document.createElement(\"div\");\n this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n this.$itemsContainer.prepend(this.$liveRegion);\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n this.$itemsContainer.addEventListener(\"blur\", () =>\n this.$itemsContainer.removeAttribute(\"tabindex\"),\n );\n }\n\n showIndex() {\n this.showItem(\"\");\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-items\");\n this.$showIndex?.setAttribute(\"hidden\", \"\");\n }\n\n showItem(id) {\n this.$items.forEach(($item) => {\n if (id && $item.id === id) {\n $item.removeAttribute(\"hidden\");\n $item.removeAttribute(\"aria-hidden\");\n } else {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n }\n });\n this.$navigationItems.forEach(($item) => {\n if (id) {\n if ($item.getAttribute(\"aria-controls\") === id) {\n $item.setAttribute(\"aria-current\", \"true\");\n if (this.isFullScreen()) {\n $item.scrollIntoView({ block: \"nearest\" });\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n });\n if (this.allowGridIndex) {\n this.$showIndex?.removeAttribute(\"hidden\");\n }\n this.$itemsContainer.classList.remove(\"tna-gallery__items--hide-items\");\n this.currentId = id;\n this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n }\n\n getCurrentItemIndex() {\n return Array.from(this.$items).findIndex(\n ($item) => $item.id === this.currentId,\n );\n }\n\n showPreviousItem() {\n let nextIndexToShow = this.getCurrentItemIndex() - 1;\n if (nextIndexToShow < 0) {\n nextIndexToShow = this.$items.length - 1;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showNextItem() {\n let nextIndexToShow = this.getCurrentItemIndex() + 1;\n if (nextIndexToShow >= this.$items.length) {\n nextIndexToShow = 0;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showFirstItem() {\n this.showItem(this.$items[0].id);\n }\n\n showLastItem() {\n this.showItem(this.$items[this.$items.length - 1].id);\n }\n\n isFullScreen() {\n return document.fullscreenElement;\n }\n\n enterFullScreen() {\n this.$module.requestFullscreen();\n this.syncFullScreen();\n this.$module.focus();\n }\n\n exitFullScreen() {\n document.exitFullscreen();\n this.syncFullScreen();\n }\n\n syncFullScreen() {\n if (this.isFullScreen()) {\n this.$enterFullscreen.setAttribute(\"hidden\", \"\");\n this.$exitFullscreen.removeAttribute(\"hidden\");\n } else {\n this.$exitFullscreen.setAttribute(\"hidden\", \"\");\n this.$enterFullscreen.removeAttribute(\"hidden\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","$module","_this","_classCallCheck","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$options","$navigationButtons","classList","add","$showIndex","$enterFullscreen","$exitFullscreen","$navigationButtonPrev","$navigationButtonNext","addEventListener","syncFullScreen","setup","allowGridIndex","dataset","showIndex","currentId","id","showItem","_this$$showIndex","_this$$navigationButt","_this$$navigationButt2","_this$$navigationButt3","_this$$enterFullscree","_this$$exitFullscreen","_this$$enterFullscree2","_this2","forEach","$item","_$item$querySelector","setAttribute","removeAttribute","getAttribute","focus","e","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","document","fullscreenEnabled","enterFullScreen","exitFullScreen","$liveRegion","createElement","prepend","_this$$showIndex2","_this$$showIndex3","_this3","isFullScreen","scrollIntoView","block","remove","textContent","concat","getCurrentItemIndex","length","_this4","Array","from","findIndex","nextIndexToShow","fullscreenElement","requestFullscreen","exitFullscreen"],"sourceRoot":""}
|
|
@@ -62,11 +62,15 @@ export class Gallery {
|
|
|
62
62
|
this.$items.forEach(($item) => {
|
|
63
63
|
$item.setAttribute("hidden", "");
|
|
64
64
|
$item.setAttribute("aria-hidden", "true");
|
|
65
|
+
$item
|
|
66
|
+
.querySelector(".tna-gallery__item-header")
|
|
67
|
+
?.setAttribute("aria-hidden", "true");
|
|
65
68
|
});
|
|
66
69
|
this.$navigation.removeAttribute("hidden");
|
|
67
70
|
this.$navigationItems.forEach(($item) => {
|
|
68
71
|
$item.addEventListener("click", () => {
|
|
69
|
-
this.showItem($item.getAttribute("aria-controls")
|
|
72
|
+
this.showItem($item.getAttribute("aria-controls"));
|
|
73
|
+
this.$itemsContainer.setAttribute("tabindex", "0");
|
|
70
74
|
this.$itemsContainer.focus();
|
|
71
75
|
});
|
|
72
76
|
});
|
|
@@ -126,6 +130,9 @@ export class Gallery {
|
|
|
126
130
|
this.$liveRegion.setAttribute("class", "tna-gallery__item-header");
|
|
127
131
|
this.$itemsContainer.prepend(this.$liveRegion);
|
|
128
132
|
this.$itemsContainer.classList.add("tna-gallery__items--hide-item-titles");
|
|
133
|
+
this.$itemsContainer.addEventListener("blur", () =>
|
|
134
|
+
this.$itemsContainer.removeAttribute("tabindex"),
|
|
135
|
+
);
|
|
129
136
|
}
|
|
130
137
|
|
|
131
138
|
showIndex() {
|
|
@@ -134,20 +141,15 @@ export class Gallery {
|
|
|
134
141
|
this.$showIndex?.setAttribute("hidden", "");
|
|
135
142
|
}
|
|
136
143
|
|
|
137
|
-
showItem(id
|
|
144
|
+
showItem(id) {
|
|
138
145
|
this.$items.forEach(($item) => {
|
|
139
146
|
if (id && $item.id === id) {
|
|
140
147
|
$item.removeAttribute("hidden");
|
|
141
148
|
$item.removeAttribute("aria-hidden");
|
|
142
|
-
if (focus) {
|
|
143
|
-
$item.setAttribute("tabindex", "0");
|
|
144
|
-
$item.focus();
|
|
145
|
-
}
|
|
146
149
|
} else {
|
|
147
150
|
$item.setAttribute("hidden", "");
|
|
148
151
|
$item.setAttribute("aria-hidden", "true");
|
|
149
152
|
}
|
|
150
|
-
$item.setAttribute("tabindex", "-1");
|
|
151
153
|
});
|
|
152
154
|
this.$navigationItems.forEach(($item) => {
|
|
153
155
|
if (id) {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
</div>
|
|
55
55
|
<div class="tna-gallery__items">
|
|
56
56
|
{%- for item in params.items %}
|
|
57
|
-
<div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}"
|
|
57
|
+
<div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}">
|
|
58
58
|
<p class="tna-gallery__item-header">Image {{ loop.index }} of {{ params.items | length }}</p>
|
|
59
59
|
<figure class="tna-gallery__item-figure">
|
|
60
60
|
<div class="tna-gallery__item-figure-inner">
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
</div>
|
|
86
86
|
<div class="tna-gallery__navigation" hidden>
|
|
87
87
|
{%- for item in params.items -%}
|
|
88
|
-
<button type="button" class="tna-gallery__navigation-item"
|
|
88
|
+
<button type="button" class="tna-gallery__navigation-item" aria-label="Image {{ loop.index }} of {{ params.items | length }}" aria-controls="{{ params.id }}-item-{{ loop.index }}">
|
|
89
89
|
<img src="{{ item.src }}" class="tna-gallery__navigation-item-image" alt="" width="{{ item.width }}" height="{{ item.height }}" loading="lazy">
|
|
90
90
|
<span class="tna-visually-hidden">Image</span>
|
|
91
91
|
<span class="tna-gallery__navigation-item-label">{{ loop.index }}</span>
|
|
@@ -177,6 +177,44 @@
|
|
|
177
177
|
},
|
|
178
178
|
"html": "<header class=\"tna-global-header\" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo tna-global-header__logo--link\" title=\"Home page\" aria-label=\"Home page\"><span class=\"tna-logo tna-logo--adornable\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation test-top-navigation-id\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"test-top-navigation-id\" aria-label=\"Secondary\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
|
|
179
179
|
},
|
|
180
|
+
{
|
|
181
|
+
"name": "with phase banner",
|
|
182
|
+
"options": {
|
|
183
|
+
"logo": {
|
|
184
|
+
"href": "#/",
|
|
185
|
+
"title": "Home page"
|
|
186
|
+
},
|
|
187
|
+
"topNavigation": [
|
|
188
|
+
{
|
|
189
|
+
"text": "Top item 1",
|
|
190
|
+
"href": "#/top-1"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"text": "Top item 2",
|
|
194
|
+
"href": "#/top-2"
|
|
195
|
+
}
|
|
196
|
+
],
|
|
197
|
+
"navigation": [
|
|
198
|
+
{
|
|
199
|
+
"text": "Alpha",
|
|
200
|
+
"href": "#/alpha"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"text": "Beta",
|
|
204
|
+
"href": "#/beta"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"text": "Gamma",
|
|
208
|
+
"href": "#/gamma"
|
|
209
|
+
}
|
|
210
|
+
],
|
|
211
|
+
"phaseBanner": {
|
|
212
|
+
"phase": "beta",
|
|
213
|
+
"message": "This is a new service – <a href=\"#\">give us your feedback</a> to help improve it."
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
"html": "<header class=\"tna-global-header\" data-module=\"tna-global-header\"><div class=\"tna-phase-banner\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href=\"#\">give us your feedback</a> to help improve it.</p></div></div></div><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo tna-global-header__logo--link\" title=\"Home page\" aria-label=\"Home page\"><span class=\"tna-logo tna-logo--adornable\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation tna-header__top-navigation\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"tna-header__top-navigation\" aria-label=\"Secondary\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
|
|
217
|
+
},
|
|
180
218
|
{
|
|
181
219
|
"name": "with classes",
|
|
182
220
|
"options": {
|
|
@@ -208,9 +246,9 @@
|
|
|
208
246
|
"href": "#/gamma"
|
|
209
247
|
}
|
|
210
248
|
],
|
|
211
|
-
"classes": "
|
|
249
|
+
"classes": "global-header__test-class"
|
|
212
250
|
},
|
|
213
|
-
"html": "<header class=\"tna-global-header
|
|
251
|
+
"html": "<header class=\"tna-global-header global-header__test-class\" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo tna-global-header__logo--link\" title=\"Home page\" aria-label=\"Home page\"><span class=\"tna-logo tna-logo--adornable\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation tna-header__top-navigation\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"tna-header__top-navigation\" aria-label=\"Secondary\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
|
|
214
252
|
},
|
|
215
253
|
{
|
|
216
254
|
"name": "with attributes",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-global-header{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-global-header{
|
|
1
|
+
.tna-global-header{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-global-header{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}.tna-global-header__main{padding-top:16px;padding-bottom:24px}.tna-global-header__logo-wrapper{margin-top:8px;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:16px;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover{outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:2px}.tna-global-header__logo--link:focus-visible{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}.tna-global-header__logo-strapline{padding-right:10px;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover,.tna-global-header__navigation-button:focus-visible{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:8px 0 0;position:relative;columns:2;column-gap:32px;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover,.tna-global-header__navigation-item-link:focus-visible{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 8px;display:flex;justify-content:flex-end;gap:24px;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:8px;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-global-header__top-navigation-link:hover,.tna-global-header__top-navigation-link:focus-visible{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header .tna-logo svg{width:100%;height:100%}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:16px}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:16px}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:12px}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:8px;margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:16px}.tna-global-header__logo{gap:12px}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:hsla(0,0%,100%,.1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:16px;margin-left:24px}.tna-global-header__top-navigation{padding-top:8px;padding-bottom:8px;justify-content:flex-start;gap:24px}.tna-global-header__top-navigation-link{padding:4px 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 64px);left:-32px}.tna-global-header__navigation-item-link{padding:8px 32px}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 32px);left:-16px}.tna-global-header__navigation-item-link{padding:8px 16px}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}/*# sourceMappingURL=global-header.css.map */
|