js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix mobile color picker bug (#462)

Browse Source
This commit is contained in:
Cory LaViska
2025-01-08 13:49:57 -05:00
committed by GitHub
parent 19042fcca4
commit b4c4074ae1
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/color-scheme-selector.njk
View File

@@ -1,5 +1,5 @@
{# Color scheme selector #}
<wa-dropdown id="color-scheme-selector">
<wa-dropdown class="color-scheme-selector">
<wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>

21
docs/assets/scripts/color-scheme.js
View File

@@ -14,12 +14,15 @@
}
function updateSelection() {
const menu = document.querySelector('#color-scheme-selector wa-menu');
if (!menu) return;
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
await customElements.whenDefined(item.localName);
await item.updateComplete;
item.checked = item.getAttribute('value') === colorScheme;
const menus = document.querySelectorAll('.color-scheme-selector wa-menu');
menus.forEach(menu => {
if (!menu) return;
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
await customElements.whenDefined(item.localName);
await item.updateComplete;
item.checked = item.getAttribute('value') === colorScheme;
});
});
}
@@ -27,14 +30,16 @@
// Selection is not preserved when changing page, so update when opening dropdown
document.addEventListener('wa-show', event => {
const colorSchemeSelector = event.target.closest('#color-scheme-selector');
const colorSchemeSelector = event.target.closest('.color-scheme-selector');
if (!colorSchemeSelector) return;
updateSelection();
});
// Listen for selections
document.addEventListener('wa-select', event => {
const menu = event.target.closest('#color-scheme-selector wa-menu');
const selector = event.target.closest('.color-scheme-selector');
const menu = selector?.querySelector('wa-menu');
console.log(menu);
if (!menu) return;
setColorScheme(event.detail.item.value);
});