Rechnende Tabellen

Diese Tabellen machen das, was man von EXEL seit langem kennt. Man kann mit ihnen online z.B. auf einer Website Berechnungen anstellen. In unserem Beispiel ist es eine Tabelle die Zutaten für Rezepte berechnet.

Hier kommen jetzt einige Tabellen sowohl alleine als auch in ein Popup integriert.

Bei allen muss man genau darauf achten, dass man alle Scripte und Css sorfältig an die richtige Stelle platziert.

Hier geht´s zu einer Musterseite

1. Tabelle(n) in Popup

Das besondere an dieser Kombination ist, dass man beliebig viele auf einer Seite einstellen kann.

Script no.1

Das folgende Script ist notwendig, damit die DIVI-Button Module die Popups steuern können. Dazu muss der Button die entsprechende Klasse bekommen.

Das Script platziert man am besten in das Child-Theme in die script.js oder in eine eigens dafür angelegte js-datei. Diese muss man aber unbedingt in der functions.php verbinden.

document.addEventListener("DOMContentLoaded", () => {
    // Divi-Button für Popup 1
    const popup1Button = document.querySelector(".open-popup1");
    if (popup1Button) {
        popup1Button.addEventListener("click", (e) => {
            e.preventDefault(); // Verhindert das Standardverhalten des Buttons
            openPopup('popup1'); // Ruft die Funktion zum Öffnen des Popups auf
        });
    }

    // Divi-Button für Popup 2
    const popup2Button = document.querySelector(".open-popup2");
    if (popup2Button) {
        popup2Button.addEventListener("click", (e) => {
            e.preventDefault();
            openPopup('popup2');
        });
    }

    // Divi-Button für Popup 3
    const popup3Button = document.querySelector(".open-popup3");
    if (popup3Button) {
        popup3Button.addEventListener("click", (e) => {
            e.preventDefault();
            openPopup('popup3');
        });
    }
});

Als nächstes kommt der Inhalt des Popups.

In diesem Popup sind drei rechnende Tabellen integriert

Man erkennt die durch die id=“calculator3″

Dieses div-tag kann man natürlich durch jeden beliebigen anderen Inhalt austauschen.

<div id="popup1" class="popup" onclick="outsideClick(event, 'popup1')">
    <div class="popup-content"> <span class="close" onclick="closePopup('popup1')">×</span>
        <h2>Baguettekalkulator für Flûtes, das sind die dünnen schlanken Baguettes</h2>
     <p class="oben-text">Die Grundmenge ist für vier dünne Flûtes berechnet.</p>
        <div id="calculator1"></div>
     </div>
</div>
 
 
<div id="popup2" class="popup" onclick="outsideClick(event, 'popup2')">
    <div class="popup-content"> <span class="close" onclick="closePopup('popup2')">×</span>
        <h2>Rezeptkalkulator 2</h2>
        <div id="calculator2"></div>
    </div>
</div>
<div id="popup3" class="popup" onclick="outsideClick(event, 'popup3')">
    <div class="popup-content"> <span class="close" onclick="closePopup('popup3')">×</span>
        <h2>Rezeptkalkulator 3</h2>
        <div id="calculator3"></div>
    </div>
</div>

Das Script, in dem sind auch die rechnenden Tabellen enthalten.

Wenn man in den Tabellen was ändern oder ergänzen möchte kopiert man sich diese am besten in ein Programm wie Dreamweaver, dort ist es wesentlich übersichtlicher, als wenn man den Code direkt im Divi Code Modul verändern möchte.

<script>// JavaScript Document
function openPopup(popupId) {
    const popup = document.getElementById(popupId);
    popup.style.display = 'block';
    setTimeout(() => popup.classList.add('open'), 10); // Animation aktivieren
    initializeCalculator(popupId);
}

function closePopup(popupId) {
    const popup = document.getElementById(popupId);
    popup.classList.remove('open');
    setTimeout(() => (popup.style.display = 'none'), 400); // Animation abwarten
}

function outsideClick(event, popupId) {
    const popupContent = document.querySelector(`#${popupId} .popup-content`);
    if (!popupContent.contains(event.target)) {
        closePopup(popupId);
    }
}

