Loading core/modules/navigation/js/admin-toolbar-wrapper.js +22 −18 Original line number Diff line number Diff line Loading @@ -81,6 +81,7 @@ Drupal.displace(true); }); } /** * Initialize Drupal.displace() Loading @@ -88,24 +89,27 @@ * We add the displace attribute to a separate full width element because we * don't want this element to have transitions. Note that this element and the * navbar share the same exact width. * * @param {HTMLElement} el - The admin toolbar wrapper. */ const initDisplace = () => { const displaceElement = doc .querySelector('.admin-toolbar') ?.querySelector('.admin-toolbar__displace-placeholder'); const initDisplace = (el) => { const displaceElement = el.querySelector( '.admin-toolbar__displace-placeholder', ); const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left'; displaceElement?.setAttribute(`data-offset-${edge}`, ''); Drupal.displace(true); }; initDisplace(); } // Any triggers on page. Inside or outside sidebar. // For now button in sidebar + mobile header and background. Drupal.behaviors.navigationProcessToolbarTriggers = { attach: (context) => { once('navigation-displace', '.admin-toolbar', context).forEach( initDisplace, ); const triggers = once( 'admin-toolbar-trigger', '[aria-controls="admin-toolbar"]', Loading core/modules/navigation/tests/src/Nightwatch/Tests/navigationDisplaceTest.js 0 → 100644 +26 −0 Original line number Diff line number Diff line /** * Verify that Drupal.displace() attribute is properly added by JavaScript. */ module.exports = { '@tags': ['core', 'navigation'], browser(browser) { browser .drupalInstall() .drupalInstallModule('navigation', true) .drupalInstallModule('big_pipe') .setWindowSize(1220, 800); }, after(browser) { browser.drupalUninstall(); }, 'Verify displace attribute': (browser) => { browser.drupalLoginAsAdmin(() => { browser .drupalRelativeURL('/admin/') .waitForElementPresent( '.admin-toolbar__displace-placeholder[data-offset-left]', ); }); }, }; Loading
core/modules/navigation/js/admin-toolbar-wrapper.js +22 −18 Original line number Diff line number Diff line Loading @@ -81,6 +81,7 @@ Drupal.displace(true); }); } /** * Initialize Drupal.displace() Loading @@ -88,24 +89,27 @@ * We add the displace attribute to a separate full width element because we * don't want this element to have transitions. Note that this element and the * navbar share the same exact width. * * @param {HTMLElement} el - The admin toolbar wrapper. */ const initDisplace = () => { const displaceElement = doc .querySelector('.admin-toolbar') ?.querySelector('.admin-toolbar__displace-placeholder'); const initDisplace = (el) => { const displaceElement = el.querySelector( '.admin-toolbar__displace-placeholder', ); const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left'; displaceElement?.setAttribute(`data-offset-${edge}`, ''); Drupal.displace(true); }; initDisplace(); } // Any triggers on page. Inside or outside sidebar. // For now button in sidebar + mobile header and background. Drupal.behaviors.navigationProcessToolbarTriggers = { attach: (context) => { once('navigation-displace', '.admin-toolbar', context).forEach( initDisplace, ); const triggers = once( 'admin-toolbar-trigger', '[aria-controls="admin-toolbar"]', Loading
core/modules/navigation/tests/src/Nightwatch/Tests/navigationDisplaceTest.js 0 → 100644 +26 −0 Original line number Diff line number Diff line /** * Verify that Drupal.displace() attribute is properly added by JavaScript. */ module.exports = { '@tags': ['core', 'navigation'], browser(browser) { browser .drupalInstall() .drupalInstallModule('navigation', true) .drupalInstallModule('big_pipe') .setWindowSize(1220, 800); }, after(browser) { browser.drupalUninstall(); }, 'Verify displace attribute': (browser) => { browser.drupalLoginAsAdmin(() => { browser .drupalRelativeURL('/admin/') .waitForElementPresent( '.admin-toolbar__displace-placeholder[data-offset-left]', ); }); }, };