Theme plugins

Plugins are HTML elements that will be displayed on the page. Below is how the example plugin works.

To call a plugin from code you can use the function

Get::themePlugin('example', ['hello' => 'first button', 'alert' => 'Hello World 1']);

You can use various plugins present in the template, then if you want to create new ones here's a brief guide on how to do it.

Building a theme plugin

To create a plugin you need to create a file in the theme/plugins folder of the theme with the plugin name. Inside it a PHP file with the plugin name itself

<div class="js_example_btn"  data-alert="<?php _p($alert); ?>">
    This is an example button:
    <div class="btn btn-primary js-btn"><?php _p($hello); ?></div>
</div>

the plugin's JS file is

'use strict'
class Example {
    // element container
    el_container = null;
    // alert message
    data_alert_msg = '';

    constructor(el) {
        this.el_container = el
        this.data_alert_msg = el.getAttribute('data-alert')
        this.init()
    }
    /**
     * In the init all the listeners you want to attach to the element should be placed
     * @returns void
     */
    init() {
        // by writing the function as an arrow function I can use the class's this inside the function
        this.el_container.querySelector('.js-btn').addEventListener('click', (ev) => {
                // I prefer to use ev.currentTarget instead of ev.target because I make sure to get the right element, namely the one that has the listener
                this.click(ev.currentTarget)
         })   
    }

    click(el) {
        // I can use el.closest('.my-class') to find the first element above me that has the my-class class
        // I can use el.querySelector('.my-class') to find the first element below me that has the my-class class
        alert(this.data_alert_msg)
    }
}

/**
 * Attach my module to all elements with the js_example class
 */
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.js_example_btn').forEach(function(el) {
        new Example(el);
    })
})

The result:

echo Get::themePlugin('example', ['hello' => 'first button', 'alert' => 'Hello World 1']);
echo Get::themePlugin('example', ['hello' => 'Second button', 'alert' => 'Hello World 2']);

Table example

Tables are one of the fundamental elements for data visualization, so the system has a specific plugin to handle tables. You can learn more about this topic here

Dynamic Table

echo Get::themePlugin('table', ['info' => $info, 'rows' => $rows, 'page_info' => $page_info]);

Static table

echo Get::themePlugin('staticTable', ['rows' => $rows]);

id	name	email	age
1	John Doe	john@doe.com	24
2	Alice	alice@mail.com	30
3	Bob Marley	Bob@marley.com	40
4	Charlie	Charlie@mail.com	50
5	David	david@mail.com	60

The data for the table is:

Rows

$rows = [
    (object)['id' => 1, 'name' => 'John Doe', 'email' => 'john@doe.com', 'age' => '24'],
    (object)['id' => 2, 'name' => 'Alice', 'email' => 'alice@mail.com', 'age' => '30'],
    (object)['id' => 3, 'name' => 'Bob Marley', 'email' => 'Bob@marley.com' , 'age' => '40'],
    (object) ['id' => 4, 'name' => 'Charlie', 'email' => 'Charlie@mail.com', 'age' => '50'],
    (object)['id' => 5, 'name' => 'David', 'email' => 'david@mail.com', 'age' => '60']
];
$info = [
    'checkbox' => ['type'=>'checkbox', 'label' => '', 'order' => false],
    'id' => ['type'=>'text', 'label' => 'id', 'primary' => true, 'order' => false],
    'name' => ['type'=>'text', 'label' => _r('Name'), 'order' => false], 
    'email' => ['type'=>'text', 'label' => _r('Email'), 'order' => false],
    'age' => ['type'=>'date', 'label' => _r('Registered'), 'order' => false],
    
];
$page_info = [
    'page' => 1,
    'action' =>'',
    'id' => 'example_table', 
    'limit' => 10,
    'limit_start' => 0,
    'order_field' => '',
    'order_dir' => '',
    'total_record' => count($rows),
    'filters' => '',
    'footer' => false,
    'pagination' => false,
    'json' => false
];