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

fix search

Browse Source
This commit is contained in:
konnorrogers
2024-03-13 12:40:14 -04:00
parent daadc111ca
commit a6dcafe09d
1 changed files with 6 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/src/components/overrides/Search.astro
View File

@@ -105,94 +105,15 @@ const pagefindTranslations = {
}
});
let translations = {};
try {
this.translations = JSON.parse(this.dataset.translations || '{}');
translations = JSON.parse(this.dataset.translations || '{}');
} catch {}
this.openBtn.addEventListener('click', this.openModal);
this.openBtn.disabled = false;
this.closeBtn.addEventListener('click', this.closeModal);
this.dialog.addEventListener('close', this.handleClose)
const shouldStrip = this.dataset.stripTrailingSlash !== undefined;
const stripTrailingSlash = (path: string) => path.replace(/(.)\/(#.*)?$/, '$1$2');
const formatURL = shouldStrip ? stripTrailingSlash : (path: string) => path;
// Listen for `/` and `cmd + k` keyboard shortcuts.
window.addEventListener('keydown', this.handleKeyDown);
window.addEventListener('DOMContentLoaded', this.loadPageFind);
window.addEventListener('turbo:load', this.loadPageFind);
}
disconnectedCallback () {
this.openBtn.removeEventListener('click', this.openModal);
this.closeBtn.removeEventListener('click', this.closeModal);
this.dialog.removeEventListener('close', this.handleClose)
// Listen for `/` and `cmd + k` keyboard shortcuts.
window.removeEventListener('keydown', this.handleKeyDown);
window.removeEventListener('DOMContentLoaded', this.loadPageFind);
window.removeEventListener('turbo:load', this.loadPageFind);
}
/** Close the modal if a user clicks on a link or outside of the modal. */
onClick = (event: MouseEvent) => {
const isLink = 'href' in (event.target || {});
if (
isLink ||
(document.body.contains(event.target as Node) &&
!this.dialogFrame.contains(event.target as Node))
) {
this.closeModal();
}
};
closeModal = () => this.dialog.close();
openModal = (event?: MouseEvent) => {
this.dialog.showModal();
document.body.toggleAttribute('data-search-modal-open', true);
this.querySelector('input')?.focus();
event?.stopPropagation();
window.addEventListener('click', this.onClick);
};
get openBtn () {
return this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
}
get closeBtn () {
return this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
}
get dialog () {
return this.querySelector('dialog')!;
}
get dialogFrame () {
return this.querySelector('.dialog-frame')!;
}
handleClose = () => {
document.body.toggleAttribute('data-search-modal-open', false);
window.removeEventListener('click', this.onClick);
};
handleKeyDown = (e: KeyboardEvent) => {
const isInput =
document.activeElement instanceof HTMLElement &&
(['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase()) ||
document.activeElement.isContentEditable);
if (e.metaKey === true && e.key === 'k') {
this.dialog.open ? this.closeModal() : this.openModal();
e.preventDefault();
} else if (e.key === '/' && !this.dialog.open && !isInput) {
this.openModal();
e.preventDefault();
}
}
loadPageFind = () => {
const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
document.querySelector("#starlight__search").innerHTML = ""
window.addEventListener('turbo:load', () => {
@@ -341,16 +262,7 @@ const pagefindTranslations = {
resultObserver.observe(search, observerOptions)
}
}
get formatURL () {
return this.shouldStrip ? this.stripTrailingSlash : (path: string) => path;
}
get shouldStrip () {
return this.dataset.stripTrailingSlash != null;
}
}
customElements.define('site-search', SiteSearch);
// :is(.pagefind-ui__result-title, .pagefind-ui__result-nested) .pagefind-ui__result-link {}
@@ -655,3 +567,4 @@ const pagefindTranslations = {
</style>