@nationalarchives/frontend 0.1.63 → 0.1.65

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");
     }
   }
 }

package/nationalarchives/components/gallery/gallery.scss

@@ -1,116 +1,378 @@
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-gallery {
-  @include colour.contrast;
+  min-height: 100dvh;
+  max-height: 200dvh;
 
-  padding-bottom: spacing.space(2);
+  display: grid;
+  grid-template: min-content min-content 1fr / 2fr 1fr;
+  gap: 0 spacing.space(1);
+
+  @include colour.tint;
+
+  border-radius: 0.1px;
+
+  &:active {
+    @include a11y.no-active-outline;
+  }
 
   &__header {
-    padding-top: spacing.space(2);
+    padding: spacing.space(1);
+
+    grid-column: 1 / 3;
+    grid-row: 1;
+
+    display: flex;
+    gap: spacing.space(2);
+  }
+
+  &__header-inner {
+    flex: 1;
+  }
+
+  &__options {
+    margin-top: 0;
+
+    align-items: flex-start;
+
+    justify-content: flex-end;
+
+    flex: 1;
+
+    .tna-button {
+      white-space: nowrap;
+    }
+  }
+
+  &__items,
+  &__navigation-buttons {
+    grid-column: 1 / 3;
+    grid-row: 2;
   }
 
   &__items {
-    width: 100%;
+    position: relative;
+    z-index: 1;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: spacing.space(3);
+    border-radius: 0.1px;
 
-    &:focus {
-      outline: none !important;
+    .tna-template--clicked &:focus {
+      outline: none;
     }
   }
 
   &__item {
-    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+  }
 
-    &-index {
-      padding-bottom: spacing.space(1);
+  &__item-header {
+    padding: spacing.space(1);
 
-      text-align: center;
-    }
+    line-height: 1;
+    text-align: center;
+
+    @include typography.main-font-weight-bold;
+    @include typography.font-size(16);
+  }
+
+  &__item-figure {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: spacing.space(1);
+  }
+
+  &__item-figure-inner {
+    width: 100%;
+    max-height: 50vh;
+
+    position: relative;
+
+    @include colour.contrast;
+  }
+
+  &__item-image {
+    margin: 0 auto;
+  }
+
+  &__item-description {
+    margin: 0 spacing.space(1) spacing.space(1);
+    padding: spacing.space(0.5) spacing.space(1);
+
+    align-self: flex-start;
+
+    @include colour.thick-keyline-dark(left);
+  }
+
+  &__navigation-buttons {
+    width: 100%;
+    max-height: 50vh;
+
+    position: relative;
+    top: 3rem;
+    z-index: 2;
+
+    aspect-ratio: 3 / 2;
+
+    pointer-events: none;
 
-    &-figure {
+    .tna-template--touched & {
+      display: none;
     }
+  }
+
+  &__navigation-button {
+    width: 25%;
+    padding: 0;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    border: none;
 
-    &-image {
-      height: auto;
+    opacity: 0;
+
+    cursor: pointer;
+    pointer-events: auto;
+
+    @include colour.colour-font("base-dark");
+
+    @include colour.tint;
+
+    svg {
+      height: 5vw;
       margin: 0 auto;
+
+      display: block;
+
+      fill: currentColor;
+    }
+
+    &:hover,
+    &:focus {
+      opacity: 1;
     }
+  }
+
+  &__navigation-prev {
+    padding-right: 10%;
+
+    left: 0;
+
+    background: linear-gradient(
+      90deg,
+      var(--background) 15%,
+      rgb(0 0 0 / 0%) 100%
+    );
+  }
+
+  &__navigation-next {
+    padding-left: 10%;
+
+    right: 0;
+
+    background: linear-gradient(
+      270deg,
+      var(--background) 15%,
+      rgb(0 0 0 / 0%) 100%
+    );
+  }
+
+  &__navigation {
+    padding: spacing.space(1);
+
+    grid-column: 1 / 3;
+    grid-row: 3;
+
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-auto-rows: min-content;
+    gap: spacing.space(1);
+
+    overflow: auto;
+  }
+
+  &__navigation-item {
+    aspect-ratio: 1;
+
+    min-width: 0;
+    min-height: 0;
+
+    position: relative;
+
+    border: none;
+
+    @include colour.contrast;
+
+    cursor: pointer;
+
+    &:hover {
+      &::after {
+        content: "";
 
-    &-description {
-      margin-top: spacing.space(1);
-      padding: spacing.space(0.5) 0 spacing.space(0.5) spacing.space(1);
+        position: absolute;
+        inset: 0;
+        z-index: 2;
 
-      @include colour.colour-border("keyline-dark", 4px, solid, left);
+        @include colour.thick-keyline-accent;
+      }
     }
 
-    &-tabs {
-      @include media.on-smaller-than-large {
-        padding-top: spacing.space(2);
+    &[aria-selected="true"] {
+      @include colour.accent;
+
+      &::after {
+        content: "";
+
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+
+        @include colour.thick-keyline-brand("", "black");
       }
     }
   }
 
-  &__item + &__item {
-    @include colour.colour-border("keyline", 1px, solid, top);
+  &__navigation-item-image {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+    object-fit: cover;
   }
 
-  &__toggle-wrapper {
-    text-align: center;
+  &__navigation-item-label {
+    padding: spacing.space(0.25) spacing.space(0.75);
+
+    display: inline-block;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+
+    @include colour.colour-font("font-dark");
+    @include typography.font-size(36);
+    @include typography.main-font-weight-bold;
+    text-transform: capitalize;
+
+    @include colour.colour-background("background");
   }
 
-  &__toggle {
-    margin-top: spacing.space(2);
+  &--js &__item-figure-inner {
+    aspect-ratio: 3 / 2;
   }
 
-  &--touchable {
-    .tna-gallery__items {
-      flex-flow: row nowrap;
+  &--js &__item-image {
+    width: 100%;
+    height: 100%;
 
-      gap: spacing.space(6);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    object-fit: contain;
+  }
 
-      overflow-x: scroll;
-      scroll-snap-type: x mandatory;
+  @include media.on-medium {
+    &__navigation {
+      grid-template-columns: repeat(4, 1fr);
     }
 
-    .tna-gallery__item {
-      width: 100%;
+    &__navigation-item-label {
+      @include typography.font-size(30);
+    }
+  }
 
-      scroll-snap-align: center;
-      flex: none;
+  @include media.on-mobile {
+    &__navigation {
+      grid-template-columns: repeat(3, 1fr);
     }
+  }
 
-    &.tna-gallery--collapsed {
-      .tna-gallery__items {
-        overflow: auto;
-      }
+  @include media.on-tiny {
+    &__options {
+      align-items: flex-end;
+      justify-content: flex-start;
+    }
+
+    &__navigation-item-label {
+      @include typography.font-size(24);
     }
   }
 
-  &--collapsed &__item + &__item,
-  &--collapsed &__item:first-child &__item-description,
-  &--collapsed &__item:first-child &__item-tabs {
+  &--fullscreen {
+    max-height: 100dvh;
+  }
+
+  &--fullscreen &__header-inner {
     display: none;
   }
 
-  &--collapsed &__item-figure {
-    width: 100%;
+  &--fullscreen &__item-description {
+    max-height: 4.5rem;
+
+    overflow: auto;
   }
 
-  @include colour.on-high-contrast {
-    &__items {
+  // @media (display-mode: fullscreen) and (aspect-ratio >= 1/1), (display-mode: fullscreen) and (orientation: landscape) {
+  @media (aspect-ratio >= 1/1) {
+    &--fullscreen &__header {
+      grid-column: 2 / 3;
+      // padding-bottom: spacing.space(0.5);
     }
 
-    &__item {
-      &-index {
+    &--fullscreen &__options {
+      .tna-button[value="show-index"] {
+        display: none;
       }
+    }
 
-      &-description {
-      }
+    &--fullscreen &__items,
+    &--fullscreen &__navigation-buttons {
+      grid-column: 1 / 2;
+      grid-row: 1 / 4;
+    }
+
+    &--fullscreen &__item {
+      height: 100%;
+    }
+
+    &--fullscreen &__item-header {
+      // padding-top: spacing.space(0.5);
+      // padding-bottom: spacing.space(0.5);
+    }
+
+    &--fullscreen &__item-figure {
+      flex: 1;
+    }
+
+    &--fullscreen &__item-figure-inner,
+    &--fullscreen &__navigation-buttons {
+      max-height: none;
+      flex: 1;
+      aspect-ratio: auto;
+    }
+
+    &--fullscreen &__navigation {
+      // padding-top: spacing.space(0.5);
+      padding-top: 0;
+      padding-left: 0;
+
+      grid-column: 2 / 3;
+      grid-row: 2 / 4;
+
+      // grid-template-columns: repeat(3, minmax(8rem, 1fr));
+      grid-template-columns: repeat(3, 1fr);
+      gap: spacing.space(0.5);
     }
   }
 }