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 « J'aime »
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 « J'aime »
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 « J'aime »
Merci de m’avoir orienté dans la bonne direction, je semble rencontrer un autre problème, cela ne se charge/rend pas lors de l’ouverture de la page de sujet qui utiliserait le script. Ce n’est qu’après avoir actualisé la page qu’il se charge correctement, mais pas à chaque fois. Est-ce parce que Discourse est une application monopage (Single Page Application), j’essaie juste de comprendre si mes connaissances de Discourse sont insuffisantes ou si c’est quelque chose que je dois programmer moi-même.
Voici le code actuel que j’utilise. Toute aide serait grandement appréciée.
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(() => {
})
})
});
J’ai essayé et j’ai obtenu des résultats similaires. J’ai essayé d’utiliser decorateCookedElement car nous allons éventuellement déprécier 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 }
);
La légère différence ici est que j’ai passé la clé avec l’attribut de données :
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Cela fonctionne bien pour moi si c’est la première fois que le script est chargé. Si je consulte un message avec le script, puis que je reviens à la liste des sujets et que je ré-entre dans le sujet, cela ne fonctionne pas (jusqu’à ce que je rafraîchisse). Je peux voir que decorateCookedElement est déclenché à chaque fois que le message pertinent est chargé, mais quelque chose empêche le script de fonctionner à nouveau.
Je ne suis pas sûr si c’est lié, mais je vois aussi une erreur Uncaught TypeError: i is null dans la console provenant de pa.widget.js :
1 « J'aime »
