nicht angemeldet Felix Riesterer
Matthias Apsel
dedlfix
Felix Riesterer
Felix Riesterer
dedlfix
JürgenB
Matthias Apsel
Felix Riesterer
Liebe Mitlesende,
hat jemand tiefergehende Erfahrung mit der Einbindung von JavaScript in ein MediaWiki? Aktuell stört mich, dass der Link zur Bearbeitung eines Code-Beispiels (bei nicht angemeldeten Usern lautet er "Quelltext…") unter die Tabs für "Quelltext" und "Vorschau" gerendert wird, was daran liegt, dass deren JavaScript zuerst ausgeführt wird. Wie kann ich das frickl-overlay.js zeitlich danach einrichten?
[EDIT]Ich verstehe die Anleitung nämlich nicht.[/EDIT]
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
vielleicht kannst du ja ein anderes Zielelement suchen.
Bis demnächst
Matthias
Lieber Matthias,
vielleicht kannst du ja ein anderes Zielelement suchen.
das wäre dann Plan B. Zuerst würde ich aber gerne versuchen, ob Plan A gelingt. Danke trotzdem für Deine Idee.
Liebe Grüße
Felix Riesterer
Tach!
[EDIT]Ich verstehe die Anleitung nämlich nicht.[/EDIT]
Matthias ScharwiesRLQ.push(function() {...});
ist das, was mir anderenorts gereicht hat, um erst dann ausgeführt zu werden, wenn das jQuery geladen ist. Das steht nämlich bei DOM-Ready noch nicht zur Verfügung. Ansonsten hilft die Anleitung wohl auch nur, wenn sich alle Beteiligten als Resource Module anmelden.
Zur Not muss halt ein Intervall her, das regelmäßig prüft, ob das Benötigte schon da ist, und dann die Initialisierung vornimmt ausführt und sich löscht.
dedlfix.
Lieber dedlfix,
RLQ.push(function() {...});
meinst Du, dass wenn ich den Inhalt der alles umspannenden DOMContentLoaded-Eventfunktion aus frickl-overlay.js dort einfüge, dass dann alles in der von mir beabsichtigten Reihenfolge abgearbeitet wird? Im Netzwerktanalyse-Tab der Entwicklertools steht es nämlich als das zuletzt geladene Script.
Magst Du das für mich ausprobieren?
Liebe Grüße
Felix Riesterer
Lieber dedlfix,
RLQ.push(function() {...});
ich habe jetzt damit experimentiert. Dabei sehe ich, dass folgende JavaScripts in dieser Reihenfolge geladen werden:
Man sieht also folgende Reihenfolge:
Im 6. Script findet man einen Hinweis auf den Klassennamen, den die Quelltextlinks bekommen: (suche nach beispiel_url_code!) Hier werden die störenden Links/Zusatztabs eingefügt. Insbesondere fällt mir dieser Code-Abschnitt auf:
mw.loader.load('MediaWiki:Edittools.js');var BeispielAdmin={setup:function(){..}}
Diesen Code finde ich nirgends in den Dateien unter wiki/extensions/Selfhtml. Wo steht dieser Kram und wer hat den verfasst?
Ich habe jetzt einen echt bösen Hack angewandt: [class*="beispiel_url_code"] - Alle halbe Sekunde wird im gesamten Dokument nach einem solchen Element gesucht. Wird ein solches Element gefunden, schmeißt sich mein Frickl-Overlay überhaupt erst an. Schön ist das nicht! Wenn jemand weiß, wie man das "korrekt" mit Registrierung eines Moduls macht, dann immer her mit den Ratschlägen.
Liebe Grüße
Felix Riesterer
Tach!
ich habe jetzt damit experimentiert. Dabei sehe ich, dass folgende JavaScripts in dieser Reihenfolge geladen werden:
Ist das schon mit dem Zusatz ?debug=true an der URL, damit der Resource Loader die verschiedenen Quellen nicht zusammengefasst ausliefert?
- Das Frickl-Overlay (keine Ahnung wo der URL-Parameter herkommt)
Sieht nach Versionskontrolle und Cache-Umgehung aus.
mw.loader.load('MediaWiki:Edittools.js');var BeispielAdmin={setup:function(){..}}Diesen Code finde ich nirgends in den Dateien unter
wiki/extensions/Selfhtml. Wo steht dieser Kram und wer hat den verfasst?
Im Namensraum MediaWiki steht auch eine Menge Zeugs, das geladen wird. MediaWiki:Edittools.js ist eine Seite.
dedlfix.
Lieber dedlfix,
Ist das schon mit dem Zusatz
?debug=truean der URL, damit der Resource Loader die verschiedenen Quellen nicht zusammengefasst ausliefert?
mein Frickl-Overlay wird nach wie vor nicht vom Resource Loader geladen, sondern direkt. In der RLQ-Liste kommt es ja doch nicht an die hinterste Position.
- Das Frickl-Overlay (keine Ahnung wo der URL-Parameter herkommt)
Sieht nach Versionskontrolle und Cache-Umgehung aus.
OK. Stört ja nicht. Im Moment.
Im Namensraum MediaWiki steht auch eine Menge Zeugs, das geladen wird.
MediaWiki:Edittools.jsist eine Seite.
Ja, das ist es: MediaWiki:Edittools.js - aber kein Hinweis auf SELFHTML-spezifische Modifikationen. Die Klassennamen beispiel_url und beispiel_url_code sind in deutscher Sprache. Die Teile von MediaWiki sind es niemals (immer rein Englisch). Daher hätte ich gerne gewusst, wo diese Modifikationen eingespielt werden. Im Skin-Script jedenfalls nicht...
Liebe Grüße
Felix Riesterer
Tach!
Ist das schon mit dem Zusatz
?debug=truean der URL, damit der Resource Loader die verschiedenen Quellen nicht zusammengefasst ausliefert?mein Frickl-Overlay wird nach wie vor nicht vom Resource Loader geladen, sondern direkt. In der RLQ-Liste kommt es ja doch nicht an die hinterste Position.
Es soll ja auch nicht von ihm geladen werden, sondern nur die Initialisierung ans Ende der Queue gestellt werden.
Die Klassennamen
beispiel_urlundbeispiel_url_codesind in deutscher Sprache. Die Teile von MediaWiki sind es niemals (immer rein Englisch). Daher hätte ich gerne gewusst, wo diese Modifikationen eingespielt werden. Im Skin-Script jedenfalls nicht...
Ist ja auch keine Skin-Angelegenheit, sondern eine funktionale Erweiterung, also im Extensions-Verzeichnis zu finden, da wo auch deine Frickl-Dateien liegen.
dedlfix.
Lieber dedlfix,
Ist ja auch keine Skin-Angelegenheit, sondern eine funktionale Erweiterung,
sicherlich. Das kann ich nachvollziehen.
also im Extensions-Verzeichnis zu finden, da wo auch deine Frickl-Dateien liegen.
Das vermutest Du nur, oder nicht? Denn in diesem Verzeichnis habe ich gründlich nach passenden JavaScript-Dateien gesucht, ob diese Klassennamen irgendwo darin enthalten sind. Bisher jedoch ohne Erfolg. Hast Du schon was gefunden? Denn wenn ja, dann kann man ja mein Frickl-Overlay dort umsetzen und spart sich die bisherige Zusatzdatei.
Liebe Grüße
Felix Riesterer
Tach!
also im Extensions-Verzeichnis zu finden, da wo auch deine Frickl-Dateien liegen.
Das vermutest Du nur, oder nicht?
Du bist doch da mit SSH drauf. Der mc hat im Command Menü eine Find file Funktion. Die findet eine Fundstelle in der SELFHTML.php - neben anderen in den Frickl-Dateien.
dedlfix.
Lieber dedlfix,
eine Fundstelle in der SELFHTML.php
aber damit wird doch das Dokument an sich schon modifiziert an den Browser gesendet. Es kann für die zeitlich verzögerte Manipulation nicht mehr verantwortlich sein, da es keine JS-Datei generiert und an den Browser sendet.
- neben anderen in den Frickl-Dateien.
Ja klar, die suchen ja nach solcherart injizierten Elementen!
Liebe Grüße
Felix Riesterer
Lieber dedlfix,
Der
mchat im Command Menü eine Find file Funktion. Die findet eine Fundstelle in der SELFHTML.php - neben anderen in den Frickl-Dateien.
die findet "BeispielAdmin" vor allem in SQL-Backups (oder was das auch immer ist):
Liebe Grüße
Felix Riesterer
Tach!
Der
mchat im Command Menü eine Find file Funktion. Die findet eine Fundstelle in der SELFHTML.php - neben anderen in den Frickl-Dateien.die findet "BeispielAdmin" vor allem in SQL-Backups (oder was das auch immer ist):
Naja, dann such mal nicht die gesamte Festplatte sondern nur im Verzeichnis der Selfhtml-Extension.
dedlfix.
Lieber dedlfix,
Naja, dann such mal nicht die gesamte Festplatte sondern nur im Verzeichnis der Selfhtml-Extension.
hatte ich doch schon. Weißt Du etwas, das ich nicht weiß, oder siehst Du etwas, das ich nicht sehe?
Es ist mein Eindruck, dass ich nach einem JavaScript suchen müsste, welches im Zusammenhang der Selfhtml-Extension erstellt wurde, welches ich in wiki/extensions/Selfhtml aber nicht finde. Der Suchbegriff "BeispielAdmin" (eine Zeichenfolge, die in einem nachgeladenen JavaScript erscheint) wird vom mc dort nicht gefunden.
Oder denke/mache ich etwas falsch?
Liebe Grüße
Felix Riesterer
Tach!
Naja, dann such mal nicht die gesamte Festplatte sondern nur im Verzeichnis der Selfhtml-Extension.
hatte ich doch schon. Weißt Du etwas, das ich nicht weiß, oder siehst Du etwas, das ich nicht sehe?
Nein, aber wenn du was in den Backups findest, dann sieht mir das nach einem Suchen an der falschen Stelle aus. Alles zum Wiki steht in dessen Verzeichnissen - oder in der Datenbank, wenn es eine Wiki-Seite ist. Schaust du deshalb in den Backups, um in der Datenbank zu suchen? Wäre eine Möglichkeit ...
Oder denke/mache ich etwas falsch?
Das weiß ich nicht, aber wir können ja mal zusammen sprechen um zusammen zu suchen, was es zusammenzusuchen gibt.
dedlfix.
Hallo Felix,
Ich habe jetzt einen echt bösen Hack angewandt:
[class*="beispiel_url_code"]- Alle halbe Sekunde wird im gesamten Dokument nach einem solchen Element gesucht. Wird ein solches Element gefunden, schmeißt sich mein Frickl-Overlay überhaupt erst an. Schön ist das nicht! Wenn jemand weiß, wie man das "korrekt" mit Registrierung eines Moduls macht, dann immer her mit den Ratschlägen.
so böse finde ich den Hack nicht. Wenn es für eine Aktion, z.B. „Element ins Dom eingebunden“ oder „mehrere Scripte geladen“, kein Event gibt, mache ich das auch so. Allerding frage ich nicht immer in festen Zeitintervallen nach, sondern mache das ursprünglich kleine Delay nach jeder Abfrage größer.
Gruß
Jürgen
Hallo Felix Riesterer,
ich hab auch noch einen CSS-Vorschlag:
Beispieladministratoren könnten den Bearbeiten-Link entweder in einem neuen Fenster öffnen oder mit Javascript wird das Aussehen umgebaut.
Bis demnächst
Matthias
Lieber Matthias,
ich hab auch noch einen CSS-Vorschlag:
Code...? ;-)
Beispieladministratoren könnten den Bearbeiten-Link entweder in einem neuen Fenster öffnen oder mit Javascript wird das Aussehen umgebaut.
Der "bearbeiten"-Link sollte neben dem "ausprobieren"-Link stehen, und beide nach dem "Beispiel: "-Einleitungstext stehen. Die Tabs sind dann visuell eine Zeile tiefer, weil in einem neuen Element (<ul>) zusammengefasst.
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
Code...? ;-)
Ne, kein Code. Brutalst mit den Entwicklertools gearbeitet.
Beispieladministratoren könnten den Bearbeiten-Link entweder in einem neuen Fenster öffnen oder mit Javascript wird das Aussehen umgebaut.
Der "bearbeiten"-Link sollte neben dem "ausprobieren"-Link stehen, und beide nach dem "Beispiel: "-Einleitungstext stehen. Die Tabs sind dann visuell eine Zeile tiefer, weil in einem neuen Element (
<ul>) zusammengefasst.
Es gibt nicht immer einen Beispieleinleitungstext und dem @Matthias Scharwies war auch das Wort "Beispiel: " immer schon ein Dorn im Auge. Deshalb dieser Vorschlag. Vielleicht kann man auch grundsätzlich auf einen Beispieleinleitungstext verzichten.
Bis demnächst
Matthias
Lieber Matthias,
Es gibt nicht immer einen Beispieleinleitungstext und dem @Matthias Scharwies war auch das Wort "Beispiel: " immer schon ein Dorn im Auge. Deshalb dieser Vorschlag. Vielleicht kann man auch grundsätzlich auf einen Beispieleinleitungstext verzichten.
Also die fett gedruckte Zeile restlos entfernen und die Links darin floatend rechts neben den Tabs? Wie in Deinem Beispiel:
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
Also die fett gedruckte Zeile restlos entfernen und die Links darin floatend rechts neben den Tabs? Wie in Deinem Beispiel:
Ja, deshalb hab ich das Beispiel ja so gemalt. Und für nicht Beispiel-Admins könnte die Quelltextansicht tatsächlich der dritte Tab sein. wie in meinem ersten Beispiel.
Bis demnächst
Matthias
Lieber Matthias,
Ja, deshalb hab ich das Beispiel ja so gemalt.
OK. Muss mal sehen, wie ich das hinbekomme.
Und für nicht Beispiel-Admins könnte die Quelltextansicht tatsächlich der dritte Tab sein. wie in meinem ersten Beispiel.
Das gefällt mir nicht. Die Quelltextansicht kann man erreichen, indem man auf den Link im Quelltext-Tab mit der rechten Maustaste klickt und das Ziel in einem neuen Fenster öffnet. Außerdem ist ein Tab-Reiter irreführend, wenn er keine Tab-Ansicht hat.
Liebe Grüße
Felix Riesterer
Servus!
Und für nicht Beispiel-Admins könnte die Quelltextansicht tatsächlich der dritte Tab sein. wie in meinem ersten Beispiel.
Das gefällt mir nicht. Die Quelltextansicht kann man erreichen, indem man auf den Link im Quelltext-Tab mit der rechten Maustaste klickt und das Ziel in einem neuen Fenster öffnet. Außerdem ist ein Tab-Reiter irreführend, wenn er keine Tab-Ansicht hat.
Den Quelltext erhält man ja schon im Beispiel-Tab (da allerdings nach HTML,CSS und JS getrennt), oder, ( wenn man das Beispiel im neuen Tab öffnet) mit Rechtsklick und den Entwicklerwerkzeugen des Browsers. Das sollten wir unseren Nutzern schjon zumuten können.
Herzliche Grüße
Matthias Scharwies
Lieber Matthias,
Den Quelltext erhält man ja schon im Beispiel-Tab
was ist das "Beispiel"-Tab? Ich dachte, es hieße "Quelltext"? In den Screenshots von @Matthias Apsel steht tatsächlich "Beispiel", was eigentlich nicht sein sollte. Aber egal, dort steht jedenfalls das, was der Wiki-Autor als relevanten Ausschnitt notiert hat. Der komplette Quelltext im Beispiel kann umfangreicher sein. Daher kann man mit Rechtsklick auf den Link ein neues Tab öffnen, in dem die Wiki-Seite mit dem Syntax-gehighlighteten Komplettquelltext kommt.
(da allerdings nach HTML,CSS und JS getrennt),
Da sprichst Du von der Frickl-Ansicht. Ich glaube, die war nicht gemeint.
Liebe Grüße
Felix Riesterer
Servus!
Lieber Matthias,
Den Quelltext erhält man ja schon im Beispiel-Tab
was ist das "Beispiel"-Tab? Ich dachte, es hieße "Quelltext"?
Ok, Den Quelltext erhält man ja schon im Beispiel Frickl-Tab
In den Screenshots von @Matthias Apsel steht tatsächlich "Beispiel", was eigentlich nicht sein sollte. Aber egal, dort steht jedenfalls das, was der Wiki-Autor als relevanten Ausschnitt notiert hat. Der komplette Quelltext im Beispiel kann umfangreicher sein. Daher kann man mit Rechtsklick auf den Link ein neues Tab öffnen, in dem die Wiki-Seite mit dem Syntax-gehighlighteten Komplettquelltext kommt.
Ichh glaube, dass wir immer so viel wie nötig, aber auch so wenig wie möglich anbieten sollen.
Mir würde: "Frickl" "Vorschau" und für Admins "Bearbeiten" reichen. An den Quelltext würde ich dann indirekt kommen , was mir auch bei CodePen langt.
Herzliche Grüße
Matthias Scharwies
Lieber Matthias,
Ok, Den Quelltext erhält man ja schon im
BeispielFrickl-Tab
reden wir aneinander vorbei?
Mir würde: "Frickl" "Vorschau" und für Admins "Bearbeiten" reichen. An den Quelltext würde ich dann indirekt kommen , was mir auch bei CodePen langt.
Offensichtlich reden wir aneinander vorbei.
Liebe Grüße
Felix Riesterer
Servus!
Lieber Matthias,
Ok, Den Quelltext erhält man ja schon im
BeispielFrickl-Tabreden wir aneinander vorbei?
Mir würde: "Frickl" "Vorschau" und für Admins "Bearbeiten" reichen. An den Quelltext würde ich dann indirekt kommen , was mir auch bei CodePen langt.
Offensichtlich reden wir aneinander vorbei.
Neein! Matthias Apsel schrub:
Und für nicht Beispiel-Admins könnte die Quelltextansicht tatsächlich der dritte Tab sein. wie in meinem ersten Beispiel.
Du schrubst:
Das gefällt mir nicht. Die Quelltextansicht kann man erreichen, indem man auf den Link im Quelltext-Tab mit der rechten Maustaste klickt und das Ziel in einem neuen Fenster öffnet. Außerdem ist ein Tab-Reiter irreführend, wenn er keine Tab-Ansicht hat.
Ich schrub:
Mir würde: "Frickl" "Vorschau" und für Admins "Bearbeiten" reichen. An den Quelltext würde ich dann indirekt kommen , was mir auch bei CodePen langt.
Ich bin also bei Dir (neudeutsch gesagt).
Herzliche Grüße
Matthias Scharwies
Lieber Matthias,
Mir würde: "Frickl" "Vorschau" und für Admins "Bearbeiten" reichen. An den Quelltext würde ich dann indirekt kommen , was mir auch bei CodePen langt.
ich möchte schon sehen, was am Quelltext der wesentliche Ausschnitt ist. Anders als das, was im Frickl oder auf der Quelltext-Seite vollständig zu sehen ist. Diese vom Autor vorgenommene Reduktion auf das Wesentliche halte ich für wichtig.
Ich bin also bei Dir (neudeutsch gesagt).
Naja, fast ganz.
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
Ich versuchs mal:
Beispiel: didaktisch reduziertes Beispiel im Iframe
Quelltext: komplette Seite mit URL-Parameter action = render im Iframe.
Vorschau: Vorschau im Iframe
ausprobieren: Frickl
bearbeiten: Bearbeiten für admins.
Für admins gibt es "Quelltext" nicht.
Bis demnächst
Matthias
Lieber Matthias,
Also die fett gedruckte Zeile restlos entfernen und die Links darin floatend rechts neben den Tabs? Wie in Deinem Beispiel:
Ja [...]
ich habe keine Ahnung, wie ich den fetten Text rein mit CSS entfernen soll, da er nicht in ein eigenes Element eingehüllt ist, sondern als Textknoten einfach so in einem <div> steht.
Dazu kommt noch, dass bei genügend schmalen Viewports die Links nicht mehr mit den beiden Tabs noch in eine Zeile passen.
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
ich habe keine Ahnung, wie ich den fetten Text rein mit CSS entfernen soll, da er nicht in ein eigenes Element eingehüllt ist, sondern als Textknoten einfach so in einem
<div>steht.
Der steckt in der Vorlage:Beispiel.
Bis demnächst
Matthias
Lieber Matthias,
Der steckt in der Vorlage:Beispiel.
aha... Soll man diese so ändern, dass der Text in ein <span> oder ein <strong> gehüllt wird, oder mit den Mitteln von JavaScript den Text entfernen, oder wird die Vorlage dahingehend geändert, dass dieser Text überhaupt nicht mehr eingefügt wird?
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
wenn ich in ca. 14 Tagen wieder zu Hause bin, kann ich die Vorlage anpassen. Bis dagin solltet ihr euch einig werden, wie es aussehen soll. Mein Vorschlag liegt auf dem Tisch.
Bis demnächst
Matthias
hat jemand tiefergehende Erfahrung mit der Einbindung von JavaScript in ein MediaWiki?
Es stellt sich raus: @dedlfix hat! Nach einem erfolgreichen Telefonat via Discord ist die notwendige Stelle gefunden: MediaWiki:Common.js
Ich werde mich nun daran machen, die Overlay-Funktionalität des Frickls (Erzeugung der Tabs mit "Quelltext" und "Vorschau", sowie Link zum Frickl) in diese JavaScript-Datei zu integrieren. Aber wie das so ist, es stellen sich neue Fragen.
Benötigen wir noch den zusätzlichen Link "Quelltext", der zu einer reinen Textseite mit dem Quelltext des Beispiels führt?
Wenn man auf das Tab "Quelltext" rechtsklickt und die Zielseite in einem neuen Tab/Fenster öffnet, kommt man auch zum gesamten Quelltext, aber mit Syntax-Highlighting. Das finde ich insofern sinnvoller, als es damit besser in seiner Struktur erfassbar ist. Wer sofort den reinen nicht-Richtext-Quelltext haben will, kann ja das Beispiel im Frame betrachten und dort über "Rechtsklick" -> "Aktueller Frame" -> "Frame-Quelltext anzeigen" den direkten Quelltext erreichen.
Welche Erfahrungswerte gibt es aus der Community, die den Quelltext-Link überhaupt erwähnen?
Ich würde ihn nämlich entsorgen.
Wie ist das mit dem fett gedruckten Text "Beispiel: ..."?
Macht das @Matthias Apsel in der Vorlage, wenn er wieder Zeit hat? Soll das also noch nicht via JavaScript geschehen?
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
Welche Erfahrungswerte gibt es aus der Community, die den Quelltext-Link überhaupt erwähnen?
Ich würde ihn nämlich entsorgen.
meinetwegen.
Wie ist das mit dem fett gedruckten Text "Beispiel: ..."?
Macht das @Matthias Apsel in der Vorlage, wenn er wieder Zeit hat? Soll das also noch nicht via JavaScript geschehen?
Wie ich schon schrieb, kann ich die Vorlage anpassen. Das betrifft auch das "ansehen ..." zu "ausprobieren" zu ändern (https://wiki.selfhtml.org/wiki/MediaWiki:Selfhtml-example-linktext). Übrigens gibt es auch https://wiki.selfhtml.org/wiki/MediaWiki:Selfhtml-frickl-linktext, der dann wohl nicht mehr gebraucht wird.
Allerdings gebe ich zu bedenken, dass es ganz ohne "Beispiel" auch nicht sinnvoll ist.
Vorschlag für das CSS im frickl-overlay.css:
.tabbed [role="tablist"] {
list-style: none;
margin: .5em 0 0 .5em;
padding: 0;
}
Bis demnächst
Matthias