library mockup-bundle

hevinci/mockup-bundle

Utility bundle for mockup creation and export

Installation

composer require hevinci/mockup-bundle dev-master, _(*1)

Usage

1. Create a mockup directory in the Resource/views directory of your bundle. Alternatively, you can do the same in the app directory of your application:

    app
        Resources
            MyVendorMyBundle
                views
                    mockup

1. Create some mockups within this directory. Mockups are basically twig templates, which might take advantage of the provided library (see below) if needed., _(*2)

2. Use the mockup route with the path query parameter to render a particular mockup. For example, the url for rendering the template FooBarBundle::mockup/test.html.twig will be http://localhost/myproject/mockup?path=foobar/test.html. Note that:, _(*3)

   • the path must be prefixed by the name of the bundle in short, lower case notation
   • the mockup path segment must be omitted
   • the .twig extension must be omitted

3. Use the hevinci:mockup:export command to produce a standalone version of your mockup(s). That command will generate a package containing static html files and all the required assets. Currently this command accept as argument either a bundle name (e.g. FooBarBundle) or a template reference (e.g. FooBarBundle::mockup/test.html.twig), _(*4)

Map

By default, the hevinci:mockup:export command export all the templates it finds and references them in an index.html file at the root of the generated package. If you want to export only a selection of mockups and/or if you want to sort the mockups in a particular order, you can place a map.yml in your mockup directory:, _(*5)

#FooBarBundle/Resources/views/mockup/map.yml

- mockup-y.html.twig
- mockup-x.html.twig
- baz/mockup-z.html.twig

Library

claroline/layout.html.twig

Provides the basic structure of a claroline page, including the following blocks:, _(*6)

• title
• sidebar
• breadcrumb
• panelContent
  • panelTitle
  • panelRest
• modal

claroline/tool.html.twig

Provides a tool layout. Dedicated variables are used to render automatically some parts of the page. For example, the template:, _(*7)

{% extends 'HeVinciMockupBundle::library/claroline/tool.html.twig' %}

{% set toolName = 'My tool' %}
{% set toolSection = 'Administration' %}
{% set toolPage = ['Users', 'Management'] %}

will be rendered as the Users / Management page of an administration tool called "My tool"., _(*8)

Complete list of available variables:, _(*9)

• toolName: name of the tool
• toolSection: platform section ("Administration", "Bureau" or "Espace d'activités")
• toolIcon: short name of the font-awesome icon of the tool
• toolPage: path of the current page of the tool (breadcrumb)
• toolWorkspace: name of the workspace of the tool (workspace section only)

claroline/modal.html.twig

Provides a modal dialog skeleton with the following blocks:, _(*10)

• title
• body
• footer

A slot for the modal is already present in the main layout template and all its children. You can include a modal with an embed tag:, _(*11)

{% extends "HevinciMockupBundle::library/claroline/tool.html.twig" %}

{% block modal %}
    {% embed "HeVinciMockupBundle::library/claroline/modal.html.twig" %}
        {% block title %}Titre de la modale...{% endblock %}
        {% block body %}

claroline/resourceManager.html.twig

Provides the layout of the resource manager with one block:, _(*12)

• resources

This template is a child of tool.html.twig, so the variables associated with it (see above) can also be used:, _(*13)

{% extends 'HeVinciMockupBundle::library/claroline/resourceManager.html.twig' %}

{% set toolSection = 'Espaces d\activités' %}
{% set toolWorkspace = 'Mon espace' %}

{% block resources %}
    ...
{% endblock %}

The template includes a macro for thumbnail creation called resource. This macro accepts a hash of options:, _(*14)

• name (name of the resource)
• icon (path to the thumbnail asset)
• customActions (list of additional actions in the resource menu)

Example:, _(*15)

{% extends 'HeVinciMockupBundle::library/claroline/resourceManager.html.twig' %}
{% import 'HeVinciMockupBundle::library/claroline/resourceManager.html.twig' as macros %}

{% block resources %}
    {{
        macros.resource({
            "name": "Nouvelle ressource",
            "icon": "bundles/foobar/images/res_new.png",
            "customActions": ["Partager", "Exporter"]
        })
    }}
{% endblock %}

TODO

• Allow to export a particular mockup directory
• Extend the library