MediaWiki:Common.js: Difference between revisions

Revision as of 01:05, 2 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */

/* Hacky solution to invert images with transparent backgrounds in dark mode */

/*var elementToInvert = document.querySelector(".infobox-image > span");*/
/*elementToInvert.classList.add("mw-no-invert");*/

/* 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];

      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);

    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);
    }
  }
}
/* Create Page */

/* testing */
document.getElementById("incidentInput").onclick = function() { 
  document.getElementById("incidentCreate").style.display = 'block';
  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("customCreate").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");
  document.getElementById("customInput").classList.remove("pageInputActive");
}


document.getElementById("productLineInput").onclick = function() { 
  document.getElementById("incidentCreate").style.display = 'none';
  document.getElementById("productLineCreate").style.display = 'block';
  document.getElementById("productCreate").style.display = 'none';
  document.getElementById("companyCreate").style.display = 'none';
  document.getElementById("themeCreate").style.display = 'none';
  document.getElementById("customCreate").style.display = 'none';

  document.getElementById("incidentInput").classList.remove("pageInputActive");
  document.getElementById("productLineInput").classList.add("pageInputActive");
  document.getElementById("productInput").classList.remove("pageInputActive");
  document.getElementById("companyInput").classList.remove("pageInputActive");
  document.getElementById("themeInput").classList.remove("pageInputActive");
  document.getElementById("customInput").classList.remove("pageInputActive");
}

document.getElementById("productInput").onclick = function() { 
  document.getElementById("incidentCreate").style.display = 'none';
  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("customCreate").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("customInput").classList.remove("pageInputActive");
}

document.getElementById("companyInput").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 = 'block';
  document.getElementById("themeCreate").style.display = 'none';
  document.getElementById("customCreate").style.display = 'none';

  document.getElementById("incidentInput").classList.remove("pageInputActive");
  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("customInput").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("customCreate").style.display = 'none';

  
  document.getElementById("incidentInput").classList.remove("pageInputActive");
  document.getElementById("productLineInput").classList.remove("pageInputActive");
  document.getElementById("productInput").classList.remove("pageInputActive");
  document.getElementById("companyInput").classList.remove("pageInputActive");
  document.getElementById("themeInput").classList.add("pageInputActive");
  document.getElementById("customInput").classList.remove("pageInputActive");
}

document.getElementById("customInput").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 = 'none';
  document.getElementById("customCreate").style.display = 'block';

  
  document.getElementById("incidentInput").classList.remove("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");
  document.getElementById("customInput").classList.add("pageInputActive");
}