Including external javascript in html

[dean2140]

Hi,

I was wondering if there was any way to include external js libraries? I have an idea for using this panel to display some map data with the google maps api and this plugin seems perfect. Even an option like what GF_PANELS_DISABLE_SANITIZE_HTML=true does for the text panel would be amazing.

Thank You!

[ZuperZee]

Hello @dean2140
Currently you can't include external libraries (directly), but you can bundle the libraries you want to use with a bundler.
There are some bundle templates made specifically for this plugin htmlgraphics-svg-bundler-template, htmlgraphics-react-bundler-template, and htmlgraphics-svelte-bundler-template.

I do like the idea of loading external libraries. I'll try to see if there is a good way to implement it.

[dean2140]

Awesome thank you I will take a look at those bundle templates and see what I can do.

[ZuperZee]

I'm not gonna add anything to make importing external libraries directly to the panel easier.

If you would like to use external libraries you could use dynamic import, but a bundler like htmlgraphics-svg-bundler-template is probably easier to work with.

onInit

async function init() {
  await import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js');

  jQuery('<div>Hello, World!</div>').appendTo(htmlNode.lastElementChild);
}

init();