Mat-O-Wahl - Dokumentation (Addons)

Allgemeines

Erweiterungen werden über die Variable addons in der DEFINITION.JS geladen. Standardmäßig ist diese Variable leer und es wird keine Erweiterung geladen.

var addons = []

Man kann eine oder x-beliebige viele (JavaScript)-Erweiterungen laden. z.B.

• Beispiel für eine Erweiterung: var addons = ["extras/addon_results_textfilter_by_button.js"]
• Beispiel für drei Erweiterungen: var addons = ["extras/addon_results_textfilter_by_button.js", "extras/addon_check_iframe_resize_same_domain.js", "extras/addon_whats_your_favorite_party.js"]
• Beispiel für eine Erweiterung in einem anderen Ordner: var addons = ["my_folder/my_file.js"]

Erweiterung ⇨ Textfilter für mehrere Wahlen

Funktion

Einstellungen

Datei öffnen (Link auf externen Github-Server)

1. Ein (Sonder)-Zeichen oder eine Zeichenkette für die Filter (im Array / in der Liste) bestimmen
   In diesem Beispiel gibt es vier Filter:
   var TEXTFILTER_KEYWORDS = ["​", "👤", "‍", "‎"]
   Die Sonderzeichen in diesem Beispiel sind "unsichtbare" Zeichen.
   Es könnte aber auch ein Text wie "BMK" (Bürgermeister-Kandidat), "StR" (Stadtrat), "Nord" oder ähnliches sein.
2. Einen Text für die Buttons in der gleichen Reihenfolge vergeben
   In diesem Beispiel gibt es vier Buttons:
   var TEXTFILTER_BUTTONTEXTS = ["Alle anzeigen", "Bürgermeisterkandidaten 👤 anzeigen", "Südfrüchte anzeigen", "Runde Früchte anzeigen"]
3. Das / Die gewünschte(n) Filter-Sonderzeichen in der PARTEIEN-ANTWORTEN.CSV in der Zeile mit der langen Parteibeschreibung einfügen. (bis Version 0.6.0.2: die Zeile mit dem kurzen Parteinamen)
   In diesem Beispiel gibt es mehrere Zeichen zu einer Partei. Es werden also mehrere Filter angewendet.
   Aktuelles Vorgehen seit Version 0.6.0.3:
   Partei_Beschreibung: ; "Die Apfelpartei steht seit vielen Jahren für alle Angelegenheiten des Apfels. 👤 ​ ‎"
Partei_Beschreibung: ; "Warum ist die Banane krumm? [...] alle Belange der Bananen. ​ ‍"
   Altes Vorgehen bis Version 0.6.0.2:
   Partei_kurz: ; "👤 APPD ​ ‎"
Partei_kurz: ; "Bananen ​ ‍"
4. Die Erweiterung in der DEFINITION.JS aktivieren.
   var addons = ["extras/addon_results_textfilter_by_button.js"]
5. Fertig.

Einschränkungen

• Es ist ein einfacher Textfilter. Wenn das gesuchte Zeichen woanders vorkommnt, wird es auch dort eingeblendet / ausgeblendet. z.B. Suche nach "ana" findet "Bananenpartei", "Ananaspartei" und "Anarchistische Partei"
• Es ist keine UND bzw. ODER-Verknüpfung möglich.
• Das Addon löscht alle Ergebnisse des "Limit Results"-Filters

Erweiterung ⇨ Nur eine bestimmte Anzahl Ergebnisse (Parteien) am Anfang anzeigen

Funktion

Einstellungen

Datei öffnen (Link auf externen Github-Server)

1. Die Anzahl der Ergebnisse in der Variable intPartiesShowAtEnd angeben
   In diesem Beispiel werden am Ende zuerst drei Ergebnisse angezeigt. Beim Klick auf den Mehr-Knopf werden wieder drei Ergebnisse nachgeladen.
   var intPartiesShowAtEnd = 3;
2. Einen Text für die Buttons vergeben
   var TEXT_RESULTS_BUTTON_SHOW_MORE = "Weitere Ergebnisse zeigen"
var TEXT_RESULTS_BUTTON_SHOW_LESS = "Weniger Ergebnisse zeigen"
3. Die Erweiterung in der DEFINITION.JS aktivieren.
   var addons = ["extras/addon_limit_results.js"]
