gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Centralize help-icon overlay behavior across styleguide demos

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-26 09:43:30 +02:00
parent edbcc13db4
commit c06d317e31
7 changed files with 157 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+4 -62
View File
@@ -638,6 +638,7 @@
</p>
</section>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-mode-toggle:not(.sg-activation-mode-toggle)').forEach((toggle) => {
toggle.addEventListener('click', () => {
@@ -1098,60 +1099,9 @@
});
});
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-help-icon');
const panel = wrap.querySelector('.sg-help-icon-panel');
if (!button || !panel) {
return;
}
button.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = wrap.dataset.open !== 'true';
document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
const otherButton = otherWrap.querySelector('.sg-help-icon');
otherWrap.dataset.open = 'false';
if (otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
}
});
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
demo.dataset.open = 'false';
if (trigger) {
trigger.setAttribute('aria-expanded', 'false');
}
});
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((menuWrap) => {
const menuButton = menuWrap.querySelector('.sg-sandwich-button');
menuWrap.dataset.open = 'false';
if (menuButton) {
menuButton.setAttribute('aria-expanded', 'false');
}
});
wrap.dataset.align = 'left';
wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState));
if (!nextState) {
return;
}
const panelRect = panel.getBoundingClientRect();
if (panelRect.right > window.innerWidth) {
wrap.dataset.align = 'right';
}
const alignedPanelRect = panel.getBoundingClientRect();
if (alignedPanelRect.left < 0) {
wrap.dataset.align = 'left';
}
});
window.sgInitHelpIconOverlays({
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
});
// Global close behavior for overlay-style controls.
@@ -1160,7 +1110,6 @@
if (
event.target.closest('.sg-sandwich-menu-wrap')
|| event.target.closest('.sg-pulldown-demo')
|| event.target.closest('.sg-help-icon-wrap')
) {
return;
}
@@ -1181,13 +1130,6 @@
}
});
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-help-icon');
wrap.dataset.open = 'false';
if (button) {
button.setAttribute('aria-expanded', 'false');
}
});
});
</script>