Raw Source Toggle Dropdown

• Minified Source

emsspree / Wahlrecht.de-Balken

// ==UserScript==
// @name          Wahlrecht.de-Balken
// @namespace     https://openuserjs.org/users/emsspree
// @version       1.0
// @description   Balken für Wahlrecht.de
// @author        emsspree
// @copyright     2025, emsspree (https://openuserjs.org/users/emsspree)
// @license       0BSD
// @downloadURL   https://openuserjs.org/install/emsspree/Wahlrecht.de-Balken.user.js
// @updateURL     https://openuserjs.org/meta/emsspree/Wahlrecht.de-Balken.meta.js
// @match         https://www.wahlrecht.de/umfragen/
// @match         https://www.wahlrecht.de/umfragen/index.htm
// @icon          https://www.wahlrecht.de/favicon.png
// @grant         none
// ==/UserScript==

// ==OpenUserJS==
// @author emsspree
// ==/OpenUserJS==

(function() {
    'use strict';

    let tabelle;
    let zeilen;
    let tabellenkopf;
    let tabellenende;

    // // // // // // // // // // // // // // // //

    function paintBar(spalte, index) {
        spalte.classList.add(spalte.parentElement.id);
        spalte.innerHTML = '<div class="box"><div class="chart">' + spalte.innerHTML + "</div></div>";
        let chart = spalte.firstElementChild.firstElementChild;
        let bar = spalte.firstElementChild.firstElementChild.firstElementChild;
        bar.classList.add('bar');
        let prozentsatz = parseFloat(spalte.textContent.replace(',','.'));
        if (isNaN(prozentsatz)) {
            prozentsatz = 0;
            let multisatz = bar.innerHTML.replace('<br>', '|').replace(/[^0-9,|]/g, '').replace(',', '.').split('|');
            multisatz.forEach(function (satz) { prozentsatz = parseInt(prozentsatz) + ( parseInt(satz) || 0 ); });
        }
        chart.dataset.prozent = bar.dataset.prozent = prozentsatz;
        chart.dataset.beschriftung = bar.innerHTML.replace('<br>','\n').replace(/ \%/g,'\u200A%');
        bar.style.width = (2 * prozentsatz) + '%';
        bar.textContent = '\u200B';
    }

    function paintDiagrams(tabelle) {
        let spalten = tabelle.querySelectorAll('tbody td');
        spalten.forEach(paintBar);
    }

    function institutLink(anchor) {
        const newTarget = anchor.attributes.href.value.replace('.htm','');
        anchor.target = newTarget;
    }

    function formatiereZelleInZeileErhebung(zelle) {
        console.log(zelle);
        console.log(zelle.childNodes);
        if (zelle.parentElement.title.length > 0) { zelle.parentElement.title += `\nmit ${zelle.childNodes[0].textContent.split(' ')[2]} Befragten\ndurchgeführt ${zelle.childNodes[2].textContent}`; }
        zelle.innerHTML = zelle.innerHTML.replace(' • ', '<br>');
    }

    function formatiereZeileErhebung(tabelle) {
        let cells = tabelle.querySelectorAll('tfoot tr#erhebung td div');
        cells.forEach(formatiereZelleInZeileErhebung);
    }

    function mendTr(zeile, zeilenindex) {
        if (zeile.id.length === 0) { zeile.id = zeile.children[0].textContent.toLowerCase(); }
        switch (zeile.id.toLowerCase()) {
            case 'gru':
                break;
        }
        for (let sp = 0; sp < zeile.children.length; sp++) {
            let spalte = zeile.children[sp];
            if ((sp === 1) || (sp === 9)) { spalte.remove(); }
        }
        for (let sp = 0; sp < zeile.children.length; sp++) {
            let spalte = zeile.children[sp];
            if (spalte.textContent.length === 0) { spalte.textContent = '\u200B'; }
            if (sp === 0) {
                spalte.innerHTML = '<div class="bxx">' + spalte.innerHTML + '</div>';
            } else {
                if ((zeilenindex === 0) && (window.innerWidth > 1220)) { spalte.innerHTML = '<div>' + spalte.innerHTML.replace('<br>', ' ').replace('Bundes- tagswahl', 'Bundestagswahl') + '</div>'; }
                else { spalte.innerHTML = '<div>' + spalte.innerHTML + '</div>'; }
            }
            spalte.classList.remove('w');
            spalte.classList.remove('s');
        }
        if (zeilenindex === 0) {
            const anchors = zeile.querySelectorAll('a');
            anchors.forEach(institutLink);
        }
    }

    function mendTable(tabelle) {
        tabelle.parentElement.removeAttribute('style');
        zeilen = tabelle.querySelectorAll('tr');
        tabellenkopf = tabelle.querySelector('thead');
        tabellenende = document.createElement('tfoot');
        tabelle.append(tabellenende);
        zeilen.forEach(mendTr);
        tabellenende.append(zeilen[(zeilen.length - 1)]);
        tabelle.children[2].append(zeilen[1]);
    }

    function init() {
        tabelle = document.body.querySelector('table.wilko');
        if (tabelle) {
            mendTable(tabelle);
            paintDiagrams(tabelle);
            formatiereZeileErhebung(tabelle);
        }
    }

    // // // // // // // // // // // // // // // //

    window.addEventListener('load', init);

    document.head.querySelector('style').remove();

    // // // // // // // // // // // // // // // //

    let sheet = (function() {
        //   //   //   //   //   //   //
        let stylesheet = `
:root {
    --farbe-text: hsl(0deg 0% 0%);
    --farbe-seite: hsl(208deg 37% 93%);
    --farbe-neu: hsl(70deg 100% 70%);
    --farbe-wahl: hsl(90deg 0% 90%);
    --farbe-leicht: hsl(90deg 0% 99%);
    --farbe-hover: var(--farbe-seite);
    --farbe-partei-afd: hsl(198deg 90% 45%);
    --farbe-partei-bsw: hsl(350deg 50% 45%);
    --farbe-partei-cdu: hsl(0deg 0% 30%);
    --farbe-partei-fdp: hsl(55deg 100% 45%);
    --farbe-partei-frw: hsl(33deg 100% 45%);
    --farbe-partei-gru: hsl(90deg 50% 45%);
    --farbe-partei-lin: hsl(337deg 90% 50%);
    --farbe-partei-spd: hsl(15deg 100% 45%);
    --farbe-partei-son: hsl(0deg 0% 77%);
    --farbe-partei: var(--farbe-partei-son);
}
:root, body, body * { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
body, a, a:link, a:visited { color: var(--farbe-text); } a b, a strong, a { font-weight: inherit; }
table.wilko { transform: translateX(-0.5rem); box-sizing: border-box; width: 100%; margin: auto auto auto 1ch; padding: 0; border: 0px solid var(--farbe-leicht); border-collapse: collapse; border-spacing: 0; background: var(--farbe-leicht); font-size: 0.84rem; line-height: 1; vertical-align: top; }
table.wilko tbody, table.wilko thead, table.wilko tfoot { box-sizing: border-box; margin: auto; padding: 0px; }
table.wilko tfoot div { line-height: 1.5; }
table.wilko tr, table.wilko tbody tr, table.wilko thead tr, table.wilko tfoot tr { box-sizing: border-box; margin: auto; padding: 0px; background: transparent; }
table.wilko td, table.wilko tbody td, table.wilko thead td, table.wilko tfoot td { box-sizing: border-box; margin: auto; padding: 0px; }
table.wilko * { text-align: left; }
table.wilko tbody tr:hover { background: var(--farbe-hover); box-shadow: inset 0 0 0 4px var(--farbe-leicht); }
table.wilko tbody tr:hover td > div { box-shadow: inset 4px 0 0 0 var(--farbe-leicht); }
table.wilko tr td:last-child > div { box-shadow: inset 4px 0 0 0 var(--farbe-seite); }
table.wilko tr:hover td:last-child > div { box-shadow: inset 4px 0 0 0 var(--farbe-seite); }
table.wilko tbody tr th { vertical-align: top; }
table.wilko tbody tr th div { transform: translateY(3px) }
table.wilko th, table.wilko td { padding: 0px; vertical-align: top; }
table.wilko td { width: 11%; }
table.wilko td.dir { background: transparent; }
table.wilko td.dir span, .dat3, .dat4 { background: var(--farbe-neu); }
table.wilko tr th:last-child, table.wilko tr td:last-child { background: var(--farbe-seite); box-shadow: inset 4px 0 0 0 var(--farbe-seite); }
table.wilko td.dir span { position: relative; padding: 5px 6px; display: inline-block; transform: translateX(-6px); background: transparent; }
table.wilko td.dir span:after { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; transform: rotate(-4deg) skewX(-2deg); background: var(--farbe-neu); content: '' }
table.wilko tr > th:first-child { --w: 11ch; width: var(--w); max-width: var(--w); }
table.wilko tr > * > div { box-sizing: border-box; padding: 5px; }
table.wilko thead tr:last-child > * > div { padding-bottom: 10px; }
table.wilko tr > :first-child > div { padding-left: 0.5em; }
table.wilko tr > :last-child > div { padding-right: 0.4em; }
table.wilko div.chart { display: flex; justify-content: flex-start; }
table.wilko tr div.chart::after { position: relative; top: 3px; height: 1em; z-index: 2; padding: 0px 0px 0px 0.5ch; border-radius: 5px; content: attr(data-beschriftung); text-align: right; white-space: pre; }
table.wilko div.bar { min-height: 1.7em; }
table.wilko tr div.bar, table.wilko #son div.bar { --farbe-partei: var(--farbe-partei-son); background-color: var(--farbe-partei); box-shadow: 0 -4px var(--farbe-partei), 0 4px var(--farbe-partei); }
table.wilko #afd div.bar { --farbe-partei: var(--farbe-partei-afd); }
table.wilko #bsw div.bar { --farbe-partei: var(--farbe-partei-bsw); }
table.wilko #cdu div.bar { --farbe-partei: var(--farbe-partei-cdu); }
table.wilko #fdp div.bar { --farbe-partei: var(--farbe-partei-fdp); }
table.wilko #frw div.bar { --farbe-partei: var(--farbe-partei-frw); }
table.wilko #gru div.bar { --farbe-partei: var(--farbe-partei-gru); }
table.wilko #lin div.bar { --farbe-partei: var(--farbe-partei-lin); }
table.wilko #spd div.bar { --farbe-partei: var(--farbe-partei-spd); }
table.wilko td .box { position: relative; }
table.wilko td:hover .box::after { content: '50' '\\200A' '%'; font-size: 0.72em; position: absolute; top: 8px; right: 2px; height: 1em; z-index: 1; color: hsl(0deg 0% 0% / 0.333); }
table.wilko td:last-child:hover .box::after { content: none; }
table.wilko thead tr:first-child div { padding-top: 2em; padding-bottom: 0em; }
table.wilko tfoot tr:last-child div { position: relative; margin-top: 2em; padding-top: 0.5em; padding-bottom: 1em; }
table.wilko tfoot tr:last-child td:not(:first-child) div::before { content: ''; position: absolute; z-index: 1; top: -2ex; right: 0; left: 5px; height: 2ex; background-color: var(--farbe-hover); }
table.wilko caption { font-size: 1rem; line-height: 1.44; margin: auto; }
table.wilko caption > * { margin-top: 1em; }
table.wilko caption :is(p, p > span) { text-align: center; text-wrap: balance; }
table.wilko caption p#disclaimer > span { display: block; max-width: 100ch; margin: auto; }
table.wilko caption :is(dt, dd) { text-wrap: balance; max-width: 24ch; }
table.wilko caption dt { margin-top: 0; margin-bottom: 0; }
table.wilko caption dd { margin-inline-start: 0; margin-inline-end: 4ch; }
table.wilko caption #abkuerzungen { display: flex; justify-content: center; }
table.wilko caption #abkuerzungen > div { margin: unset; }
.b, .ib, .arc, .lig, .lisg, ._navi, .lir { font-weight: bold; }
.di, .dir { font-weight: inherit; }
`;
        //   //   //   //   //   //   //
        let style = document.createElement("style");
        style.appendChild(document.createTextNode(stylesheet.replace(/ {2,}/g, ' ')));
        document.head.appendChild(style);
        return style.sheet;
        //   //   //   //   //   //   //

    })();

    // // // // // // // // // // // // // // // //

})();