Block display

Display Independence

In the Front Office, some blocks could require some specific CSS and JavaScript files. To allow any block to add some specific files, the main node layout loads the requireJS library which is a JavaScript file and module loader. Each block is allowed to call the require() function of the requireJS library. To allow CSS dynamic load, Open Orchestra offers an AMD module named openOrchestraCss which is meant to be used with requireJS. In a case in which the same block is displayed several times, corresponding CSS and JavaScript files will only be loaded once.

Block loader file

For each block there is a blockLoader.js file using the requireJS library. In a blockLoader.js file are defined the module used to load CSS: openOrchestraCss, specific JavaScript files in block and JavaScript files in common libraries which are needed to initialize a block.

After loading the elements, it does the initialization. During this step, CSS are loaded using the openOrchestraCss module with the load() function and optional JavaScript is run.

A blockLoader.js file is structured as the following:

requirejs(
    ['jquery'],
    function() {
        require(
            [
                //Define required elements
                'openOrchestraCss', //Module used to load CSS
                '/bundles/nameofbundle/block/NameOfMyBlock/js/foo.js', //Specific JavaScript in block
                '/bundles/nameofbundle/libs/bar/bar.js'//JavaScript in common libraries
            ],
            function (openOrchestraCss) {
                //Load block CSS
                openOrchestraCss.load(['/bundles/nameofbundle/block/NameOfMyBlock/css/style.css']);

                //You can add optional JavaScript code here
                jQuery(document).ready(function ($) {


                });
            }
        )
    }
);

Example: Gallery block

In the MediaBundle, the Resources/views/Block directory contains the Front Media blocks display templates. The file Gallery/show.html.twig ends with the blockLoader.js load which does CSS and JavaScript dynamic load in relation with Gallery block.

<script>
    require(['{{ asset('/bundles/openorchestramedia/block/Gallery/blockLoader.js') }}']);
</script>

Blocs maintainability

To keep consistency between all blocks, you should use a file tree like the following:

|_ MyBundle
    |_ Resources
        |_ public
        |   |_ block
        |   |   |_ NameOfMyBlock
        |   |       |_ css
        |   |       |   |_ * Place here css files of your block *
        |   |       |
        |   |       |_ js
        |   |       |   |_ * Place here JavaScript files of your block *
        |   |       |
        |   |       |_ img
        |   |       |   |_ * Place here images files of your block *
        |   |       |
        |   |       |_ blockLoader.js * Block loading file which loads specific css and JavaScript *
        |   |
        |   |_ libs
        |   |   |_ * Place here commons libraries to many blocks *
        |   |
        |   |_ img
        |       |_ * Place here commons images to many blocks *
        |
        |_ views
            |_ Block
                |_ NameOfMyBlock
                    |_ * Place here block display templates *