Aggiunta di un widget esterno al composer

[Dugen]

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?

[awesomerobot (Kris)]

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?

[Dugen]

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

[awesomerobot (Kris)]

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

[merefield (Robert)]

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.

[Dugen]

Grazie per avermi indicato la giusta direzione, sembra che incontri un altro problema, non si carica/renderizza quando apro la pagina dell’argomento che utilizzerebbe lo script. Solo dopo aver aggiornato la pagina si carica correttamente, ma non sempre. È perché Discourse è un’applicazione a pagina singola, sto solo cercando di capire se la mia conoscenza di Discourse è carente o se c’è qualcosa che devo programmare da solo.

Ecco il codice che sto attualmente utilizzando. Qualsiasi indicazione sarebbe molto apprezzata

 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(()=>{       
    })  
  })     
  });

[awesomerobot (Kris)]

Ho provato a fare un tentativo e ho ottenuto risultati simili. Ho provato a usare decorateCookedElement perché alla fine depreccheremo 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 leggera differenza qui è che ho passato la chiave con l’attributo data:

<div data-PAWidget="21R72LUN79CXRZ50"></div>

Questo funziona bene per me se è la prima volta che lo script viene caricato. Se visualizzo un post con lo script, poi torno all’elenco degli argomenti e rientro nell’argomento, non funziona (finché non aggiorno). Vedo che decorateCookedElement viene eseguito ogni volta che viene caricato il post pertinente, ma c’è qualcosa che impedisce allo script di funzionare di nuovo.

Non sono sicuro se sia correlato, ma vedo anche un errore Uncaught TypeError: i is null nella console da pa.widget.js:

[Dugen]

Grazie per averci provato. Ho notato che lo script viene chiamato all’incirca ogni 90 secondi o due minuti se lascio la pagina aperta.

Quindi, alla fine, viene caricato. Esiste una documentazione/post su come/perché viene caricato in un secondo momento?