JS Init

Initialize our components with 4 different methods.

For auto init and per component init methods, we provided a simple .no-axentix-init class to disable the basic initialization with the Axentix class for the specified component.
Using this class, you can use all components in your page, except the one you specified. You can now pass your specific parameters to use it.

Data init#

Using the data method, you are able to initialize any component inside your HTML file.
Every option will work normally : the camelCase option names are working in kebab-case, and the nested object of options are working well too.
Init syntax : data-ax-{componentName}
Option syntax : data-{componentName}-{option} 

<!-- Example with Collapsible -->
<div class="collapsible" id="example-collapsible" data-ax="collapsible">
  <div class="p-3 primary">Data init</div>
</div>

<!-- Example with Collapsible & Data options -->
<div class="collapsible" id="example-collapsible" data-ax="collapsible" data-collapsible-animation-duration="500">
  <div class="p-3 primary">Data init</div>
</div>

Auto init#

Detect automatically all Axentix components who need to be initialized, in only one line.
Using this way, you don't have to initialize anything else, but you can't pass options to your JS elements. 

new Axentix.Axentix('all');

We provide a way to call this method through your HTML file :

<body data-axentix>
<!-- Your body content -->
</body>

Per component type#

Detect all elements of the specified component type, and initialize them all using the same passed options.

/*** Example with Collapsible ***/
let axentixCollapsible = new Axentix.Axentix('collapsible');

// Accepts options
let axentixCollapsible = new Axentix.Axentix('collapsible', {animationDuration: 200});

Per element#

This method initialize the element individually using the passed options.

/*** Example with Collapsible ***/
let axentixCollapsible = new Axentix.Collapsible('#example-collapsible');

// Accepts options
let axentixCollapsible = new Axentix.Collapsible('#example-collapsible', {animationDuration: 200});

Methods#

Methods are useful to get the instances of the elements on your page. This way, you can interact with them using their specific methods. 

// Syntax : Axentix.{method}
let instances = Axentix.getAllInstance();

let collapsible = Axentix.getInstance('#example-collapsible');
collapsible.open();
Method Description
Axentix.getAllInstances() Get a table containing all instances of the JS elements on the page.
Axentix.getInstance(string) Get a specific instance using the id of the element. You will get all his properties.
Example : let instanceOfElem = Axentix.getInstance('#example-collapsible');
Axentix.getInstanceByType(type) Get a specific instance using the type of the element. You will get all the instances of this element type.
Example : let instances = Axentix.getInstanceByType('Collapsible');
Axentix.syncAll() This method synchronizes all components listeners.
This is useful if you are adding elements dynamically after loading the page.
Axentix.sync(string) This method synchronize the listeners of the specified component.
Example : Axentix.sync('#example-collapsible');
Axentix.resetAll() This method resets all components.
This is useful if you are changing a component dynamically, like a sidenav position.
Axentix.reset(string) This method reset the specified component.
Example : Axentix.reset('#example-collapsible');
Axentix.destroyAll() This method destroys all components.
Axentix.destroy(string) This method destroy the specified component.
Example : Axentix.destroy('#example-collapsible');

Events#

document.addEventListener('ax.component.sync', function() {
  // sync event !
});
Event Description
ax.component.sync Event sent when the sync() method of the component is called.
ax.component.reset Event sent when the reset() method of the component is called.
ax.component.destroy Event sent when the destroy() method of the component is called.