Editable navigation in website

Description

  • Define (multiple) navigation menu's in a template --> don't know how. Maybe inject as configuration, put a json file in the template, parse the base templates, or any other way. Also define the max. number of levels.

  • Database model to store the navigation menu's (per channel)

  • Generate the navigation menu's from the database using the KnpMenuBundle (to be a bit consistent with )

When the user is logged in and has the toolbar:

  • Generate an "Add navigation item" at the end of every menu / submenu

  • The "Add navigation item" results in a bootstap modal dialog with the "Add navigation item form part 2" form (see PDF, part 1 will be added later)

  • Generate an "(edit)" link at the end of every existing navigation item

  • The "(edit)" results in a bootstap modal dialog with the "Add navigation item form part 2" form (to edit)

Technical tasks

None

Deployment actions

None

Activity

Show:
Jeroen van Leeuwen
December 3, 2015, 7:31 AM

Got a few comments in the two PR's that are still open. Good luck with it!

Ger Jan van den Bosch
December 7, 2015, 8:52 AM

See the comments, should i fix this in this PR?

Marijn Otte
December 7, 2015, 9:11 AM

Ger Jan yes, I think so

Jeroen van Leeuwen
December 8, 2015, 7:24 AM

Almost there, got one question about the unfinished javascript.

Ger Jan van den Bosch
December 8, 2015, 8:30 AM
Edited

How to add a menu
{{ integrated_menu('<unique menu id>') }}

Required assets
(see base view website bundle)

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
{% stylesheets output='css/integrated/website.css' filter='uglifycss'
'@IntegratedWebsiteBundle/Resources/less/styles.less' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ asset('bundles/integratedcontent/components/handlebars/handlebars.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/integratedwebsite/components/bootbox/bootbox.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script type="text/javascript" src="{{ path('fos_js_routing_js', { 'callback': 'fos.Router.setData' }) }}"></script>

{% javascripts output='js/integrated/website.js' filter='uglifyjs2'
'@IntegratedWebsiteBundle/Resources/public/js/page.js'
'@IntegratedWebsiteBundle/Resources/public/js/menu.js'
'@IntegratedWebsiteBundle/Resources/public/js/grid.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Options
Customize the template
{{ integrated_menu('main-menu', { 'template': 'AppBundle:themes/dzgartials/menu/main.html.twig' })}}

Option

Description

Default

template

The template (HTML)

BraincraftedBootstrapBundle:Menu:bootstrap.html.twig

style

The style to render the menu

tabs (see http://bootstrap.braincrafted.com/components.html#menus)

depth

The depth of the menu

1

Assignee

Unassigned

Client

None

Fix versions

Configure