app/assets/javascripts/numbered_pagination.js

   1 (function () {
   2   let scrollStartObserver, scrollEndObserver;
   3
   4   function initVersionsNavigation() {
   5     $(document).trigger("numbered_pagination:center");
   6
   7     const $scrollableList = $("#versions-navigation-list-middle");
   8     const [scrollableFirstItem] = $scrollableList.children().first();
   9     const [scrollableLastItem] = $scrollableList.children().last();
  10
  11     if (scrollableFirstItem) {
  12       scrollStartObserver = createScrollObserver("#versions-navigation-list-start", "2px 0px");
  13       scrollStartObserver.observe(scrollableFirstItem);
  14     }
  15
  16     if (scrollableLastItem) {
  17       scrollEndObserver = createScrollObserver("#versions-navigation-list-end", "-2px 0px");
  18       scrollEndObserver.observe(scrollableLastItem);
  19     }
  20   }
  21
  22   function createScrollObserver(shadowTarget, shadowOffset) {
  23     const threshold = 0.95;
  24     return new IntersectionObserver(([entry]) => {
  25       const floating = entry.intersectionRatio < threshold;
  26       $(shadowTarget)
  27         .css("box-shadow", floating ? `rgba(0, 0, 0, 0.075) ${shadowOffset} 2px` : "")
  28         .css("z-index", floating ? "5" : ""); // floating z-index should be larger than z-index of Bootstrap's .page-link:focus, which is 3
  29     }, { threshold });
  30   }
  31
  32   $(document).on("click", "a[href='#versions-navigation-active-page-item']", function (e) {
  33     $(document).trigger("numbered_pagination:center");
  34     $("#versions-navigation-active-page-item a.page-link").trigger("focus");
  35     e.preventDefault();
  36   });
  37
  38   $(document).on("numbered_pagination:enable", function () {
  39     initVersionsNavigation();
  40   });
  41
  42   $(document).on("numbered_pagination:disable", function () {
  43     scrollStartObserver?.disconnect();
  44     scrollStartObserver = null;
  45     scrollEndObserver?.disconnect();
  46     scrollEndObserver = null;
  47   });
  48
  49   $(document).on("numbered_pagination:center", function () {
  50     const [scrollableList] = $("#versions-navigation-list-middle");
  51
  52     if (!scrollableList) return;
  53
  54     const [activeStartItem] = $("#versions-navigation-list-start #versions-navigation-active-page-item");
  55     const [activeScrollableItem] = $("#versions-navigation-list-middle #versions-navigation-active-page-item");
  56
  57     if (activeStartItem) {
  58       scrollableList.scrollLeft = 0;
  59     } else if (activeScrollableItem) {
  60       scrollableList.scrollLeft = Math.round(activeScrollableItem.offsetLeft - (scrollableList.offsetWidth / 2) + (activeScrollableItem.offsetWidth / 2));
  61     } else {
  62       scrollableList.scrollLeft = scrollableList.scrollWidth - scrollableList.offsetWidth;
  63     }
  64   });
  65 }());