These loaders are also available in code mode and when using custom headers via the window object.
This allows a developer to listen for instances where an element within a Yellowfin element has a loader added to it or removed from it and then reacts to that event.
There are a number of different actions that could be taken. They include:
- prevent the Yellowfin loader from being added, and add a custom loader onto the same element;
- attach a loader to a different, related element; and.
- log the loader being added or removed (useful during development).
For example, a business using a white-label version of Yellowfin software might prefer to use their own loader icon to match their brand rather than the default blue circle that ships with Yellowfin.
Note: due to the nature of the LoaderEvents API, it has no properties nor events associated specifically with it.
After the Yellowfin API
init() call has completed, the
yellowfin.loaderEvents function will become available. This provides two basic functions —
stopListening — which allow you to set up and remove loader events as you require. It also provides two functions that simplify replacing many child loaders at once —
Note: to use this function in code mode or with custom headers, switch out "yellowfin.loaderEvents" for "window.loaderEvents"
This creates a loader event listener with the passed
listenObject object should contain the following parameters:
The CSS selector for the object you wish to create the listener on. If you wish to intercept all loaders you can use the selector
The HTML element to listen for loaders being added to. This will only trigger events if the element added to the loader to is the same as the element defined here.
|Optional, as an alternative to defining
The function that is called immediately before Yellowfin adds a loader to an element that matches the selector. A
A callback function which is immediately before Yellowfin code removes a loader from an element that matches the selector. A
Removes a loader event, the passed
listenObject must be the exact same object that was passed into the listen function. Otherwise the listener will not be removed.
When this function is called, Yellowfin intercepts any elements with child loaders and applies those loaders to the passed element rather than the child. If
interceptChildLoadersForElement is called multiple times on the same element, only the first application will be used.
listenObject parameter for interceptChildLoadersForElement works in a similar manner to the
listenObject parameter for
onAdd function will be called the first time a loader is added to the passed element, and
onRemove will be called when the loader is removed from the passed element
In the sample code below, the code looks for loaders added anywhere on the page and adds them to the body tag instead.
interceptChildLoadersForElement() listener can be removed by using the
stopListeningToElementIntercept() function .
Pass only the element you wish to stop listening to.
Each time an
onRemove function is called, a
LoaderEvent object will be created. This contains the element the loader is going to be added to, as well as some functions which allow manipulation of how the event is handled.
This is the element which the loader is going to be added to or removed from.
This event prevents the loader from being added to or removed from the element.
For example, you could initialize your event listener like this:
This would cause no loaders to be added to any Yellowfin elements. This by itself isn’t particularly useful, however you could combine the preventDefault with code that adds your own customized loader.
If you were to create an event listener that only contained an
onRemove function that prevented default, like this:
This would prevent the loader from being removed from the element. As such you should generally only use
preventDefault on removal when you are handling the loader removal yourself in the
Defines an element to append the standard Yellowfin loader to, rather than the element that has been passed in the
This means that if you wish the standard Yellowfin loader to be on a parent element it can be. When using this function, you must define the
setOverideElement in both the