chore: thumbnail bar refactor for new IIIF layout

packages/portal/src/components/item/ItemMediaPresentation.vue

@@ -1,65 +1,76 @@
 <template>
   <div>
     <div
-      class="iiif-viewer-wrapper d-flex flex-column"
+      class="iiif-viewer-wrapper overflow-hidden"
     >
       <div
-        class="iiif-viewer-inner-wrapper h-100 d-flex flex-column overflow-hidden"
+        class="iiif-viewer-inner-wrapper w-100 overflow-auto"
       >
-        <div
-          class="h-100 d-flex flex-row-reverse overflow-auto"
+        <ItemMediaSidebar
+          v-if="sidebarHasContent"
+          v-show="showSidebar"
+          id="item-media-sidebar"
+          ref="sidebar"
+          tabindex="0"
+          :annotation-page="annotationPage"
+          :uri="uri"
+          @keydown.escape.native="showSidebar = false"
+        />
+        <MediaImageViewer
+          v-if="resource?.ebucoreHasMimeType?.startsWith('image/')"
+          :url="resource.about"
+          :item-id="itemId"
+          :width="resource.ebucoreWidth"
+          :height="resource.ebucoreHeight"
+          :format="resource.ebucoreHasMimeType"
+          :service="resource.svcsHasService"
+        />
+        <MediaPDFViewer
+          v-else-if="resource?.ebucoreHasMimeType === 'application/pdf'"
+          :url="resource.about"
+          :item-id="itemId"
+        />
+        <MediaAudioVisualPlayer
+          v-else-if="resource?.isPlayableMedia"
+          :url="resource.about"
+          :format="resource.ebucoreHasMimeType"
+          :item-id="itemId"
+        />
+        <code
+          v-else
+          class="h-50 w-100 p-5"
         >
-          <MediaImageViewer
-            v-if="resource?.ebucoreHasMimeType?.startsWith('image/')"
-            :url="resource.about"
-            :item-id="itemId"
-            :width="resource.ebucoreWidth"
-            :height="resource.ebucoreHeight"
-            :format="resource.ebucoreHasMimeType"
-            :service="resource.svcsHasService"
-          />
-          <MediaPDFViewer
-            v-else-if="resource?.ebucoreHasMimeType === 'application/pdf'"
-            :url="resource.about"
-            :item-id="itemId"
-          />
-          <MediaAudioVisualPlayer
-            v-else-if="resource?.isPlayableMedia"
-            :url="resource.about"
-            :format="resource.ebucoreHasMimeType"
-            :item-id="itemId"
-          />
-          <code
-            v-else
-            class="h-50 w-100 p-5"
-          >
-            <pre
-              :style="{ color: 'white' }"
-            ><!--
+          <pre
+            :style="{ color: 'white' }"
+          ><!--
             -->{{ JSON.stringify(resource, null, 2) }}
             </pre>
-          </code>
-          <ItemMediaSidebar
-            v-if="showSidebar"
-            :annotation-page="annotationPage"
-            :uri="uri"
-          />
-        </div>
+        </code>
+      </div>
+      <div
+        class="iiif-viewer-toolbar d-flex flex-wrap flex-lg-nowrap align-items-center"
+      >
+        <!-- TODO: Refactor into separate ItemMediaToolbar component -->
+        <b-button
+          v-if="sidebarHasContent"
+          v-b-tooltip.top="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
+          :aria-label="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
+          variant="light-flat"
+          class="sidebar-toggle button-icon-only"
+          :class="{ 'active': showSidebar }"
+          data-qa="iiif viewer toolbar sidebar toggle"
+          aria-controls="item-media-sidebar"
+          :aria-expanded="showSidebar ? 'true' : 'false'"
+          @click="toggleSidebar"
+          @mouseleave="hideTooltips"
+        >
+          <span class="icon icon-kebab" />
+        </b-button>
         <div
-          class="iiif-viewer-toolbar d-flex align-items-center"
+          v-if="resourceCount >= 2"
+          class="iiif-viewer-toolbar-pagination d-flex w-100 w-lg-auto"
+          :class="{ closed: !showPages }"
         >
