@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/gallery/gallery.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={181:(e,t,r)=>{r.d(t,{A:()=>o});const o=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(e){return(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)}))}}},t={};function r(o){var i=t[o];if(void 0!==i)return i.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,r),l.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};r.r(o),r.d(o,{Gallery:()=>s});var i=r(181);function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function n(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,a(o.key),o)}}function a(e){var t=function(e,t){if("object"!=l(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!=l(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==l(t)?t:t+""}var s=function(){return e=function e(t){var r=this;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$items=t&&t.querySelector(".tna-gallery__items"),this.opened=!1,this.$module&&this.$items&&(this.items=this.$module.querySelectorAll(".tna-gallery__item").length,this.items>1)){var o="tna-gallery-".concat((0,i.A)());this.$module.classList.add("tna-gallery--collapsed"),this.$items.setAttribute("tabindex","-1"),this.$galleryToggle=document.createElement("button"),this.$galleryToggle.classList.add("tna-gallery__toggle","tna-button","tna-button--accent"),this.$galleryToggle.setAttribute("aria-controls",o),this.$galleryToggle.setAttribute("aria-expanded",!1),this.$galleryToggle.innerText="View ".concat(this.items," images"),this.$galleryToggle.addEventListener("click",(function(){r.handleToggleGallery()})),this.$galleryToggleWrapper=document.createElement("div"),this.$galleryToggleWrapper.classList.add("tna-column","tna-column--full","tna-gallery__toggle-wrapper"),this.$galleryToggleWrapper.appendChild(this.$galleryToggle),this.$items.parentElement.appendChild(this.$galleryToggleWrapper),this.$items.setAttribute("id",o)}},(t=[{key:"handleToggleGallery",value:function(){this.opened=!this.opened,this.opened?(this.$module.classList.remove("tna-gallery--collapsed"),this.$galleryToggle.setAttribute("aria-expanded",!0),this.$galleryToggle.innerText="Close images",this.$items.setAttribute("tabindex","0"),this.$items.focus(),this.$items.setAttribute("tabindex","-1")):(this.$module.classList.add("tna-gallery--collapsed"),this.$galleryToggle.setAttribute("aria-expanded",!1),this.$galleryToggle.innerText="View ".concat(this.items," images"))}}])&&n(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return o})()));
+!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,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},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 n(t){return n="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},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,r(i.key),i)}}function r(t){var e=function(t,e){if("object"!=n(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Gallery:()=>o});var o=function(){return t=function t(e){var n=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--js"),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 n.syncFullScreen()})),this.setup(),this.allowIndex=!1,this.allowIndex?this.showIndex():(this.currentId=this.$items[0].id,this.showItem(this.currentId)))},e=[{key:"setup",value:function(){var t,e,n,i,r,o,s,l=this;this.$items.forEach((function(t){t.setAttribute("hidden","until-found"),t.setAttribute("role","tabpanel")})),this.$navigation.removeAttribute("hidden"),this.$navigationItems.forEach((function(t){t.addEventListener("click",(function(){return l.showItem(t.getAttribute("aria-controls"),!0)}))})),this.$module.setAttribute("tabindex","0"),this.$module.addEventListener("keydown",(function(t){switch(t.key){case"ArrowLeft":case"ArrowUp":l.showPreviousItem();break;case"ArrowRight":case"ArrowDown":l.showNextItem();break;case"Home":l.showFirstItem();break;case"End":l.showLastItem()}})),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===(n=this.$navigationButtonPrev)||void 0===n||n.addEventListener("click",(function(){return l.showPreviousItem()})),null===(i=this.$navigationButtonNext)||void 0===i||i.addEventListener("click",(function(){return l.showNextItem()}))}},{key:"showIndex",value:function(){var t;this.showItem(""),this.$itemsContainer.setAttribute("tabindex","-1"),null===(t=this.$showIndex)||void 0===t||t.setAttribute("hidden",!0)}},{key:"showItem",value:function(t){var e,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.$items.forEach((function(e){t&&e.id===t?(e.removeAttribute("hidden"),e.removeAttribute("tabindex")):(e.setAttribute("hidden","until-found"),e.setAttribute("tabindex","-1"))})),this.$navigationItems.forEach((function(e,n){t?e.getAttribute("aria-controls")===t?(e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0")):(e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")):(e.setAttribute("aria-selected","false"),e.setAttribute("tabindex",0===n?"0":"-1"))})),this.allowIndex&&(null===(e=this.$showIndex)||void 0===e||e.removeAttribute("hidden")),this.currentId=t,this.$itemsContainer.setAttribute("tabindex","0"),n&&this.$itemsContainer.focus()}},{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,!0)}},{key:"showNextItem",value:function(){var t=this.getCurrentItemIndex()+1;t>=this.$items.length&&(t=0),this.showItem(this.$items[t].id,!0)}},{key:"showFirstItem",value:function(){this.showItem(this.$items[0].id,!0)}},{key:"showLastItem",value:function(){this.showItem(this.$items[this.$items.length-1].id,!0)}},{key:"toggleFullScreen",value:function(){document.fullscreenElement?document.exitFullscreen&&this.exitFullScreen():this.enterFullScreen()}},{key:"enterFullScreen",value:function(){this.$module.requestFullscreen(),this.syncFullScreen()}},{key:"exitFullScreen",value:function(){document.exitFullscreen(),this.syncFullScreen()}},{key:"syncFullScreen",value:function(){document.fullscreenElement?(this.$enterFullscreen.setAttribute("hidden",!0),this.$exitFullscreen.removeAttribute("hidden"),this.$module.classList.add("tna-gallery--fullscreen")):(this.$exitFullscreen.setAttribute("hidden",!0),this.$enterFullscreen.removeAttribute("hidden"),this.$module.classList.remove("tna-gallery--fullscreen"))}}],e&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
 //# sourceMappingURL=gallery.js.map

