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.
47 $(context).find('#toolbar-administration').once('toolbar').each(function () {
48 // Establish the toolbar models and views.
49 const model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
50 locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')),
51 activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
52 height: $('#toolbar-administration').outerHeight(),
55 // Attach a listener to the configured media query breakpoints.
56 // Executes it before Drupal.toolbar.views to avoid extra rendering.
57 for (const label in options.breakpoints) {
58 if (options.breakpoints.hasOwnProperty(label)) {
59 const mq = options.breakpoints[label];
60 const mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
61 // Curry the model and the label of the media query breakpoint to
62 // the mediaQueryChangeHandler function.
63 mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
64 // Fire the mediaQueryChangeHandler for each configured breakpoint
65 // so that they process once.
66 Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
70 Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
73 strings: options.strings,
75 Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView({
78 strings: options.strings,
80 Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
85 // Force layout render to fix mobile view. Only needed on load, not
86 // for every media query match.
87 model.trigger('change:isFixed', model, model.get('isFixed'));
88 model.trigger('change:activeTray', model, model.get('activeTray'));
90 // Render collapsible menus.
91 const menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel();
92 Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
93 el: $(this).find('.toolbar-menu-administration').get(0),
95 strings: options.strings,
98 // Handle the resolution of Drupal.toolbar.setSubtrees.
99 // This is handled with a deferred so that the function may be invoked
101 Drupal.toolbar.setSubtrees.done((subtrees) => {
102 menuModel.set('subtrees', subtrees);
103 const theme = drupalSettings.ajaxPageState.theme;
104 localStorage.setItem(`Drupal.toolbar.subtrees.${theme}`, JSON.stringify(subtrees));
105 // Indicate on the toolbarModel that subtrees are now loaded.
106 model.set('areSubtreesLoaded', true);
109 // Trigger an initial attempt to load menu subitems. This first attempt
110 // is made after the media query handlers have had an opportunity to
111 // process. The toolbar starts in the vertical orientation by default,
112 // unless the viewport is wide enough to accommodate a horizontal
113 // orientation. Thus we give the Toolbar a chance to determine if it
114 // should be set to horizontal orientation before attempting to load
116 Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
119 // Update the model when the viewport offset changes.
120 .on('drupalViewportOffsetChange.toolbar', (event, offsets) => {
121 model.set('offsets', offsets);
124 // Broadcast model changes to other modules.
126 .on('change:orientation', (model, orientation) => {
127 $(document).trigger('drupalToolbarOrientationChange', orientation);
129 .on('change:activeTab', (model, tab) => {
130 $(document).trigger('drupalToolbarTabChange', tab);
132 .on('change:activeTray', (model, tray) => {
133 $(document).trigger('drupalToolbarTrayChange', tray);
136 // If the toolbar's orientation is horizontal and no active tab is
137 // defined then show the tray of the first toolbar tab by default (but
138 // not the first 'Home' toolbar tab).
139 if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
140 Drupal.toolbar.models.toolbarModel.set({
141 activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0),
149 * Toolbar methods of Backbone objects.
156 * A hash of View instances.
158 * @type {object.<string, Backbone.View>}
163 * A hash of Model instances.
165 * @type {object.<string, Backbone.Model>}
170 * A hash of MediaQueryList objects tracked by the toolbar.
172 * @type {object.<string, object>}
177 * Accepts a list of subtree menu elements.
179 * A deferred object that is resolved by an inlined JavaScript callback.
181 * @type {jQuery.Deferred}
183 * @see toolbar_subtrees_jsonp().
185 setSubtrees: new $.Deferred(),
188 * Respond to configured narrow media query changes.
190 * @param {Drupal.toolbar.ToolbarModel} model
192 * @param {string} label
194 * @param {object} mql
195 * A MediaQueryList object.
197 mediaQueryChangeHandler(model, label, mql) {
199 case 'toolbar.narrow':
201 isOriented: mql.matches,
202 isTrayToggleVisible: false,
204 // If the toolbar doesn't have an explicit orientation yet, or if the
205 // narrow media query doesn't match then set the orientation to
207 if (!mql.matches || !model.get('orientation')) {
208 model.set({ orientation: 'vertical' }, { validate: true });
212 case 'toolbar.standard':
214 isFixed: mql.matches,
220 orientation: ((mql.matches && !model.get('locked')) ? 'horizontal' : 'vertical'),
221 }, { validate: true });
222 // The tray orientation toggle visibility does not need to be
225 isTrayToggleVisible: mql.matches,
236 * A toggle is an interactive element often bound to a click handler.
239 * A string representing a DOM fragment.
241 Drupal.theme.toolbarOrientationToggle = function () {
242 return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
243 '<button class="toolbar-icon" type="button"></button>' +
248 * Ajax command to set the toolbar subtrees.
250 * @param {Drupal.Ajax} ajax
251 * {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
252 * @param {object} response
253 * JSON response from the Ajax request.
254 * @param {number} [status]
255 * XMLHttpRequest status.
257 Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
258 Drupal.toolbar.setSubtrees.resolve(response.subtrees);
260 }(jQuery, Drupal, drupalSettings));