From 3b3f4fda245c0e105983db26319abdf28150c467 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 28 Aug 2025 00:14:02 -0400 Subject: [PATCH 1/9] add js override --- .../js/toolbar-zoom-override.js | 107 ++++++++++++++++++ .../mass_admin_theme.libraries.yml | 8 ++ .../mass_admin_theme/mass_admin_theme.theme | 10 ++ 3 files changed, 125 insertions(+) create mode 100644 docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js 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..a35e68eb53 --- /dev/null +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -0,0 +1,107 @@ +(function ($, Drupal, window) { + "use strict"; + + /** + * Check if browser zoom is above 150% + */ + function isZoomAbove150() { + const zoomLevel = Math.round((window.outerWidth / window.innerWidth) * 100); + console.log(zoomLevel); + return zoomLevel >= 150; + } + + /** + * Force horizontal toolbar orientation + */ + function forceHorizontalToolbar() { + console.log("Forcing horizontal toolbar"); + + // Method 1: Direct CSS override + $("body").addClass("toolbar-zoom-override"); + + // Method 2: Try to set model if available + if ( + Drupal.toolbar && + Drupal.toolbar.models && + Drupal.toolbar.models.toolbarModel + ) { + const toolbarModel = Drupal.toolbar.models.toolbarModel; + toolbarModel.set({ + orientation: "horizontal", + locked: false, + isTrayToggleVisible: false, + }); + } + } + + /** + * Override the toolbar orientation behavior for high zoom levels + */ + Drupal.behaviors.toolbarZoomOverride = { + attach: function (context, settings) { + console.log("Toolbar zoom override behavior attached"); + + // Add CSS class for high zoom + if (isZoomAbove150()) { + forceHorizontalToolbar(); + } + + // Listen for zoom changes + let resizeTimer; + $(window).on("resize.toolbarZoom", function () { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(function () { + if (isZoomAbove150()) { + forceHorizontalToolbar(); + } else { + $("body").removeClass("toolbar-zoom-override"); + } + }, 250); + }); + + // Override toolbar model behavior if it exists + $(document).ready(function () { + setTimeout(function () { + if ( + Drupal.toolbar && + Drupal.toolbar.models && + Drupal.toolbar.models.toolbarModel + ) { + const toolbarModel = Drupal.toolbar.models.toolbarModel; + + // Store original method + if (typeof toolbarModel.onMediaQueryChange === "function") { + toolbarModel.originalOnMediaQueryChange = + toolbarModel.onMediaQueryChange; + } + + // Override the media query change method + toolbarModel.onMediaQueryChange = function () { + console.log("Media query change detected"); + + if (isZoomAbove150()) { + console.log("High zoom detected, forcing horizontal"); + this.set({ + orientation: "horizontal", + locked: false, + isTrayToggleVisible: false, + }); + return; + } + + // Otherwise, use the original behavior + if (this.originalOnMediaQueryChange) { + this.originalOnMediaQueryChange.apply(this, arguments); + } + }; + + // Initial check + if (isZoomAbove150()) { + forceHorizontalToolbar(); + } + } + }, 1000); // Give toolbar time to initialize + }); + }, + }; +})(jQuery, Drupal, window); 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 87d07b8744..fd8ae3cc6e 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 @@ -92,3 +92,11 @@ entity_browser_custom: css: theme: css/overrides/entity-browser-custom.css: {} + +toolbar-zoom-override: + js: + js/toolbar-zoom-override.js: {} + dependencies: + - core/drupal + - core/jquery + - toolbar/toolbar \ No newline at end of file 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 f21e65396d..621adb921e 100644 --- a/docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme +++ b/docroot/themes/custom/mass_admin_theme/mass_admin_theme.theme @@ -316,6 +316,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(). * From 557165b7525426c3cc08fa449308e542b4ea2d8d Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Fri, 29 Aug 2025 09:50:42 -0400 Subject: [PATCH 2/9] add overlay and halts scrolling when menu is open --- .../css/overrides/toolbar-zoom-override.css | 75 +++++++ .../js/toolbar-zoom-override.js | 212 ++++++++++-------- .../mass_admin_theme.libraries.yml | 4 + 3 files changed, 203 insertions(+), 88 deletions(-) create mode 100644 docroot/themes/custom/mass_admin_theme/css/overrides/toolbar-zoom-override.css 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..7941b8c6dc --- /dev/null +++ b/docroot/themes/custom/mass_admin_theme/css/overrides/toolbar-zoom-override.css @@ -0,0 +1,75 @@ +/* Toolbar tray overlay */ +html body .toolbar-tray-overlay { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + background-color: rgba(0, 0, 0, 0.5) !important; + z-index: 999 !important; + opacity: 0 !important; + visibility: hidden !important; + transition: opacity 0.3s ease, visibility 0.3s ease !important; + cursor: pointer !important; + display: block !important; +} + +html body .toolbar-tray-overlay.active { + opacity: 1 !important; + visibility: visible !important; +} + +/* Prevent page scrolling when toolbar tray is active */ +html body.toolbar-tray-overlay-active { + overflow: hidden !important; + height: 100vh !important; + position: fixed !important; + width: 100% !important; +} + +/* Alternative: Use Drupal's own toolbar-tray-open class */ +html body.toolbar-tray-open { + overflow: hidden !important; +} + +/* Ensure toolbar stays above overlay */ +html body #toolbar-administration { + z-index: 1000 !important; +} + +html body .toolbar-bar { + z-index: 1001 !important; +} + +html body .toolbar-tray { + z-index: 1001 !important; + position: fixed !important; +} + +html body .toolbar-tray-horizontal { + z-index: 1001 !important; + position: fixed !important; +} + +html body .toolbar-tray-vertical { + z-index: 1001 !important; + position: fixed !important; +} + +/* Ensure toolbar items stay clickable */ +.toolbar-bar .toolbar-tab, +.toolbar-bar .toolbar-item, +.toolbar-tray .toolbar-menu, +.toolbar-tray .toolbar-menu li, +.toolbar-tray .toolbar-menu a { + z-index: 503 !important; + position: relative; +} + +/* Ensure main page content is below overlay */ +#main-content, +.main-content, +.page-wrapper { + position: relative; + z-index: 50; +} \ 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 index a35e68eb53..c5ba659ac1 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -1,107 +1,143 @@ -(function ($, Drupal, window) { +(function ($, Drupal) { "use strict"; - /** - * Check if browser zoom is above 150% - */ - function isZoomAbove150() { - const zoomLevel = Math.round((window.outerWidth / window.innerWidth) * 100); - console.log(zoomLevel); - return zoomLevel >= 150; - } + console.log("Toolbar overlay script loaded"); /** - * Force horizontal toolbar orientation + * Add overlay when toolbar tray is active */ - function forceHorizontalToolbar() { - console.log("Forcing horizontal toolbar"); - - // Method 1: Direct CSS override - $("body").addClass("toolbar-zoom-override"); - - // Method 2: Try to set model if available - if ( - Drupal.toolbar && - Drupal.toolbar.models && - Drupal.toolbar.models.toolbarModel - ) { - const toolbarModel = Drupal.toolbar.models.toolbarModel; - toolbarModel.set({ - orientation: "horizontal", - locked: false, - isTrayToggleVisible: false, - }); - } - } - - /** - * Override the toolbar orientation behavior for high zoom levels - */ - Drupal.behaviors.toolbarZoomOverride = { + Drupal.behaviors.toolbarTrayOverlay = { attach: function (context, settings) { - console.log("Toolbar zoom override behavior attached"); + console.log("Toolbar overlay behavior attached"); - // Add CSS class for high zoom - if (isZoomAbove150()) { - forceHorizontalToolbar(); + // Only run once on document + if (context !== document) { + return; } - // Listen for zoom changes - let resizeTimer; - $(window).on("resize.toolbarZoom", function () { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(function () { - if (isZoomAbove150()) { - forceHorizontalToolbar(); - } else { - $("body").removeClass("toolbar-zoom-override"); - } - }, 250); + // Create overlay element + const overlay = $('
'); + + // Add overlay to body (only once) + if (!$(".toolbar-tray-overlay").length) { + $("body").append(overlay); + console.log("Overlay element added to body"); + } + + // Function to show overlay and prevent scrolling + function showOverlay() { + console.log("showOverlay called"); + $(".toolbar-tray-overlay").addClass("active"); + $("body").addClass("toolbar-tray-overlay-active"); + console.log("Overlay shown"); + } + + // Function to hide overlay and restore scrolling + function hideOverlay() { + console.log("hideOverlay called"); + $(".toolbar-tray-overlay").removeClass("active"); + $("body").removeClass("toolbar-tray-overlay-active"); + console.log("Overlay hidden"); + } + + // Function to close the toolbar tray + function closeToolbarTray() { + console.log("closeToolbarTray called"); + // Find the active tab and click it to close + const activeTab = $( + ".toolbar-bar .toolbar-tab.is-active .toolbar-item, .toolbar-bar .toolbar-tab.open .toolbar-item" + ); + console.log("Active tabs found:", activeTab.length); + if (activeTab.length > 0) { + activeTab.trigger("click"); + } + hideOverlay(); + } + + // Check toolbar state - improved detection + function checkToolbarState() { + // Multiple ways to detect if toolbar tray is open + const bodyHasTrayOpen = $("body").hasClass("toolbar-tray-open"); + const activeTrays = $(".toolbar-tray.is-active, .toolbar-tray:visible"); + const activeTabs = $(".toolbar-tab.is-active, .toolbar-tab.open"); + + console.log("=== Toolbar State Check ==="); + console.log("Body has toolbar-tray-open:", bodyHasTrayOpen); + console.log("Active trays:", activeTrays.length); + console.log("Active tabs:", activeTabs.length); + console.log("Body classes:", $("body").attr("class")); + + // If body has toolbar-tray-open class, tray is definitely open + if ( + bodyHasTrayOpen || + (activeTrays.length > 0 && activeTabs.length > 0) + ) { + console.log("Tray is open - showing overlay"); + showOverlay(); + return true; + } else { + console.log("Tray is closed - hiding overlay"); + hideOverlay(); + return false; + } + } + + // Watch for toolbar tab clicks + $(document).on( + "click", + ".toolbar-bar .toolbar-tab .toolbar-item", + function (e) { + console.log("Toolbar tab clicked:", $(this).text()); + + // Small delay to let Drupal process the click + setTimeout(function () { + checkToolbarState(); + }, 200); + } + ); + + // Handle overlay click to close tray + $(document).on("click", ".toolbar-tray-overlay.active", function (e) { + console.log("Overlay clicked"); + e.preventDefault(); + e.stopPropagation(); + closeToolbarTray(); }); - // Override toolbar model behavior if it exists - $(document).ready(function () { - setTimeout(function () { + // Watch for body class changes using MutationObserver + const observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { if ( - Drupal.toolbar && - Drupal.toolbar.models && - Drupal.toolbar.models.toolbarModel + mutation.type === "attributes" && + mutation.attributeName === "class" ) { - const toolbarModel = Drupal.toolbar.models.toolbarModel; - - // Store original method - if (typeof toolbarModel.onMediaQueryChange === "function") { - toolbarModel.originalOnMediaQueryChange = - toolbarModel.onMediaQueryChange; - } + const bodyClasses = $("body").attr("class"); + console.log("Body class changed:", bodyClasses); - // Override the media query change method - toolbarModel.onMediaQueryChange = function () { - console.log("Media query change detected"); - - if (isZoomAbove150()) { - console.log("High zoom detected, forcing horizontal"); - this.set({ - orientation: "horizontal", - locked: false, - isTrayToggleVisible: false, - }); - return; - } - - // Otherwise, use the original behavior - if (this.originalOnMediaQueryChange) { - this.originalOnMediaQueryChange.apply(this, arguments); - } - }; - - // Initial check - if (isZoomAbove150()) { - forceHorizontalToolbar(); + // Check specifically for toolbar-tray-open class + if (bodyClasses.includes("toolbar-tray-open")) { + console.log("toolbar-tray-open detected - showing overlay"); + showOverlay(); + } else { + console.log("toolbar-tray-open not detected - hiding overlay"); + hideOverlay(); } } - }, 1000); // Give toolbar time to initialize + }); }); + + observer.observe(document.body, { + attributes: true, + attributeFilter: ["class"], + }); + + // Initial check + setTimeout(function () { + console.log("Initial toolbar state check..."); + checkToolbarState(); + }, 1000); + + console.log("Toolbar tray overlay behavior setup complete"); }, }; -})(jQuery, Drupal, window); +})(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 fd8ae3cc6e..fd6fd55974 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: @@ -94,6 +95,9 @@ entity_browser_custom: css/overrides/entity-browser-custom.css: {} toolbar-zoom-override: + css: + theme: + css/overrides/toolbar-zoom-override.css: {} js: js/toolbar-zoom-override.js: {} dependencies: From 8b6470db0dfcbdb45eb24447a446f7b2eeaf5246 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 2 Sep 2025 10:18:37 -0400 Subject: [PATCH 3/9] wip --- .../js/toolbar-zoom-override.js | 99 ++++++++----------- 1 file changed, 40 insertions(+), 59 deletions(-) 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 index c5ba659ac1..01a388b61d 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -43,58 +43,66 @@ // Function to close the toolbar tray function closeToolbarTray() { console.log("closeToolbarTray called"); - // Find the active tab and click it to close - const activeTab = $( - ".toolbar-bar .toolbar-tab.is-active .toolbar-item, .toolbar-bar .toolbar-tab.open .toolbar-item" - ); - console.log("Active tabs found:", activeTab.length); - if (activeTab.length > 0) { - activeTab.trigger("click"); + + // Remove is-active class from toolbar items and trays + const activeToolbarItems = $(".toolbar-item.is-active"); + const activeTrays = $(".toolbar-tray.is-active"); + + console.log("Active toolbar items found:", activeToolbarItems.length); + console.log("Active trays found:", activeTrays.length); + + if (activeToolbarItems.length > 0) { + console.log("Removing is-active from toolbar items"); + activeToolbarItems.removeClass("is-active"); + } + + if (activeTrays.length > 0) { + console.log("Removing is-active from toolbar trays"); + activeTrays.removeClass("is-active"); + } + + // Also remove toolbar-tray-open from body if it exists + if ($("body").hasClass("toolbar-tray-open")) { + console.log("Removing toolbar-tray-open from body"); + $("body").removeClass("toolbar-tray-open"); } + hideOverlay(); } - // Check toolbar state - improved detection + // Check toolbar state function checkToolbarState() { - // Multiple ways to detect if toolbar tray is open const bodyHasTrayOpen = $("body").hasClass("toolbar-tray-open"); - const activeTrays = $(".toolbar-tray.is-active, .toolbar-tray:visible"); - const activeTabs = $(".toolbar-tab.is-active, .toolbar-tab.open"); + const activeTrays = $(".toolbar-tray.is-active"); + const activeItems = $(".toolbar-item.is-active"); console.log("=== Toolbar State Check ==="); console.log("Body has toolbar-tray-open:", bodyHasTrayOpen); console.log("Active trays:", activeTrays.length); - console.log("Active tabs:", activeTabs.length); - console.log("Body classes:", $("body").attr("class")); + console.log("Active items:", activeItems.length); - // If body has toolbar-tray-open class, tray is definitely open if ( bodyHasTrayOpen || - (activeTrays.length > 0 && activeTabs.length > 0) + activeTrays.length > 0 || + activeItems.length > 0 ) { console.log("Tray is open - showing overlay"); showOverlay(); - return true; } else { console.log("Tray is closed - hiding overlay"); hideOverlay(); - return false; } } - // Watch for toolbar tab clicks - $(document).on( - "click", - ".toolbar-bar .toolbar-tab .toolbar-item", - function (e) { - console.log("Toolbar tab clicked:", $(this).text()); - - // Small delay to let Drupal process the click - setTimeout(function () { - checkToolbarState(); - }, 200); - } - ); + // Watch for clicks on toolbar items + $(document).on("click", ".toolbar-item", function (e) { + console.log("Toolbar item clicked:", $(this).text()); + + // Small delay to let Drupal process the click and update classes + setTimeout(function () { + checkToolbarState(); + }, 100); + }); // Handle overlay click to close tray $(document).on("click", ".toolbar-tray-overlay.active", function (e) { @@ -104,38 +112,11 @@ closeToolbarTray(); }); - // Watch for body class changes using MutationObserver - const observer = new MutationObserver(function (mutations) { - mutations.forEach(function (mutation) { - if ( - mutation.type === "attributes" && - mutation.attributeName === "class" - ) { - const bodyClasses = $("body").attr("class"); - console.log("Body class changed:", bodyClasses); - - // Check specifically for toolbar-tray-open class - if (bodyClasses.includes("toolbar-tray-open")) { - console.log("toolbar-tray-open detected - showing overlay"); - showOverlay(); - } else { - console.log("toolbar-tray-open not detected - hiding overlay"); - hideOverlay(); - } - } - }); - }); - - observer.observe(document.body, { - attributes: true, - attributeFilter: ["class"], - }); - - // Initial check + // Initial check on page load setTimeout(function () { console.log("Initial toolbar state check..."); checkToolbarState(); - }, 1000); + }, 500); console.log("Toolbar tray overlay behavior setup complete"); }, From 19d5e373e5bfab5f86e22e2560087aa25e9d6024 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 30 Sep 2025 16:02:50 -0400 Subject: [PATCH 4/9] fix css --- .../css/overrides/toolbar-zoom-override.css | 85 +++++-------------- 1 file changed, 19 insertions(+), 66 deletions(-) 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 index 7941b8c6dc..ae819a934f 100644 --- 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 @@ -1,75 +1,28 @@ /* Toolbar tray overlay */ html body .toolbar-tray-overlay { - position: fixed !important; - top: 0 !important; - left: 0 !important; - width: 100% !important; - height: 100% !important; - background-color: rgba(0, 0, 0, 0.5) !important; - z-index: 999 !important; - opacity: 0 !important; - visibility: hidden !important; - transition: opacity 0.3s ease, visibility 0.3s ease !important; - cursor: pointer !important; - display: block !important; + 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 !important; - visibility: visible !important; + opacity: 1; + visibility: visible; } -/* Prevent page scrolling when toolbar tray is active */ -html body.toolbar-tray-overlay-active { - overflow: hidden !important; - height: 100vh !important; - position: fixed !important; - width: 100% !important; -} - -/* Alternative: Use Drupal's own toolbar-tray-open class */ +/* Prevent page scrolling when toolbar tray is open */ html body.toolbar-tray-open { - overflow: hidden !important; -} - -/* Ensure toolbar stays above overlay */ -html body #toolbar-administration { - z-index: 1000 !important; -} - -html body .toolbar-bar { - z-index: 1001 !important; -} - -html body .toolbar-tray { - z-index: 1001 !important; - position: fixed !important; -} - -html body .toolbar-tray-horizontal { - z-index: 1001 !important; - position: fixed !important; -} - -html body .toolbar-tray-vertical { - z-index: 1001 !important; - position: fixed !important; -} - -/* Ensure toolbar items stay clickable */ -.toolbar-bar .toolbar-tab, -.toolbar-bar .toolbar-item, -.toolbar-tray .toolbar-menu, -.toolbar-tray .toolbar-menu li, -.toolbar-tray .toolbar-menu a { - z-index: 503 !important; - position: relative; -} - -/* Ensure main page content is below overlay */ -#main-content, -.main-content, -.page-wrapper { - position: relative; - z-index: 50; + overflow: hidden; + height: 100vh; + position: fixed; + width: 100%; } \ No newline at end of file From 618275a71495f5f50a1b98867a7efe731ef048cf Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 2 Oct 2025 10:25:51 -0400 Subject: [PATCH 5/9] wip --- .../css/overrides/toolbar-zoom-override.css | 4 ++ .../js/toolbar-zoom-override.js | 59 +++++++++++++------ 2 files changed, 44 insertions(+), 19 deletions(-) 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 index ae819a934f..b239d6b989 100644 --- 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 @@ -1,4 +1,8 @@ /* 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; 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 index 01a388b61d..6b0142a7b4 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -70,22 +70,14 @@ hideOverlay(); } - // Check toolbar state + // Check toolbar state based on body class function checkToolbarState() { const bodyHasTrayOpen = $("body").hasClass("toolbar-tray-open"); - const activeTrays = $(".toolbar-tray.is-active"); - const activeItems = $(".toolbar-item.is-active"); console.log("=== Toolbar State Check ==="); console.log("Body has toolbar-tray-open:", bodyHasTrayOpen); - console.log("Active trays:", activeTrays.length); - console.log("Active items:", activeItems.length); - - if ( - bodyHasTrayOpen || - activeTrays.length > 0 || - activeItems.length > 0 - ) { + + if (bodyHasTrayOpen) { console.log("Tray is open - showing overlay"); showOverlay(); } else { @@ -94,14 +86,27 @@ } } - // Watch for clicks on toolbar items - $(document).on("click", ".toolbar-item", function (e) { - console.log("Toolbar item clicked:", $(this).text()); - - // Small delay to let Drupal process the click and update classes - setTimeout(function () { - checkToolbarState(); - }, 100); + // Handle clicks on navigation links within the toolbar tray + $(document).on("click", ".toolbar-tray a", function (e) { + const $link = $(this); + const systemPath = $link.attr("data-drupal-link-system-path"); + const role = $link.attr("role"); + + console.log("=== LINK CLICKED IN TOOLBAR ==="); + console.log("Link text:", $link.text().trim()); + + if (role !== "button" && systemPath && systemPath.trim() !== "") { + console.log("Closing tray - navigation link detected"); + + // Prevent the mutation observer from interfering + e.stopImmediatePropagation(); + + // Close the tray immediately + closeToolbarTray(); + + // Let the navigation proceed normally + return true; + } }); // Handle overlay click to close tray @@ -112,6 +117,22 @@ 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") { + console.log("Body class changed, checking toolbar state"); + checkToolbarState(); + } + }); + }); + + // Start observing body class changes + observer.observe(document.body, { + attributes: true, + attributeFilter: ["class"], + }); + // Initial check on page load setTimeout(function () { console.log("Initial toolbar state check..."); From df600cd938ac7c1a25d9627965477ea7ecb8471a Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 2 Oct 2025 10:29:35 -0400 Subject: [PATCH 6/9] fix inconsistent behavior after user clicking on the overlay to close tray --- .../js/toolbar-zoom-override.js | 57 +++++++++++-------- 1 file changed, 34 insertions(+), 23 deletions(-) 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 index 6b0142a7b4..b395b320bb 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -43,30 +43,41 @@ // Function to close the toolbar tray function closeToolbarTray() { console.log("closeToolbarTray called"); - - // Remove is-active class from toolbar items and trays - const activeToolbarItems = $(".toolbar-item.is-active"); - const activeTrays = $(".toolbar-tray.is-active"); - - console.log("Active toolbar items found:", activeToolbarItems.length); - console.log("Active trays found:", activeTrays.length); - - if (activeToolbarItems.length > 0) { - console.log("Removing is-active from toolbar items"); - activeToolbarItems.removeClass("is-active"); - } - - if (activeTrays.length > 0) { - console.log("Removing is-active from toolbar trays"); - activeTrays.removeClass("is-active"); - } - - // Also remove toolbar-tray-open from body if it exists - if ($("body").hasClass("toolbar-tray-open")) { - console.log("Removing toolbar-tray-open from body"); - $("body").removeClass("toolbar-tray-open"); + + // Instead of manually removing classes, try to trigger Drupal's close mechanism + // Find the active toolbar tab and simulate a click to close it + const activeTab = $(".toolbar-bar .toolbar-tab.is-active .toolbar-item"); + + console.log("Active toolbar tabs found:", activeTab.length); + + if (activeTab.length > 0) { + console.log("Clicking active tab to close toolbar"); + activeTab.trigger("click"); + } else { + // Fallback: try to use Drupal's toolbar model if available + if (Drupal.toolbar && Drupal.toolbar.models && Drupal.toolbar.models.toolbarModel) { + console.log("Using Drupal toolbar model to close"); + Drupal.toolbar.models.toolbarModel.set('activeTab', null); + } else { + // Last resort: manually remove classes + console.log("Fallback: manually removing classes"); + const activeToolbarItems = $(".toolbar-item.is-active"); + const activeTrays = $(".toolbar-tray.is-active"); + + if (activeToolbarItems.length > 0) { + activeToolbarItems.removeClass("is-active"); + } + + if (activeTrays.length > 0) { + activeTrays.removeClass("is-active"); + } + + if ($("body").hasClass("toolbar-tray-open")) { + $("body").removeClass("toolbar-tray-open"); + } + } } - + hideOverlay(); } From d941c53c8128ef5fb0d4913a54966076ecdb0cb5 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 2 Oct 2025 18:00:32 -0400 Subject: [PATCH 7/9] cleanup console logs and unused code --- .../js/toolbar-zoom-override.js | 81 ++++--------------- 1 file changed, 16 insertions(+), 65 deletions(-) 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 index b395b320bb..68f2e8d161 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -1,15 +1,11 @@ (function ($, Drupal) { "use strict"; - console.log("Toolbar overlay script loaded"); - /** * Add overlay when toolbar tray is active */ Drupal.behaviors.toolbarTrayOverlay = { attach: function (context, settings) { - console.log("Toolbar overlay behavior attached"); - // Only run once on document if (context !== document) { return; @@ -18,64 +14,30 @@ // Create overlay element const overlay = $('
'); - // Add overlay to body (only once) if (!$(".toolbar-tray-overlay").length) { $("body").append(overlay); - console.log("Overlay element added to body"); } // Function to show overlay and prevent scrolling function showOverlay() { - console.log("showOverlay called"); $(".toolbar-tray-overlay").addClass("active"); $("body").addClass("toolbar-tray-overlay-active"); - console.log("Overlay shown"); } // Function to hide overlay and restore scrolling function hideOverlay() { - console.log("hideOverlay called"); $(".toolbar-tray-overlay").removeClass("active"); $("body").removeClass("toolbar-tray-overlay-active"); - console.log("Overlay hidden"); } // Function to close the toolbar tray function closeToolbarTray() { - console.log("closeToolbarTray called"); - - // Instead of manually removing classes, try to trigger Drupal's close mechanism + // 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"); - - console.log("Active toolbar tabs found:", activeTab.length); - + if (activeTab.length > 0) { - console.log("Clicking active tab to close toolbar"); activeTab.trigger("click"); - } else { - // Fallback: try to use Drupal's toolbar model if available - if (Drupal.toolbar && Drupal.toolbar.models && Drupal.toolbar.models.toolbarModel) { - console.log("Using Drupal toolbar model to close"); - Drupal.toolbar.models.toolbarModel.set('activeTab', null); - } else { - // Last resort: manually remove classes - console.log("Fallback: manually removing classes"); - const activeToolbarItems = $(".toolbar-item.is-active"); - const activeTrays = $(".toolbar-tray.is-active"); - - if (activeToolbarItems.length > 0) { - activeToolbarItems.removeClass("is-active"); - } - - if (activeTrays.length > 0) { - activeTrays.removeClass("is-active"); - } - - if ($("body").hasClass("toolbar-tray-open")) { - $("body").removeClass("toolbar-tray-open"); - } - } } hideOverlay(); @@ -85,40 +47,32 @@ function checkToolbarState() { const bodyHasTrayOpen = $("body").hasClass("toolbar-tray-open"); - console.log("=== Toolbar State Check ==="); - console.log("Body has toolbar-tray-open:", bodyHasTrayOpen); - if (bodyHasTrayOpen) { - console.log("Tray is open - showing overlay"); showOverlay(); } else { - console.log("Tray is closed - hiding overlay"); hideOverlay(); } } // Handle clicks on navigation links within the toolbar tray - $(document).on("click", ".toolbar-tray a", function (e) { - const $link = $(this); - const systemPath = $link.attr("data-drupal-link-system-path"); - const role = $link.attr("role"); + // 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; - console.log("=== LINK CLICKED IN TOOLBAR ==="); - console.log("Link text:", $link.text().trim()); + // Check if click is on a link + const link = e.target.closest('a'); + if (!link) return; - if (role !== "button" && systemPath && systemPath.trim() !== "") { - console.log("Closing tray - navigation link detected"); - - // Prevent the mutation observer from interfering - e.stopImmediatePropagation(); - - // Close the tray immediately + 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(); - - // Let the navigation proceed normally - return true; } - }); + }, true); // Handle overlay click to close tray $(document).on("click", ".toolbar-tray-overlay.active", function (e) { @@ -132,7 +86,6 @@ const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.type === "attributes" && mutation.attributeName === "class") { - console.log("Body class changed, checking toolbar state"); checkToolbarState(); } }); @@ -146,11 +99,9 @@ // Initial check on page load setTimeout(function () { - console.log("Initial toolbar state check..."); checkToolbarState(); }, 500); - console.log("Toolbar tray overlay behavior setup complete"); }, }; })(jQuery, Drupal); From f5589681443295da3d2c9e980da7fcdda5c0c7f9 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 2 Oct 2025 18:03:35 -0400 Subject: [PATCH 8/9] add back drupal tool bar close --- .../custom/mass_admin_theme/js/toolbar-zoom-override.js | 6 ++++++ 1 file changed, 6 insertions(+) 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 index 68f2e8d161..944dc64ae3 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -38,6 +38,12 @@ 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) { + console.log("Using Drupal toolbar model to close"); + Drupal.toolbar.models.toolbarModel.set('activeTab', null); + } } hideOverlay(); From 17546b4a111b66d177a115e32db9e72a101ad3c8 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 2 Oct 2025 18:03:48 -0400 Subject: [PATCH 9/9] clean up --- .../themes/custom/mass_admin_theme/js/toolbar-zoom-override.js | 1 - 1 file changed, 1 deletion(-) 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 index 944dc64ae3..a29120df0a 100644 --- a/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js +++ b/docroot/themes/custom/mass_admin_theme/js/toolbar-zoom-override.js @@ -41,7 +41,6 @@ } else { // Fallback: try to use Drupal's toolbar model if available if (Drupal.toolbar && Drupal.toolbar.models && Drupal.toolbar.models.toolbarModel) { - console.log("Using Drupal toolbar model to close"); Drupal.toolbar.models.toolbarModel.set('activeTab', null); } }