package/nationalarchives/components/gallery/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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 ","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\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};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Gallery {\n  constructor($module) {\n    this.$module = $module;\n    this.$items = $module && $module.querySelector(\".tna-gallery__items\");\n    this.opened = false;\n\n    if (!this.$module || !this.$items) {\n      return;\n    }\n\n    const supportTouchHorizontal = false;\n\n    this.items = this.$module.querySelectorAll(\".tna-gallery__item\").length;\n\n    if (this.items > 1) {\n      const uniqueId = `tna-gallery-${uuidv4()}`;\n\n      this.$module.classList.add(\"tna-gallery--collapsed\");\n      this.$items.setAttribute(\"tabindex\", \"-1\");\n\n      this.$galleryToggle = document.createElement(\"button\");\n      this.$galleryToggle.classList.add(\n        \"tna-gallery__toggle\",\n        \"tna-button\",\n        \"tna-button--accent\",\n      );\n      this.$galleryToggle.setAttribute(\"aria-controls\", uniqueId);\n      this.$galleryToggle.setAttribute(\"aria-expanded\", false);\n      this.$galleryToggle.innerText = `View ${this.items} images`;\n\n      const onFirstTouch = () => {\n        this.$module.removeEventListener(\"touchstart\", onFirstTouch);\n        this.$module.classList.add(\"tna-gallery--touchable\");\n      };\n\n      if (supportTouchHorizontal) {\n        this.$module.addEventListener(\"touchstart\", onFirstTouch);\n      }\n\n      this.$galleryToggle.addEventListener(\"click\", () => {\n        if (supportTouchHorizontal) {\n          this.$module.removeEventListener(\"touchstart\", onFirstTouch);\n        }\n        this.handleToggleGallery();\n      });\n\n      this.$galleryToggleWrapper = document.createElement(\"div\");\n      this.$galleryToggleWrapper.classList.add(\n        \"tna-column\",\n        \"tna-column--full\",\n        \"tna-gallery__toggle-wrapper\",\n      );\n\n      this.$galleryToggleWrapper.appendChild(this.$galleryToggle);\n      this.$items.parentElement.appendChild(this.$galleryToggleWrapper);\n\n      this.$items.setAttribute(\"id\", uniqueId);\n    }\n  }\n\n  handleToggleGallery() {\n    this.opened = !this.opened;\n    if (this.opened) {\n      this.$module.classList.remove(\"tna-gallery--collapsed\");\n      this.$galleryToggle.setAttribute(\"aria-expanded\", true);\n      this.$galleryToggle.innerText = \"Close images\";\n      this.$items.setAttribute(\"tabindex\", \"0\");\n      this.$items.focus();\n      this.$items.setAttribute(\"tabindex\", \"-1\");\n    } else {\n      this.$module.classList.add(\"tna-gallery--collapsed\");\n      this.$galleryToggle.setAttribute(\"aria-expanded\", false);\n      this.$galleryToggle.innerText = `View ${this.items} images`;\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Gallery","$module","_this","_classCallCheck","this","$items","querySelector","opened","items","querySelectorAll","length","uniqueId","concat","uuidv4","classList","add","setAttribute","$galleryToggle","document","createElement","innerText","addEventListener","handleToggleGallery","$galleryToggleWrapper","appendChild","parentElement","remove","focus"],"sourceRoot":""}
+{"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--js\");\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.allowIndex = false;\n    if (this.allowIndex) {\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\", \"until-found\");\n      $item.setAttribute(\"role\", \"tabpanel\");\n    });\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigationItems.forEach(($item) => {\n      $item.addEventListener(\"click\", () =>\n        this.showItem($item.getAttribute(\"aria-controls\"), true),\n      );\n    });\n    this.$module.setAttribute(\"tabindex\", \"0\");\n    this.$module.addEventListener(\"keydown\", (e) => {\n      switch (e.key) {\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          this.showPreviousItem();\n          break;\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          this.showNextItem();\n          break;\n        case \"Home\":\n          this.showFirstItem();\n          break;\n        case \"End\":\n          this.showLastItem();\n          break;\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\n  showIndex() {\n    this.showItem(\"\");\n    this.$itemsContainer.setAttribute(\"tabindex\", \"-1\");\n    this.$showIndex?.setAttribute(\"hidden\", true);\n  }\n\n  showItem(id, focusItem = false) {\n    this.$items.forEach(($item) => {\n      if (id && $item.id === id) {\n        $item.removeAttribute(\"hidden\");\n        $item.removeAttribute(\"tabindex\");\n      } else {\n        $item.setAttribute(\"hidden\", \"until-found\");\n        $item.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n    this.$navigationItems.forEach(($item, index) => {\n      if (id) {\n        if ($item.getAttribute(\"aria-controls\") === id) {\n          $item.setAttribute(\"aria-selected\", \"true\");\n          $item.setAttribute(\"tabindex\", \"0\");\n          // if (focusItem) {\n          //   $item.focus();\n          // }\n        } else {\n          $item.setAttribute(\"aria-selected\", \"false\");\n          $item.setAttribute(\"tabindex\", \"-1\");\n        }\n      } else {\n        $item.setAttribute(\"aria-selected\", \"false\");\n        $item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\");\n      }\n    });\n    if (this.allowIndex) {\n      this.$showIndex?.removeAttribute(\"hidden\");\n    }\n    this.currentId = id;\n    this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n    if (focusItem) {\n      this.$itemsContainer.focus();\n    }\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, true);\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, true);\n  }\n\n  showFirstItem() {\n    this.showItem(this.$items[0].id, true);\n  }\n\n  showLastItem() {\n    this.showItem(this.$items[this.$items.length - 1].id, true);\n  }\n\n  toggleFullScreen() {\n    if (!document.fullscreenElement) {\n      this.enterFullScreen();\n    } else if (document.exitFullscreen) {\n      this.exitFullScreen();\n    }\n  }\n\n  enterFullScreen() {\n    this.$module.requestFullscreen();\n    this.syncFullScreen();\n  }\n\n  exitFullScreen() {\n    document.exitFullscreen();\n    this.syncFullScreen();\n  }\n\n  syncFullScreen() {\n    if (document.fullscreenElement) {\n      this.$enterFullscreen.setAttribute(\"hidden\", true);\n      this.$exitFullscreen.removeAttribute(\"hidden\");\n      this.$module.classList.add(\"tna-gallery--fullscreen\");\n    } else {\n      this.$exitFullscreen.setAttribute(\"hidden\", true);\n      this.$enterFullscreen.removeAttribute(\"hidden\");\n      this.$module.classList.remove(\"tna-gallery--fullscreen\");\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","allowIndex","showIndex","currentId","id","showItem","_this$$showIndex","_this$$navigationButt","_this$$navigationButt2","_this$$navigationButt3","_this$$enterFullscree","_this$$exitFullscreen","_this$$enterFullscree2","_this2","forEach","$item","setAttribute","removeAttribute","getAttribute","e","showPreviousItem","showNextItem","showFirstItem","showLastItem","document","fullscreenEnabled","enterFullScreen","exitFullScreen","_this$$showIndex2","_this$$showIndex3","focusItem","arguments","length","undefined","index","focus","_this3","Array","from","findIndex","nextIndexToShow","getCurrentItemIndex","fullscreenElement","exitFullscreen","requestFullscreen","remove"],"sourceRoot":""}