function initializeCalculator(popupId) {
    const containerId = `calculator${popupId.replace('popup', '')}`;
    const container = document.getElementById(containerId);

    const config = {
        popup1: {
            startQuantity: 4,
            startValues: [
                { ingredient: "Mehl", perBread: 125 },
                { ingredient: "Wasser", perBread: 85 },
                { ingredient: "Hefe", perBread: 1 },
             { ingredient: "Sauerteig", perBread: 12.5 },
                { ingredient: "Salz", perBread: 2.25 },
            ],
        },
        popup2: {
            startQuantity: 3,
            startValues: [
                { ingredient: "Zucker", perBread: 200 },
                { ingredient: "Butter", perBread: 150 },
                { ingredient: "Milch", perBread: 100 },
                { ingredient: "Ei", perBread: 50 },
            ],
        },
        popup3: {
            startQuantity: 5,
            startValues: [
                { ingredient: "Kakao", perBread: 50 },
                { ingredient: "Schokolade", perBread: 100 },
                { ingredient: "Sahne", perBread: 200 },
                { ingredient: "Vanille", perBread: 10 },
            ],
        },
    };

    const currentConfig = config[popupId];

    const tableRows = currentConfig.startValues
        .map(
            (row) => `
            <tr>
                <td width="300px">${row.ingredient}</td>
                <td><input type="number" value="${row.perBread}" oninput="calculate('${popupId}', this, 'perBread')"></td>
                <td><input type="number" value="${row.perBread * currentConfig.startQuantity}" oninput="calculate('${popupId}', this, 'total')"></td>
            </tr>
        `
        )
        .join("");

    container.innerHTML = `
        <label class="AnzahlBrote" for="quantity-${popupId}">Anzahl Brote im Grundrezept:<br></label>
        <input type="number" id="quantity-${popupId}" value="${currentConfig.startQuantity}" onchange="updateQuantities('${popupId}')">
        <table id="ingredients-table-${popupId}">
            <thead>
                <tr>
                    <th>Zutat</th>
                    <th>Menge (pro Brot)</th>
                    <th>Menge (gesamt)</th>
                </tr>
            </thead>
            <tbody>
                ${tableRows}
            </tbody>
        </table>
        <button class="btn-zutat" onclick="addIngredient('${popupId}')">Zutat hinzufügen</button>
        <br><br>
        <label class="divider" for="divider-${popupId}">Wieviele Brote willst Du aus der Teigmenge backen?<br></label>
        <input type="number" id="divider-${popupId}" value="${currentConfig.startQuantity}" onchange="calculateTeiglingWeight('${popupId}')">
        <p class="teigling">Teigling-Gewicht: <span id="teigling-weight-${popupId}">0</span> g</p>
    `;

    updateQuantities(popupId);
}

function calculate(popupId, element, type) {
    const row = element.parentNode.parentNode;
    const quantity = parseFloat(document.getElementById(`quantity-${popupId}`).value) || 1;

    const perBreadInput = row.children[1].children[0];
    const totalInput = row.children[2].children[0];

    if (type === 'perBread') {
        const perBread = parseFloat(perBreadInput.value) || 0;
        totalInput.value = (perBread * quantity).toFixed(2);
    } else if (type === 'total') {
        const total = parseFloat(totalInput.value) || 0;
        perBreadInput.value = (total / quantity).toFixed(2);
    }

    calculateTeiglingWeight(popupId);
}

function updateQuantities(popupId) {
    const quantity = parseFloat(document.getElementById(`quantity-${popupId}`).value) || 1;

    // Aktualisiere den Wert von "Teilen durch", wenn die Anzahl Brote geändert wird
    const dividerInput = document.getElementById(`divider-${popupId}`);
    dividerInput.value = quantity;

    const rows = document.querySelectorAll(`#ingredients-table-${popupId} tbody tr`);

    rows.forEach(row => {
        const perBreadInput = row.children[1].children[0];
        const totalInput = row.children[2].children[0];

        const perBread = parseFloat(perBreadInput.value) || 0;
        totalInput.value = (perBread * quantity).toFixed(2);
    });

    calculateTeiglingWeight(popupId);
}

