joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/search.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-08-17 03:05:54 +00:00
parent 8b33406bf2
commit 8e19776577
1 changed files with 61 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
web/templates/search.html
View File

@ -10,7 +10,7 @@
<input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus> <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
<button class="btn btn-primary">Search</button> <button class="btn btn-primary">Search</button>
<!-- Help button stays inline with Search --> <!-- Help button -->
<button <button
class="btn btn-secondary help-toggle" class="btn btn-secondary help-toggle"
type="button" type="button"
@ -20,7 +20,7 @@
</button> </button>
</div> </div>
<!-- Help panel sits below the row --> <!-- Help panel -->
<div id="search-help-panel" class="help-panel"> <div id="search-help-panel" class="help-panel">
<h3>How to Use Search Operators</h3> <h3>How to Use Search Operators</h3>
<ul> <ul>
@ -28,17 +28,15 @@
<em>Example:</em> <code>faith</code></li> <em>Example:</em> <code>faith</code></li>
<li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br> <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
<em>Example:</em> <code>"Jehovah is my shepherd"</code></li> <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
<li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br> <li><strong>OR search</strong> — use <code>OR</code> (uppercase).<br>
<em>Example:</em> <code>love OR kindness</code></li> <em>Example:</em> <code>love OR kindness</code></li>
<li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br> <li><strong>Exclude terms</strong> — use <code>-</code> to remove.<br>
<em>Example:</em> <code>hope -future</code></li> <em>Example:</em> <code>hope -future</code></li>
<li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br> <li><strong>Wildcard search</strong> — use <code>*</code>.<br>
<em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li> <em>Example:</em> <code>lov*</code></li>
<li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br> <li><strong>Scripture search</strong> — type a Bible book.<br>
<em>Example:</em> <code>John 3:16</code></li> <em>Example:</em> <code>John 3:16</code></li>
</ul> </ul>
<p><strong>Tip:</strong> Combine operators:<br>
<em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
</div> </div>
<div class="filter-row"> <div class="filter-row">
@ -58,29 +56,26 @@
</div> </div>
{% endif %} {% endif %}
<!-- ===== Collapsible History card (kept same IDs) ===== --> <!-- ===== History Dropdown ===== -->
<div class="card" style="padding:0; margin:16px 0 12px;"> <div class="card" style="padding:0; margin:16px 0 12px;">
<button id="historyToggle" <h1 class="page-title dropdown-toggle" data-target="#history-panel">
class="collapse-bar" Search History
type="button" <span class="chevron">▾</span>
aria-expanded="false" </h1>
aria-controls="historyBody"> <div id="history-panel" class="dropdown-panel">
<h1 class="page-title">History</h1> <hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">
<span class="chev" aria-hidden="true">▸</span>
</button>
<div id="historyBody" class="collapse-body" hidden>
<!-- Recent Searches --> <!-- Recent Searches -->
<div style="padding:12px 12px 0;"> <div style="margin-top:6px;">
<div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div> <div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
<ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul> <ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul>
<div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div> <div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
</div> </div>
<hr style="border:none; border-top:1px solid var(--border); margin:12px;"> <hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">
<!-- Recently Viewed --> <!-- Recently Viewed -->
<div style="padding:0 12px 12px;"> <div>
<div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</div> <div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</div>
<ul id="recentViewsList" class="small" style="margin:0; padding-left:18px;"></ul> <ul id="recentViewsList" class="small" style="margin:0; padding-left:18px;"></ul>
<div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div> <div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
@ -91,20 +86,20 @@
<script> <script>
(function(){ (function(){
// --- CSRF helper for fetch (not used by beacon) --- // --- CSRF helper ---
function getCookie(name){ function getCookie(name){
const m = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)'); const m = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
return m ? m.pop() : ''; return m ? m.pop() : '';
} }
const csrftoken = getCookie('csrftoken'); const csrftoken = getCookie('csrftoken');
// Helper: build entry view URL from a known-good template // Build entry view URL
const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}"; const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
function entryUrlFor(id){ function entryUrlFor(id){
return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/'); return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/');
} }
// Helper: first N words with ellipsis // First N words
function firstWords(text, n){ function firstWords(text, n){
const clean = (text || '').replace(/\s+/g, ' ').trim(); const clean = (text || '').replace(/\s+/g, ' ').trim();
if (!clean) return ''; if (!clean) return '';
@ -113,72 +108,44 @@
return words.slice(0, n).join(' ') + '…'; return words.slice(0, n).join(' ') + '…';
} }
// --- Font prefs: fetch + apply + persist (unchanged) --- // Font prefs
function applyFont(size){ function applyFont(size){
const root = document.documentElement; const root = document.documentElement;
root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge'); root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
root.classList.add('fs-'+size); root.classList.add('fs-'+size);
document.querySelectorAll('[data-font-choice]').forEach(b=>{
b.classList.toggle('primary', b.getAttribute('data-font-choice')===size);
});
} }
fetch("{% url 'api_get_prefs' %}").then(r=>r.json()).then(j=>{ fetch("{% url 'api_get_prefs' %}").then(r=>r.json()).then(j=>{
if (j.ok) applyFont(j.font_size || 'default'); if (j.ok) applyFont(j.font_size || 'default');
}).catch(()=>{});
document.querySelectorAll('[data-font-choice]').forEach(btn=>{
btn.addEventListener('click', ()=>{
const size = btn.getAttribute('data-font-choice');
applyFont(size);
const fd = new FormData(); fd.append('size', size);
fetch("{% url 'api_set_font_size' %}", {
method:'POST', body:fd, headers:{'X-CSRFToken': csrftoken}
}).catch(()=>{});
});
}); });
// --- Collapsible History toggle --- // Search history
const toggle = document.getElementById('historyToggle');
const body = document.getElementById('historyBody');
if (toggle && body){
toggle.addEventListener('click', ()=>{
const isOpen = !body.hidden;
body.hidden = isOpen;
toggle.setAttribute('aria-expanded', String(!isOpen));
const chev = toggle.querySelector('.chev');
if (chev) chev.textContent = isOpen ? '▸' : '▾';
});
}
// --- Search history: fetch + render ---
const histList = document.getElementById('searchHistoryList');
const histEmpty = document.getElementById('searchHistoryEmpty');
function renderHistory(items){ function renderHistory(items){
histList.innerHTML = ''; const list = document.getElementById('searchHistoryList');
if (!items || !items.length){ histEmpty.style.display='block'; return; } const empty = document.getElementById('searchHistoryEmpty');
histEmpty.style.display = 'none'; list.innerHTML = '';
if (!items || !items.length){ empty.style.display='block'; return; }
empty.style.display='none';
items.forEach(it=>{ items.forEach(it=>{
const params = new URLSearchParams(); const params = new URLSearchParams();
if (it.q) params.set('q', it.q); if (it.q) params.set('q', it.q);
const sel = it.selected || {}; const sel = it.selected || {};
Object.keys(sel).forEach(k=>{ if (sel[k]) params.set(k, 'on'); }); Object.keys(sel).forEach(k=>{ if (sel[k]) params.set(k, 'on'); });
const li = document.createElement('li'); const li = document.createElement('li');
li.innerHTML = `<a href="{% url 'search' %}?${params.toString()}"><strong>${it.q || '(blank)'}</strong></a> li.innerHTML = `<a href="{% url 'search' %}?${params.toString()}"><strong>${it.q || '(blank)'}</strong></a>`;
<span class="muted">— ${Object.keys(sel).filter(k=>sel[k]).join(', ')}</span>`; list.appendChild(li);
histList.appendChild(li);
}); });
} }
fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{ fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{
if (j.ok) renderHistory(j.items); if (j.ok) renderHistory(j.items);
}).catch(()=>{}); });
// --- Recently viewed: fetch + render (keeps snippet + fixed link) --- // Recently viewed
const rvList = document.getElementById('recentViewsList');
const rvEmpty = document.getElementById('recentViewsEmpty');
function renderRecent(items){ function renderRecent(items){
rvList.innerHTML = ''; const list = document.getElementById('recentViewsList');
if (!items || !items.length){ rvEmpty.style.display='block'; return; } const empty = document.getElementById('recentViewsEmpty');
rvEmpty.style.display = 'none'; list.innerHTML = '';
if (!items || !items.length){ empty.style.display='block'; return; }
empty.style.display='none';
items.forEach(it=>{ items.forEach(it=>{
const url = entryUrlFor(it.entry_id); const url = entryUrlFor(it.entry_id);
const snippet = (it.snippet && it.snippet.trim()) const snippet = (it.snippet && it.snippet.trim())
@ -188,35 +155,28 @@
const li = document.createElement('li'); const li = document.createElement('li');
li.innerHTML = `<a href="${url}">${snippet}</a> li.innerHTML = `<a href="${url}">${snippet}</a>
<span class="muted"> — ${when.toLocaleString()}</span>`; <span class="muted"> — ${when.toLocaleString()}</span>`;
rvList.appendChild(li); list.appendChild(li);
}); });
} }
fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{ fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{
if (j.ok) renderRecent(j.items); if (j.ok) renderRecent(j.items);
}).catch(()=>{}); });
// --- Log searches reliably using Beacon on submit --- // Dropdown toggle for History
const searchForm = document.querySelector('form.search-form'); document.querySelectorAll('.dropdown-toggle').forEach(btn=>{
if (searchForm){ btn.addEventListener('click', ()=>{
searchForm.addEventListener('submit', ()=>{ const target = document.querySelector(btn.dataset.target);
try{ if (target){
const fd = new FormData(searchForm); target.classList.toggle('open');
const data = new URLSearchParams(); btn.classList.toggle('open');
data.append('q', (fd.get('q') || '').trim()); }
['subject','illustration','application','scripture_raw','source','talk_title','talk_number','entry_code']
.forEach(k=>{
if (fd.get(k)) data.append(`sel[${k}]`, 'on');
});
const blob = new Blob([data.toString()], {type:'application/x-www-form-urlencoded'});
navigator.sendBeacon("{% url 'api_log_search' %}", blob);
}catch(_){}
}); });
} });
})(); })();
</script> </script>
<!-- Styles for the help panel + collapsible -->
<style> <style>
/* Help panel */
.help-panel{ .help-panel{
display:none; display:none;
margin-top:10px; margin-top:10px;
@ -226,51 +186,22 @@
padding:14px; padding:14px;
box-shadow:0 4px 16px rgba(0,0,0,.06); box-shadow:0 4px 16px rgba(0,0,0,.06);
font-size:14px; font-size:14px;
line-height:1.6;
} }
.help-panel.open{ display:block; } .help-panel.open{ display:block; }
.help-panel code{ background:#f3f4f6; padding:2px 4px; border-radius:4px; font-size:90%; }
.help-panel h3{ margin:0 0 8px; font-size:16px; }
.help-panel ul{ margin:0 0 8px 18px; }
/* Collapsible History bar */ /* Dropdown panel */
.collapse-bar{ .dropdown-panel { display:none; padding:12px; }
width:100%; .dropdown-panel.open { display:block; }
display:flex;
align-items:center; /* Chevron style */
justify-content:space-between; .page-title .chevron {
gap:10px; font-size: 0.8em; /* proportional to heading */
padding:12px 14px; margin-left: 8px;
background:#fff; vertical-align: middle;
border:0; transition: transform 0.2s ease;
border-bottom:1px solid var(--border); display:inline-block;
border-radius:12px 12px 0 0;
cursor:pointer;
font-weight:600;
text-align:left;
}
.collapse-bar:focus{ outline:2px solid #c7d2fe; outline-offset:2px; }
.collapse-body{
background:#fff;
border-radius:0 0 12px 12px;
} }
.page-title.open .chevron { transform: rotate(180deg); }
.dropdown-toggle { cursor:pointer; }
</style> </style>
<!-- Inline JS to toggle the Help panel (unchanged) -->
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.help-toggle');
if (btn) {
const panel = document.querySelector(btn.dataset.target || '#search-help-panel');
if (panel) panel.classList.toggle('open');
return;
}
const panel = document.querySelector('#search-help-panel');
if (!panel) return;
if (panel.classList.contains('open')) {
const clickedInside = panel.contains(e.target) || e.target.closest('.help-toggle');
if (!clickedInside) panel.classList.remove('open');
}
});
</script>
{% endblock %} {% endblock %}