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
patterns/options-row.html
+5 -63
View File
@@ -120,6 +120,7 @@
</div>
</section>
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
@@ -193,14 +194,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');
}
});
demo.dataset.align = 'left';
demo.dataset.open = String(nextState);
trigger.setAttribute('aria-expanded', String(nextState));
@@ -282,67 +275,16 @@
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
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');
}
});
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'],
outsideClickIgnoreSelectors: ['.sg-pulldown-demo'],
});
document.addEventListener('click', (event) => {
if (event.target.closest('.sg-help-icon-wrap') || event.target.closest('.sg-pulldown-demo')) {
if (event.target.closest('.sg-pulldown-demo')) {
return;
}
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');
}
});
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
demo.dataset.open = 'false';