Dynamic Menu

PHP

plugins/cap-dynamic-menu/cap-dynamic-menu.php

Plugin Name: Capitularia Dynamic Menu Plugin URI: Description: Build navigation menus from user-specified HTML-tags.

Version: 0.1.0 Author: Marcello Perathoner Author URI: License: GPLv2 or later Text Domain: cap-dynamic-menu Domain Path: /languages

Capitularia Dynamic Menu plugin.

The Dynamic Menu plugin provides a navigation menu for the sidebar. The menu entries are collected from DOM elements and attributes of the HTML page and allow the user to navigate to portions of the document. The menu entries may be nested.

You may configure the menu with xpath expressions, eg.to build a menu from all <h3>, <h4>, and <h5> tags on the page. The menu entries will be properly nested.

The PHP code only outputs a placeholder tag. The Javascript code will build the actual menu using the DOM of the page.

constant DOMAIN

‘cap-dynamic-menu’

The Text Domain

plugins/cap-dynamic-menu/functions.php

Capitularia Dynamic Menu global functions.

constant MAGIC_MENU

‘#cap_dynamic_menu#’

ns(function_name)

Add current namespace

Parameters:

  • function_name (string) – The class or function name without namespace

Returns:

Name with namespace

Return type:

string

on_enqueue_scripts()

Enqueue Javascript and CSS for the front page.

Return type:

void

Add attribute data-cap-dynamic-menu.

Puts the item description into the HTML attribute data-cap-dynamic-menu. Otherwise it would get lost.

See: src/js/front.js for more information.

Parameters:

  • atts (array) – The old HTML attributes.

  • item (WP_Post) – The current menu item.

  • args (stdClass) – An object of wp_nav_menu() arguments.

  • depth (int) – Depth of menu item. Used for padding.

Returns:

The updated HTML attributes.

Return type:

array

Javascript

plugins/cap-dynamic-menu/src/js/front.js

The dynamic menu applet. The dynamic menu is generated from xpath expressions that query the page content. There is one xpath expression for every level of the menu. Use the standard wordpress admin interface to define the xpath expressions: To make a dynamic menu, insert a Custom Link item into any Wordpress menu and give it a magic url of: #cap_dynamic_menu#. The Custom Link item will be replaced by the generated menu. Put all the xpath expressions for each level of the menu into the Description field. Separate each level with a § (section sign). The default xpath expressions are: //h3[@id]§//h4[@id]§//h5[@id]§//h6[@id], which generate a 4 level deep menu built from all <h3>-<h6> elements that have an id attribute. The caption of a generated menu item is taken from the data-cap-dyn-menu-caption attribute on the source element or from the source element’s textContent. All classes in the CSS Classes field in the Wordpress admin interface are copied over to each generated menu item along with a class $class-level-$level. Eg. a class of my-menu would become my_menu and my-menu-level-1. All classes on the elements matched with the xpath expressions, that start with dynamic-menu-, are copied to each generated menu item. Additionally classes named menu-item, dynamic-menu-item, and dynamic-menu-item-level-$level are added to each generated menu item. .. note:: We use webpack as a workaround to load javascript modules in Wordpress. Wordpress cannot load javascript modules thru enqueue_script () because it lacks an option to specify type=”module” on the <script> element. Webpack also packs babel-runtime for us. babel-runtime is required for async functions.

plugins/cap-dynamic-menu/front.DOMAIN
cap-dynamic-menu

The Wordpress Text Domain of the plugin.

plugins/cap-dynamic-menu/front.init_dynamic_menues()

Initialize all dynamic menus on the page. This routine looks for an <a> with the data-cap-dynamic-menu attribute and transmogrifies it into the real menu by going through the DOM of the page and adding all elements that fit the xpath’es in the attribute.