4. Fertig.

Einschränkungen

• Die Erweiterung berechnet die jeweiligen Werte anhand des vorherigen Werts. Damit kann sich die Ergebnisanzeige beim "Mehr" und "Weniger"-Klicken irgendwann ändern. z.B. 12 Ergebnisse insgesamt.
  Start: 5 + 5 = 10 + 5 = 12 (max.)
  12 (max.) - 5 = 7 - 5 = 02 - 5 = 01 (min.)
  01 (min.) + 5 = 6 + 5 = 11 + 5 = 12 (max.)
• Das Addon löscht alle Ergebnisse des "Text-Filters"

Erweiterung ⇨ Lieblingspartei am Anfang abfragen

Funktion

Einstellungen

Datei öffnen (Link auf externen Github-Server)

1. Die Willkommensnachricht bzw. Erklärung definieren
   var TEXT_ADDON_FAVORITE_PARTY_WELCOME_MESSAGE = "Bevor wir anfangen, eine kurze Frage:
Wenn morgen Wahl wäre, wen würdest du normalerweise wählen?"
2. Einen Text für den Button, wenn man die Frage überspringt
   var TEXT_ADDON_FAVORITE_PARTY_SKIP_DECISION = "Überspringen / Keine Antwort"
3. Farbe und Transparenz (auf einer Skala von 0.0 - 1.0 = 0 - 100%) des Ergebnisses
   var STYLE_ADDON_FAVORITE_PARTY_COLOR = "#fff"
var STYLE_ADDON_FAVORITE_PARTY_OPACITY = "0.8"
4. Die Erweiterung in der DEFINITION.JS aktivieren.
   var addons = ["extras/addon_favorite_party.js"]
5. Fertig.

Einschränkungen

• keine

Erweiterung ⇨ Link zur Ergebnisseite erzeugen

Funktion

Einstellungen

Datei öffnen (Link auf externen Github-Server)

1. Text im Button zum Erzeugen eines Links
   const PERMALINK_BUTTON_TEXT = "Ergebnis speichern";
2. 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 - oder leite ihn weiter, um dein Ranking mit anderen zu teilen.";
3. Wie viele Sekunden soll der Erklärtext (s.o.) angezeigt werden, bevor er wieder verschwindet?
   const PERMALINK_DESCRIPTION_DURATION = 8;
4. Text während die Seite lädt, wenn man sie über den Link aufruft.
   const LOADING_MODAL_TEXT = "Deine Ergebnisseite lädt...";
5. Die Erweiterung in der DEFINITION.JS aktivieren.
   var addons = ["extras/addon_permalink_to_personal_results.js"]
6. Fertig.

Einschränkungen

• keine

Erweiterung ⇨ Das erste Ergebnis aufklappen

Funktion

Einstellungen

Datei öffnen (Link auf externen Github-Server)

1. Anzahl der Ergebnisse zum sofortigen Anzeigen definieren, z.B. 1 oder 3 oder 10.
   const SHOW_DETAILLED_RESULTS_AT_END = 1;
2. Die Erweiterung in der DEFINITION.JS aktivieren.
   var addons = ["extras/addon_show_first_results.js"]
3. Fertig.

Einschränkungen

• keine

Erweiterung ⇨ Partei-Kontakt per E-Mail oder Telefon anbieten

Funktion

Einstellungen

Datei öffnen (Link auf externen Github-Server)

1. Optional: In der PARTEIEN.CSV einen unsichtbaren Text mit DATA-EMAIL einfügen, z.B.
   Partei_Beschreibung:;"Die Apfelpartei steht seit vielen Jahren für alle Angelegenheiten des Apfels. <span data-email='info@appelpartei.de'></span>"
2. Einstellen, ob ein Knopf für E-Mail und/oder Telefon angezeigt wird oder nicht (1/0)
   const CR_CONTACT_ACTIVE_EMAIL = 1
const CR_CONTACT_ACTIVE_TEL = 1
3. Beschriftung der Buttons, so wie sie unter der Ergebniszeile angezeigt werden.
   const CR_CONTACT_BUTTON_EMAIL = "Kontakt per E-Mail"
