MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
-/* Hacky solution to invert images with transparent backgrounds in dark mode */
+function onClickOrTap(element, target, handler){
+  let touchMoveHappened = false;
-/*var elementToInvert = document.querySelector(".infobox-image > span");*/
+  element.addEventListener('touchstart', () => {
-/*elementToInvert.classList.add("mw-no-invert");*/
+    // on mobile this is the 1st event that happens
+    touchMoveHappened = false;
+  })
+  element.addEventListener('touchmove', () => {
+    // on mobile this might get triggered in which case the
+    // click or tap will get cancelled
+    // we'll keep a track of it
+    touchMoveHappened = true;
+  })
+  element.addEventListener('touchend', () => {
+    // happens after touchstart, but before click
+    // if touch happened then we'll exit
+    if (touchMoveHappened) {
+      return;
+    }
+    // calling preventDefault() will make sure the
+    // subsequent click will not get triggered
+    e.preventDefault();
+    // at this point we are ready to call our original handler
+    toggleGridTarget(element, targetElement);
+  }
+  )
+  element.addEventListener('click', () => {
+    // this will only get triggered on desktop
+    // because we call preventDefault for the "touchend" event
+    toggleGridTarget(element, targetElement);
+  })
+}
 /* Create Page */
 const createPageTargetIdDataSetString = "[data-create-page-target-id]";
@@ Line 58: / Line 84: @@
      itemsCreatePageGrid.push(element);
      itemsCreateInputPageGrid.push(targetElement);
-     element.addEventListener("click", () =>
+    onClickOrTap(element,targetElement,toggleGridTarget(element, targetElement));
-      toggleGridTarget(element, targetElement)
-     );
+     // element.addEventListener("click", () =>
+    //   toggleGridTarget(element, targetElement)
+     // );
    }