219 lines
8.7 KiB
HTML
219 lines
8.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block body_class %}themed-bg{% endblock %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
|
|
|
|
<form method="get" class="search-form">
|
|
<h1 class="page-title">Illustration Search</h1>
|
|
<div class="search-row">
|
|
<input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
|
|
<button class="btn btn-primary">Search</button>
|
|
|
|
<!-- Help button stays inline with Search -->
|
|
<button
|
|
class="btn btn-secondary help-toggle"
|
|
type="button"
|
|
data-target="#search-help-panel"
|
|
>
|
|
Help
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Help panel sits below the row -->
|
|
<div id="search-help-panel" class="help-panel">
|
|
<h3>How to Use Search Operators</h3>
|
|
<ul>
|
|
<li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
|
|
<em>Example:</em> <code>faith</code></li>
|
|
<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>
|
|
<li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
|
|
<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>
|
|
<em>Example:</em> <code>hope -future</code></li>
|
|
<li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
|
|
<em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
|
|
<li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
|
|
<em>Example:</em> <code>John 3:16</code></li>
|
|
</ul>
|
|
<p><strong>Tip:</strong> Combine operators:<br>
|
|
<em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
|
|
</div>
|
|
|
|
<div class="filter-row">
|
|
{% for f in field_options %}
|
|
<label class="check-pill">
|
|
<input type="checkbox" name="{{ f.name }}" {% if f.checked %}checked{% endif %}>
|
|
<span>{{ f.label }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="muted small">Total entries: {{ total }}</div>
|
|
</form>
|
|
|
|
{% if ran_search and result_count == 0 %}
|
|
<div class="empty-state">
|
|
<div class="empty-title">No results</div>
|
|
<div class="empty-subtitle">Try broadening your terms or enabling more fields above.</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- ===== User controls: font size + history + recent views ===== -->
|
|
<div class="card" style="padding:12px; margin:12px 0;">
|
|
<div class="meta-label">Font size DOES NOT WORK YET</div>
|
|
<div style="display:flex; gap:8px; margin-top:8px;">
|
|
<button class="nav-btn" data-font-choice="small" type="button">Small</button>
|
|
<button class="nav-btn" data-font-choice="default" type="button">Default</button>
|
|
<button class="nav-btn" data-font-choice="large" type="button">Large</button>
|
|
<button class="nav-btn" data-font-choice="xlarge" type="button">Extra-Large</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding:12px; margin:12px 0;">
|
|
<div class="meta-label">Your Recent Searches</div>
|
|
<ul id="searchHistoryList" class="small" style="margin:8px 0 0; padding-left:18px;"></ul>
|
|
<div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding:12px; margin:12px 0;">
|
|
<div class="meta-label">Recently Viewed</div>
|
|
<ul id="recentViewsList" class="small" style="margin:8px 0 0; padding-left:18px;"></ul>
|
|
<div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
// --- CSRF helper for fetch (not used by beacon) ---
|
|
function getCookie(name){
|
|
const m = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
|
|
return m ? m.pop() : '';
|
|
}
|
|
const csrftoken = getCookie('csrftoken');
|
|
|
|
// --- Font prefs: fetch + apply + persist ---
|
|
function applyFont(size){
|
|
const root = document.documentElement;
|
|
root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
|
|
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=>{
|
|
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(()=>{});
|
|
});
|
|
});
|
|
|
|
// --- Search history: fetch + render ---
|
|
const histList = document.getElementById('searchHistoryList');
|
|
const histEmpty = document.getElementById('searchHistoryEmpty');
|
|
function renderHistory(items){
|
|
histList.innerHTML = '';
|
|
if (!items || !items.length){ histEmpty.style.display='block'; return; }
|
|
histEmpty.style.display = 'none';
|
|
items.forEach(it=>{
|
|
const params = new URLSearchParams();
|
|
if (it.q) params.set('q', it.q);
|
|
const sel = it.selected || {};
|
|
Object.keys(sel).forEach(k=>{ if (sel[k]) params.set(k, 'on'); });
|
|
const li = document.createElement('li');
|
|
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>`;
|
|
histList.appendChild(li);
|
|
});
|
|
}
|
|
fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{
|
|
if (j.ok) renderHistory(j.items);
|
|
}).catch(()=>{});
|
|
|
|
// --- Recently viewed: fetch + render ---
|
|
const rvList = document.getElementById('recentViewsList');
|
|
const rvEmpty = document.getElementById('recentViewsEmpty');
|
|
function renderRecent(items){
|
|
rvList.innerHTML = '';
|
|
if (!items || !items.length){ rvEmpty.style.display='block'; return; }
|
|
rvEmpty.style.display = 'none';
|
|
items.forEach(it=>{
|
|
const li = document.createElement('li');
|
|
const when = new Date(it.viewed_at);
|
|
li.innerHTML = `<a href="{% url 'entry_view' 0 %}".replace('0', it.entry_id)>#${it.entry_id}</a>
|
|
<span class="muted"> — ${when.toLocaleString()}</span>`;
|
|
rvList.appendChild(li);
|
|
});
|
|
}
|
|
fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{
|
|
if (j.ok) renderRecent(j.items);
|
|
}).catch(()=>{});
|
|
|
|
// --- Log searches reliably using Beacon on submit ---
|
|
const searchForm = document.querySelector('form.search-form');
|
|
if (searchForm){
|
|
searchForm.addEventListener('submit', ()=>{
|
|
try{
|
|
const fd = new FormData(searchForm);
|
|
const data = new URLSearchParams();
|
|
data.append('q', (fd.get('q') || '').trim());
|
|
// selected checkboxes (match your field names)
|
|
['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>
|
|
|
|
<!-- Styles for the help panel -->
|
|
<style>
|
|
.help-panel{
|
|
display:none;
|
|
margin-top:10px;
|
|
background:#fff;
|
|
border:1px solid var(--border);
|
|
border-radius:12px;
|
|
padding:14px;
|
|
box-shadow:0 4px 16px rgba(0,0,0,.06);
|
|
font-size:14px;
|
|
line-height:1.6;
|
|
}
|
|
.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; }
|
|
</style>
|
|
|
|
<!-- Inline JS to toggle the panel (click button to toggle, click away to close) -->
|
|
<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 %} |