bleed-slider.js

/* =============================================================================
   Bleed Slider — OPTIONAL progressive enhancement
   -----------------------------------------------------------------------------
   The slider works 100% without this file (native scroll-snap). This only adds:
     • prev / next arrow buttons  (data-bs-prev / data-bs-next)
     • click-and-drag scrolling on mouse / trackpad
     • auto-disabling arrows at the start / end

   Markup it expects (buttons are optional):

     <div class="bs-slider">
       <div class="bs-container bs-slider__head">
         <h2>Featured</h2>
         <div class="bs-nav">
           <button data-bs-prev aria-label="Previous">‹</button>
           <button data-bs-next aria-label="Next">›</button>
         </div>
       </div>
       <ul class="bleed-slider" tabindex="0">…</ul>
     </div>

   Usage:  BleedSlider.init();           // enhances every .bleed-slider
   ========================================================================== */
(function (global) {
  'use strict';

  function enhance(track) {
    /* opt-out: leave this slider as pure CSS (data-bs-no-enhance) */
    if (!track || track.dataset.bsReady || track.hasAttribute('data-bs-no-enhance')) return;
    track.dataset.bsReady = '1';

    var scope = track.closest('.bs-slider') || track.parentElement;
    var prev = scope && scope.querySelector('[data-bs-prev]');
    var next = scope && scope.querySelector('[data-bs-next]');

    /* width of one "page" jump = first slide + the gap between slides */
    function step() {
      var first = track.firstElementChild;
      if (!first) return track.clientWidth;
      var gap = parseFloat(getComputedStyle(track).columnGap) || 0;
      return first.getBoundingClientRect().width + gap;
    }

    function scrollByStep(dir) {
      track.scrollBy({ left: dir * step(), behavior: 'smooth' });
    }

    if (prev) prev.addEventListener('click', function () { scrollByStep(-1); });
    if (next) next.addEventListener('click', function () { scrollByStep(1); });

    /* enable / disable the arrows at the extremes */
    function updateArrows() {
      if (!prev && !next) return;
      var max = track.scrollWidth - track.clientWidth;
      var x = track.scrollLeft;
      if (prev) prev.disabled = x <= 1;
      if (next) next.disabled = x >= max - 1;
    }
    track.addEventListener('scroll', updateArrows, { passive: true });
    window.addEventListener('resize', updateArrows);
    updateArrows();

    /* click-and-drag — mouse / trackpad only (touch already scrolls natively) */
    if (window.matchMedia && window.matchMedia('(pointer: fine)').matches) {
      track.classList.add('is-grab');

      var down = false, moved = false, startX = 0, startLeft = 0;

      track.addEventListener('pointerdown', function (e) {
        if (e.button !== 0) return;
        down = true;
        moved = false;
        startX = e.clientX;
        startLeft = track.scrollLeft;
        track.setPointerCapture(e.pointerId);
      });

      track.addEventListener('pointermove', function (e) {
        if (!down) return;
        var dx = e.clientX - startX;
        if (!moved && Math.abs(dx) > 4) {
          moved = true;
          track.classList.add('is-dragging');
        }
        if (moved) track.scrollLeft = startLeft - dx;
      });

      function endDrag(e) {
        if (!down) return;
        down = false;
        track.classList.remove('is-dragging');
        if (e && e.pointerId != null) {
          try { track.releasePointerCapture(e.pointerId); } catch (_) {}
        }
      }
      track.addEventListener('pointerup', endDrag);
      track.addEventListener('pointercancel', endDrag);

      /* swallow the click that fires after a real drag */
      track.addEventListener('click', function (e) {
        if (moved) { e.preventDefault(); e.stopPropagation(); }
      }, true);
    }
  }

  function init(root) {
    var scope = root || document;
    scope.querySelectorAll('.bleed-slider').forEach(enhance);
  }

  var api = { init: init, enhance: enhance };

  if (typeof module !== 'undefined' && module.exports) {
    module.exports = api;
  } else {
    global.BleedSlider = api;
    if (document.readyState !== 'loading') init();
    else document.addEventListener('DOMContentLoaded', function () { init(); });
  }
})(typeof window !== 'undefined' ? window : this);