Im trying to add a widget to the composer, I have got far enough to where I can insert the code from the tool bar, but I am not sure how to get the javascript working within it. I am assuming that I will need to add the javascript internally either as a plug-in or theme component rather than calling it from an external site, but I am not sure how to go about doing that. Is this doable within the composer?
Can you be a little more specific about what you’re trying to do? Are you trying to add a new toolbar button that adds content to the composer textarea? something else?
What I am trying to is to have users insert their specific widget from the composer where all the would have to do type a number and have the toolbar wrap around it. for example if typed 112756 it would wrap the following code around it.
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Loading PurpleAir Widget...</div>
<script src='https://www.purpleair.com/pa.widget.js?key=N6HB6JJ0BP1Z05SE&module=AQI&conversion=C0&average=10&layer=detailed&container=PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'></script>
it would hopefully look something like this
2 curtidas
Ok so it sounds like you have already figured out how to add content to the composer? (If not, referencing this example may help GitHub - discourse/discourse-gifs - this theme component opens a modal when the button is clicked from the toolbar, and then inserts content into the composer based on clicking some content in the modal).
If you’re trying to get a script to load and do something to the post content, I think this post might get you pointed in the right direction… using loadScript and decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
1 curtida
You might be able to use this in some way (either directly or a forked customisation): Custom Mentionables which uses a special character instead of a composer button.
1 curtida
Obrigado por me indicar a direção certa, parece que me deparo com outro problema, ele não está carregando/renderizando ao abrir a página do tópico que usaria o script. Somente depois de atualizar a página ele carrega corretamente, mas não todas as vezes. Isso ocorre porque o Discourse é uma Single Page Application, estou apenas tentando descobrir se meu conhecimento sobre o Discourse é limitado ou se é algo que preciso programar sozinho.
Aqui está o código atual que estou usando. Qualquer direção seria muito apreciada
let loadScript = require('discourse/lib/load-script').default;
api.decorateCooked($elem => { $elem.children('div[data-PAWidget]').ready(function() {
$elem.children('div[data-PAWidget]').append(" <div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>");
loadScript("https://www.purpleair.com/pa.widget.js?key=21R72LUN79CXRZ50&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard").then(()=>{
})
})
});
Tentei fazer isso e obtive resultados semelhantes. Tentei usar decorateCookedElement porque eventualmente desativaremos decorateCooked
api.decorateCookedElement(
(element) => {
element.childNodes.forEach((node) => {
if (node.dataset && node.dataset.pawidget) {
node.insertAdjacentHTML(
"beforeend",
"<div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>"
);
loadScript(
`https://www.purpleair.com/pa.widget.js?key=${node.dataset.pawidget}&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard`
);
}
});
},
{ id: "widget-append", onlyStream: true, afterAdopt: true }
);
A pequena diferença aqui é que passei a chave com o atributo de dados:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Isso funciona bem para mim se for a primeira vez que o script é carregado. Se eu visualizar uma postagem com o script, voltar para a lista de tópicos e entrar novamente no tópico, ele não funciona (até que eu atualize). Posso ver que decorateCookedElement está sendo acionado a cada vez que a postagem relevante é carregada, mas há algo impedindo que o script funcione novamente.
Não tenho certeza se está relacionado, mas também vejo um erro Uncaught TypeError: i is null no console de pa.widget.js:
1 curtida
