ist die Bootbox-Bibliothek für Dialoge nun veraltet.
Entwickler, bitte verwenden Sie den dialog-Dienst im Kern anstelle von Bootbox in Ihren benutzerdefinierten Themes und Plugins. Die Bootbox-Bibliothek wird irgendwann im Jahr 2023 vollständig aus dem Discourse-Kern entfernt.
Hier sind einige Beispiel-PRs von Plugins und Themes, die zeigen, wie der Übergang zum Dialog-Dienst erfolgt:
Die einfachste Option wäre, den Dienst über die Suche zu laden. Hier ist ein Beispielcode (dieser wurde nicht getestet, aber wir verwenden etwas Ähnliches im Kern, außerhalb von Ember-Komponenten/Controllern/Routen):
Danke. Ich habe das versucht, bekomme aber einen Fehler: SyntaxError: /discourse/theme-11/initializers/theme-field-36-common-html-script-2: 'import' and 'export' may only appear at the top level. (13:4)
Ah, richtig, wir müssen requires in diesen Skript-Tags verwenden. Wenn es in Ordnung ist, dies zu teilen, wie lautet der vollständige Code dessen, was Sie hier tun? Ich würde gerne eine Alternative zu diesem <script>-Tag vorschlagen. Wir haben den Großteil des Theme-Codes in eigenständige JS-Dateien in den von uns selbst gepflegten Theme-Komponenten verschoben, und es könnte einfacher sein, hier eine allgemeinere Umstrukturierung für Sie vorzunehmen.
Vielen Dank für das Angebot! Hier ist das vollständige Skript (mit leicht modifiziertem Text), das bisher einwandfrei funktionierte, bis wir feststellten, dass das Bootbox-Popup HTML-Tags nicht mehr korrekt rendert.
<script type="text/discourse-plugin" version="0.8">
if (typeof bootbox === 'undefined') {
console.log('Cannot trigger undefined "bootbox"');
return;
}
let currentUser = api.getCurrentUser();
if (currentUser) {
api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
let userGroups = user.groups.map(group => group.name);
let bodyClasses = userGroups.map(group => `user-group--${group}`);
document.querySelector('body').classList.add(...bodyClasses)
let showPopup;
switch(true) {
case userGroups.includes('restricted_member'):
showPopup = true;
break;
case userGroups.includes('users_all'):
case userGroups.includes('officers'):
showPopup = false;
break;
default:
showPopup = true;
break;
}
if (!showPopup) {
return;
}
let alertHeading = '<h2>Oh nein!</h2>';
let alertBody = '<p>Ihr Konto ist derzeit eingeschränkt und Sie haben keinen Zugriff mehr auf wertvolle Ressourcen. <a href="https://meta.discourse.org">Klicken Sie hier</a> für weitere Informationen.</p>';
bootbox.alert(alertHeading + alertBody);
});
}
</script>
Hier ist die Alternative. Beachte, dass der Inhalt hier in eine initialisierende JS-Datei in einer Komponente eingefügt werden muss. Ein einfaches Beispiel für eine vollständige Komponentenstruktur findest du hier.
import { withPluginApi } from "discourse/lib/plugin-api";
import { getOwner } from "discourse-common/lib/get-owner";
import { schedule } from "@ember/runloop";
import { htmlSafe } from "@ember/template";
export default {
name: "tester-initializer",
initialize() {
withPluginApi("0.8", (api) => {
const currentUser = api.getCurrentUser();
if (currentUser) {
const userGroups = currentUser.groups.map((group) => group.name);
let showPopup = false;
switch (true) {
case userGroups.includes("admins"):
showPopup = true;
break;
}
if (!showPopup) {
return;
}
const alertHeading = "Oh nein!";
const alertBody =
'Dein Konto ist derzeit eingeschränkt und du hast keinen Zugriff mehr auf wertvolle Ressourcen. \u003ca href="https://meta.discourse.org"\u003eKlicke hier\u003c/a\u003e für weitere Informationen.';
schedule("afterRender", () => {
// Verzögerung erforderlich, damit der Dialogdienst geladen wird
const dialog = getOwner(this).lookup("service:dialog");
dialog.alert({
message: htmlSafe(alertBody),
title: alertHeading,
});
});
}
});
},
};