john-okeefe
48eaa2d286
- Wrap all Alpine.data() object literals in arrow functions (() => ({}))
- This fixes "n.bind is not a function" errors when Alpine initializes components
- Alpine.data() requires a factory function, not a plain object
- Ensures each component instance gets its own closure and proper this binding
Fixed 24 TypeScript files:
- admin.ts, analytics.ts, api.ts, api-explorer-docs.ts
- bookshelf.ts, collection-rules.ts, collections.ts, conflicts.ts
- device-management.ts, docs.ts, header.ts, index.ts
- library.ts, linking.ts, login.ts, password_validation.ts
- profile-modal.ts, profile.ts, queue.ts, register.ts
- search.ts, theme.ts, toast-error.ts, toast.ts, unlinked_books.ts
Before: Alpine.data("name", { method1, method2 })
After: Alpine.data("name", () => ({ method1, method2 }))
This is a critical fix for Alpine.js v3+ where components must be
registered as factory functions to ensure proper reactivity and
prevent binding errors during initialization.
107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { Alpine } from "./alpine";
|
|
|
|
function toggleSidebar(): void {
|
|
const sidebar = document.getElementById("docs-sidebar");
|
|
const overlay = document.getElementById("docs-overlay");
|
|
|
|
if (sidebar && overlay) {
|
|
sidebar.classList.toggle("translate-x-0");
|
|
sidebar.classList.toggle("-translate-x-full");
|
|
overlay.classList.toggle("hidden");
|
|
}
|
|
}
|
|
|
|
function initializeDocsSearch(): void {
|
|
const searchInput = document.getElementById(
|
|
"docs-search",
|
|
) as HTMLInputElement;
|
|
const searchResults = document.getElementById("docs-search-results");
|
|
|
|
if (!searchInput || !searchResults) return;
|
|
|
|
let docsSearchTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
searchInput.addEventListener("input", () => {
|
|
const query = searchInput.value.trim();
|
|
|
|
if (docsSearchTimeout) {
|
|
clearTimeout(docsSearchTimeout);
|
|
}
|
|
|
|
if (query.length < 2) {
|
|
searchResults.innerHTML = "";
|
|
searchResults.classList.add("hidden");
|
|
return;
|
|
}
|
|
|
|
docsSearchTimeout = setTimeout(() => {
|
|
performDocsSearch(query);
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
function performDocsSearch(query: string): void {
|
|
const searchResults = document.getElementById("docs-search-results");
|
|
if (!searchResults) return;
|
|
|
|
if (!(window as any).lunr) {
|
|
console.warn("Lunr.js not loaded");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const idx = (window as any).lunrIndex;
|
|
if (!idx) {
|
|
searchResults.innerHTML =
|
|
'<p class="p-2 text-sm" style="color: var(--text-secondary)">Search index not loaded</p>';
|
|
searchResults.classList.remove("hidden");
|
|
return;
|
|
}
|
|
|
|
const results = idx.search(query);
|
|
|
|
if (results.length === 0) {
|
|
searchResults.innerHTML =
|
|
'<p class="p-2 text-sm" style="color: var(--text-secondary)">No results found</p>';
|
|
} else {
|
|
searchResults.innerHTML = results
|
|
.slice(0, 10)
|
|
.map((result: { ref: string }) => {
|
|
const doc = (window as any).docsData?.[result.ref];
|
|
if (!doc) return "";
|
|
|
|
return `
|
|
<a href="${result.ref}" class="block p-2 hover:bg-opacity-50 transition-colors" style="background-color: var(--bg-secondary)">
|
|
<p class="font-medium text-sm" style="color: var(--text-primary)">${doc.title || result.ref}</p>
|
|
${doc.section ? `<p class="text-xs" style="color: var(--text-secondary)">${doc.section}</p>` : ""}
|
|
</a>
|
|
`;
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
searchResults.classList.remove("hidden");
|
|
} catch (error) {
|
|
console.error("Search error:", error);
|
|
searchResults.innerHTML =
|
|
'<p class="p-2 text-sm" style="color: var(--text-secondary)">Search error</p>';
|
|
searchResults.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
initializeDocsSearch();
|
|
});
|
|
|
|
Alpine.data("docs", () => ({
|
|
toggleSidebar,
|
|
initializeSearch: initializeDocsSearch,
|
|
}));
|
|
|
|
export { toggleSidebar, initializeDocsSearch };
|
|
|
|
Alpine.data("docs", () => ({
|
|
toggleSidebar,
|
|
initializeSearch: initializeDocsSearch,
|
|
}));
|