The Divhunt framework is built with a modular approach in mind, therefore we've created an add-on system. It's important to mention that everything in Divhunt is an add-on, including the modules such as (animations, events, sources, libraries), as well as HTML elements (input, select, button) and application add-ons for example builder add-ons (transform, tabs, advanced, designer, settings) and many more.

All those add-ons share the same structure, so learning how add-on works, you'll instantly get familiar with all the other add-ons built on top of the Divhunt framework.

Structure

Every add-on is structured in the same way, an add-on consists of methods organised into multiple groups.

Main Group

List of methods that which single add-on holds.

/* Returns name of an add-on */
mdLibraries.GetName();

/* Reload state - determines if add-on data (items, options) will be cleared on page load */
mdLibraries.GetReload();
mdLibraries.SetReload(true / false);

/* Ready state - can be trigger manually or automatically */
mdLibraries.GetReady();
mdLibraries.Ready(...data); // Trigger manually
mdLibraries.OnReady(() => {
    // Catch ready state of add-on
});

/* Returns list of items */
mdLibraries.GetItems();

/* Returns list of functions */
mdLibraries.GetFunctions();

/* Returns list of options */
mdLibraries.GetOptions();

/* Returns list of pages */
mdLibraries.GetPages();

/* Temp options */
mdLibraries.GetTemp('key'); // Returns previously saved temporarily option for 'key'
mdLibraries.SetTemp('key', 'value'); // Saves temporarily option for 'key' until page changes.
mdLibraries.SetTemp('key', null); // Removes value for 'key'

/* Save options */
mdLibraries.GetSave('key'); // Returns previously saved permanently option for 'key'
mdLibraries.SetSave('key', 'value'); // Saves permanently option for 'key' even when page changes.
mdLibraries.SetSave('key', null); // Removes value for 'key'

Functions Group

Within add-on you can create custom functions and reuse them. Here are basic usage example of add-on function.

Create Function

Use following example to create function in add-on. Function will stored and ready to be used later on.

mdLibraries.FunctionCreate('hello.world', function(addon, name)
{
    console.log(`Hello World - ${name}`);
});

Call Function

Both options for calling functions are valid.

mdLibraries.FunctionRun('hello.world', 'earth');
mdLibraries.Fn('hello.world', 'earth');

Other Methods

Here are few more examples what functions group can do.

/* Get function by name */
mdLibraries.FunctionGet('hello.world');

/* Catch function execution */
mdLibraries.FunctionCatch('hello.world', (addon, ...data) =>
{
    // This code will be executed before function execution
    // ...data is the array of values passed to the function
}, 
(addon, response, ...data) => 
{
    // This code will be executed after function execution
    // response is the outcome of the function after execution
    // ...data is the array of values passed to the function
});

Render Group

With add-on you can create reusable pieces of HTML code, that can rendered multiple times. This is similar as HTML components.

Render group only works on builder side. There are no render group functions on live website.

Create Render

Use following example to create your first render.

mdLibraries.RenderCreate('title', function(addon, data)
{
    let sanitize = true;
    let title = data('title'); // or data('title', 'This is default title');

    return `
        ${dh.sanitize(title)}
    `;
});

When default option is used data('title', 'default title'), it's important to keep in mind that typeof value being sent over render, must match the typeof default value. So if the default value is string, string must be passed.

Always sanitize user inputs to prevent XSS attacks. Use function dh.sanitize('string here').

Call Render

Render can be called unlimited times with different paremeters.

mdLibraries.Render('title');

// Output
`This is default title`

mdLibraries.Render('title', {title: 'New title'});

// Output
`New title`

It's important to mention that each render will be wrapped with tag that contains both name of add-on + render name and a unique class based on render name, so in this example .b2ccd8f6a. It is recommended to perform all css styles on the unique class.

Other Methods

Here are few more examples what render group can do.

/* Catch render execution */
mdLibraries.RenderCatch('title', (addon, data) =>
{
    // This code will be executed before render
    // data is an function that holds key => value pairs.
}, 
(addon, html, data) => 
{
    // This code will be executed after render
    // html is the outcome of the render
    // data is an function that holds key => value pairs.
});

/* Add attributes on block wrap */
mdLibraries.Render('title', {}, {
    id: 'title-id',
    class: 'title-class'
});

/* Render without block wrap */
mdLibraries.Render('title', {}, {}, false);

/* Replace render, if render was wrapped you can replace on DOM */
mdLibraries.Render('title', {}, {}, true, true);

It is also possible to re-write renders that's already created. This can be done by creating same render with same name. Alternately, for higher priority, you can catch render before execution and replace render callback function.

/* Method 1 */
mdLibraries.RenderCreate('title', function(addon, data)
{
    // This will overwrite previously created render
    return 're-writted';
});

/* Method 2 */
mdLibraries.RenderCatch('title', (addon) =>
{
    addon.RenderCreate('title', function(addon, data)
    {
        // This will overwrite previously created render
        return 're-writted';
    });
});