|
|
(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");
| |
| } | | } |