la libreria bootbox per le finestre di dialogo è ora deprecata.
Sviluppatori, si prega di utilizzare il servizio dialog nel core invece di bootbox nei propri temi e plugin personalizzati. La libreria bootbox verrà rimossa completamente dal core di Discourse nel corso del 2023.
Ecco alcuni esempi di PR da plugin e temi che mostrano come passare al servizio dialog:
L’opzione più semplice sarebbe caricare il servizio utilizzando la ricerca. Ecco un esempio di codice (questo non è stato testato, ma usiamo qualcosa di simile nel core, al di fuori dei componenti/controller/route di Ember):
Grazie. Ho provato questo ma ricevo un errore: SyntaxError: /discourse/theme-11/initializers/theme-field-36-common-html-script-2: 'import' e 'export' possono apparire solo al livello più alto. (13:4)
Ah, giusto, dobbiamo usare require in questi tag script. Se va bene condividerlo, qual è il codice completo di quello che stai facendo qui? Vorrei proporre un’alternativa a questo tag <script>, abbiamo spostato la maggior parte del codice del tema in file JS autonomi nei componenti del tema che manteniamo noi stessi e potrebbe essere più facile apportare qui un refactor più generale per te.
Grazie per l’offerta! Ecco lo script completo (con alcuni testi leggermente modificati), che funzionava correttamente finché non abbiamo notato che il popup Bootbox non rendeva più correttamente i tag HTML.
<script type="text/discourse-plugin" version="0.8">
if (typeof bootbox === 'undefined') {
console.log('Impossibile attivare \"bootbox\" non definito');
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 no!</h2>';
let alertBody = '<p>Il tuo account è attualmente limitato e non hai più accesso a risorse preziose. <a href="https://meta.discourse.org">Clicca qui</a> per maggiori informazioni.</p>';
bootbox.alert(alertHeading + alertBody);
});
}
</script>
Ciao Tim,
Ecco l’alternativa, nota che i contenuti qui devono andare in un file JS inizializzatore in un componente. Puoi vedere un semplice esempio di una struttura di componente completa qui.
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 no!";
const alertBody =
'Il tuo account è attualmente limitato e non hai più accesso a risorse preziose. \u003ca href="https://meta.discourse.org"\u003eClicca qui\u003c/a\u003e per maggiori informazioni.';
schedule("afterRender", () => {
// delay needed so that the dialog service is loaded
const dialog = getOwner(this).lookup("service:dialog");
dialog.alert({
message: htmlSafe(alertBody),
title: alertHeading,
});
});
}
});
},
};