Module per PHP ein- und ausblenden / Astroid-Framework

winterman · 24. Februar 2024

Hallo zusammen,

ich stehe vor einem verzwickten Problem, vielleicht kann mir ja jemand helfen...

Für einen befreundeten Musikverein erstelle ich die Homepage mit J5 neu.

Dazu habe ich das Astroid-Framework verwendet.

Mit Astroid habe ich eine Sektion mit zwei Spalten erstellt. Jede dieser Spalten ist jeweils eine selbstgewählte Modulposition zugewiesen. "naechster_termin" und "naechste_probe".

Auf diesen Modulpositionen habe ich jeweils ein Modul vom Typ "Eigenes Modul" veröffentlicht. Einmal auf der Modulposition "naechster_termin" sowie "naechste_probe".

Soweit so gut.

Auf den Modulpositionen möchte ich jeweils den nächsten Auftritt und die nächste Probe ausgeben. Dies mache ich über ein eigenes PHP-Script, welches die Daten per API von einer externen Anwendung abruft.

Funktioniert auch.

Das ist die Ausgabe der php-Dateien

PHP-Ausgabe Nächster Termin

PHP-Ausgabe Nächste Probe

Die Ausgabe im Quelltext sieht so aus:

Auswahl-Quelltext index.php

Wenn nun in der externen Anwendung kein aktueller Termin oder keine nächste Probe eingepflegt worden ist, möchte ich nicht stumpf von dem jeweiligen php-Script einen entsprechenen Text ausgeben lassen, sondern das entsprechene Modul nicht anzeigen lassen.

Wenn nun kein Auftritt hinterlegt ist, sieht der Quelltext der index.php so aus:

Auswahl-Quelltext index.php

Die Ausgabe des ersten DIV's (Nächster Auftritt) ist leer, es belegt aber trotzdem durch die Astroid-Spalte den Platz und in der zweiten Spalte veröffentlichte Modul (Nächte Probe" belegt den Platz.

Aber über meine PHP-Scripte habe ich ja keinen Zugriff auf die Android-Sections...

Hat jemand eine Idee, wie ich das Problem lösen könnte?

Elwood · 24. Februar 2024

Zitat von winterman

Aber über meine PHP-Scripte habe ich ja keinen Zugriff auf die Android-Sections...

Du kannst doch jede Section, Row, Columns und Element (Modul) mit einer Benutzerdefinierten ID ansprechen:

winterman · 25. Februar 2024

Hallo Elwood: Vielen Dank für deine Antwort!

Die Möglichkeit hatte ich noch garnicht in Betrach gezogen.

Ich habe jetzt in Astroid beiden Elementen jeweils eine Benutzerdefinierte ID gegeben.

Das ist die Quelltext-Ausgabe:

Spoiler anzeigen

Leider liegt die Element-ID ja oberhalb der PHP-Scipte, so dass ich die ID alleine mit den Scripten nicht mit "nicht ausgeben lassen" kann.

Oder habe ich dich falsch verstanden?

winterman · 25. Februar 2024

Hallo zusammen,

ich habe jetzt nochmal rumprobiert.

Meine Idee war das ich eine Astroid-Sektion anlege. Dort muss ich ja mit dem Grid-Layout die Spaltenbreite angebe.

Um die komplette Breite zu nutzen habe ich col-12 verwendet.

Dann habe ich ein neues Modul auf einer eigenen Modulposition erstellt,.

Dort habe ich ein Modul mit eigenem Layout veröffentlicht, was die Inhalte aus diesmal nur einer PHP Datei übernimmt.

In meiner PHP-Datei steht folgendendes:

Spoiler anzeigen

Wenn ich beide Ausgaben in eine PHP-Datei packe, kann die kompletten DIV's ausblenden (lassen), wenn es dort keine Inhalte gibt.

Astroid macht daraus

Spoiler anzeigen

Leider werden so die beiden DIV'S "Nächster Termin" und "nächste Probe" untereinander statt nebeneinander dargestellt...

Hat noch jemand eine Idee wie ich das ändern kann.

WM-Loose · 25. Februar 2024

Dazu bedarf es keiner anderen Idee, denn es ist mit Astroid nicht möglich.

winterman · 25. Februar 2024

Hallo WM-Loose: Vielen Dank fü deine Antwort! Damit kann ich arbeiten.

Ich hatte auch schon darüber nachgedacht, das ganze mit zwei Modulen zu machen und mit Javascript die Astroid-Spalte dann auszublenden, wenn dessen DIV-Klasse keine Ausgabe hat.

Mit Javascript kenne ich mich nur leider garnicht aus. Mal sehen...

WM-Loose · 25. Februar 2024

Um mit JavaScript die Astroid-Spalte auszublenden, wenn das DIV mit einer bestimmten Klasse keine Ausgabe hat, kannst du das folgende Beispiel als Ausgangspunkt verwenden. In diesem Beispiel gehe ich davon aus, dass die DIV-Klasse "astroid-content" ist. Passe es entsprechend an, wenn deine tatsächliche Klasse eine andere ist.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Astroid Column with JavaScript</title>
</head>
<body>

<!-- Hier ist das HTML-Struktur-Beispiel mit einer Astroid-Spalte -->
<div class="astroid-column">
    <div class="astroid-content">
        <!-- Hier befindet sich der tatsächliche Inhalt der Astroid-Spalte -->
        <!-- Füge hier den Inhalt oder die Bedingung hinzu, um zu überprüfen, ob der Inhalt vorhanden ist oder nicht -->
    </div>
</div>

<!-- Dein JavaScript-Code -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Finde das Element mit der Klasse "astroid-content"
        var astroidContent = document.querySelector('.astroid-content');

        // Überprüfe, ob das Element Inhalt hat
        if (!astroidContent.innerHTML.trim()) {
            // Wenn kein Inhalt vorhanden ist, blende die Astroid-Spalte aus
            var astroidColumn = astroidContent.closest('.astroid-column');
            if (astroidColumn) {
                astroidColumn.style.display = 'none';
            }
        }
    });
</script>

</body>
</html>

Alles anzeigen

In diesem Beispiel wird das Skript aufgerufen, wenn das DOM vollständig geladen ist. Es überprüft dann, ob das Element mit der Klasse "astroid-content" keinen Inhalt hat (über innerHTML.trim()). Wenn kein Inhalt vorhanden ist, wird die zugehörige Astroid-Spalte (durch closest('.astroid-column')) ausgeblendet.

Du könntest die Klasse entsprechend deiner tatsächlichen Struktur anpassen. Beachte auch, dass dies auf der Annahme basiert, dass der Inhalt durch das innerHTML-Attribut überprüft werden kann. Wenn die Überprüfung komplexer ist, musst du möglicherweise die Bedingung anpassen.

Vielleicht hilft es dir weiter aber ich bin an dieser Stelle raus.

winterman · 25. Februar 2024

Hallo WM-Loose: MIt ein paar kleinen Anpassungen funktioniert es nun.

Vielen Dank!

Javascript