Globals.js

Contains variables that makes css variables usable in javascript. Also has layout/theme change events that are available througout the template.

Using css variables in the javascript unifies all the colors accross the template. For example, you may get primary color value and use it with a javascript plugin such as a chart. If you want to learn more about the css part of the variables, please see Theme Variables . You may reach them with below values.

// Returns primary color
var primary = Globals.primary;

// Returns xl breakpoint
var xl = Globals.xl;

// Returns standard text font
var font = Globals.font;

The events are mostly for the settings changes and listened by the base scripts but some of them might be usefull in other parts of the template. For example, you may want to listen to color change event to save user preference silently in the backend.

// Listens for the color change event
document.documentElement.addEventListener(Globals.colorAttributeChange, function(event) {
  // Returns color such as light-blue
  var color = event.detail;
});