Leafiny Documentation

JavaScript

This section describes Leafiny Javascript edition.

Theme

The theme is located in the Frontend module: /modules/Frontend/

The Frontend module is the core of your app, it should never be updated with new Leafiny releases. This module is always loaded after others, it contains optional overrides of templates, CSS and JS from all modules, and your own resources.

Javascript overview

Javascript files are located in /modules/Frontend/skin/js directory.

Leafiny default theme do not use a Javascript library. Only a few lines of Vanilla JS are present for the gallery on a product page.

So you are free to use the JS library you like.

Add a JS file

Open the Frontend module config file: /modules/Frontend/etc/config.php

Head

The head block contains a javascript key (default Leafiny theme do not load any JS in the head section).

/** modules/Frontend/etc/config.php **/

'block' => [
    'head' => [
        /* ... */
       'javascript' => [
            'Frontend::js/jquery-3.5.1.min.js'  => 100,
            'Frontend::js/lolight-1.4.0.min.js' => 200,
        ],
        /* ... */
    ],
],

The key is the JS file path in skin directory of the specified module (/modules/Frontend/skin)
The value is the JS sort order

The 2 JS files in this example are loaded in the head section, on all pages:

<head>
    <!-- ... -->
    <script type="text/javascript" src="https://.../skin/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://.../skin/js/lolight-1.4.0.min.js"></script>
</head>

Javascript files in head section are used for load the JS libraries usefull for the project.
You can also add JS declarations in the head template (modules/Frontend/template/block/head.twig).

Before body end

The script block contains a javascript key. Default theme load a single JS file:

/** modules/Frontend/etc/config.php **/

'block' => [
    'script' => [
        /* ... */
       'javascript' => [
            'Frontend::js/app.js' => 100,
        ],
        /* ... */
    ],
],

The key is the JS file path in skin directory of the specified module (/modules/Frontend/skin)
The value is the JS sort order

This JS file is loaded before the body end tag, on all pages:

<body>
    <!-- page content -->
    <script type="text/javascript" src="https://.../skin/js/app.js"></script>
</body>

Javascript files in before body end section are used for run website JS code.
You can also add JS declarations in the script template (modules/Frontend/template/block/script.twig).

Page JS code

We can load JS file for a specific page (not for the whole site).

Add a javascript key in a page configuration. Example:

/** modules/Frontend/etc/config.php **/

'page' => [
    '/' => [
        /* ... */
       'javascript' => [
            'Frontend::js/home.js' => 200,
        ],
        /* ... */
    ],
    '/post/*.html' => [
        /* ... */
       'javascript' => [
            'Frontend::js/post.js' => 200,
        ],
        /* ... */
    ],
    '/category/*.html' => [
        /* ... */
       'javascript' => [
            'Frontend::js/category.js' => 200,
        ],
        /* ... */
    ],
],

This will add :

js/home.js file before the body end tag only on the home page
js/post.js file before the body end tag only on the post page
js/category.js file before the body end tag only on the category page

<!-- Home page -->

<body>
    <!-- page content -->
    <script type="text/javascript" src="https://.../skin/js/app.js"></script>
    <script type="text/javascript" src="https://.../skin/js/home.js"></script>
</body>

Remove a JS file

Remove JS file in /modules/Frontend/skin/js directory, and remove the JS declaration by comment or delete the line or set null for position:

/** modules/Frontend/etc/config.php **/

'block' => [
    'head' => [
        /* ... */
        'javascript' => [
            // 'Frontend::js/jquery-3.5.1.min.js' => 100,
            'Frontend::js/lolight-1.4.0.min.js' => null,
        ],
        /* ... */
    ],
    'script' => [
        /* ... */
       'javascript' => [],
        /* ... */
    ],
],

Override a JS file

Third-party modules can declare JS files.

Open the config file of the third-party module (in etc directory) and find JS declaration, example:

/** modules/Leafiny_Catalog/etc/config.php **/

'page' => [
    /* ... */
    '/product/*.html' => [
        'class'   => Catalog_Page_Product_View::class,
        'content' => 'Leafiny_Catalog::page/product/view.twig',
        'javascript' => [
            'Leafiny_Catalog::js/product.js' => 100
        ],
    ],
    /* ... */
]

The JS file is named product.js in /modules/Leafiny_Catalog/skin/js directory. Copy this file in the Frontend module: /modules/Frontend/skin/js/override/product.js.

Then, open the Frontend module config file: /modules/Frontend/etc/config.php, disable original file and declare your own:

/** modules/Frontend/etc/config.php **/

'page' => [
    /* ... */
    '/product/*.html' => [
        'javascript' => [
            'Leafiny_Catalog::js/product.js' => null,
            'Frontend::js/override/product.js' => 100,
        ],
    ],
    /* ... */
]
],

When null (or false) is specified for the value instead of the position, the file is disabled.

Security

In .htaccess file, Leafiny disable inline JS scripts with a CSP rule (Content Security Policy). We strongly discourage the use of inline scripts.

<IfModule mod_headers.c>
    Header set X-Frame-Options DENY
    Header set Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; base-uri 'self'"
</IfModule>

With JS events and data-* global attributes it's easy not to use inline scripts.

<a href="#" id="my-link" data-text="Hello World!">Show text!</a>

/** modules/Frontend/skin/js/app.js **/
/** Vanilla JS **/

let link = document.getElementById('my-link');

link.addEventListener('click', function (event) {
    event.preventDefault();
    alert(this.getAttribute('data-text'));
});