MediaWiki:Common.js: Difference between revisions

Latest revision as of 19:37, 28 March 2026

/* 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');
    

    // let isDragging = false;
    // let startX, scrollLeft;

    carousels.forEach((carousel) => {
      const links = carousel.querySelectorAll('a');
    //   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;
    // });

      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) {
      //   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();
          }
        });
      });
    });
    

  });
});