diff --git a/docroot/themes/custom/mass_admin_theme/css/overrides/toolbar-zoom-override.css b/docroot/themes/custom/mass_admin_theme/css/overrides/toolbar-zoom-override.css new file mode 100644 index 0000000000..b239d6b989 --- /dev/null +++ b/docroot/themes/custom/mass_admin_theme/css/overrides/toolbar-zoom-override.css @@ -0,0 +1,32 @@ +/* Toolbar tray overlay */ +.toolbar-tray.is-active.toolbar-tray-vertical > nav.toolbar-lining { + padding-bottom: 60px; +} + +html body .toolbar-tray-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 500; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + cursor: pointer; + display: block; +} + +html body .toolbar-tray-overlay.active { + opacity: 1; + visibility: visible; +} + +/* Prevent page scrolling when toolbar tray is open */ +html body.toolbar-tray-open { + overflow: hidden; + height: 100vh; + position: fixed; + width: 100%; +} \ No newline at end of file diff --git a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js new file mode 100644 index 0000000000..a29120df0a --- /dev/null +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -0,0 +1,112 @@ +(function ($, Drupal) { + "use strict"; + + /** + * Add overlay when toolbar tray is active + */ + Drupal.behaviors.toolbarTrayOverlay = { + attach: function (context, settings) { + // Only run once on document + if (context !== document) { + return; + } + + // Create overlay element + const overlay = $('
'); + + if (!$(".toolbar-tray-overlay").length) { + $("body").append(overlay); + } + + // Function to show overlay and prevent scrolling + function showOverlay() { + $(".toolbar-tray-overlay").addClass("active"); + $("body").addClass("toolbar-tray-overlay-active"); + } + + // Function to hide overlay and restore scrolling + function hideOverlay() { + $(".toolbar-tray-overlay").removeClass("active"); + $("body").removeClass("toolbar-tray-overlay-active"); + } + + // Function to close the toolbar tray + function closeToolbarTray() { + // Manually removing active classes interferes with Drupal's toolbar toggle mechanism + // Find the active toolbar tab and simulate a click to close it + const activeTab = $(".toolbar-bar .toolbar-tab.is-active .toolbar-item"); + + if (activeTab.length > 0) { + activeTab.trigger("click"); + } else { + // Fallback: try to use Drupal's toolbar model if available + if (Drupal.toolbar && Drupal.toolbar.models && Drupal.toolbar.models.toolbarModel) { + Drupal.toolbar.models.toolbarModel.set('activeTab', null); + } + } + + hideOverlay(); + } + + // Check toolbar state based on body class + function checkToolbarState() { + const bodyHasTrayOpen = $("body").hasClass("toolbar-tray-open"); + + if (bodyHasTrayOpen) { + showOverlay(); + } else { + hideOverlay(); + } + } + + // Handle clicks on navigation links within the toolbar tray + // When user navigates to a different page, the toolbar tray should close automatically + document.addEventListener('click', function(e) { + // Check if click is inside toolbar tray + const toolbarTray = e.target.closest('.toolbar-tray'); + if (!toolbarTray) return; + + // Check if click is on a link + const link = e.target.closest('a'); + if (!link) return; + + const systemPath = link.getAttribute('data-drupal-link-system-path'); + const role = link.getAttribute('role'); + + // Check if the link is an actual nav link + if (role !== "button" && systemPath && systemPath.trim() !== "") { + closeToolbarTray(); + } + }, true); + + // Handle overlay click to close tray + $(document).on("click", ".toolbar-tray-overlay.active", function (e) { + console.log("Overlay clicked"); + e.preventDefault(); + e.stopPropagation(); + closeToolbarTray(); + }); + + // Monitor body class changes using MutationObserver (AFTER click handlers) + const observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + if (mutation.type === "attributes" && mutation.attributeName === "class") { + checkToolbarState(); + } + }); + }); + + // Start observing body class changes + observer.observe(document.body, { + attributes: true, + attributeFilter: ["class"], + }); + + // Initial check on page load + setTimeout(function () { + checkToolbarState(); + }, 500); + + }, + }; +})(jQuery, Drupal); diff --git a/docroot/themes/custom/mass_admin_theme/mass_admin_theme.libraries.yml b/docroot/themes/custom/mass_admin_theme/mass_admin_theme.libraries.yml index 060dbb6b2e..fa232c7251 100644 --- a/docroot/themes/custom/mass_admin_theme/mass_admin_theme.libraries.yml +++ b/docroot/themes/custom/mass_admin_theme/mass_admin_theme.libraries.yml @@ -53,6 +53,7 @@ admin_overrides: css/overrides/collections-field.css: {} css/overrides/modals.css: {} css/overrides/select2-override.css: {} + css/overides/toolbar-zoom-override.css: {} layout: css/layout/layout.page.css: {} js: @@ -98,6 +99,17 @@ entity_browser_custom: theme: css/overrides/entity-browser-custom.css: {} +toolbar-zoom-override: + css: + theme: + css/overrides/toolbar-zoom-override.css: {} + js: + js/toolbar-zoom-override.js: {} + dependencies: + - core/drupal + - core/jquery + - toolbar/toolbar + modal_scroll_guard: version: 1.0.1 js: diff --git a/docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme b/docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme index 4e14934145..cef9eb67b3 100644 --- a/docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme +++ b/docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme @@ -360,6 +360,16 @@ function mass_admin_theme_form_alter(&$form, &$form_state, $form_id) { } +/** + * Implements hook_page_attachments_alter(). + */ +function mass_admin_theme_page_attachments_alter(array &$attachments) { + // Add toolbar zoom override for admin users + if (\Drupal::currentUser()->hasPermission('access toolbar')) { + $attachments['#attached']['library'][] = 'mass_admin_theme/toolbar-zoom-override'; + } +} + /** * Implements template_preprocess_views_view(). *