Consumer_Action_Taskforce

MediaWiki:Common.js: Difference between revisions

← Older edit
mNo edit summary
m add credit
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* 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);
  });
}
/* Create Page */
const createPageTargetIdDataSetString = "[data-create-page-target-id]";
if (document.querySelector(createPageTargetIdDataSetString)) {
  /**
  * @type {HTMLElement[]}
  */
  let itemsCreateInputPageGrid = [];
  let itemsCreatePageGrid = [];
  const createPageTargetId = "createPageTargetId";
  const createPageInputHiddenClass = "hidden";
  const createPageInputActiveClass = "pageInputActive";
  /**
  * @param {HTMLElement} element
  */
  function getGridTarget(element) {
    const targetId = element.dataset[createPageTargetId];
    return document.getElementById(targetId);
  }
  /**
  * @this {HTMLDivElement}
  */
  function toggleGridTarget(element, targetElement) {
    for (let index = 0; index < itemsCreateInputPageGrid.length; index += 1) {
      const target = itemsCreateInputPageGrid[index];


/* Hacky solution to invert images with transparent backgrounds in dark mode */
      target.classList.add(createPageInputHiddenClass);


/*var elementToInvert = document.querySelector(".infobox-image > span");*/
      if (target === targetElement) {
/*elementToInvert.classList.add("mw-no-invert");*/
        target.classList.remove(createPageInputHiddenClass);
      }


/* testing */
      const clickedElement = itemsCreatePageGrid[index];
document.getElementById("incidentInput").onclick = function() {
     
  document.getElementById("incidentCreate").style.display = 'block';
      clickedElement.classList.remove(createPageInputActiveClass);
  document.getElementById("productLineCreate").style.display = 'none';
  document.getElementById("productCreate").style.display = 'none';
  document.getElementById("companyCreate").style.display = 'none';
  document.getElementById("themeCreate").style.display = 'none';
 
  document.getElementById("incidentInput").classList.add("pageInputActive");
  document.getElementById("productLineInput").classList.remove("pageInputActive");
  document.getElementById("productInput").classList.remove("pageInputActive");
  document.getElementById("companyInput").classList.remove("pageInputActive");
  document.getElementById("themeInput").classList.remove("pageInputActive");
}


      if (clickedElement === element) {
        clickedElement.classList.add(createPageInputActiveClass);
      }
    }
  }


document.getElementById("productLineInput").onclick = function() {  
  /**
  document.getElementById("incidentCreate").style.display = 'none';
  * @param {HTMLElement} element
  document.getElementById("productLineCreate").style.display = 'block';
  * @param {HTMLElement} targetElement
   document.getElementById("productCreate").style.display = 'none';
  */
  document.getElementById("companyCreate").style.display = 'none';
   function addToggleGridTargetEvent(element, targetElement) {
  document.getElementById("themeCreate").style.display = 'none';
    itemsCreatePageGrid.push(element);
 
    itemsCreateInputPageGrid.push(targetElement);
  document.getElementById("incidentInput").classList.remove("pageInputActive");
   
  document.getElementById("productLineInput").classList.add("pageInputActive");
    onClickOrTap(element, (e) => {
  document.getElementById("productInput").classList.remove("pageInputActive");
    toggleGridTarget(element, targetElement)
  document.getElementById("companyInput").classList.remove("pageInputActive");
    });
   document.getElementById("themeInput").classList.remove("pageInputActive");
    //element.addEventListener("click", () =>
}
    //    toggleGridTarget(element, targetElement)
    //);
   }


document.getElementById("productInput").onclick = function() {
   const createPageTargetElements = document.querySelectorAll(
   document.getElementById("incidentCreate").style.display = 'none';
    createPageTargetIdDataSetString
  document.getElementById("productLineCreate").style.display = 'none';
   );
  document.getElementById("productCreate").style.display = 'block';
  document.getElementById("companyCreate").style.display = 'none';
  document.getElementById("themeCreate").style.display = 'none';
 
  document.getElementById("incidentInput").classList.remove("pageInputActive");
  document.getElementById("productLineInput").classList.remove("pageInputActive");
   document.getElementById("productInput").classList.add("pageInputActive");
  document.getElementById("companyInput").classList.remove("pageInputActive");
  document.getElementById("themeInput").classList.remove("pageInputActive");
}


document.getElementById("companyInput").onclick = function() {
   for (let index = 0; index < createPageTargetElements.length; index += 1) {
   document.getElementById("incidentCreate").style.display = 'none';
    const element = createPageTargetElements[index];
  document.getElementById("productLineCreate").style.display = 'none';
  document.getElementById("productCreate").style.display = 'none';
  document.getElementById("companyCreate").style.display = 'block';
  document.getElementById("themeCreate").style.display = 'none';


  document.getElementById("incidentInput").classList.remove("pageInputActive");
    const targetElement = getGridTarget(element);
  document.getElementById("productLineInput").classList.remove("pageInputActive");
  document.getElementById("productInput").classList.remove("pageInputActive");
  document.getElementById("companyInput").classList.add("pageInputActive");
  document.getElementById("themeInput").classList.remove("pageInputActive");
}
document.getElementById("themeInput").onclick = function() {
  document.getElementById("incidentCreate").style.display = 'none';
  document.getElementById("productLineCreate").style.display = 'none';
  document.getElementById("productCreate").style.display = 'none';
  document.getElementById("companyCreate").style.display = 'none';
  document.getElementById("themeCreate").style.display = 'block';


  document.getElementById("incidentInput").classList.remove("pageInputActive");
    if (targetElement) {
  document.getElementById("productLineInput").classList.remove("pageInputActive");
      addToggleGridTargetEvent(element, targetElement);
  document.getElementById("productInput").classList.remove("pageInputActive");
    }
   document.getElementById("companyInput").classList.remove("pageInputActive");
   }
  document.getElementById("themeInput").classList.add("pageInputActive");
}
}
Retrieved from "https://consumerrights.wiki/wiki/MediaWiki:Common.js"