-          <b-button
-            v-if="sidebarHasContent"
-            v-b-tooltip.top="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
-            :aria-label="showSidebar ? $t('media.sidebar.hide') : $t('media.sidebar.show')"
-            variant="light-flat"
-            class="sidebar-toggle button-icon-only"
-            data-qa="iiif viewer toolbar sidebar toggle"
-            @click="showSidebar = !showSidebar"
-            @mouseleave="hideTooltips"
-          >
-            <span class="icon icon-kebab" />
-          </b-button>
           <PaginationNavInput
             :per-page="1"
             :total-results="resourceCount"
@@ -69,20 +80,41 @@
             :progress="true"
             class="pagination ml-auto"
           />
+          <b-button
+            v-b-tooltip.top="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
+            :aria-label="showPages ? $t('media.pages.hide') : $t('media.pages.show')"
+            variant="light-flat"
+            class="pages-toggle button-icon-only ml-3 mr-auto mr-lg-0"
+            :class="{ 'active': showPages }"
+            data-qa="iiif viewer toolbar pages toggle"
+            aria-controls="item-media-thumbnails"
+            :aria-expanded="showPages ? 'true' : 'false'"
+            @click="togglePages"
+            @mouseleave="hideTooltips"
+          >
+            <span class="icon icon-pages" />
+          </b-button>
         </div>
       </div>
+      <ItemMediaThumbnails
+        v-if="resourceCount >= 2"
+        v-show="showPages"
+        id="item-media-thumbnails"
+        ref="itemPages"
+        tabindex="0"
+        :resources="thumbnailResources"
+        :selected-index="page -1"
+        :edm-type="edmType"
+        data-qa="item media thumbnails"
+        @keydown.escape.native="showPages = false"
+      />
     </div>
-    <ItemMediaThumbnails
-      v-if="thumbnails.length > 0"
-      :thumbnails="thumbnails"
-      @clickThumbnail="handleClickThumbnail"
-    />
   </div>
 </template>
 
 <script>
-  import EuropeanaMediaPresentation from '@/utils/europeana/iiif.js';
   import hideTooltips from '@/mixins/hideTooltips';
+  import EuropeanaMediaPresentation from '@/utils/europeana/iiif.js';
 
   export default {
     name: 'ItemMediaPresentation',
@@ -135,7 +167,8 @@
         annotationPage: null,
         presentation: null,
         page: 1,
-        showSidebar: null
+        showSidebar: null,
+        showPages: true
       };
     },
 
@@ -162,12 +195,8 @@
         return this.presentation?.resources?.length || 0;
       },
 
-      thumbnail() {
-        return this.thumbnails[this.page - 1];
-      },
-
-      thumbnails() {
-        return this.presentation?.resources.map((resource) => resource.thumbnails?.(this.$nuxt.context)?.small) || [];
+      thumbnailResources() {
+        return this.presentation?.resources || [];
       },
 
       sidebarHasContent() {
@@ -180,11 +209,6 @@
     },
 
     methods: {
-      handleClickThumbnail(index) {
-        const page = index + 1;
-        this.$router.push({ ...this.$route, query: { ...this.$route.query, page } });
-      },
-
       onClickAnno(anno) {
         console.log('onClickAnno', anno);
         // const layer = this.map.getLayers()[0];
@@ -195,6 +219,26 @@
         this.$nextTick(() => {
           this.$emit('select', this.resource?.about);
         });
+      },
+
+      toggleSidebar() {
+        this.showSidebar = !this.showSidebar;
+
+        if (this.showSidebar) {
+          this.$nextTick(() => {
+            this.$refs.sidebar?.$el.focus();
+          });
+        }
+      },
+
+      togglePages() {
+        this.showPages = !this.showPages;
+
+        if (this.showPages) {
+          this.$nextTick(() => {
+            this.$refs.itemPages?.$el.focus();
+          });
+        }
       }
     }
   };
