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
+const onClickOrTap = (element, handler) => {
+  let touchMoveHappened = false;
+  element.addEventListener('touchstart', () => {
+    // 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);
+  });
+}
-/* Hacky solution to invert images with transparent backgrounds in dark mode */
+/* Create Page */
+const createPageTargetIdDataSetString = "[data-create-page-target-id]";
-/*var elementToInvert = document.querySelector(".infobox-image > span");*/
+if (document.querySelector(createPageTargetIdDataSetString)) {
-/*elementToInvert.classList.add("mw-no-invert");*/
+  /**
+   * @type {HTMLElement[]}
+   */
+  let itemsCreateInputPageGrid = [];
+  let itemsCreatePageGrid = [];
+  const createPageTargetId = "createPageTargetId";
+  const createPageInputHiddenClass = "hidden";
+  const createPageInputActiveClass = "pageInputActive";
-/* testing */
+  /**
-.style.display = 'none';
+   * @param {HTMLElement} element
-id="incidentInput"  id="incidentCreate"
+   */
-id="productLineInput" id="productLineCreate"
+  function getGridTarget(element) {
-id="productInput" id="productCreate"
+    const targetId = element.dataset[createPageTargetId];
-id="companyInput" id="companyCreate"
-id="themeInput" id="themeCreate"
-document.getElementById("incidentInput").onclick = function() {
+    return document.getElementById(targetId);
-document.getElementById("incidentCreate").style.display = 'block';
+  }
-document.getElementById("productLineCreate").style.display = 'none';
-document.getElementById("productCreate").style.display = 'none';
+  /**
-document.getElementById("companyCreate").style.display = 'none';
+   * @this {HTMLDivElement}
-document.getElementById("themeCreate").style.display = 'none';
+   */
+  function toggleGridTarget(element, targetElement) {
+    for (let index = 0; index < itemsCreateInputPageGrid.length; index += 1) {
+      const target = itemsCreateInputPageGrid[index];
+      target.classList.add(createPageInputHiddenClass);
+      if (target === targetElement) {
+        target.classList.remove(createPageInputHiddenClass);
+      }
+      const clickedElement = itemsCreatePageGrid[index];
+      clickedElement.classList.remove(createPageInputActiveClass);
+      if (clickedElement === element) {
+        clickedElement.classList.add(createPageInputActiveClass);
+      }
+    }
+  }
+  /**
+   * @param {HTMLElement} element
+   * @param {HTMLElement} targetElement
+   */
+  function addToggleGridTargetEvent(element, targetElement) {
+    itemsCreatePageGrid.push(element);
+    itemsCreateInputPageGrid.push(targetElement);
+    onClickOrTap(element, (e) => {
+     toggleGridTarget(element, targetElement)
+    });
+    //element.addEventListener("click", () =>
+    //    toggleGridTarget(element, targetElement)
+    //);
+  }
+  const createPageTargetElements = document.querySelectorAll(
+    createPageTargetIdDataSetString
+  );
+  for (let index = 0; index < createPageTargetElements.length; index += 1) {
+    const element = createPageTargetElements[index];
+    const targetElement = getGridTarget(element);
+    if (targetElement) {
+      addToggleGridTargetEvent(element, targetElement);
+    }
+  }
 }