Zugriff auf Modal-Elemente im TYPO3-Backend per JavaScript

Michael H

Hey an alle,
aktuell schreibe ich eine Bachelorarbeit und ein Part hierfür ist die Implementierung von Sprachsteuerung in das TYPO3 Backend.

Nun läuft das ganze durch einen Prototypen bisher ganz gut, jedoch hätte ich eine Frage bezüglich der Modal.
Per Javascript greife ich auf die html Elemente zu, wodurch eine Navigation ermöglicht wird. Jedoch scheitere ich sobald modal im Fokus sind.

Hat jemand zufällig eine Idee, wie man beispielsweise auf das "Regular Text Element" klicken könnte?
Auf einen "speichern" button im edit eines Inhaltselements greife ich beispielsweise so erfolgreich zu: "var saveButton = document.querySelector('button[name="_savedok"]');"
Auch wenn ich im querySelector das Ergebnis aus inspect element -> Copy JS Path vom Modal eingebe, erhalte ich die Antwort, dass das Element nicht gefunden werden kann.

Oder ist der Zugriff hierauf nicht möglich, da es dynamisch geladen wird und es in der DOM Struktur im Javascript code nicht vorhanden ist?

Hier ansonsten einmal das Github Projekt: https://github.com/helthuism/speech_ext_manual :)

Vorab schon mal vielen Dank für eure Hilfe!

Liebe Grüße,
Michael

Mogens Fiebrandt

Versuch doch mal:

document.querySelector('span[data-identifier="content-text"]').parentNode.parentNode;

Michael H

Vielen Dank für die Antwort! :)
Klingt an sich nach einem guten Ansatz aber erhalte daruch "Uncaught TypeError: Cannot read properties of null (reading 'parentNode')".

Habe sowohl data-identifier="content-text", als auch "common_text" versucht. :/

Mogens Fiebrandt

Welche TYPO3 Version nutzt Du?

Michael H

Version 12.4.19 also leider nicht auf Version 13 umgestiegen

Mogens Fiebrandt

Ah ok. Seit Version 12 liegt das Modal für neue CE's in einem ShadowRoot.
Hiermit kannst Du darauf zugreifen:

document.querySelector('typo3-backend-new-content-element-wizard').shadowRoot.querySelector('button[data-identifier="common_text"]');

Hab es in ner 11er Version getestet. Da ist das noch nicht so.

Michael H

Wenn ich in der Console des Browsers
const modal = document.querySelector('typo3-backend-new-content-element-wizard').shadowRoot.querySelector('button[data-identifier="common_text"]'); console.log(modal);
eingebe, wird es nun auch erfolgreich gefunden. Also wäre es auf jeden Fall eine gute query :)

Jedoch wird das Element im Javascript immer noch nicht gefunden.
Mein Workflow: Ich navigiere in das Page Modul, öffne dort einen Sprachkanal (Speech Recognition API), gebe per Sprache an, es soll ein neues Element angelegt werden, Content Element Wizard wird geöffnet. Der Sprachkanal bleibt weiterhin offen und ist nicht in der Lage, auf Elemente des Modals zuzugreifen.

Scheint mir so, als hätte der Code keinen Zugriff auf die dynamisch geladenen HTML Elemente. Wüsste aber auch nicht so ganz, wie man es gescheit einbinden könnte :/

Mogens Fiebrandt

Mhh. Keine Ahnung. Vielleicht musst Du den Sprachkanal dann einmal schließen und neu öffnen.
Kenne die Speech Recognition API leider nicht.

Wäre vielleicht auch gut, wenn Du mal etwas Code zeigen könntest.

Michael H

Hier erstelle ich button für die Sprachsteuerung:

Sobald auf einen Button geklickt wird, reagiert Javascript entsprechend:

Dadurch wird der Sprachkanal geöffnet und es können kontinuierlich Sprachbefehle ausgeführt werden:
else if (transcript.includes('create new content') || transcript.includes('neues inhaltselement')) { createNewContentElement(); }
Und in der Funktion würde dann auf den Button für ein neues Inhaltselement geklickt werden:

Der Content Wizard öffnet sich in einem Modal und daraufhin würde ich in selber Struktur versuchen, auf dessen Elemente zuzugreifen.
Scheint mir aber auch so als müsste man den Sprachkanal vielleicht einmal schließen und neu öffnen, wobei dafür ein Button zum Modal hinzugefügt werden müsste.

Ansonsten hier nochmal das GitHub Repo: https://github.com/helthuism/speech_ext_manual

Mogens Fiebrandt

Du müsstest doch die Befehle in der Konsole ausführen können. Versuch da doch mal den Sprachkanal zu schließen und wieder zu öffnen.

Vielleicht gibt es ja ein Javascript Event, dass abgefeuert wird, wenn das Modal geöffnet wurde. Vielleicht kannst Du das nutzen, um den Kanal zu schließen und wieder zu öffnen.

Michael H

Gute Idee, darüber habe ich noch gar nicht nachgedacht.

Ich kann in der Konsole einen Listener hinzufügen:
document.addEventListener('typo3-modal-shown', (event) => { console.log('typo3-modal-shown ausgelöst:', event); });
Wenn das Modal geöffnet wird, wird es auch erfolgreich geloggt.
Dort kann ich auch eine clickButton Methode mit deiner query document.querySelector('typo3-backend-new-content-element-wizard').shadowRoot.querySelector('button[data-identifier="common_text"]'); ausführen und es funktioniert.

Durch Javascript loggt der eventListener aber leider nichts. Würde aber sagen, dass der Ansatz in eine richtige Richtung leitet, vielen Dank dafür!

In der Bachelorarbeit handelt es sich auch zunächst um einen Prototypen, würde wenn es für dich in Ordnung ist gerne auf den Beitrag verweisen.
Dadurch könnte man darauf hinweisen, dass es bereits Lösungsansätze durch Profis wie dich gibt :D

Die Arbeit wird dann voraussichtlich in den nächsten Wochen hier verfügbar sein: https://cmscensus.eu/about

Mogens Fiebrandt

Ja klar kannst Du gerne machen.
Namentliche Nennung als TYPO3-Profi sind natürlich immer gerne erwünscht. 😉

Viel Glück bei Deiner Arbeit. Interessantes Thema.

Michael H

Mogens Fiebrandt
Hahaha ja na klar, würde dich gerne einbeziehen und grundsätzlich darauf verweisen, dass das Forum eine super Anlaufstelle ist :)

Michael H

Ich hätte tatsächlich noch eine weitere Frage bezüglich API Token und dem erstellen von API Endpunkten. Werde dazu vermutlich auch noch einen Beitrag eröffnen 😵

Nochmals vielen vielen Dank für deine Hilfe!

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS