Adapt Learning Community: Loading external JS libraries

Hi everyone

Is it possible to use external libraries, lik GSAP with Adapt?

How du I get around importing GSAP so that we can use it's functionality inside Adapt, just like Jquery is imported?

Is it possible to make an extension that imports GSAP to a course?

Thank you in advance

Henrik

It certainly is possible.

Do you want to bundle the library with the extension - or load it from a CDN at run-time?

A very simple example of a 3rd party library being bundled with an extension can be found in the IE-Check extension.

There's also several core plugins (slider, matching and media) that use 3rd party libraries, these all take advantage of support for a 'libraries' folder we added in Adapt 2.0.13 - code in the libraries folder doesn't get 'watched' for changes, making the build process a lot faster. All the core plugins are components but I think extensions also support libraries folders.

If you want to load your 3rd party code from a CDN there's an example of that in the mathJax plugin.

Show parent | Reply

Thanks for the reply Matt.

I was thinking that we would include the library in the extension, so that it isn't dependent on external sources, even though it means that we have to keep the library up-to-date ourselves. Maybe this will change in the future, but not now.

I'm not sure how the IE-check extension actually loads the third-party library. Can you please enlighten me?

I'm not sure I completely understand the code in the mathJax plugin. Is it correct that it loads the third-party library into the Config file? Loading a library into the config file, does that make the library available to all pages, components and menus?

Because loading the library into the code of a component (like how it's done with the contrib-slider), only makes it available in that specific component, right?

Is it possible to make an extension that makes a third-party library, available everywhere in the course?

Thank you

Show parent | Reply

It's line 8 of adapt-IE-check.js

The above line tells the RequireJS library that Adapt uses that the ie-truth library is needed and then RequireJS does all the work of ensuring it's loaded.

Show parent | Reply

Matt,

I'm loading in an external Javascript file for a plugin I've created for a Brightcove video player. However since the script file varies according to the account used and the player (skin) used, I've had to load it in differently in the preRender() function to read the components account and player ID and then load the file in afterwards. As shown here.

This isn't really great practise but I didn't know how else to read this attributes before the component was created. Also, to ensure the file gets loaded I'm using a 2.5s timeout(). But I'm certain this will be a huge issue on slower internet devices. Do you know if there is an callback for when a dynamically loaded JS file has been processed?

Thanks,

Simon

Show parent | Reply

Hi Simon

$.getScript has functionality to allow you to detect whether the JS file gets loaded OK or not...

Show parent | Reply

Hi Matt,

Thanks for the fast response!

I've tried to use the .done() function but since it is applied at a higher level scope I can't seem to use it for anything useful as it doesn't seem to be in the right scope. The only thing that returns anything is console.log(window); Is there a way to bind it to the functions in the component level?

Simon

Show parent | Reply

Have you tried just doing $.getScript(script); instead of $("head").append('<script>$.getScript("' + script + '");

Show parent | Reply

Thanks again Matt

When the above script includes the library, does that mean that the other components on the rest of the page can use it too?

Is it possible to make an extension that makes a third-party library, available everywhere in the course and not just for a component?

Show parent | Reply

Yes, once it's loaded, it's loaded for everything.

Show parent | Reply