127 lines
4 KiB
JavaScript
127 lines
4 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// Live reload when studio saves settings
|
|
const channel = new BroadcastChannel('writekit-studio');
|
|
channel.onmessage = function(event) {
|
|
if (event.data.type === 'settings-changed') {
|
|
location.reload();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', initSearch);
|
|
|
|
function initSearch() {
|
|
const trigger = document.getElementById('search-trigger');
|
|
const modal = document.getElementById('search-modal');
|
|
const backdrop = modal?.querySelector('.search-modal-backdrop');
|
|
const input = document.getElementById('search-input');
|
|
const results = document.getElementById('search-results');
|
|
|
|
if (!trigger || !modal || !input || !results) return;
|
|
|
|
let debounceTimer;
|
|
|
|
function open() {
|
|
modal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
input.value = '';
|
|
results.innerHTML = '';
|
|
setTimeout(() => input.focus(), 10);
|
|
}
|
|
|
|
function close() {
|
|
modal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
trigger.addEventListener('click', open);
|
|
backdrop.addEventListener('click', close);
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === '/' && !modal.classList.contains('active') &&
|
|
!['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
|
|
e.preventDefault();
|
|
open();
|
|
}
|
|
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
|
close();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('input', function() {
|
|
const query = this.value.trim();
|
|
clearTimeout(debounceTimer);
|
|
|
|
if (query.length < 2) {
|
|
results.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
debounceTimer = setTimeout(() => search(query), 150);
|
|
});
|
|
|
|
input.addEventListener('keydown', function(e) {
|
|
const items = results.querySelectorAll('.search-result');
|
|
const focused = results.querySelector('.search-result.focused');
|
|
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
if (!focused && items.length) {
|
|
items[0].classList.add('focused');
|
|
} else if (focused?.nextElementSibling) {
|
|
focused.classList.remove('focused');
|
|
focused.nextElementSibling.classList.add('focused');
|
|
}
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
if (focused?.previousElementSibling) {
|
|
focused.classList.remove('focused');
|
|
focused.previousElementSibling.classList.add('focused');
|
|
}
|
|
} else if (e.key === 'Enter' && focused) {
|
|
e.preventDefault();
|
|
const link = focused.querySelector('a');
|
|
if (link) window.location.href = link.href;
|
|
}
|
|
});
|
|
|
|
async function search(query) {
|
|
try {
|
|
const res = await fetch('/api/reader/search?q=' + encodeURIComponent(query));
|
|
const data = await res.json();
|
|
|
|
if (!data || data.length === 0) {
|
|
results.innerHTML = '<div class="search-no-results">No results found</div>';
|
|
return;
|
|
}
|
|
|
|
results.innerHTML = data.map(r => `
|
|
<div class="search-result">
|
|
<a href="${r.url}">
|
|
<div class="search-result-title">${highlight(r.title, query)}</div>
|
|
${r.description ? `<div class="search-result-snippet">${highlight(r.description, query)}</div>` : ''}
|
|
</a>
|
|
</div>
|
|
`).join('');
|
|
} catch (e) {
|
|
results.innerHTML = '<div class="search-no-results">Search failed</div>';
|
|
}
|
|
}
|
|
|
|
function highlight(text, query) {
|
|
if (!text) return '';
|
|
const escaped = escapeHtml(text);
|
|
const tokens = query.split(/\s+/).filter(t => t.length > 0);
|
|
if (!tokens.length) return escaped;
|
|
const pattern = tokens.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
|
|
return escaped.replace(new RegExp(`(${pattern})`, 'gi'), '<mark>$1</mark>');
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
}
|
|
})();
|