\ + ${PERMALINK_DESCRIPTION_TEXT}
` + const permalinkDescription = permalinkContainer.querySelector("#permalink-description") + permalinkContainer.querySelector("#permalink-button").addEventListener("click", () => { + const permalinkUrl = window.location.origin + window.location.pathname + "?personalpositions=" + arPersonalPositions.join(",") + "&votingdouble=" + arVotingDouble.join(",") + navigator.clipboard.writeText(permalinkUrl) + permalinkDescription.classList.remove("d-none") + setTimeout(() => { + permalinkDescription.classList.add("d-none") + }, PERMALINK_DESCRIPTION_DURATION * 1000) + }) + document.querySelector("#resultsShort").insertBefore(permalinkContainer, document.querySelector("#resultsShortTable")) + } +}) From 01b072eed05eeb75004898539def4b50b6491c69 Mon Sep 17 00:00:00 2001 From: Felix Englisch <61431524+fenglisch@users.noreply.github.com> Date: Tue, 7 Mar 2023 16:29:50 +0100 Subject: [PATCH 2/8] Encode bools from arVotingDouble to ints in URL ... and decode when reading the URL parameter Also refactor fnProcessPermalink() a bit --- extras/addon_permalink_to_personal_result.js | 61 ++++++++++---------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/extras/addon_permalink_to_personal_result.js b/extras/addon_permalink_to_personal_result.js index 0b86b04..b2136a5 100644 --- a/extras/addon_permalink_to_personal_result.js +++ b/extras/addon_permalink_to_personal_result.js @@ -26,42 +26,16 @@ const PERMALINK_DESCRIPTION_DURATION = 8; /// //////////////////////////////////////////////////////////////////// -function fnProcessPermalink(personalPositionsFromUrl, votingDoubleFromUrl) { - arPersonalPositions = personalPositionsFromUrl.split(",") - arVotingDouble = votingDoubleFromUrl.split(",") - - // Entferne das Statistik-Modal - an anderer Stelle eine Fehlermeldung in Kauf nehmend - // const statsRecord lässt sich nicht zu "false" reassignen, daher das Modal einfach ganz entfernen - let statisticsModal = document.querySelector("#statisticsModal") - if (statisticsModal) statisticsModal.parentNode.removeChild(statisticsModal) - - // Entferne den Startbildschirm, falls vorhanden. Ansonsten würde er nicht verschwinden - const sectionDescription = document.querySelector("#sectionDescription") - if(sectionDescription) sectionDescription.parentNode.removeChild(sectionDescription) - - // Ohne Timeout würde es beim Reload z. T. zu Fehlern kommen - setTimeout(() => { - fnShowQuestionNumber(intQuestions) - }, 500) -} - - - window.addEventListener("load", () => { // Suche in der URL nach Parameter und führe ggf. Funktion aus - const urlParams = new URLSearchParams(window.location.search) - const personalPositionsFromUrl = urlParams.get('personalpositions') - if (personalPositionsFromUrl) { - const votingDoubleFromUrl = urlParams.get('votingdouble') - fnProcessPermalink(personalPositionsFromUrl, votingDoubleFromUrl) - } + fnProcessPermalink() const observerResults = new MutationObserver(fnGeneratePermalink); observerResults.observe(document.querySelector("#resultsHeading"), {childList: true,}); // Ist eine inner function, damit sie Zugriff auf die Variable observerResults hat (zum Disconnecten) function fnGeneratePermalink() { - // Ohne .disconnect() wird die Mutation doppelt getriggert -> 2 Buttons + // Ohne .disconnect() wird die Mutation aus irgendeinem Grund doppelt getriggert -> 2 Buttons observerResults.disconnect() const permalinkContainer = document.createElement("div"); @@ -73,7 +47,11 @@ window.addEventListener("load", () => { ${PERMALINK_DESCRIPTION_TEXT}` const permalinkDescription = permalinkContainer.querySelector("#permalink-description") permalinkContainer.querySelector("#permalink-button").addEventListener("click", () => { - const permalinkUrl = window.location.origin + window.location.pathname + "?personalpositions=" + arPersonalPositions.join(",") + "&votingdouble=" + arVotingDouble.join(",") + let permalinkUrl = window.location.origin + window.location.pathname + // Add parameter with personal positions + permalinkUrl += "?personalpositions=" + arPersonalPositions.join(",") + // Add parameter with voting double values, encode to numbers to avoid confusing strings like "false,false,false..." in the URL + permalinkUrl += "&votingdouble=" + arVotingDouble.map(element => +element).join(",") navigator.clipboard.writeText(permalinkUrl) permalinkDescription.classList.remove("d-none") setTimeout(() => { @@ -83,3 +61,28 @@ window.addEventListener("load", () => { document.querySelector("#resultsShort").insertBefore(permalinkContainer, document.querySelector("#resultsShortTable")) } }) + +function fnProcessPermalink() { + const urlParams = new URLSearchParams(window.location.search) + const personalPositionsFromUrl = urlParams.get('personalpositions'); + const votingDoubleFromUrl = urlParams.get('votingdouble'); + if (personalPositionsFromUrl) { + arPersonalPositions = personalPositionsFromUrl.split(",") + // Decode numbers to boolean values + arVotingDouble = votingDoubleFromUrl.split(",").map(element => !!+element) + + // Entferne das Statistik-Modal - an anderer Stelle eine Fehlermeldung in Kauf nehmend + // const statsRecord lässt sich nicht zu "false" reassignen, daher das Modal einfach ganz entfernen + let statisticsModal = document.querySelector("#statisticsModal") + if (statisticsModal) statisticsModal.parentNode.removeChild(statisticsModal) + + // Entferne den Startbildschirm, falls vorhanden. Ansonsten würde er nicht verschwinden + const sectionDescription = document.querySelector("#sectionDescription") + if(sectionDescription) sectionDescription.parentNode.removeChild(sectionDescription) + + // Direkt zur Auswertung springen. Ohne Timeout würde es beim Reload z. T. zu Fehlern kommen + setTimeout(() => { + fnShowQuestionNumber(intQuestions) + }, 500) + } +} From bc14de1cc43c8dde4a9e0108de6334fe6aec49a3 Mon Sep 17 00:00:00 2001 From: Felix Englisch <61431524+fenglisch@users.noreply.github.com> Date: Tue, 7 Mar 2023 16:45:26 +0100 Subject: [PATCH 3/8] arVotingDouble & arPersonalPositions nicht initialisieren MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Der Block hatte ohnehin keine Wirkung, da der Array erst in Runtime generiert wurde und noch nicht fertig war, also arQuestionsShort.length war 0. Mit `i < intQuestions` würde es funktionieren, aber das würde zu einem Konflikt mit fnProcessPermalink aus addon_permalink_to_personal_results führen (Initiatilisierung aller Elemente zu 99 bis false würde teilweise stattfinden, nachdem die Arrays mit den URL-Parametern gefüllt wurden). --- system/output.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/system/output.js b/system/output.js index 7bec13e..e8bd9d4 100755 --- a/system/output.js +++ b/system/output.js @@ -100,10 +100,6 @@ function fnStart() // (b) Antworten der Parteien und Partei-Informationen fnReadCsv("data/"+fileAnswers,fnReadPositions) - // arVotingDouble initialisieren - for (i=0;i\ +
\ ${PERMALINK_DESCRIPTION_TEXT}
` const permalinkDescription = permalinkContainer.querySelector("#permalink-description") permalinkContainer.querySelector("#permalink-button").addEventListener("click", () => { @@ -53,13 +60,17 @@ window.addEventListener("load", () => { // Add parameter with voting double values, encode to numbers to avoid confusing strings like "false,false,false..." in the URL permalinkUrl += "&votingdouble=" + arVotingDouble.map(element => +element).join(",") navigator.clipboard.writeText(permalinkUrl) - permalinkDescription.classList.remove("d-none") + permalinkDescription.style.maxHeight = permalinkDescription.scrollHeight + 20 + "px"; + permalinkDescription.classList.add("permalink-description-visible") setTimeout(() => { - permalinkDescription.classList.add("d-none") + permalinkDescription.style.maxHeight = 0; + permalinkDescription.classList.remove("permalink-description-visible") }, PERMALINK_DESCRIPTION_DURATION * 1000) }) document.querySelector("#resultsShort").insertBefore(permalinkContainer, document.querySelector("#resultsShortTable")) } + + addCssForPermalinkElements() }) function fnProcessPermalink() { @@ -86,3 +97,32 @@ function fnProcessPermalink() { }, 500) } } + +function addCssForPermalinkElements() { + const stylesheet = document.createElement("style"); + stylesheet.setAttribute("id", "permalinkCSS"); + stylesheet.textContent += ` + #permalink-container { + display: flex; + flex-direction: column; + align-items: end; + } + + #permalink-button { + background-color: ${PERMALINK_BUTTON_BACKGROUND_COLOR}; + } + #permalink-description { + transition: max-height .3s, border-color .3s; + border: 2px solid; + margin: 10px; + width: max(60%, 300px); + border-radius: ${PERMALINK_DESCRIPTION_BORDER_RADIUS}; + overflow: hidden; + } + + .permalink-description-visible { + padding: 10px 15px; + border-color: ${PERMALINK_DESCRIPTION_BORDER_COLOR} !important; + }`; + document.head.appendChild(stylesheet); +} From 06928422af14256bbeb787d5f1089a3d8a07385d Mon Sep 17 00:00:00 2001 From: Felix Englisch <61431524+fenglisch@users.noreply.github.com> Date: Fri, 7 Apr 2023 12:28:13 +0200 Subject: [PATCH 5/8] Increase timeout and add label To give the browser more time to load the CSV files --- extras/addon_permalink_to_personal_result.js | 177 +++++++++++-------- 1 file changed, 108 insertions(+), 69 deletions(-) diff --git a/extras/addon_permalink_to_personal_result.js b/extras/addon_permalink_to_personal_result.js index 9c1369d..42df603 100644 --- a/extras/addon_permalink_to_personal_result.js +++ b/extras/addon_permalink_to_personal_result.js @@ -1,25 +1,27 @@ // FUNKTION // Erzeuge über der Ergebnistabelle einen Button, der einen Permalink kopiert, mit man zurück zu der persönlichen Ergebnisseite gelangt - // 1.) Allgemeine Angaben // Text im Button -const PERMALINK_BUTTON_TEXT = "Ergebnis speichern" +const PERMALINK_BUTTON_TEXT = "Ergebnis speichern"; -const PERMALINK_BUTTON_BACKGROUND_COLOR = "var(--secondary-color)" +const PERMALINK_BUTTON_BACKGROUND_COLOR = "var(--secondary-color)"; -const PERMALINK_BUTTON_TEXT_COLOR = "var(--secondary-text-color, #ffffff)" +const PERMALINK_BUTTON_TEXT_COLOR = "var(--secondary-text-color, #ffffff)"; // Erklärtext, der für ein paar Sekunden angezeigt wird, wenn man auf den Button klickt -const PERMALINK_DESCRIPTION_TEXT ="Es wurde ein Permalink generiert und in deine Zwischenablage kopiert. Speichere diesen Link und rufe ihn später auf, um wieder zu dieser persönlichen Ergebnisseite zu gelangen." +const PERMALINK_DESCRIPTION_TEXT = + "Es wurde ein Permalink generiert und in deine Zwischenablage kopiert. Speichere diesen Link und rufe ihn später auf, um wieder zu dieser persönlichen Ergebnisseite zu gelangen - oder leite ihn weiter, um dein Ranking mit anderen zu teilen."; -const PERMALINK_DESCRIPTION_BORDER_COLOR = "var(--success)" +const PERMALINK_DESCRIPTION_BORDER_COLOR = "var(--success)"; -const PERMALINK_DESCRIPTION_BORDER_RADIUS = "var(--border-radius)" +const PERMALINK_DESCRIPTION_BORDER_RADIUS = "var(--border-radius)"; // Wie viele Sekunden soll der Erklärtext angezeigt werden, bevor er wieder verschwindet? const PERMALINK_DESCRIPTION_DURATION = 8; +const LOADING_MODAL_TEXT = "Deine Ergebnisseite lädt..."; + // 2.) In der DEFINITION.JS in den Erweiterten Einstellungen das Add-On eintragen. // Add the add-on to the advanced settings in DEFINITION.JS // var addons = ["extras/addon_contacts_in_results.js"] @@ -35,73 +37,108 @@ const PERMALINK_DESCRIPTION_DURATION = 8; /// //////////////////////////////////////////////////////////////////// window.addEventListener("load", () => { - // Suche in der URL nach Parameter und führe ggf. Funktion aus - fnProcessPermalink() - - const observerResults = new MutationObserver(fnGeneratePermalink); - observerResults.observe(document.querySelector("#resultsHeading"), {childList: true,}); - - // Ist eine inner function, damit sie Zugriff auf die Variable observerResults hat (zum Disconnecten) - function fnGeneratePermalink() { - // Ohne .disconnect() wird die Mutation aus irgendeinem Grund doppelt getriggert -> 2 Buttons - observerResults.disconnect() - - const permalinkContainer = document.createElement("div"); - permalinkContainer.setAttribute("id","permalink-container"); - permalinkContainer.innerHTML = ` + // Suche in der URL nach Parameter und führe ggf. Funktion aus + fnProcessPermalink(); + + const observerResults = new MutationObserver(fnGeneratePermalink); + observerResults.observe(document.querySelector("#resultsHeading"), { + childList: true, + }); + + // Ist eine inner function, damit sie Zugriff auf die Variable observerResults hat (zum Disconnecten) + function fnGeneratePermalink() { + // Ohne .disconnect() wird die Mutation aus irgendeinem Grund doppelt getriggert -> 2 Buttons + observerResults.disconnect(); + + const permalinkContainer = document.createElement("div"); + permalinkContainer.setAttribute("id", "permalink-container"); + permalinkContainer.innerHTML = `\ - ${PERMALINK_DESCRIPTION_TEXT}
` - const permalinkDescription = permalinkContainer.querySelector("#permalink-description") - permalinkContainer.querySelector("#permalink-button").addEventListener("click", () => { - let permalinkUrl = window.location.origin + window.location.pathname - // Add parameter with personal positions - permalinkUrl += "?personalpositions=" + arPersonalPositions.join(",") - // Add parameter with voting double values, encode to numbers to avoid confusing strings like "false,false,false..." in the URL - permalinkUrl += "&votingdouble=" + arVotingDouble.map(element => +element).join(",") - navigator.clipboard.writeText(permalinkUrl) - permalinkDescription.style.maxHeight = permalinkDescription.scrollHeight + 20 + "px"; - permalinkDescription.classList.add("permalink-description-visible") - setTimeout(() => { - permalinkDescription.style.maxHeight = 0; - permalinkDescription.classList.remove("permalink-description-visible") - }, PERMALINK_DESCRIPTION_DURATION * 1000) - }) - document.querySelector("#resultsShort").insertBefore(permalinkContainer, document.querySelector("#resultsShortTable")) - } - - addCssForPermalinkElements() -}) + ${PERMALINK_DESCRIPTION_TEXT}`; + const permalinkDescription = permalinkContainer.querySelector( + "#permalink-description" + ); + permalinkContainer + .querySelector("#permalink-button") + .addEventListener("click", () => { + let permalinkUrl = window.location.origin + window.location.pathname; + // Add parameter with personal positions + permalinkUrl += "?personalpositions=" + arPersonalPositions.join(","); + // Add parameter with voting double values, encode to numbers to avoid confusing strings like "false,false,false..." in the URL + permalinkUrl += + "&votingdouble=" + + arVotingDouble.map((element) => +element).join(","); + navigator.clipboard.writeText(permalinkUrl); + permalinkDescription.style.maxHeight = + permalinkDescription.scrollHeight + 20 + "px"; + permalinkDescription.classList.add("permalink-description-visible"); + setTimeout(() => { + permalinkDescription.style.maxHeight = 0; + permalinkDescription.classList.remove( + "permalink-description-visible" + ); + }, PERMALINK_DESCRIPTION_DURATION * 1000); + }); + document + .querySelector("#resultsShort") + .insertBefore( + permalinkContainer, + document.querySelector("#resultsShortTable") + ); + } + + addCssForPermalinkElements(); +}); function fnProcessPermalink() { - const urlParams = new URLSearchParams(window.location.search) - const personalPositionsFromUrl = urlParams.get('personalpositions'); - const votingDoubleFromUrl = urlParams.get('votingdouble'); - if (personalPositionsFromUrl) { - arPersonalPositions = personalPositionsFromUrl.split(",") - // Decode numbers to boolean values - arVotingDouble = votingDoubleFromUrl.split(",").map(element => !!+element) - - // Entferne das Statistik-Modal - an anderer Stelle eine Fehlermeldung in Kauf nehmend - // const statsRecord lässt sich nicht zu "false" reassignen, daher das Modal einfach ganz entfernen - let statisticsModal = document.querySelector("#statisticsModal") - if (statisticsModal) statisticsModal.parentNode.removeChild(statisticsModal) - - // Entferne den Startbildschirm, falls vorhanden. Ansonsten würde er nicht verschwinden - const sectionDescription = document.querySelector("#sectionDescription") - if(sectionDescription) sectionDescription.parentNode.removeChild(sectionDescription) - - // Direkt zur Auswertung springen. Ohne Timeout würde es beim Reload z. T. zu Fehlern kommen - setTimeout(() => { - fnShowQuestionNumber(intQuestions) - }, 500) - } + const urlParams = new URLSearchParams(window.location.search); + const personalPositionsFromUrl = urlParams.get("personalpositions"); + const votingDoubleFromUrl = urlParams.get("votingdouble"); + if (personalPositionsFromUrl) { + // Ladebildschirm anzeigen + document.querySelector(".container").classList.add("d-none"); + const loadingModalContainer = document.createElement("div"); + loadingModalContainer.innerHTML = ` +