Studio JavaScript Helpers

Introduction

Studio includes JavaScript files to add in interactive functionality which may be useful across libraries.

Performance

We always load our module JavaScript asynchronously. This means it should not block page render and features will be initiated only when the JavaScript is ready. For example, if there is a button for sharing via Facebook, the button element will load straight away, but clicking it in the first second after page load will do nothing, but a second or two later the functionality will be added.

Even with asynchronous loading, you don't want to load a script if it's not being used. It’s good practice to use Liquid to keep track of when a script has been loaded and make sure it’s not used twice in the page:

Data Attributes and Constructors

To start with, most of our JavaScript functions are initiated with data-attributes on particular elements which need functionality added.

As the module grows, we will start to make constructors more easily available so that functions can also be initiated with a new keyword and an options parameter.

See the specific documentation to learn more.

Extending or Callbacks

If you want to extend our JavaScript, we recommend waiting for the DOM to finish loading and the required scripts to finish loading first. Normally our scripts have an ID which can be targeted and given a "load" eventListener.

We recommend not using html event attributes to run our JavaScript e.g. onClick="" as these will probably attempt to find functions before they are defined.