la bibliothèque bootbox pour les boîtes de dialogue est désormais obsolète.
Développeurs, veuillez utiliser le service dialog dans le cœur à la place de bootbox dans vos thèmes et plugins personnalisés. La bibliothèque bootbox sera entièrement supprimée du cœur de Discourse courant 2023.
Voici quelques exemples de PR de plugins et de thèmes qui montrent comment passer au service de dialogue :
L’option la plus simple serait de charger le service à l’aide de la recherche. Voici un exemple de code (ceci n’a pas été testé, mais nous utilisons quelque chose de similaire dans le cœur, en dehors des composants/contrôleurs/routes Ember) :
Merci. J’ai essayé ceci mais j’obtiens une erreur : 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, d’accord, nous devons utiliser des require dans ces balises de script. Si vous êtes d’accord pour partager, quel est le code complet de ce que vous faites ici ? J’aimerais proposer une alternative à cette balise <script>, nous avons déplacé la plupart du code du thème vers des fichiers JS autonomes dans les composants du thème que nous maintenons nous-mêmes et il pourrait être plus facile de faire un refactoring plus général ici pour vous.
Merci pour l’offre ! Voici le script complet (avec quelques modifications de texte), qui fonctionnait correctement jusqu’à ce que nous constations que la fenêtre contextuelle Bootbox ne rendait plus correctement les balises HTML.
<script type="text/discourse-plugin" version="0.8">
if (typeof bootbox === 'undefined') {
console.log('Impossible de déclencher \"bootbox\" indéfini');
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 non !</h2>';
let alertBody = '<p>Votre compte est actuellement restreint et vous n\'avez plus accès à des ressources précieuses. <a href="https://meta.discourse.org">Cliquez ici</a> pour plus d\'informations.</p>';
bootbox.alert(alertHeading + alertBody);
});
}
</script>
Salut Tim,
Voici l’alternative, note que le contenu ici doit aller dans un fichier JS d’initialisation dans un composant. Vous pouvez voir un exemple simple de structure de composant complète ici.
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 non !";
const alertBody =
'Votre compte est actuellement restreint et vous n\'avez plus accès à des ressources précieuses. \u003ca href="https://meta.discourse.org"\u003eCliquez ici\u003c/a\u003e pour plus d\'informations.';
schedule("afterRender", () => {
// un délai est nécessaire pour que le service de dialogue soit chargé
const dialog = getOwner(this).lookup("service:dialog");
dialog.alert({
message: htmlSafe(alertBody),
title: alertHeading,
});
});
}
});
},
};