Add chapter list popup menu to chapters

So you can read chapters while you read chapters.

includes/functions/hooks/_chapter_hooks.php

@@ -308,11 +308,18 @@ if ( ! function_exists( 'fictioneer_chapter_story_back_button' ) ) {
     // Abort if...
     if ( ! $args['story_post'] ) return;
 
-    // Setup
-    $label = esc_attr__( 'Back to story', 'fictioneer' );
-
 		// Start HTML ---> ?>
-    <a href="<?php echo get_permalink( $args['story_post'] ) ?>" class="button _secondary tooltipped" data-tooltip="<?php echo $label; ?>" aria-label="<?php echo $label; ?>"><i class="fa-solid fa-book"></i></a>
+    <div class="toggle-last-clicked button _secondary popup-menu-toggle tooltipped" tabindex="0" role="button" data-tooltip="<?php esc_attr_e( 'Index', 'fictioneer' ); ?>" aria-label="<?php esc_attr_e( 'Index', 'fictioneer' ); ?>">
+      <i class="fa-solid fa-list"></i>
+      <div class="popup-menu _top _center _align-items-right _v-scrolling">
+        <a href="<?php echo get_permalink( $args['story_post'] ) ?>" class="">
+          <i class="fa-solid fa-caret-left"></i>
+          <span><?php _e( 'Back to Story', 'fictioneer' ); ?></span>
+        </a>
+        <hr>
+        <div class="popup-menu__section" data-target="popup-chapter-list"></div>
+      </div>
+    </div>
 		<?php // <--- End HTML
   }
 }

includes/functions/hooks/_post_hooks.php

@@ -136,7 +136,7 @@ if ( ! function_exists( 'fictioneer_post_subscribe_button' ) ) {
       // Start HTML ---> ?>
       <div class="toggle-last-clicked button _secondary popup-menu-toggle" tabindex="0" role="button" aria-label="<?php echo fcntr( 'subscribe', true ); ?>">
         <i class="fa-solid fa-bell"></i> <span><?php echo fcntr( 'subscribe' ); ?></span>
-        <div class="popup-menu _top _align-right"><?php echo $subscribe_buttons; ?></div>
+        <div class="popup-menu _top _justify-right"><?php echo $subscribe_buttons; ?></div>
       </div>
       <?php // <--- End HTML
     }

src/js/chapter.js

@@ -1220,3 +1220,13 @@ function fcn_readingProgress() {
     fcn_toggleCheckmark(chapterList.dataset.storyId, 'progress', parseInt(chapterId), null, 'set');
   }
 }
+
+// =============================================================================
+// SETUP INDEX POPUP MENU
+// =============================================================================
+
+window.addEventListener('load', () => {
+  _$('[data-target="popup-chapter-list"]')?.appendChild(
+    document.getElementById('story-chapter-list')?.firstElementChild.cloneNode(true)
+  );
+}, { once: true })

src/scss/common/_base.scss

@@ -384,16 +384,19 @@ button[type=submit]:where(:not(._inline)) {
   --translateY: translateY(0);
   --focus-offset: -2px;
   position: absolute;
+  z-index: 10;
   background: var(--popup-menu-background);
   color: var(--tooltip-text);
   font-size: 14px;
-  line-height: 1;
+  line-height: 22px;
   text-shadow: none;
   white-space: nowrap;
   text-align: center;
   padding: 4px 0;
   border-radius: var(--layout-border-radius-small);
+  max-height: min(250px, 80vh);
   min-width: 64px;
+  max-width: min(280px, 80vw);
   overflow: hidden;
   filter: var(--container-drop-shadow);
   transform: var(--translateX) var(--translateY);
@@ -413,11 +416,31 @@ button[type=submit]:where(:not(._inline)) {
     --translateX: translateX(-50%);
   }
 
-  &._align-right {
+  &._justify-right {
     right: 0;
   }
 
-  > * {
+  &._align-items-right :is(a, label, button, .popup-item) {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  &._v-scrolling {
+    overflow: hidden scroll;
+    scrollbar-width: none; // FF
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+  }
+
+  hr {
+    margin: 0;
+    border-bottom: 1px solid currentColor;
+    opacity: 0.25;
+  }
+
+  :is(a, label, button, .popup-item) {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -426,11 +449,16 @@ button[type=submit]:where(:not(._inline)) {
     color: var(--popup-menu-text);
     font-size: inherit;
     font-weight: 400;
-    line-height: 1;
+    line-height: 22px;
     text-align: center;
-    padding: 8px 12px;
+    padding: 5px 12px;
     width: 100%;
 
+    > :not(i, .icon) {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
     &._align-left {
       justify-content: flex-start;
       text-align: left;
@@ -447,6 +475,10 @@ button[type=submit]:where(:not(._inline)) {
       min-width: 20px;
     }
   }
+
+  .current-chapter :is(a, label, button, .popup-item):not(:hover) {
+    background: var(--popup-menu-background-selected);
+  }
 }
 
 .no-results {

src/scss/common/_lightmode.scss

@@ -255,6 +255,7 @@
   // === POPUP MENU ============================================================
   --popup-menu-background: var(--bg-800);
   --popup-menu-background-hover: var(--bg-600);
+  --popup-menu-background-selected: var(--bg-700);
   --popup-menu-text: var(--fg-1000);
   --popup-menu-text-hover: var(--fg-1000);
 

src/scss/common/_properties.scss

@@ -384,6 +384,7 @@
   // === POPUP MENU ============================================================
   --popup-menu-background: var(--fg-300);
   --popup-menu-background-hover: var(--fg-500);
+  --popup-menu-background-selected: var(--fg-400);
   --popup-menu-text: var(--fg-1000);
   --popup-menu-text-hover: var(--fg-1000);