a biblioteca bootbox para caixas de diálogo está agora obsoleta.
Desenvolvedores, por favor, usem o serviço dialog no core em vez de bootbox em seus temas e plugins personalizados. A biblioteca bootbox será removida completamente do core do Discourse em algum momento de 2023.
Aqui estão alguns exemplos de PRs de plugins e temas que mostram como fazer a transição para o serviço de diálogo:
A opção mais fácil seria carregar o serviço usando o lookup. Aqui está um exemplo de código (isto não foi testado, mas usamos algo semelhante no núcleo, fora dos componentes/controladores/rotas do Ember):
Obrigado. Tentei isso, mas estou recebendo um erro: 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, certo, precisamos usar requires nessas tags de script. Se puder compartilhar, qual é o código completo do que você está fazendo aqui? Gostaria de propor uma alternativa a essa tag <script>, movemos a maior parte do código do tema para arquivos JS independentes nos componentes do tema que mantemos nós mesmos e pode ser mais fácil fazer um refatoramento mais geral aqui para você.
Obrigado pela oferta! Aqui está o script completo (com algum texto ligeiramente modificado), que estava funcionando bem até notarmos que o popup do Bootbox não estava mais renderizando corretamente as tags HTML.
<script type="text/discourse-plugin" version="0.8">
if (typeof bootbox === 'undefined') {
console.log('Não é possível acionar "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 não!</h2>';
let alertBody = '<p>Sua conta está atualmente restrita e você não tem mais acesso a recursos valiosos. <a href="https://meta.discourse.org">Clique aqui</a> para mais informações.</p>';
bootbox.alert(alertHeading + alertBody);
});
}
</script>
Olá Tim,
Aqui está a alternativa, observe que o conteúdo aqui precisa ir em um arquivo JS inicializador em um componente. Você pode ver um exemplo simples de uma estrutura de componente completa aqui.
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 =
'Sua conta está atualmente restrita e você não tem mais acesso a recursos valiosos. <a href="https://meta.discourse.org">Clique aqui</a> para mais informações.';
schedule("afterRender", () => {
// atraso necessário para que o serviço de diálogo seja carregado
const dialog = getOwner(this).lookup("service:dialog");
dialog.alert({
message: htmlSafe(alertBody),
title: alertHeading,
});
});
}
});
},
};