app/assets/javascripts/numbered_pagination.js

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