3 * Defines the behavior of the Drupal administration toolbar.
6 (function($, Drupal, drupalSettings) {
7 // Merge run-time settings with the defaults.
8 const options = $.extend(
12 'toolbar.standard': '',
16 drupalSettings.toolbar,
17 // Merge strings on top of drupalSettings so that they are not mutable.
20 horizontal: Drupal.t('Horizontal orientation'),
21 vertical: Drupal.t('Vertical orientation'),
27 * Registers tabs with the toolbar.
29 * The Drupal toolbar allows modules to register top-level tabs. These may
30 * point directly to a resource or toggle the visibility of a tray.
32 * Modules register tabs with hook_toolbar().
34 * @type {Drupal~behavior}
36 * @prop {Drupal~behaviorAttach} attach
37 * Attaches the toolbar rendering functionality to the toolbar element.
39 Drupal.behaviors.toolbar = {
41 // Verify that the user agent understands media queries. Complex admin
42 // toolbar layouts require media query support.
43 if (!window.matchMedia('only screen').matches) {
46 // Process the administrative toolbar.
48 .find('#toolbar-administration')
51 // Establish the toolbar models and views.
52 const model = new Drupal.toolbar.ToolbarModel({
54 localStorage.getItem('Drupal.toolbar.trayVerticalLocked'),
56 activeTab: document.getElementById(
57 JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID')),
59 height: $('#toolbar-administration').outerHeight(),
62 Drupal.toolbar.models.toolbarModel = model;
64 // Attach a listener to the configured media query breakpoints.
65 // Executes it before Drupal.toolbar.views to avoid extra rendering.
66 Object.keys(options.breakpoints).forEach(label => {
67 const mq = options.breakpoints[label];
68 const mql = window.matchMedia(mq);
69 Drupal.toolbar.mql[label] = mql;
70 // Curry the model and the label of the media query breakpoint to
71 // the mediaQueryChangeHandler function.
73 Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label),
75 // Fire the mediaQueryChangeHandler for each configured breakpoint
76 // so that they process once.
77 Drupal.toolbar.mediaQueryChangeHandler.call(
85 Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView(
89 strings: options.strings,
92 Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView(
96 strings: options.strings,
99 Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView(
106 // Force layout render to fix mobile view. Only needed on load, not
107 // for every media query match.
108 model.trigger('change:isFixed', model, model.get('isFixed'));
109 model.trigger('change:activeTray', model, model.get('activeTray'));
111 // Render collapsible menus.
112 const menuModel = new Drupal.toolbar.MenuModel();
113 Drupal.toolbar.models.menuModel = menuModel;
114 Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView(
117 .find('.toolbar-menu-administration')
120 strings: options.strings,
124 // Handle the resolution of Drupal.toolbar.setSubtrees.
125 // This is handled with a deferred so that the function may be invoked
127 Drupal.toolbar.setSubtrees.done(subtrees => {
128 menuModel.set('subtrees', subtrees);
129 const theme = drupalSettings.ajaxPageState.theme;
130 localStorage.setItem(
131 `Drupal.toolbar.subtrees.${theme}`,
132 JSON.stringify(subtrees),
134 // Indicate on the toolbarModel that subtrees are now loaded.
135 model.set('areSubtreesLoaded', true);
138 // Trigger an initial attempt to load menu subitems. This first attempt
139 // is made after the media query handlers have had an opportunity to
140 // process. The toolbar starts in the vertical orientation by default,
141 // unless the viewport is wide enough to accommodate a horizontal
142 // orientation. Thus we give the Toolbar a chance to determine if it
143 // should be set to horizontal orientation before attempting to load
145 Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
148 // Update the model when the viewport offset changes.
149 .on('drupalViewportOffsetChange.toolbar', (event, offsets) => {
150 model.set('offsets', offsets);
153 // Broadcast model changes to other modules.
155 .on('change:orientation', (model, orientation) => {
157 'drupalToolbarOrientationChange',
161 .on('change:activeTab', (model, tab) => {
162 $(document).trigger('drupalToolbarTabChange', tab);
164 .on('change:activeTray', (model, tray) => {
165 $(document).trigger('drupalToolbarTrayChange', tray);
168 // If the toolbar's orientation is horizontal and no active tab is
169 // defined then show the tray of the first toolbar tab by default (but
170 // not the first 'Home' toolbar tab).
172 Drupal.toolbar.models.toolbarModel.get('orientation') ===
174 Drupal.toolbar.models.toolbarModel.get('activeTab') === null
176 Drupal.toolbar.models.toolbarModel.set({
178 '.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a',
184 'dialog:aftercreate': (event, dialog, $element, settings) => {
185 const $toolbar = $('#toolbar-bar');
186 $toolbar.css('margin-top', '0');
188 // When off-canvas is positioned in top, toolbar has to be moved down.
189 if (settings.drupalOffCanvasPosition === 'top') {
190 const height = Drupal.offCanvas
191 .getContainer($element)
193 $toolbar.css('margin-top', `${height}px`);
195 $element.on('dialogContentResize.off-canvas', () => {
196 const newHeight = Drupal.offCanvas
197 .getContainer($element)
199 $toolbar.css('margin-top', `${newHeight}px`);
203 'dialog:beforeclose': () => {
204 $('#toolbar-bar').css('margin-top', '0');
212 * Toolbar methods of Backbone objects.
218 * A hash of View instances.
220 * @type {object.<string, Backbone.View>}
225 * A hash of Model instances.
227 * @type {object.<string, Backbone.Model>}
232 * A hash of MediaQueryList objects tracked by the toolbar.
234 * @type {object.<string, object>}
239 * Accepts a list of subtree menu elements.
241 * A deferred object that is resolved by an inlined JavaScript callback.
243 * @type {jQuery.Deferred}
245 * @see toolbar_subtrees_jsonp().
247 setSubtrees: new $.Deferred(),
250 * Respond to configured narrow media query changes.
252 * @param {Drupal.toolbar.ToolbarModel} model
254 * @param {string} label
256 * @param {object} mql
257 * A MediaQueryList object.
259 mediaQueryChangeHandler(model, label, mql) {
261 case 'toolbar.narrow':
263 isOriented: mql.matches,
264 isTrayToggleVisible: false,
266 // If the toolbar doesn't have an explicit orientation yet, or if the
267 // narrow media query doesn't match then set the orientation to
269 if (!mql.matches || !model.get('orientation')) {
270 model.set({ orientation: 'vertical' }, { validate: true });
274 case 'toolbar.standard':
276 isFixed: mql.matches,
284 mql.matches && !model.get('locked') ? 'horizontal' : 'vertical',
288 // The tray orientation toggle visibility does not need to be
291 isTrayToggleVisible: mql.matches,
302 * A toggle is an interactive element often bound to a click handler.
305 * A string representing a DOM fragment.
307 Drupal.theme.toolbarOrientationToggle = function() {
309 '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
310 '<button class="toolbar-icon" type="button"></button>' +
316 * Ajax command to set the toolbar subtrees.
318 * @param {Drupal.Ajax} ajax
319 * {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
320 * @param {object} response
321 * JSON response from the Ajax request.
322 * @param {number} [status]
323 * XMLHttpRequest status.
325 Drupal.AjaxCommands.prototype.setToolbarSubtrees = function(
330 Drupal.toolbar.setSubtrees.resolve(response.subtrees);
332 })(jQuery, Drupal, drupalSettings);