Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 4: Line 4:
mw.loader.using('jquery', function () {
mw.loader.using('jquery', function () {
   $(function () {
   $(function () {
     const carousel = document.querySelector('.card-carousel');
     const carousels = document.querySelectorAll('.card-carousel');
    if (!carousel) return;


     let isDragging = false;
     carousels.forEach((carousel) => {
    let startX;
      let isDragging = false;
    let scrollStart;
      let startX;
    let movedEnough = false;
      let scrollStart;
      let movedEnough = false;


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


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


    carousel.addEventListener("pointerup", function () {
      carousel.addEventListener("pointerup", endDrag);
      isDragging = false;
       carousel.addEventListener("pointerleave", endDrag);
       carousel.classList.remove("dragging");
    });


    carousel.addEventListener("pointerleave", function () {
      // Block clicks if drag occurred
      isDragging = false;
      carousel.addEventListener("click", function (e) {
      carousel.classList.remove("dragging");
        if (movedEnough) {
          e.preventDefault();
          e.stopImmediatePropagation();
        }
      }, true); // useCapture = true
     });
     });
    // Block link clicks if a drag occurred
    carousel.addEventListener("click", function (e) {
      if (movedEnough) {
        e.preventDefault();
        e.stopImmediatePropagation();
      }
    }, true); // capture phase
   });
   });
});
});

Latest revision as of 16:05, 30 May 2025

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

    carousels.forEach((carousel) => {
      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
    });
  });
});