function addIngredient(popupId) {
    const table = document.querySelector(`#ingredients-table-${popupId} tbody`);
    const newRow = document.createElement('tr');

    newRow.innerHTML = `
        <td><input type="text" placeholder="Neue Zutat"></td>
        <td><input type="number" value="0" oninput="calculate('${popupId}', this, 'perBread')"></td>
        <td><input type="number" value="0" oninput="calculate('${popupId}', this, 'total')"></td>
    `;

    table.appendChild(newRow);
}

function calculateTeiglingWeight(popupId) {
    const rows = document.querySelectorAll(`#ingredients-table-${popupId} tbody tr`);
    const divider = parseFloat(document.getElementById(`divider-${popupId}`).value) || 1;

    let totalWeight = 0;

    rows.forEach(row => {
        const totalAmount = parseFloat(row.children[2].children[0].value) || 0;
        totalWeight += totalAmount;
    });

    const teiglingWeight = divider !== 0 ? (totalWeight / divider).toFixed(2) : 0;
    document.getElementById(`teigling-weight-${popupId}`).innerText = teiglingWeight;
}
</script>

Fehlt nur noch das stylende CSS

<style>
  h2 {
    color: #fff!important;
}
.oben-text{
 color:#fff;
 font-size:20px;
  line-height:2;
}
button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
.btn-oben {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    color: #fff;
}
.popup {
  padding-top:5%;
    display: none;
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    transition: bottom 0.4s ease-in-out;
}
.popup.open {
    display: block;
    bottom: 0;
}
.popup-content {
    background-color:#b3aa97 ;
    margin: 5% auto;
    position: relative;
    width: 80%;
    max-height: 85%; /* Beschränkt die Höhe des Popups */
    overflow-y: auto; /* Scrollleiste aktivieren, wenn der Inhalt zu hoch wird */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.4s ease-out;
}
/* Optional: Stil für die Scrollbar anpassen */
.popup-content::-webkit-scrollbar {
    width: 8px; /* Breite der Scrollbar */
}
.popup-content::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Farbe des Scrollbars */
    border-radius: 10px; /* Abgerundete Scrollbar */
}
.popup-content::-webkit-scrollbar-thumb:hover {
    background-color: #999; /* Hover-Farbe der Scrollbar */
}
@keyframes slideIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
.close {
    float: right;
    font-size: 50px;
    cursor: pointer;
    color: #fff;
}
  .close:hover{
    
    font-size: 60px;
    cursor: pointer;
    color: red;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff!important;
    font-size: 20px;
}
th {
    background-color: rgba(0, 0, 0, 0.5);
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    color: #fff!important;
}
input[type="number"], input[type="text"] {
    width: auto;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
}
.AnzahlBrote {
    color: #fff;
    font-size: 20px;
}
.btn-zutat {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    margin: 0;
    border-radius: 10px;
    font-size: 20px;
  border-radius: 10px;
    border: 2px solid #fff;
}
.divider {
    padding: 10px 18px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    margin-left: 0;
    border-radius: 10px;
    border: 2px solid #fff;
    font-size: 20px;
}
.teigling {
    width: 30%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 16px!important;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
    border: 2px solid #fff;
  
}
#quantity-popup1, #divider-popup1, #quantity-popup2, #divider-popup2, #quantity-popup3, #divider-popup3, #quantity-popup4, #divider-popup4 {
    background-color: rgba(0, 0, 0, 0.3);
    margin-top: 20px;
  margin-bottom: 15px;
    width: 30%;
  border-radius: 10px;
    border: 2px solid #fff;
  padding: 10px 16px!important;
}</style>

Zusatzinfos

folgender Code wird benötigt, wenn man die Popups z.b. mit einem Link im Text öffnen möchte

Hier geht es zu <a href="javascript:void(0)" onclick="openPopup('popup1')">Popup - 1</a>, und hier geht es zu<a href="javascript:void(0)" onclick="openPopup('popup2')"> Popup - 2</a>

Wenn man ein Popup mit einem Menu-Punkt im DIVI-Menu, egal ob standard oder ein selbstgebautes aus dem Builder, ist es erforderlich dem Menu-Punkt die entsprechende Klasse zuzuweisen.