From a395bdbd7db1d48004bc16475b223d96594a02d3 Mon Sep 17 00:00:00 2001 From: tirupati_singh <tirupatisingh1027@gmail.com> Date: Thu, 29 May 2025 14:48:04 +0530 Subject: [PATCH 1/7] Issue #3526123: Fixed sticky table header issue when toolbar sticky disable, show on scroll-up enabled. --- css/admin_toolbar.sticky_behavior.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css/admin_toolbar.sticky_behavior.css b/css/admin_toolbar.sticky_behavior.css index 559d4dc..f47652a 100644 --- a/css/admin_toolbar.sticky_behavior.css +++ b/css/admin_toolbar.sticky_behavior.css @@ -11,3 +11,8 @@ body.toolbar-horizontal.sticky-toolbar-hidden .toolbar-oriented .toolbar-bar { transition: all 200ms ease-out; transform: translateY(-220%); } + +body.toolbar-horizontal.sticky-toolbar-hidden table.sticky-header thead { + transition: all 0.3s ease-in; + top: 0; +} -- GitLab From 0804e6bf5334ea01839b0cd7ebde6b33d35c9259 Mon Sep 17 00:00:00 2001 From: tirupati_singh <tirupatisingh1027@gmail.com> Date: Thu, 29 May 2025 16:32:04 +0530 Subject: [PATCH 2/7] Issue #3526123: Fixed the sticky table header design when toolbar hidden. --- admin_toolbar.libraries.yml | 2 ++ css/admin_toolbar.sticky_behavior.css | 5 ----- js/admin_toolbar.sticky_behavior.js | 4 ++++ 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/admin_toolbar.libraries.yml b/admin_toolbar.libraries.yml index 7bfd197..e9b4606 100644 --- a/admin_toolbar.libraries.yml +++ b/admin_toolbar.libraries.yml @@ -26,6 +26,8 @@ toolbar.disable_sticky: css: theme: css/admin_toolbar.disable_sticky.css: {} + dependencies: + - core/drupal.displace # Enable toolbar custom sticky behavior. toolbar.sticky_behavior: diff --git a/css/admin_toolbar.sticky_behavior.css b/css/admin_toolbar.sticky_behavior.css index f47652a..559d4dc 100644 --- a/css/admin_toolbar.sticky_behavior.css +++ b/css/admin_toolbar.sticky_behavior.css @@ -11,8 +11,3 @@ body.toolbar-horizontal.sticky-toolbar-hidden .toolbar-oriented .toolbar-bar { transition: all 200ms ease-out; transform: translateY(-220%); } - -body.toolbar-horizontal.sticky-toolbar-hidden table.sticky-header thead { - transition: all 0.3s ease-in; - top: 0; -} diff --git a/js/admin_toolbar.sticky_behavior.js b/js/admin_toolbar.sticky_behavior.js index 569aedc..f5b8472 100644 --- a/js/admin_toolbar.sticky_behavior.js +++ b/js/admin_toolbar.sticky_behavior.js @@ -54,6 +54,10 @@ element.classList.remove('sticky-toolbar-hidden'); } lastScrollTop = scrollTop; + + // Recalculate displacement offsets '--drupal-displace-offset-top' + // after the toolbar visibility changes to ensure correct layout. + Drupal.displace(); }); }, ); -- GitLab From 16bb9921de02cc08fb4e44e726d9cec3f61563e1 Mon Sep 17 00:00:00 2001 From: tirupati_singh <tirupatisingh1027@gmail.com> Date: Fri, 30 May 2025 18:04:18 +0530 Subject: [PATCH 3/7] Issue #3526123: Updated dependency for sticky_behavior library. --- admin_toolbar.libraries.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/admin_toolbar.libraries.yml b/admin_toolbar.libraries.yml index e9b4606..1d03b3f 100644 --- a/admin_toolbar.libraries.yml +++ b/admin_toolbar.libraries.yml @@ -26,8 +26,6 @@ toolbar.disable_sticky: css: theme: css/admin_toolbar.disable_sticky.css: {} - dependencies: - - core/drupal.displace # Enable toolbar custom sticky behavior. toolbar.sticky_behavior: @@ -38,6 +36,7 @@ toolbar.sticky_behavior: js/admin_toolbar.sticky_behavior.js: {} dependencies: - admin_toolbar/toolbar.tree + - core/drupal.displace # Enable toolbar toggle keyboard shortcut. toolbar.toggle_shortcut: -- GitLab From 9fa0023992f71595376898385b1f47e0dd3ae97a Mon Sep 17 00:00:00 2001 From: Michael Caldwell <21485-justcaldwell@users.noreply.drupalcode.org> Date: Fri, 30 May 2025 16:07:41 +0000 Subject: [PATCH 4/7] Toggle data-offset-top attributes --- admin_toolbar.libraries.yml | 1 + js/admin_toolbar.toggle_shortcut.js | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/admin_toolbar.libraries.yml b/admin_toolbar.libraries.yml index 1d03b3f..be1762a 100644 --- a/admin_toolbar.libraries.yml +++ b/admin_toolbar.libraries.yml @@ -48,3 +48,4 @@ toolbar.toggle_shortcut: js/admin_toolbar.toggle_shortcut.js: {} dependencies: - admin_toolbar/toolbar.tree + - core/drupal.displace diff --git a/js/admin_toolbar.toggle_shortcut.js b/js/admin_toolbar.toggle_shortcut.js index ba2141f..729bd5c 100644 --- a/js/admin_toolbar.toggle_shortcut.js +++ b/js/admin_toolbar.toggle_shortcut.js @@ -85,6 +85,12 @@ localStorage.getItem('Drupal.adminToolbar.toggleToolbarHidden') === 'true'; + // Get the toolbar-bar element and active tray. + const toolbarBarElement = document.getElementById('toolbar-bar'); + const activeTrayElement = document.getElementsByClassName( + 'toolbar-tray is-active' + )[0]; + // If the toolbar is hidden, show it. if (toolbarHidden) { // The JS 'toggle' function can't be used here because there could be @@ -92,16 +98,34 @@ // function calls have to be used instead. elementClassList.remove('sticky-toolbar-hidden'); elementClassList.remove('toggle-toolbar-hidden'); + // (Re)Add data-offset-top attribute. + toolbarBarElement.setAttribute('data-offset-top', ''); + if (activeTrayElement) { + activeTrayElement.setAttribute('data-offset-top', ''); + } } else { // If the toolbar is displayed, hide it. elementClassList.add('sticky-toolbar-hidden'); elementClassList.add('toggle-toolbar-hidden'); + // Remove data-offset-top attributes. + toolbarBarElement.removeAttribute('data-offset-top'); + if (activeTrayElement) { + activeTrayElement.removeAttribute('data-offset-top'); + } } + // Set the new state of the toolbar in local storage. localStorage.setItem( 'Drupal.adminToolbar.toggleToolbarHidden', !toolbarHidden, ); + + // Trigger a recalculation of viewport displacing elements. Use setTimeout + // to ensure this recalculation happens after changes to visual elements + // have processed. + setTimeout(() => { + Drupal.displace(); + }, "500"); }, }; -- GitLab From 4664c34ff72c3373fed93fe903854824c3f07012 Mon Sep 17 00:00:00 2001 From: Michael Caldwell <justcaldwell@gmail.com> Date: Thu, 5 Jun 2025 14:50:13 -0500 Subject: [PATCH 5/7] Remove unneeded attribute toggles --- js/admin_toolbar.toggle_shortcut.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/js/admin_toolbar.toggle_shortcut.js b/js/admin_toolbar.toggle_shortcut.js index 729bd5c..f2b4974 100644 --- a/js/admin_toolbar.toggle_shortcut.js +++ b/js/admin_toolbar.toggle_shortcut.js @@ -85,12 +85,6 @@ localStorage.getItem('Drupal.adminToolbar.toggleToolbarHidden') === 'true'; - // Get the toolbar-bar element and active tray. - const toolbarBarElement = document.getElementById('toolbar-bar'); - const activeTrayElement = document.getElementsByClassName( - 'toolbar-tray is-active' - )[0]; - // If the toolbar is hidden, show it. if (toolbarHidden) { // The JS 'toggle' function can't be used here because there could be @@ -98,20 +92,10 @@ // function calls have to be used instead. elementClassList.remove('sticky-toolbar-hidden'); elementClassList.remove('toggle-toolbar-hidden'); - // (Re)Add data-offset-top attribute. - toolbarBarElement.setAttribute('data-offset-top', ''); - if (activeTrayElement) { - activeTrayElement.setAttribute('data-offset-top', ''); - } } else { // If the toolbar is displayed, hide it. elementClassList.add('sticky-toolbar-hidden'); elementClassList.add('toggle-toolbar-hidden'); - // Remove data-offset-top attributes. - toolbarBarElement.removeAttribute('data-offset-top'); - if (activeTrayElement) { - activeTrayElement.removeAttribute('data-offset-top'); - } } // Set the new state of the toolbar in local storage. -- GitLab From e1224716f1ef9b9e4544500c5692b849b57cb29e Mon Sep 17 00:00:00 2001 From: Michael Caldwell <justcaldwell@gmail.com> Date: Thu, 5 Jun 2025 14:50:55 -0500 Subject: [PATCH 6/7] Add disable_sticky JS behavior --- admin_toolbar.libraries.yml | 4 +++ js/admin_toolbar.disable_sticky.js | 45 ++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 js/admin_toolbar.disable_sticky.js diff --git a/admin_toolbar.libraries.yml b/admin_toolbar.libraries.yml index be1762a..8b93b23 100644 --- a/admin_toolbar.libraries.yml +++ b/admin_toolbar.libraries.yml @@ -26,6 +26,10 @@ toolbar.disable_sticky: css: theme: css/admin_toolbar.disable_sticky.css: {} + js: + js/admin_toolbar.disable_sticky.js: {} + dependencies: + - admin_toolbar/toolbar.tree # Enable toolbar custom sticky behavior. toolbar.sticky_behavior: diff --git a/js/admin_toolbar.disable_sticky.js b/js/admin_toolbar.disable_sticky.js new file mode 100644 index 0000000..c01ace8 --- /dev/null +++ b/js/admin_toolbar.disable_sticky.js @@ -0,0 +1,45 @@ +/** + * @file + * Admin Toolbar disable sticky behavior JS. + */ + +(($, Drupal, once) => { + /** + * Implements the Admin Toolbar configured 'disabled sticky behavior'. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Attaches the behavior to remove reset top offset. + */ + Drupal.behaviors.adminToolbarDisableStickyBehavior = { + attach (context) { + if (context !== document) { + return; + } + // If toolbar 'stickyness' is disabled, the toolbar should not be + // included in the calculation of the top offset. Listen for the offset + // change event and remove data-offset-top attributes from toolbar-bar + // and any active toolbar-tray. + once('admin-toolbar-disable-sticky', 'body', context).forEach(() => { + $(document).on( + `drupalViewportOffsetChange`, + () => { + document.getElementById('toolbar-bar') + .removeAttribute('data-offset-top'); + + document.querySelector('.toolbar-tray.is-active') + ?.removeAttribute('data-offset-top'); + + // Trigger a recalculation of viewport displacing elements. + // Use setTimeout to ensure this recalculation happens after + // changes to visual elements have processed. + setTimeout(() => { + Drupal.displace(false); + }, "500"); + }, + ); + }); + }, + }; +})(jQuery, Drupal, once); -- GitLab From 3151c8342da473595fe54a2b148596c51f8fdf3e Mon Sep 17 00:00:00 2001 From: tirupati_singh <tirupatisingh1027@gmail.com> Date: Fri, 6 Jun 2025 12:33:35 +0530 Subject: [PATCH 7/7] Issue #3526123: Added dupral.displace dependency in the disable_sticky library. --- admin_toolbar.libraries.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/admin_toolbar.libraries.yml b/admin_toolbar.libraries.yml index 8b93b23..6bf7020 100644 --- a/admin_toolbar.libraries.yml +++ b/admin_toolbar.libraries.yml @@ -30,6 +30,7 @@ toolbar.disable_sticky: js/admin_toolbar.disable_sticky.js: {} dependencies: - admin_toolbar/toolbar.tree + - core/drupal.displace # Enable toolbar custom sticky behavior. toolbar.sticky_behavior: -- GitLab