package/nationalarchives/components/gallery/gallery.mjs

@@ -1,78 +1,217 @@
-import uuidv4 from "../../lib/uuid.mjs";
-
 export class Gallery {
   constructor($module) {
     this.$module = $module;
-    this.$items = $module && $module.querySelector(".tna-gallery__items");
-    this.opened = false;
+    this.$itemsContainer =
+      $module && $module.querySelector(".tna-gallery__items");
+    this.$items =
+      this.$itemsContainer &&
+      this.$itemsContainer.querySelectorAll(".tna-gallery__item");
+    this.$navigation =
+      $module && $module.querySelector(".tna-gallery__navigation");
+    this.$navigationItems =
+      this.$navigation &&
+      $module.querySelectorAll(".tna-gallery__navigation-item");
+    this.$options = $module && $module.querySelector(".tna-gallery__options");
+    this.$navigationButtons =
+      $module && $module.querySelector(".tna-gallery__navigation-buttons");
 
-    if (!this.$module || !this.$items) {
+    if (
+      !this.$module ||
+      !this.$itemsContainer ||
+      !this.$items ||
+      !this.$navigation ||
+      !this.$navigationItems ||
+      !this.$options ||
+      !this.$navigationButtons
+    ) {
       return;
     }
 
-    const supportTouchHorizontal = false;
+    this.$module.classList.add("tna-gallery--js");
+
+    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.items = this.$module.querySelectorAll(".tna-gallery__item").length;
+    this.$navigationButtonPrev = this.$navigationButtons.querySelector(
+      ".tna-gallery__navigation-prev",
+    );
+    this.$navigationButtonNext = this.$navigationButtons.querySelector(
+      ".tna-gallery__navigation-next",
+    );
 
-    if (this.items > 1) {
-      const uniqueId = `tna-gallery-${uuidv4()}`;
+    this.$module.addEventListener("fullscreenchange", () =>
+      this.syncFullScreen(),
+    );
 
-      this.$module.classList.add("tna-gallery--collapsed");
-      this.$items.setAttribute("tabindex", "-1");
+    this.setup();
+    this.allowIndex = false;
+    if (this.allowIndex) {
+      this.showIndex();
+    } else {
+      this.currentId = this.$items[0].id;
+      this.showItem(this.currentId);
+    }
+  }
 
-      this.$galleryToggle = document.createElement("button");
-      this.$galleryToggle.classList.add(
-        "tna-gallery__toggle",
-        "tna-button",
-        "tna-button--accent",
+  setup() {
+    this.$items.forEach(($item) => {
+      $item.setAttribute("hidden", "until-found");
+      $item.setAttribute("role", "tabpanel");
+    });
+    this.$navigation.removeAttribute("hidden");
+    this.$navigationItems.forEach(($item) => {
+      $item.addEventListener("click", () =>
+        this.showItem($item.getAttribute("aria-controls"), true),
+      );
+    });
+    this.$module.setAttribute("tabindex", "0");
+    this.$module.addEventListener("keydown", (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          this.showPreviousItem();
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          this.showNextItem();
+          break;
+        case "Home":
+          this.showFirstItem();
+          break;
+        case "End":
+          this.showLastItem();
+          break;
+      }
+    });
+    this.$options.removeAttribute("hidden");
+    if (
+      document.fullscreenEnabled &&
+      this.$enterFullscreen &&
+      this.$exitFullscreen
+    ) {
+      this.$enterFullscreen?.addEventListener("click", () =>
+        this.enterFullScreen(),
+      );
+      this.$exitFullscreen?.addEventListener("click", () =>
+        this.exitFullScreen(),
       );
-      this.$galleryToggle.setAttribute("aria-controls", uniqueId);
-      this.$galleryToggle.setAttribute("aria-expanded", false);
-      this.$galleryToggle.innerText = `View ${this.items} images`;
+      this.$enterFullscreen?.removeAttribute("hidden");
+    }
+    this.$showIndex?.addEventListener("click", () => this.showIndex());
+    this.$navigationButtons?.removeAttribute("hidden");
+    this.$navigationButtonPrev?.addEventListener("click", () =>
+      this.showPreviousItem(),
+    );
+    this.$navigationButtonNext?.addEventListener("click", () =>
+      this.showNextItem(),
+    );
+  }
 
-      const onFirstTouch = () => {
-        this.$module.removeEventListener("touchstart", onFirstTouch);
-        this.$module.classList.add("tna-gallery--touchable");
-      };
+  showIndex() {
+    this.showItem("");
+    this.$itemsContainer.setAttribute("tabindex", "-1");
+    this.$showIndex?.setAttribute("hidden", true);
+  }
 
-      if (supportTouchHorizontal) {
-        this.$module.addEventListener("touchstart", onFirstTouch);
+  showItem(id, focusItem = false) {
+    this.$items.forEach(($item) => {
+      if (id && $item.id === id) {
+        $item.removeAttribute("hidden");
+        $item.removeAttribute("tabindex");
+      } else {
+        $item.setAttribute("hidden", "until-found");
+        $item.setAttribute("tabindex", "-1");
       }
-
-      this.$galleryToggle.addEventListener("click", () => {
-        if (supportTouchHorizontal) {
-          this.$module.removeEventListener("touchstart", onFirstTouch);
+    });
+    this.$navigationItems.forEach(($item, index) => {
+      if (id) {
+        if ($item.getAttribute("aria-controls") === id) {
+          $item.setAttribute("aria-selected", "true");
+          $item.setAttribute("tabindex", "0");
+          // if (focusItem) {
+          //   $item.focus();
+          // }
+        } else {
+          $item.setAttribute("aria-selected", "false");
+          $item.setAttribute("tabindex", "-1");
         }
-        this.handleToggleGallery();
-      });
-
-      this.$galleryToggleWrapper = document.createElement("div");
-      this.$galleryToggleWrapper.classList.add(
-        "tna-column",
-        "tna-column--full",
-        "tna-gallery__toggle-wrapper",
-      );
+      } else {
+        $item.setAttribute("aria-selected", "false");
+        $item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+      }
+    });
+    if (this.allowIndex) {
+      this.$showIndex?.removeAttribute("hidden");
+    }
+    this.currentId = id;
+    this.$itemsContainer.setAttribute("tabindex", "0");
+    if (focusItem) {
+      this.$itemsContainer.focus();
+    }
+  }
+
+  getCurrentItemIndex() {
+    return Array.from(this.$items).findIndex(
+      ($item) => $item.id === this.currentId,
+    );
+  }
+
+  showPreviousItem() {
+    let nextIndexToShow = this.getCurrentItemIndex() - 1;
+    if (nextIndexToShow < 0) {
+      nextIndexToShow = this.$items.length - 1;
+    }
+    this.showItem(this.$items[nextIndexToShow].id, true);
+  }
+
+  showNextItem() {
+    let nextIndexToShow = this.getCurrentItemIndex() + 1;
+    if (nextIndexToShow >= this.$items.length) {
+      nextIndexToShow = 0;
+    }
+    this.showItem(this.$items[nextIndexToShow].id, true);
+  }
+
+  showFirstItem() {
+    this.showItem(this.$items[0].id, true);
+  }
 
-      this.$galleryToggleWrapper.appendChild(this.$galleryToggle);
-      this.$items.parentElement.appendChild(this.$galleryToggleWrapper);
+  showLastItem() {
+    this.showItem(this.$items[this.$items.length - 1].id, true);
+  }
 
-      this.$items.setAttribute("id", uniqueId);
+  toggleFullScreen() {
+    if (!document.fullscreenElement) {
+      this.enterFullScreen();
+    } else if (document.exitFullscreen) {
+      this.exitFullScreen();
     }
   }
 
-  handleToggleGallery() {
-    this.opened = !this.opened;
-    if (this.opened) {
-      this.$module.classList.remove("tna-gallery--collapsed");
-      this.$galleryToggle.setAttribute("aria-expanded", true);
-      this.$galleryToggle.innerText = "Close images";
-      this.$items.setAttribute("tabindex", "0");
-      this.$items.focus();
-      this.$items.setAttribute("tabindex", "-1");
+  enterFullScreen() {
+    this.$module.requestFullscreen();
+    this.syncFullScreen();
+  }
+
+  exitFullScreen() {
+    document.exitFullscreen();
+    this.syncFullScreen();
+  }
+
+  syncFullScreen() {
+    if (document.fullscreenElement) {
+      this.$enterFullscreen.setAttribute("hidden", true);
+      this.$exitFullscreen.removeAttribute("hidden");
+      this.$module.classList.add("tna-gallery--fullscreen");
     } else {
-      this.$module.classList.add("tna-gallery--collapsed");
-      this.$galleryToggle.setAttribute("aria-expanded", false);
-      this.$galleryToggle.innerText = `View ${this.items} images`;
+      this.$exitFullscreen.setAttribute("hidden", true);
+      this.$enterFullscreen.removeAttribute("hidden");
+      this.$module.classList.remove("tna-gallery--fullscreen");
     }
   }
 }