3 * Builds a nested accordion widget.
5 * Invoke on an HTML list element with the jQuery plugin pattern.
8 * $('.toolbar-menu').drupalToolbarMenu();
11 (function ($, Drupal, drupalSettings) {
16 * Store the open menu tray.
18 var activeItem = Drupal.url(drupalSettings.path.currentPath);
20 $.fn.drupalToolbarMenu = function () {
23 handleOpen: Drupal.t('Extend'),
24 handleClose: Drupal.t('Collapse')
28 * Handle clicks from the disclosure button on an item with sub-items.
30 * @param {Object} event
31 * A jQuery Event object.
33 function toggleClickHandler(event) {
34 var $toggle = $(event.target);
35 var $item = $toggle.closest('li');
36 // Toggle the list item.
38 // Close open sibling menus.
39 var $openItems = $item.siblings().filter('.open');
40 toggleList($openItems, false);
44 * Handle clicks from a menu item link.
46 * @param {Object} event
47 * A jQuery Event object.
49 function linkClickHandler(event) {
50 // If the toolbar is positioned fixed (and therefore hiding content
51 // underneath), then users expect clicks in the administration menu tray
52 // to take them to that destination but for the menu tray to be closed
53 // after clicking: otherwise the toolbar itself is obstructing the view
54 // of the destination they chose.
55 if (!Drupal.toolbar.models.toolbarModel.get('isFixed')) {
56 Drupal.toolbar.models.toolbarModel.set('activeTab', null);
58 // Stopping propagation to make sure that once a toolbar-box is clicked
59 // (the whitespace part), the page is not redirected anymore.
60 event.stopPropagation();
64 * Toggle the open/close state of a list is a menu.
66 * @param {jQuery} $item
67 * The li item to be toggled.
69 * @param {Boolean} switcher
70 * A flag that forces toggleClass to add or a remove a class, rather than
71 * simply toggling its presence.
73 function toggleList($item, switcher) {
74 var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
75 switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
76 // Toggle the item open state.
77 $item.toggleClass('open', switcher);
79 $toggle.toggleClass('open', switcher);
80 // Adjust the toggle text.
83 // Expand Structure, Collapse Structure.
84 .text((switcher) ? ui.handleClose : ui.handleOpen);
88 * Add markup to the menu elements.
90 * Items with sub-elements have a list toggle attached to them. Menu item
91 * links and the corresponding list toggle are wrapped with in a div
92 * classed with .toolbar-box. The .toolbar-box div provides a positioning
93 * context for the item list toggle.
95 * @param {jQuery} $menu
96 * The root of the menu to be initialized.
98 function initItems($menu) {
100 class: 'toolbar-icon toolbar-handle',
101 action: ui.handleOpen,
104 // Initialize items and their links.
105 $menu.find('li > a').wrap('<div class="toolbar-box">');
106 // Add a handle to each list item if it has a menu.
107 $menu.find('li').each(function (index, element) {
108 var $item = $(element);
109 if ($item.children('ul.toolbar-menu').length) {
110 var $box = $item.children('.toolbar-box');
111 options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
112 $item.children('.toolbar-box')
113 .append(Drupal.theme('toolbarMenuItemToggle', options));
119 * Adds a level class to each list based on its depth in the menu.
121 * This function is called recursively on each sub level of lists elements
122 * until the depth of the menu is exhausted.
124 * @param {jQuery} $lists
125 * A jQuery object of ul elements.
127 * @param {number} level
128 * The current level number to be assigned to the list elements.
130 function markListLevels($lists, level) {
131 level = (!level) ? 1 : level;
132 var $lis = $lists.children('li').addClass('level-' + level);
133 $lists = $lis.children('ul');
135 markListLevels($lists, level + 1);
140 * On page load, open the active menu item.
142 * Marks the trail of the active link in the menu back to the root of the
143 * menu with .menu-item--active-trail.
145 * @param {jQuery} $menu
146 * The root of the menu.
148 function openActiveItem($menu) {
149 var pathItem = $menu.find('a[href="' + location.pathname + '"]');
150 if (pathItem.length && !activeItem) {
151 activeItem = location.pathname;
154 var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('menu-item--active');
155 var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
156 toggleList($activeTrail, true);
160 // Return the jQuery object.
161 return this.each(function (selector) {
162 var $menu = $(this).once('toolbar-menu');
164 // Bind event handlers.
166 .on('click.toolbar', '.toolbar-box', toggleClickHandler)
167 .on('click.toolbar', '.toolbar-box a', linkClickHandler);
169 $menu.addClass('root');
171 markListLevels($menu);
172 // Restore previous and active states.
173 openActiveItem($menu);
179 * A toggle is an interactive element often bound to a click handler.
181 * @param {object} options
182 * Options for the button.
183 * @param {string} options.class
184 * Class to set on the button.
185 * @param {string} options.action
186 * Action for the button.
187 * @param {string} options.text
188 * Used as label for the button.
191 * A string representing a DOM fragment.
193 Drupal.theme.toolbarMenuItemToggle = function (options) {
194 return '<button class="' + options['class'] + '"><span class="action">' + options.action + '</span><span class="label">' + options.text + '</span></button>';
197 }(jQuery, Drupal, drupalSettings));