MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */


mw.loader.using('jquery', function () {
  $(function () {
    const carousels = document.querySelectorAll('.card-carousel');
    const links = carousel.querySelectorAll('a');



    carousels.forEach((carousel) => {
      carousel.addEventListener('mousedown', (e) => {
      isDragging = true;
      carousel.classList.add('dragging');
      startX = e.pageX - carousel.offsetLeft;
      scrollLeft = carousel.scrollLeft;
      // Prevent default behavior to avoid triggering link during drag start
      e.preventDefault(); 
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
      carousel.classList.remove('dragging');
    });

    carousel.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      e.preventDefault();
      const x = e.pageX - carousel.offsetLeft;
      const walk = (x - startX); // The distance moved
      carousel.scrollLeft = scrollLeft - walk;
    });

      //   let isDragging = false;
    //   let startX;
    //   let scrollStart;
    //   let movedEnough = false;

    //  carousel.addEventListener("pointerdown", function (e) {
    //    // Skip custom drag if user is clicking on the scrollbar
    //    const isScrollbarClick = (
    //      e.offsetY > carousel.clientHeight ||
    //      e.offsetY < 0
    //    );
    //    if (isScrollbarClick) return;
     
    //    isDragging = true;
    //    movedEnough = false;
    //    carousel.classList.add("dragging");
    //    startX = e.pageX;
    //    scrollStart = carousel.scrollLeft;
    //    carousel.setPointerCapture(e.pointerId);
    //    e.preventDefault();
    //  });

    //   carousel.addEventListener("pointermove", function (e) {
    //     if (!isDragging) return;
    //     const x = e.pageX;
    //     const walk = (x - startX) * 0.75;
    //     if (Math.abs(walk) > 5) movedEnough = true;
    //     carousel.scrollLeft = scrollStart - walk;
    //     e.preventDefault();
    //   });

    //   const endDrag = () => {
    //     isDragging = false;
    //     carousel.classList.remove("dragging");
    //   };

    //   carousel.addEventListener("pointerup", endDrag);
    //   carousel.addEventListener("pointerleave", endDrag);

    //   // Block clicks if drag occurred
    //   carousel.addEventListener("click", function (e) {
    //     if (movedEnough) {
    //       e.preventDefault();
    //       e.stopImmediatePropagation();
    //     }
    //   }, true); // useCapture = true
    });
    
    // Solution: Prevent the click if a drag occurred
    links.forEach(link => {
      link.addEventListener('click', (e) => {
        // If we were dragging, prevent the link from being clicked
        if (isDragging) {
          e.preventDefault();
        }
      });
    });
  });
});