MediaWiki:Common.js: Difference between revisions

No edit summary
m add credit
 
(8 intermediate revisions by the same user 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
/* 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 */
/* Create Page */
Line 58: Line 84:
     itemsCreatePageGrid.push(element);
     itemsCreatePageGrid.push(element);
     itemsCreateInputPageGrid.push(targetElement);
     itemsCreateInputPageGrid.push(targetElement);
 
   
     element.addEventListener("click", () =>
     onClickOrTap(element, (e) => {
      toggleGridTarget(element, targetElement)
    toggleGridTarget(element, targetElement)
     );
    });
    //element.addEventListener("click", () =>
    //    toggleGridTarget(element, targetElement)
     //);
   }
   }


Line 77: Line 106:
     }
     }
   }
   }
}
/* 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");
}
}