As mentioned in Extending EvoToolkit, element, object and component logic is stored in classes.
These contain methods, which allow you to trigger certain functionality or actions (For example:- modal open or toggle expander). To access these, we use the
evo()selector is a simple jQuery-like function allowing you to easily select EvoToolkit elements, objects and components (eg:-
c-button-group) and then trigger their class methods through a similarly named intermediary function (eg:-
The example below would find the first
.js-modal modal and fire its
evo('.js-modal') is very similar to
$('.js-modal') in jQuery. However it is not intended to replace these, as
evo() only returns a matching class instance, rather than a DOM node.
When adding extra logic to existing components, it's recommended that you add a new class with a
js prefix to your target element. Why? You may not want your new logic to apply to every instance of the component in use, and it also implies to other devs that JS logic is being applied to the element.
You can also pass an object containing any options as a second parameter to the intermediary function. These would override any option data attributes attached to the element which trigger the same behaviour.
Finally, there is a third parameter only required for layer parts which have classes on the top level block from 2 identically named parts from different layers (
c-expander etc). In this instance, you need to specify which layer the
evo() function should reference.
In this example, you're telling the
evo() function that it should call the
close() method from the expander class on the object layer, rather than the expander class on the component later.
evo('.c-expander').expander('close', false, 'object');
Besides a string, the
evo selector can accept a number of input types. Here's the full breakdown:-
This would toggle the first
js-my-expander expander found.
true would toggle all
You can also pass DOM references or nodelists, which allows for more dynamic usage of the
const myExpanders = document.querySelectorAll('.js-my-expander');
You can find a full list of each layer part's methods on each of their respective documentation pages.
evo selector also has helper functions available. These are:-
On page load, the
register() function fires for each layer part, triggering the
init function in the class where you would typically apply event listeners.
If any layer parts are added dynamically after initial page load, they wouldn't have been picked up by this process, so won't work as expected. This is because their
init function hasn't run, so no event listeners have been assigned.
To get around this, when dynamically injecting a layer part, you can manually rerun the register process and target only your new element. This is demonstrated in the example below, where a new tabs component is created, registered, and then added to the DOM:-
// Create a new HTML element.
const newTabs = document.createElement('div');
// Add the tab classes
// Inject the HTML content
newTabs.innerHTML = '
// Append to DOM
delete method in most cases simply removes the element from the DOM. For layer parts with state (such as calendar), it also removes the class instance containing that state from the global