const CR_CONTACT_BUTTON_TEL = "Kontakt per Telefon"
4. E-Mailadresse und Telefonnummer - als Rückfalllösung, falls KEIN DATA-EMAIL-Tag in der PARTEIEN.CSV-Datei angegeben wurde.
   let CR_CONTACT_ADDRESS_EMAIL = "info@seite-von-meinem-kleinen-verein.de"
const CR_CONTACT_ADDRESS_TEL = "+49123456789"
5. E-Mail-Betreff für die Kontaktaufnahme: Wenn ein DATA-EMAIL-Tag in der CSV-Datei vorhanden ist.
   const CR_CONTACT_SUBJECT_EMAIL_DATATAG = "Mat-o-Wahl - Ich habe Interesse an einer Mitarbeit in eurem Verein / eurer Partei "
   E-Mail-Betreff für die Kontaktaufnahme: Rückfall-Lösung falls kein DATA-EMAIL-Tag in der CSV angegeben wurde.
   const CR_CONTACT_SUBJECT_EMAIL_DEFAULT = "Mat-o-Wahl - Ich habe Interesse an folgendem Verein / folgender Partei: "
6. E-Mailinhalt für die Kontaktaufnahme: Wenn ein DATA-EMAIL-Tag in der CSV-Datei vorhanden ist.
   let CONTACT_TEXT_EMAIL_DATATAG = "Hallo, \n\n\nich habe gerade den Mat-o-Wahl ausgeführt und bin bei euch gelandet. \n\nBitte ruft mich doch mal an oder schreibt mir, so dass ich euch besser kennen lernen kann."
   E-Mail-Betreff für die Kontaktaufnahme: Rückfall-Lösung falls kein DATA-EMAIL-Tag in der CSV angegeben wurde.
   let CONTACT_TEXT_EMAIL_DEFAULT = "Hallo, \n\n\nich habe gerade den Mat-o-Wahl ausgeführt und interessiere mich für einen bestimmten Verein. \n\nBitte ruft mich doch mal an oder schreibt mir, so dass ich den Verein besser kennen lernen kann."
7. Die Erweiterung in der DEFINITION.JS aktivieren.
   var addons = ["extras/addon_contacts_in_results.js"]
8. Fertig.

Einschränkungen

• Die letzte Version (02 / 2023) kann individuelle E-Mailadressen aus den DATA-EMAIL-Informationenen lesen aber noch keine individuellen Telefonnummern.

Erweiterung ⇨ Einbinden des Mat-o-Wahl per <iframe> und Größe ändern

Funktion

Einstellungen

Host-Datei öffnen (Link auf externen Github-Server)
Client-Datei öffnen (Link auf externen Github-Server)

1. Wir benötigen etwas Code auf der Hauptseite, welche auch den iframe lädt. Damit wird die _host-Datei geladen und eine Funktion, welche die Höhe des Mat-o-Wahl im iframe empfängt.

   <script src="https://www.seite-von-meinem-kleinen-verein.de/mat-o-wahl/extras/addon_check_iframe_resize_host.js"></script>

<iframe id="myIframe" src="https://www.seite-von-meinem-kleinen-verein.de/mat-o-wahl/index.html" style="min-width:100%;" loading="lazy">
</iframe>

<script type="text/javascript">
document.getElementById("myIframe").addEventListener( "load", function() { fnMatoWahlIframeEventListener("myIframe"); } );
</script>

2. Die (Client)-Erweiterung in der DEFINITION.JS aktivieren.

   var addons = ["extras/addon_check_iframe_resize_client.js"]

Einschränkungen

• Bitte prüfen Sie, ob nicht schon eine CSS height existiert.
• Der Mat-o-Wahl nutzt die Bootstrap CONTAINER-FLUID-class. Es könnte zu unschönen Rändern auf dem Smartphone kommen.
• Wenn man zur nächsten Frage springt, kann es (in seltenen Fällen) passieren, dass das Frame-Fenster die Frage teilweise wieder verdeckt. Das liegt daran, dass die Fragen und Antwort-Buttons kurz ausgeblendet werden (so dass man nicht aus versehen doppelt klickt). Damit reduziert sich auch die Frame-Höhe. Im Moment (Juli/2021) wird alle 250ms die Höhe geprüft. Der Bildlauf liegt bei 1,5 Sekunden. Mit dieser Einstellung ist meiner Meinung ein guter Kompromiss gefunden.

Noch Fragen offen?