@@ -204,35 +248,71 @@
   @import '@europeana/style/scss/variables';
   @import '@europeana/style/scss/iiif';
 
+  .iiif-viewer-wrapper {
+    position: relative;
+    @include swiper-height(0px);
+
+    @media (max-width: ($bp-large - 1px)) {
+      max-height: none;
+      height: auto
+    }
+
+    // prevent feedback button overlapping thumbnails toggle laptop screens
+    @media (min-width: $bp-large) and (max-height: 845px) {
+      height: calc($swiper-height - 2rem);
+    }
+  }
+
   .iiif-viewer-inner-wrapper {
     background-color: $black;
-    position: relative;
+    @include swiper-height(0px);
 
-    &.error {
-      overflow: auto;
+    @media (max-width: ($bp-large - 1px)) {
+      position: relative;
     }
 
-    .iiif-viewer-sidebar {
-      background-color: $white;
+    &.error {
       overflow: auto;
-
-      .tab-pane {
-        overflow-wrap: break-word;
-        padding: 1rem;
-      }
     }
+  }
+
+  .iiif-viewer-toolbar {
+    background-color: rgba($white, 0.95);
+    margin-top: -3.25rem;
+    position: relative;
+    z-index: 2;
 
-    .iiif-viewer-toolbar {
-      background-color: rgba($white, 0.95);
+    @media (min-width: $bp-large) {
+      margin-top: 0;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
-      padding: 0.875rem 1rem;
+    }
+
+    .sidebar-toggle {
+      margin: 0.875rem 1rem;
+    }
+
+    .sidebar-toggle,
+    .pages-toggle {
+      background-color: transparent;
+      font-size: $font-size-large;
+
+      &.active {
+        color: $blue;
+      }
+    }
+  }
+
+  .iiif-viewer-toolbar-pagination {
+    padding: 0.875rem 1rem;
+
+    @media(max-width: ($bp-large - 1px)) {
+      border-top: 1px solid $bodygrey;
 
-      .sidebar-toggle {
-        background-color: transparent;
-        font-size: $font-size-large;
+      &.closed {
+        border-bottom: 1px solid $bodygrey;
       }
     }
   }

packages/portal/src/components/item/ItemMediaSidebar.vue

@@ -27,6 +27,7 @@
           v-if="!!uri"
           data-qa="item media sidebar links"
           button-id="item-media-sidebar-links"
+          :title-link-attributes="{ 'aria-label': $t('media.sidebar.links') }"
           @mouseleave.native="hideTooltips"
         >
           <b-tooltip
@@ -36,7 +37,6 @@
           />
           <template #title>
             <span
-              :aria-label="$t('media.sidebar.links')"
               class="icon icon-link"
             />
           </template>
@@ -85,11 +85,24 @@
   @import '@europeana/style/scss/transitions';
 
   .iiif-viewer-sidebar {
-    flex-basis: 260px;
-    flex-shrink: 0;
+    width: 230px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: $white;
+
+    .tabs {
+      background-color: $white;
+    }
+
+    .tab-pane {
+      overflow-wrap: break-word;
+    }
 
     ::v-deep .tab-content {
-      padding: 1rem 1.5rem 1rem 0.875rem;
+      padding: 1rem 1.5rem 4rem 0.875rem;
       overflow: auto;
 
       h2 {

packages/portal/src/components/item/ItemMediaSwiper.vue

@@ -137,13 +137,13 @@
 
     methods: {
       onSlideChange() {
-        this.updateThubmnailScroll();
+        this.updateThumbnailScroll();
         this.$emit('select', this.displayableMedia[this.swiper.activeIndex].about);
       },
       updateSwiper() {
         this.swiper.update();
       },
-      updateThubmnailScroll() {
+      updateThumbnailScroll() {
         // TODO: fix these values to use CSS values, not be hardcoded
         if (window.innerWidth <= 767) {
           this.$refs.swiperThubmnails?.scroll(16 + (this.swiper.activeIndex * 96), 0);