la biblioteca bootbox para diálogos ahora está obsoleta.
Desarrolladores, por favor usen el servicio dialog en el núcleo en lugar de bootbox en sus temas y plugins personalizados. La biblioteca bootbox se eliminará por completo del núcleo de Discourse en algún momento de 2023.
Aquí hay algunos PR de ejemplo de plugins y temas que muestran cómo migrar al servicio de diálogo:
La opción más sencilla sería cargar el servicio utilizando la búsqueda. Aquí tienes un ejemplo de código (no probado, pero usamos algo similar en el núcleo, fuera de los componentes/controladores/rutas de Ember):
<script type="text/discourse-plugin" version="0.8">
import { getOwner } from "discourse-common/lib/get-owner";
const dialog = getOwner(this).lookup("service:dialog");
dialog.alert('texto de alerta');
</script>
Gracias. Intenté esto pero estoy recibiendo un error: SyntaxError: /discourse/theme-11/initializers/theme-field-36-common-html-script-2: 'import' y 'export' solo pueden aparecer en el nivel superior. (13:4)
Ah, claro, necesitamos usar requires en estas etiquetas de script. Si está bien compartirlo, ¿cuál es el código completo de lo que está haciendo aquí? Me gustaría proponer una alternativa a esta etiqueta <script>, hemos movido la mayor parte del código del tema a archivos JS independientes en los componentes del tema que mantenemos nosotros mismos y podría ser más fácil hacer una refactorización más general aquí para usted.
¡Gracias por la oferta! Aquí tienes el script completo (con algunos textos ligeramente modificados), que funcionaba bien hasta que notamos que el popup de Bootbox ya no renderizaba correctamente las etiquetas HTML.
<script type="text/discourse-plugin" version="0.8">
if (typeof bootbox === 'undefined') {
console.log('No se puede activar "bootbox" indefinido');
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>Tu cuenta está actualmente restringida y ya no tienes acceso a recursos valiosos. <a href="https://meta.discourse.org">Haz clic aquí</a> para más información.</p>';
bootbox.alert(alertHeading + alertBody);
});
}
</script>
Aquí tienes la alternativa. Ten en cuenta que el contenido aquí debe ir en un archivo JS inicializador en un componente. Puedes ver un ejemplo sencillo de la estructura completa de un componente aquí.
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 =
'Tu cuenta está actualmente restringida y ya no tienes acceso a recursos valiosos. \u003ca href="https://meta.discourse.org"\u003eHaz clic aquí\u003c/a\u003e para más información.';
schedule("afterRender", () => {
// se necesita un retraso para que el servicio de diálogo se cargue
const dialog = getOwner(this).lookup("service:dialog");
dialog.alert({
message: htmlSafe(alertBody),
title: alertHeading,
});
});
}
});
},
};