This commit is contained in:
Kerwin Bryant 2025-04-12 04:57:07 +00:00
parent f3fa4dd1c2
commit 8bab94aacb
2 changed files with 17 additions and 8 deletions

View File

@ -748,7 +748,7 @@ overflow-menu .overflow-menu-button {
}
overflow-menu .overflow-menu-button.active {
margin: 0 0 -2px;
padding: 2px 0 0;
border-bottom: 2px solid transparent;
background-color: transparent;
border-color: currentcolor;

View File

@ -14,6 +14,11 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
mutationObserver: MutationObserver;
lastWidth: number;
updateButtonActivationState() {
if (!this.button || !this.tippyContent) return;
toggleClass(this.button, 'active', Boolean(this.tippyContent.querySelector('.item.active')));
}
updateItems = throttle(100, () => {
if (!this.tippyContent) {
const div = document.createElement('div');
@ -125,9 +130,18 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
this.tippyContent.append(item);
}
// close tippy when clicking item of tippy
const items = this.tippyContent.querySelectorAll<HTMLElement>('.item');
for (const item of items) {
item.addEventListener('click', () => {
this.button?._tippy.hide();
});
}
// update existing tippy
if (this.button?._tippy) {
this.button._tippy.setContent(this.tippyContent);
this.updateButtonActivationState();
return;
}
@ -138,6 +152,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
btn.innerHTML = octiconKebabHorizontal;
this.append(btn);
this.button = btn;
this.updateButtonActivationState();
createTippy(btn, {
trigger: 'click',
@ -153,10 +168,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}, 0);
},
});
this.tippyContent.querySelector('.item').addEventListener('click', () => {
this.button._tippy.hide();
});
});
init() {
@ -225,9 +236,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}
attributeChangedCallback() {
if (!this.button || !this.tippyContent) return;
const containActiveInTippy = this.tippyContent.querySelector('.item.active');
toggleClass(this.button, 'active', Boolean(containActiveInTippy));
this.updateButtonActivationState();
}
disconnectedCallback() {