MediaWiki:Common.js: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
+// stolen from Lajos Mészáros on this post https://stackoverflow.com/questions/13358292/capture-tap-event-with-pure-javascript
-/* Hacky solution to invert images with transparent backgrounds in dark mode */
+const onClickOrTap = (element, 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', (e) => {
+    // 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
+    handler(e);
+  });
+  element.addEventListener('click', (e) => {
+    // this will only get triggered on desktop
+    // because we call preventDefault for the "touchend" event
+    handler(e);
+  });
+}
 /* Create Page */
@@ Line 58: / Line 84: @@
      itemsCreatePageGrid.push(element);
      itemsCreateInputPageGrid.push(targetElement);
-     element.addEventListener("click", () =>
+     onClickOrTap(element, (e) => {
-      toggleGridTarget(element, targetElement)
+     toggleGridTarget(element, targetElement)
-     );
+    });
+    //element.addEventListener("click", () =>
+    //    toggleGridTarget(element, targetElement)
+     //);
    }