Popover, wie funktioniert es in der messageSidebar?

  • Ich suche eine Weile nach der Popover-Funktion und wie das Forum dieses zum Beispiel bei dem Username in der messageSidebar macht.

    Das einzige was ich gefunden habe an brauchbaren Code ist das hier aus dem Template "messageSidebar":

    Smarty
    <span class="username"{if $enableMicrodata} itemprop="name"{/if}>{$userProfile->username}</span>

    Ich habe mir auch die Entwickler-Dokumentation angeschaut. Aber ich finde die entsprechenden Stellen nicht in der aktuellen Foren-Version...

    Wo sind denn die ganzen Klassen und Template-Schnippsel versteckt, um das Popover beim Username zu generieren?

    Es müssen ja irgendwo genau diese


    Sachen verbaut sein. Ich finde das aber nicht. Ich wollte mir das mal anschauen und für meine Zwecke quasi nachbauen, da ich auch Texte, die ich in der messageSidebar hinzugefügt habe, mit einem schönen Popover-Fenster erweitern wollte.

    Kann mir einer bitte die ganzen Stellen und Zusammenhänge mal hier zeigen?


    Es geht also um dieses Popover:

    Wie macht dass das Forum? Wo ist der Code versteckt?

    Ich finde weder das entsprechende Template, noch die Popover-Klasse, die die Informationen sammelt und auch die Action-Klasse finde ich nicht.

    Vielen Dank schon mal...

    Gruß
    Markus

    Mitglied aus dem Kartell...

    Das Kartell

    Edited once, last by MDMAN (September 6, 2023 at 9:57 AM).

  • Ok... ich zeige mal was ich bis dato habe:

    Das Template:

    Dieses wird so abgefeuert:

    Die Popover-Klasse sieht wie folgt aus:

    Die dazugehörige Action-Klasse:

    Die Daten werden durch einen EL als JSON-serialisiertes Array abgespeichert in die WCF-User-Tabelle in die Spalte userAwardsMedalsJSONData

    Die ToolTip-Funktion geht soweit, aber das Popover will einfach nicht. Was mache ich denn da falsch?

    Wäre ja schön, wenn einer mir mal wenigstens sagen könnte, wo ich das Popover für den Benutzernamen finden kann... Auch das entsprechende Template dazu. Ich habe es nach wie vor nicht gefunden.

    Warum geht denn mein Code noch nicht? Wo ist der Fehler oder wo fehlt was?

  • Man irgendwie bekomme ich immer diese Fehlermeldung in der Konsole, aber warum?

    Quote

    Uncaught (in promise) Error: Load failed: wcf/lib/data/dasKartellUserAwards/Popover/dasKartellUserAwardsMessageSidebarPopover: https://www.gerdelmann.de/js/wcf/lib/dat…js?t=1694443943
    at HTMLScriptElement.<anonymous> (require.js:706:1)

    Verstehe ich nicht... Die Datei muss doch gefunden werden... oder fehlt da noch irgendwas?


    Kann mir da bitte mal einer Helfen?


    Wäre wirklich schön, wenn ich das mit diesem Popover hinbekommen könnte. Was mache ich denn da falsch? Wer kann mir denn die Fragen aus der Nachricht #1 hier beantworten?


    Vielen Dank schon mal...


    Hier noch mal das aktuelle Template:

    Hier mal die Popover-Grundklasse:

    Hier die dazugehörige Action-Klasse:


    Wo ist denn hier der Fehler?


    Danke schon mal für die Hilfe...

  • Julian Pfeil

    Wie macht das denn das Forum bei dem Benutzernamen? Wo finde ich denn die ganzen dazugehörigen Dateien? Das Template und die PHP-Klassen. Ich habe irgendwie alles schon durchsucht... Aber ich finde das nicht. Dann kann ich mir das ja mal anschauen... Was muss denn dort rein? Oder wie muss ich es im Template denn deklarieren? Oder ist es an der falschen Stelle eingebaut der Code:

    HTML
    <script>
    require(['wcf/lib/data/dasKartellUserAwards/Popover/dasKartellUserAwardsMessageSidebarPopover'], function(ControllerPopover) {
    ControllerPopover.init(
    { className: 'dasKartellUserAwardsMessageSidebarPopover', dboAction: 'wcf\\data\\dasKartellUserAwards\\Popover\\dasKartellUserAwardsMessageSidebarPopoverAction', identifier: 'com.woltlab.wcf.userAwards.medaille.popover' }
    ); 
    });
    
     </script>

    ?

  • Ich suche mir echt nen Wolf... Ich habe in der Zwischenzeit nun mir die Templates thread-tpl und postXXX.tpl alle angeschaut und finde einfach keinen Hinweis, wie das mit diesem Popover vom Username gemacht wird.

    Dann habe ich mir ALLE EventListener - aus der Datenbank-Tabelle die abgefeuert werden angeschaut. Dachte, vielleicht wird ja über ein Event ein weiteres Template über einen EventListener "abgefeuert" auch nichts.

    Dann habe ich mir in der DB alle Template-Listener angeschaut die eventuell in Frage kommen könnten... Da gibt es zwar welche, die in der messageSidebar abgefeuert werden, aber auch in diesen finde ich keine Hinweise auf das "Popover".


    Ich bin jetzt echt ratlos, wie dieses Popover in der normalen ThreadPage bzw. im Bereich der messageSidebar beim Username abgefeuert bzw. initiiert wird.


    Hat keiner noch einen kleinen Hinweis, wo ich noch schauen könnte? Oder kann es mir irgendwie erklären, warum das bei mir und meinem Code (siehe vorherige Posts hier) nicht funktioniert...


    Vielen Dank schon mal...

  • Ja und nein.


    Ich suche das entsprechende Template dazu und wie es in dem Template messageSidebar quasi aufgerufen wird...

    Damit ich es quasi mir anschauen kann, wie es funktioniert und damit ich es für meine Zwecke quasi nachbauen kann... Bzw. frage ich halt, wie baue ich das für meine Zwecke. Das habe ich noch nicht so ganz verstanden.

  • Ach...

    Da kann ich ja lange suchen...

    Ich muss

    ControllerPopover.init({ className: 'dasKartellUserAwardsMessageSidebarPopover', dboAction: 'wcf\\data\\dasKartellUserAwards\\Popover\\dasKartellUserAwardsMessageSidebarPopoverAction', identifier: 'com.woltlab.wcf.userAwards.medaille.popover' });


    Das quasi als JS-Datei in den JS-Ordner ablegen und dann die Datei quasi mit Require laden im Template?


    EDIT:


    Danke erstmal für die Informationen.

    Nun habe ich folgenden Fehler in der Konsole erhalten:

    Hier mal das Template:

    Hier die JS-Klasse, zu finden im Ordner: "js/WoltLabSuite/Forum/Controller/Thread/DasKartellUserAwardsMessageSidebarPopover.js"

    Hier die Popover Grund-Klasse: lib/data/dasKartellUserAwards/Popover/dasKartellUserAwardsMessageSidebarPopover.class.php

    hier die Action-Klasse: lib/data/dasKartellUserAwards/Popover/dasKartellUserAwardsMessageSidebarPopoverAction.class.php


    Wo ist denn hier der Fehler? Ich verstehe auch nicht, warum ich im Template schon alles schreibe, was in der .JS-Klasse quasi noch mal geschrieben wird...

    Des Weiteren weiß ich nicht, wie man in der Action-Klasse vom Popover dann eine andere Funktion aufrufen kann...

    Wer kann mir da noch mal kurz über die Schulter schauen?

    Also im Template wird über den Require-Eintrag im Tag "Script" die .JS-Klasse aufgerufen. Diese wiederrum lädt die PHP-Grund-Klasse. In der PHP-Grundklasse wird die Action-Klasse bestimmt. Die Aktion-Klasse mit der entsprechenden Funktion lädt die Informationen und gibt diese wieder per return und Array zurück. Und es wird das entsprechende Template für das Popover definiert.

    Soweit denke ich sollte es gehen.

    Die Frage ist nun, wie definiere ich denn welche Action aufgerufen wird? Was muss ich an der Stelle, wo das Popover dargestellt werden soll, für Informationen im Template-Code einbauen, damit dort auch das entsprechende Popover aufleuchtet? Und wie kann ich dort bestimmten, welche Action aufgerufen werden soll?

    Das habe ich noch nicht verstanden.

    Gruß
    Markus

    Mitglied aus dem Kartell...

    Das Kartell

    Edited 2 times, last by MDMAN (September 14, 2023 at 9:39 AM).

  • So...

    Ich habe nun versucht, das mal zu verstehen, wie es derzeit das Forum 5.5 in der messageSidebar macht.

    Dazu habe ich einfach mal in meinem schon vorhandenen Template, welches ebenfalls in der messageSidebar durch einen TemplateListener eingebunden ist, folgende Zeile geschrieben:

    und siehe da, auf dem von mir generierten Link zeigt er auch wie gewollt das Popover vom Benutzer an.

    Das liegt dann ja an diesen Zeilen im <a href... Teil:

    class="userLink" data-object-id="{@$userProfile->userID}" itemprop="url"

    und an diesem Teil was noch nach dem geschlossenem Tag a> und vor dem Ende des </a> steht:

    <span itemprop="name">{lang}wcf.user.userAwards.ranks{/lang}</span>

    zusätzlich ist ja auch das JavaScript Bootrap.js initiiert worden.

    Ich versuche nun also mein Javascript genau an dieser Stelle bzuw. für das Template messageSidebar zu iniitieren. Aber egal was ich versuche, es wird nicht erkannt.

    Mein Javascript liegt hier:

    /js/WoltLabSuite/Forum/Controller/Thread/DasKartellUserAwardsMessageSidebarPopover

    Ich habe es so mal versucht:

    Code
    <script data-relocate="true">
    	{include file='/js/WoltLabSuite/Forum/Controller/Thread/DasKartellUserAwardsMessageSidebarPopover'}
    </script>

    ohne erfolgt.

    Dann habe ich das hier versucht:

    Code
    <script data-relocate="true">
    	function _initUserPopover(): void {
    	ControllerPopover.init({
    		className: "userRank",
    		dboAction: "wcf\\data\\dasKartellUserAwards\\Popover\\dasKartellUserAwardsMessageSidebarPopoverAction",
    		identifier: "com.woltlab.wcf.userAwards",
    	})};
    </script>

    und zusätzlich natürlich die Variable "class" angepasst im Template:

    Dann sollte eigentlich ein einfaches Popover mit nur einer Zeile normalen Text angezeigt werden.

    hier mal die Action vom Popover:

    und hier mal das einfache Template:

    Code
    POPOver Anzeige...
    
    Mal sehen ob da was angezeigt wird.

    Die Namen sollten alle passen, habe diese mehrmals überprüft.

    So... nun die Frage, warum zeigt er mir mein Popover nicht an? Kann mir da noch mal jemand kurz einen Tipp geben, oder mir gerade zeigen wo mein Fehler liegt?

  • Ich denke der Fehler liegt im Implementieren des Javascript-Moduls.

    Kann da jemand helfen? Und dann gleich eine Frage dazu: Woher weiß denn das Template bzw. das JavaScript, welche Funktion überhaupt von der Action-Klasse ausgeführt werden soll? Wo kann man das denn definieren?

  • So langsam verzweifel ich echt an diesem Projekt.

    Mein Javascript wird einfach nicht geladen und somit das Popover nicht initiiert.

    Ich verstehe das Problem aber nicht wirklich. Kann hier wirklich keiner mal über meinen Code schauen und mir einen Hinweis geben, wo der Fehler nun sitzt?

    Hier mal die einzelnen Dateien...

    Template, welches in der MessageSidebar im Event "userCredits" angezeigt wird:

    dann wird das JavaScript hier initiiert durch den Template Listener:

    Code
    <!-- / Javascript-Includen für Popover / -->
    		<templatelistener name="dasKartellUserAwardsUserJavaScript">
    			<environment>user</environment>
    			<templatename>headIncludeJavaScript</templatename>
    			<eventname>javascriptInclude</eventname>
    			<templatecode><![CDATA[require(['WoltLabSuite/Forum/Controller/Thread/DasKartellUserAwardsMessageSidebarPopover'], function (_initUserAwardRankPopover)]]></templatecode>
    		</templatelistener>
    <!-- / Javascript-Includen für Popover / -->

    Ich denke hier im TL könnte irgendwas fehlen...

    hier mal die JS-Datei:

    Code
    /**
     * Initializes user profile popover.
     */
    function _initUserAwardRankPopover(): void {
    	ControllerPopover.init({
    		className: "userRank",
    		dboAction: "wcf\\data\\dasKartellUserAwards\\Popover\\dasKartellUserAwardsMessageSidebarPopoverAction",
    		identifier: "com.woltlab.wcf.userAwards",
    	})
    };

    und hier die Action-Klasse... aber diese wird ja noch nicht mal aufgerufen...

    und die Popver-Klasse:

    Ich habe echt keine Ahnung, warum es nicht mal bis zur Action-Klasse geht. Der Aufruf der Action-Klasse funktioniert einfach nicht.

    Das Javascript wird gefunden, doch danach passiert einfach nix.

    Bitte um Hilfe.

    Vielen Dank.

  • Hallo Sunny C.


    ja es gab eine Lösung mit Hilfe von Andreas von wsc-playground.xyz ... Vielen Dank nochmal!

    Irgendwie war die jetzige Lösung viel viel einfacher als erst gedacht...

    Im Grunde ist es nur ein Template mit einem bestimmten Container-Namen, das per CSS grundsätzlich ausgeblendet wird und beim Mouseover dann wieder angezeigt werden soll.

    Das ist im Grunde schon alles.

    Hier mal der grundlegende CSS-Code:

    Hier mal ein Teil des Templates, wo die "Staffeln" angezeigt werden, also der Container wo nur ein Text steht und wo dann beim Mouseover ein Template als "Popover" angezeigt wird, mit etwas mehr Inhalt... Einem Image und weiteren Texten.

    Also hier der Teil des Codes aus dem Template, welches in der MessageSidebar mit einem TemplateListener in dem Event "BeforeCredits" angezeigt wird:

    Wie gesagt, das ist nur ein Teil des Templates, aber hier werden halte Staffeln als Name angezeigt. Wichtig ist hier der Teil mit dem Code <span class="userSquadronLink">. Das ist der Trigger, damit das direkt dahinter kommende Template, hier eingefügt mit {include file="...., als Popover angezeigt werden kann.

    Das Template für das Popover sieht so aus:

    Hier sind erstmal die grundlegenden Klassen für die Images und das Popover eingetragen box128 und userProfilePreview und dann ganz wichtig die Klasse, damit auch das Template ausgeblendet und eingeblendet wird userSquadrons. Alles was dann in diesem DIV-Container ist, wird ausgeblendet bzw. beim Mouseover wieder eingeblendet.

    WICHTIG:

    Die Mouseover-SPAN-Klasse muss direkt über dem DIV-Container liegen und beides muss zusammen auf in einem DIV-Container stehen, sonst wird der Mouseover-Effekt nicht funktionieren und es wird das Popover nicht angezeigt. Warum das so ist, weiß ich leider nicht. Wichtig ist es aber.


    Und das war schon das gesamte Geheimnis.

    Viel Erfolg beim Nachbauen!


    Es wurde hier alles nur per CSS gelöst. Es brauchte keine JS-Datei, keine PHP-Action-Klasse, noch eine schwierige Verknüpfung oder so. Die Lösung war einfach per CSS den entsprechenden Container auszublenden und über einen Trigger im Template wieder einzublenden.

    ;)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!