Adapt Learning Community: Best way to add global functionality?

For example, let's say I want all of a certain tag type to fade in on scroll. This would include tags in different components, such as text, image with text and so on. This is very simple to do with Javascript/jQuery (see https://jsfiddle.net/tcloninger/e5qaD/), but how would I implement code like this in Adapt? I'm building using the framework, not the course builder. Is there a place I can put in custom javascript functions or calls that would be packaged up with everything? Do I need to consider adding a plugin? Is there an example of a simple plugin somewhere that would do something similar to what I mentioned (not even the fade - just an example of a global function that can run on specific tags on any page once it's loaded).

Thanks!!

Hi Keith,
I'm currently adding a lot of customisations to the Adapt Framework too, including global functionalities. Unless there is a prescribed method for doing this, I would suggest you could try inserting your jquery into something like the componentView.js as part of the postRender function. Then, this should filter down to all the components.

Show parent | Reply

Yes, you should consider adding a plugin. This type of functionality would be best done as an extension (since it's not a component, menu or theme).

You should have a look at keepScrollPosition. Even though the specific functionality is quite different to what you want, at a high-level it is much the same i.e. create an extension do something on menu/page load.

Note that you would still be using JQuery to do what you want, you'd just be packaging the functionality as an Adapt plugin. Also note that JQuery is already included in Adapt so you don't need to worry about loading it.

Show parent | Reply