Popup mit sweet-alert.js

[jensgulow]

Hallo,

das Thema mit popup-notifications interessiert mich seit längerem. Nur bisher ist mir keine funktionierende Version untergekommen.

Was habe ich probiert?:

Aktuell habe ich eine php-Datei bei mir in einer "Unterseite" der CV, welche die aktuelle Pollenbelastung darstellt (wegen dem lieben Kleinen, der allergisch ist) (s. screenshot). Die entsprechende Datei ist auch als Anhang dabei
(das if (1==1){} ist nur drin, damit ich den Erfolg der Implementierung immer sehen kann).

Wenn eine bestimmte Pollenbelastung für Birkenpollen vorliegt (ausgewertet über das dann erscheinende Bildchen) soll eine popup-notification erfolgen - UND ZWAR AUF DER HAUPTSEITE.

Dafür habe ich sweetAlert heruntergeladen und ein wenig angepasst.

Wenn ich die php-Datei im Browser direkt aufrufe, dann funktioniert alles so wie ich gerne möchte (s. screenshot)

Nur beim Aufruf in der CV passiert .... nichts.

Deshalb meine Frage:

Wo müsste man Anpassungen vornehmen, damit das ggf. in der CV auch funktioniert?

Da fehlt mir der Ansatzpunkt.

[Chris M.]

Wie bindest Du die PHP in die Seite ein?

Per iframe? Dann kann das nicht nicht funktionieren - denn das Popup müsste dazu ja aus dem iframe ausbrechen...

Die richtige Lösung wäre das als CometVisu Plugin zu implementieren.

[jensgulow]

OK, das leuchtet ein. Aber die Sache mit dem plugin ist mir aktuell doch 2-3 Stufen zu hoch. Da müsste ich mich erst einmal recht genau einlesen ... und auf ein wenig mehr Freizeit hoffen. Wäre ggf. das gauge-plugin eine gute Quelle zum "Spicken" ?? Oder was wäre ein guter Ausgangspunkt?


PS: Eine Frage ergibt sich für mich aus Chris' Antwort noch: Wieso wird dann eigentlich das popup nicht im entsprechenden iframe der CV angezeigt?

[jensgulow]

So, ein bisschen weiter bin ich gekommen:

Ich habe mir mal in der bekannten Struktur ein neues "popup-plugin" geschrieben. Es funktioniert in Grundzügen bereits folgendermassen:

Wird eine bestimmte GA getriggert, dann erscheint ein Popup mit selbst zu definierendem Inhalt. Wird die GA auf "0" zurückgesetzt, dann verschwindet auch das popup wieder. Grundlage ist die Bibliothek sweetAlert.

Dokumentation alller möglicher Beeinflussungsmöglichkeiten der Darstellung des popup stehen auch auf der Seite !

Die entsprechenden Dateien sind im Anhang.

Einbindung habe ich auf einer Extra-Seite "Popups" in der visu_config gemacht, welche jedoch nicht dargestellt wird (d.h. sie dient nur der Hinterlegung des Codes).

Einbindung in die CV in der visu_config wie folgt:

    <plugins>
...
<plugin name="popup"/>
...
    </plugins>
...
      <page name="Popup" visible="false">
              <popup title="ACHTUNG" text="Test erfolgreich" type="warning" confirmButtonColor="#FF8000">
            <address transform="DPT:1.001" mode="write">1/1/30</address>
            </popup>
      </page>

Ergebnis siehe screenshot.

Das ist natürlich erst ein Anfang, denn:

- die GA wird aktuell noch nicht zurückgesetzt, wenn ich das popup schließe (sollte mit templateEngine.visu.write gehen - aber wie ???)

- aktuell schließen sich alle popups, wenn auf einer GA eine "0" gesendet wird - das muss man wohl über die "id" irgwndwie fixen - aber wie ???


Also, Hilfe und Verbesserungen sind immer gerne willkommen. Ich bin erst mal ein paar Tage in Köln (tätäää !!!). Mal sehen was in der Zwischenzeit so mit dem "Grundkonstrukt" so passiert.

[mivola]

Hi Jens,

bist du mit dem Popup Plugin/Widget schon weiter gekommen? Ich suche nämlich aktuell auch so eine Funktionalität...

VG
Micha

[jensgulow]

Hallo mivola,
leider nein, denn nach meinem update auf die "neuere" Version der CV mit eingearbeitetem "stringify" der plugins komme ich mit meinem bisherigem code nicht weiter und bin noch nicht dahinter gestiegen, wie ich das mit der aktuellen version umsetze. Wenn mal wieder Zeit ist werde ich einen neuen Versuch starten...