Eightweb CMS made with Eight\PageBundle

Widgets

How to use widgets

 

The following widget has been created to add code snippets to this page:

        <?php

namespace AppBundle\Widget;

use Eight\PageBundle\Widget\AbstractWidget;
use Eight\PageBundle\Variable\Config\Config;

class Code extends AbstractWidget
{
    public function getVars()
    {
        return array(
            'html_classes',
            'code_class',
            'code' => new Config(array(
                'type' => 'text',
                'raw' => true,
                )),
            );
    }

    public function getLayout()
    {
        return 'AppBundle:Widget:code.html.twig';
    }

    public function getName()
    {
        return 'code';
    }

    public function js()
    {
        return array(
            '/bundles/app/lib/highlight/highlight.pack.js',
            '/bundles/app/js/code.js',
            );
    }

    public function css()
    {
        return array(
            '/bundles/app/lib/highlight/styles/github.css',
            );
    }
}
    

and its template...

        {# AppBundle:Widget:code.html.twig #}

<div class="code {{ html_classes }}">
    <pre>
        <code class="{{ code_class }}">{% spaceless %}{{ code }}{% endspaceless %}</code>
    </pre>
</div>
    

This is the widget being used to show the source code.

It is a class tagged with name "eight_page.widget" that features a unique name, a template and two editable variables. Variable function "getVars" is not actually required, you can just name a widget and assign a template and if it's properly tagged it is ready to be used within the cms. In this case the widget uses two variables and in particular it populates them before calling the template when rendering and it will also render a form to edit them in the admin area.

This widget also uses a couple more features: it is able to append assets to the page, using js and css methods. This happens thanks to the calls to eight_javascripts() and eight_stylesheets() in the layout.

Working with javascript libraries in admin section

Another important detail to note: when editing in the admin area, some libraries may require redrawing: if you dinamically append a block of html, it is required to trigger the init function. This can be obtained by adding setup instructions to the editor in the admin.js file (for example), which is also dinamically appended to all admin pages thanks to the config.yml settings. In this case it is triggering code highlight refresh.

        // admin.js

$(function () {
    Editor.addPlugin(function () {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
});
    

This will instruct the editor to trigger library refresh after any page modification (addition, removal, modification or hide/unhide a block).

This feature may be used when editing pages that relies on libraries that requires to be triggered to refresh their content/style/behavior or whatever.

Loading widgets

In order to autoload widgets, you can use something like this in your services.yml and place your classes within that directory.

        # services.yml

AppBundle\Widget\:
        resource: '../../src/AppBundle/Widget/*'
        tags: [ 'eight_page.widget' ]
    

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.