mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-16 07:30:13 +01:00
959 lines
No EOL
34 KiB
HTML
959 lines
No EOL
34 KiB
HTML
{% extends "base.html" %}
|
||
{% block content %}
|
||
<style>
|
||
/* Autocomplete dropdown styles (matching commanders page) */
|
||
.autocomplete-container { position: relative; }
|
||
.autocomplete-dropdown {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-top: none;
|
||
border-radius: 0 0 6px 6px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||
color: var(--text);
|
||
}
|
||
.autocomplete-dropdown:empty { display: none; }
|
||
.autocomplete-item {
|
||
padding: .75rem;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid var(--border);
|
||
transition: background 0.15s;
|
||
}
|
||
.autocomplete-item:last-child { border-bottom: none; }
|
||
.autocomplete-item:hover, .autocomplete-item:focus, .autocomplete-item.selected {
|
||
background: var(--bg);
|
||
}
|
||
.autocomplete-item.selected {
|
||
background: var(--bg);
|
||
border-left: 3px solid var(--ring);
|
||
padding-left: calc(.75rem - 3px);
|
||
}
|
||
.autocomplete-empty {
|
||
padding: .75rem;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: .85rem;
|
||
}
|
||
.autocomplete-error {
|
||
padding: .75rem;
|
||
text-align: center;
|
||
color: var(--err);
|
||
font-size: .85rem;
|
||
}
|
||
|
||
/* Keyboard shortcuts help button - desktop only */
|
||
.shortcuts-help-btn {
|
||
display: none !important; /* Hidden by default (mobile) */
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.shortcuts-help-btn {
|
||
display: flex !important; /* Show on desktop */
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<section class="card-browser-container">
|
||
<h3>Card Browser</h3>
|
||
<p class="muted">Browse all {{ total_cards }} cards with filters and search.</p>
|
||
|
||
{# Error message #}
|
||
{% if error %}
|
||
<div class="error" style="margin:.5rem 0 1rem 0; padding:.75rem; background:#7f1d1d; border:1px solid #dc2626; border-radius:6px; color:#fef2f2;">
|
||
{{ error }}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# Filters Panel #}
|
||
<div class="card-browser-filters" style="position: relative;">
|
||
{# Keyboard shortcuts help button (desktop only) #}
|
||
<button
|
||
type="button"
|
||
id="shortcuts-help-btn"
|
||
class="shortcuts-help-btn"
|
||
style="position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border-radius: 50%; background: #444; border: 1px solid #666; color: #fff; font-weight: bold; cursor: pointer; font-size: 16px; display: none; align-items: center; justify-content: center; padding: 0; line-height: 1;"
|
||
title="Keyboard Shortcuts"
|
||
onclick="toggleShortcutsHelp()"
|
||
>?</button>
|
||
|
||
{# Shortcuts help tooltip #}
|
||
<div
|
||
id="shortcuts-help-tooltip"
|
||
style="display: none; position: absolute; top: 2.5rem; right: 0.5rem; background: #2a2a2a; border: 1px solid #666; border-radius: 6px; padding: 1rem; min-width: 320px; max-width: 400px; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.3);"
|
||
>
|
||
<h4 style="margin-top: 0; margin-bottom: 0.75rem; font-size: 1.1rem;">Keyboard Shortcuts</h4>
|
||
<div style="font-size: 0.9rem; line-height: 1.6;">
|
||
<div style="margin-bottom: 0.5rem;"><strong>Enter</strong> - Add first theme match / Select autocomplete</div>
|
||
<div style="margin-bottom: 0.5rem;"><strong>Shift+Enter</strong> - Add current theme & apply filters</div>
|
||
<div style="margin-bottom: 0.5rem;"><strong>Escape</strong> - Close dropdown</div>
|
||
<div style="margin-bottom: 0.5rem;"><strong>Escape×2</strong> - Clear all filters (within 0.5s)</div>
|
||
<div style="margin-bottom: 0.5rem;"><strong>↑/↓</strong> - Navigate autocomplete</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onclick="toggleShortcutsHelp()"
|
||
style="margin-top: 0.75rem; padding: 0.4rem 0.8rem; background: #555; border: 1px solid #777; border-radius: 4px; color: #fff; cursor: pointer; width: 100%;"
|
||
>Close</button>
|
||
</div>
|
||
|
||
{# Search bar #}
|
||
<div class="filter-section">
|
||
<form method="get" id="card-search-form">
|
||
<div class="filter-row">
|
||
<label for="search-input">Search</label>
|
||
<div class="autocomplete-container" style="position:relative; flex: 1; max-width: 300px;">
|
||
<input
|
||
type="text"
|
||
name="search"
|
||
id="search-input"
|
||
data-autocomplete-param="q"
|
||
value="{{ search }}"
|
||
placeholder="Search card names..."
|
||
autocomplete="off"
|
||
role="combobox"
|
||
aria-autocomplete="list"
|
||
aria-controls="search-autocomplete-dropdown"
|
||
aria-expanded="false"
|
||
style="width: 100%;"
|
||
/>
|
||
<div id="search-autocomplete-dropdown" class="autocomplete-dropdown" role="listbox" aria-label="Card name suggestions"></div>
|
||
</div>
|
||
{% if search %}
|
||
<button type="button" onclick="document.getElementById('search-input').value=''; document.getElementById('card-search-form').submit();" class="btn" style="padding:.3rem .75rem;">Clear</button>
|
||
{% endif %}
|
||
<button type="submit" class="btn">Search</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{# Filter controls #}
|
||
<div class="filter-section" style="margin-top: 1rem;">
|
||
<div class="filter-row">
|
||
{# Multi-select theme filter #}
|
||
<label for="filter-theme-input">Themes (up to 5)</label>
|
||
<div style="flex: 1; max-width: 500px;">
|
||
{# Selected themes as chips #}
|
||
<div id="selected-themes" style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; min-height: 2rem;">
|
||
{% if themes %}
|
||
{% for t in themes %}
|
||
<span class="theme-chip" data-theme="{{ t }}">
|
||
{{ t }}
|
||
<button type="button" onclick="removeTheme('{{ t }}')" style="margin-left:0.5rem; background:none; border:none; color:inherit; cursor:pointer; padding:0; font-weight:bold;">×</button>
|
||
</span>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
{# Autocomplete input #}
|
||
<div class="autocomplete-container" style="position:relative;">
|
||
<input
|
||
type="text"
|
||
id="filter-theme-input"
|
||
placeholder="Add theme..."
|
||
autocomplete="off"
|
||
role="combobox"
|
||
aria-autocomplete="list"
|
||
aria-controls="theme-autocomplete-dropdown"
|
||
aria-expanded="false"
|
||
style="width: 100%;"
|
||
/>
|
||
<div id="theme-autocomplete-dropdown" class="autocomplete-dropdown" role="listbox" aria-label="Theme suggestions"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-row">
|
||
{# Color filter #}
|
||
{% if all_colors %}
|
||
<label for="filter-color">Color</label>
|
||
<select
|
||
name="color"
|
||
id="filter-color"
|
||
onchange="applyFilter()">
|
||
<option value="">All Colors</option>
|
||
{% for group_name, group_colors in all_colors %}
|
||
<optgroup label="{{ group_name }}">
|
||
{% for color_id, display_name in group_colors %}
|
||
<option value="{{ color_id }}" {% if color == color_id %}selected{% endif %}>{{ display_name }}</option>
|
||
{% endfor %}
|
||
</optgroup>
|
||
{% endfor %}
|
||
</select>
|
||
{% endif %}
|
||
|
||
{# Type filter #}
|
||
{% if all_types %}
|
||
<label for="filter-type">Type</label>
|
||
<select
|
||
name="type"
|
||
id="filter-type"
|
||
onchange="applyFilter()">
|
||
<option value="">All Types</option>
|
||
{% for t in all_types %}
|
||
<option value="{{ t }}" {% if card_type == t %}selected{% endif %}>{{ t }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
{% endif %}
|
||
|
||
{# Rarity filter #}
|
||
{% if all_rarities %}
|
||
<label for="filter-rarity">Rarity</label>
|
||
<select
|
||
name="rarity"
|
||
id="filter-rarity"
|
||
onchange="applyFilter()">
|
||
<option value="">All Rarities</option>
|
||
{% for r in all_rarities %}
|
||
<option value="{{ r }}" {% if rarity == r %}selected{% endif %}>{{ r|title }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
{% endif %}
|
||
|
||
{# Sort dropdown #}
|
||
<label for="filter-sort">Sort By</label>
|
||
<select
|
||
name="sort"
|
||
id="filter-sort"
|
||
onchange="applyFilter()">
|
||
<option value="name_asc" {% if sort == 'name_asc' or not sort %}selected{% endif %}>Name (A-Z)</option>
|
||
<option value="name_desc" {% if sort == 'name_desc' %}selected{% endif %}>Name (Z-A)</option>
|
||
<option value="cmc_asc" {% if sort == 'cmc_asc' %}selected{% endif %}>CMC (Low-High)</option>
|
||
<option value="cmc_desc" {% if sort == 'cmc_desc' %}selected{% endif %}>CMC (High-Low)</option>
|
||
<option value="power_desc" {% if sort == 'power_desc' %}selected{% endif %}>Power (High-Low)</option>
|
||
<option value="edhrec_asc" {% if sort == 'edhrec_asc' %}selected{% endif %}>EDHREC Rank (Popular)</option>
|
||
</select>
|
||
|
||
<button type="button" class="btn" onclick="applyFilter()">Apply Filters</button>
|
||
<button type="button" class="btn" onclick="window.location.href='/cards'" style="background-color: #666;">Clear Filters</button>
|
||
</div>
|
||
|
||
{# Advanced filters row #}
|
||
<div class="filter-row" style="margin-top: 0.75rem;">
|
||
{# CMC range filter #}
|
||
<label for="filter-cmc-min">CMC Range</label>
|
||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1; max-width:300px;">
|
||
<input
|
||
type="number"
|
||
id="filter-cmc-min"
|
||
min="0"
|
||
max="16"
|
||
value="{{ cmc_min if cmc_min is not none and cmc_min != '' else '' }}"
|
||
placeholder="Min"
|
||
style="width:70px;"
|
||
onchange="applyFilter()"
|
||
/>
|
||
<span>–</span>
|
||
<input
|
||
type="number"
|
||
id="filter-cmc-max"
|
||
min="0"
|
||
max="16"
|
||
value="{{ cmc_max if cmc_max is not none and cmc_max != '' else '' }}"
|
||
placeholder="Max"
|
||
style="width:70px;"
|
||
onchange="applyFilter()"
|
||
/>
|
||
</div>
|
||
|
||
{# Power range filter #}
|
||
<label for="filter-power-min">Power</label>
|
||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1; max-width:300px;">
|
||
<input
|
||
type="number"
|
||
id="filter-power-min"
|
||
min="0"
|
||
max="99"
|
||
value="{{ power_min if power_min is not none and power_min != '' else '' }}"
|
||
placeholder="Min"
|
||
style="width:70px;"
|
||
onchange="applyFilter()"
|
||
/>
|
||
<span>–</span>
|
||
<input
|
||
type="number"
|
||
id="filter-power-max"
|
||
min="0"
|
||
max="99"
|
||
value="{{ power_max if power_max is not none and power_max != '' else '' }}"
|
||
placeholder="Max"
|
||
style="width:70px;"
|
||
onchange="applyFilter()"
|
||
/>
|
||
</div>
|
||
|
||
{# Toughness range filter #}
|
||
<label for="filter-tough-min">Toughness</label>
|
||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1; max-width:300px;">
|
||
<input
|
||
type="number"
|
||
id="filter-tough-min"
|
||
min="0"
|
||
max="99"
|
||
value="{{ tough_min if tough_min is not none and tough_min != '' else '' }}"
|
||
placeholder="Min"
|
||
style="width:70px;"
|
||
onchange="applyFilter()"
|
||
/>
|
||
<span>–</span>
|
||
<input
|
||
type="number"
|
||
id="filter-tough-max"
|
||
min="0"
|
||
max="99"
|
||
value="{{ tough_max if tough_max is not none and tough_max != '' else '' }}"
|
||
placeholder="Max"
|
||
style="width:70px;"
|
||
onchange="applyFilter()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{# Results info bar with page indicator #}
|
||
<div id="card-browser-info" class="card-browser-info">
|
||
<span id="results-count" class="results-count">
|
||
{% if filtered_count is defined and filtered_count != total_cards %}
|
||
Showing {{ cards|length }} of {{ filtered_count }} filtered cards ({{ total_cards }} total)
|
||
{% else %}
|
||
Showing {{ cards|length }} of {{ total_cards }} cards
|
||
{% endif %}
|
||
{% if search %} matching "{{ search }}"{% endif %}
|
||
</span>
|
||
</div>
|
||
|
||
{# Card grid container or no results message #}
|
||
{% if cards and cards|length %}
|
||
<div id="card-grid-container"
|
||
class="card-browser-grid"
|
||
{% if total_cards > 800 %}data-virtualize="1"{% endif %}>
|
||
<div id="card-grid" style="display:contents;">
|
||
{% for card in cards %}
|
||
{% include "browse/cards/_card_tile.html" %}
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
{# Pagination controls #}
|
||
{% if has_next %}
|
||
<div id="load-more-container" class="card-browser-pagination">
|
||
<button
|
||
type="button"
|
||
class="btn"
|
||
hx-get="/cards/grid?cursor={{ last_card|urlencode }}{% if search %}&search={{ search|urlencode }}{% endif %}{% for theme in themes %}&themes={{ theme|urlencode }}{% endfor %}{% if color %}&color={{ color|urlencode }}{% endif %}{% if card_type %}&card_type={{ card_type|urlencode }}{% endif %}{% if rarity %}&rarity={{ rarity|urlencode }}{% endif %}{% if sort and sort != 'name_asc' %}&sort={{ sort|urlencode }}{% endif %}{% if cmc_min %}&cmc_min={{ cmc_min }}{% endif %}{% if cmc_max %}&cmc_max={{ cmc_max }}{% endif %}{% if power_min %}&power_min={{ power_min }}{% endif %}{% if power_max %}&power_max={{ power_max }}{% endif %}{% if tough_min %}&tough_min={{ tough_min }}{% endif %}{% if tough_max %}&tough_max={{ tough_max }}{% endif %}"
|
||
hx-target="#card-grid"
|
||
hx-swap="beforeend"
|
||
hx-indicator="#load-indicator">
|
||
Load More
|
||
</button>
|
||
<span id="load-indicator" class="htmx-indicator muted card-browser-loading">
|
||
Loading...
|
||
</span>
|
||
</div>
|
||
{% endif %}
|
||
{% else %}
|
||
{# No results message with helpful info #}
|
||
<div class="no-results">
|
||
<div class="no-results-title">No cards found</div>
|
||
<div class="no-results-message">
|
||
{% if search or color or card_type or rarity or theme or cmc_min or cmc_max %}
|
||
No cards match your current filters.
|
||
{% if search %}Try a different search term{% endif %}{% if search and (color or card_type or rarity or theme or cmc_min or cmc_max) %} or {% endif %}{% if color or card_type or rarity or theme or cmc_min or cmc_max %}adjust your filters{% endif %}.
|
||
{% else %}
|
||
Unable to load cards. Please try refreshing the page.
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if search or color or card_type or rarity or theme or cmc_min or cmc_max %}
|
||
<div class="no-results-filters">
|
||
<strong style="color: var(--text); margin-right: 0.5rem;">Active filters:</strong>
|
||
{% if search %}
|
||
<span class="no-results-filter-tag">Search: "{{ search }}"</span>
|
||
{% endif %}
|
||
{% if theme %}
|
||
<span class="no-results-filter-tag">Theme: {{ theme }}</span>
|
||
{% endif %}
|
||
{% if color %}
|
||
<span class="no-results-filter-tag">Color: {{ color }}</span>
|
||
{% endif %}
|
||
{% if card_type %}
|
||
<span class="no-results-filter-tag">Type: {{ card_type }}</span>
|
||
{% endif %}
|
||
{% if rarity %}
|
||
<span class="no-results-filter-tag">Rarity: {{ rarity|title }}</span>
|
||
{% endif %}
|
||
{% if cmc_min or cmc_max %}
|
||
<span class="no-results-filter-tag">CMC: {% if cmc_min %}{{ cmc_min }}{% else %}0{% endif %}–{% if cmc_max %}{{ cmc_max }}{% else %}16+{% endif %}</span>
|
||
{% endif %}
|
||
</div>
|
||
<p><a href="/cards" class="btn">Clear All Filters</a></p>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</section>
|
||
|
||
<script>
|
||
// Toggle shortcuts help tooltip
|
||
function toggleShortcutsHelp() {
|
||
const tooltip = document.getElementById('shortcuts-help-tooltip');
|
||
if (tooltip) {
|
||
tooltip.style.display = tooltip.style.display === 'none' ? 'block' : 'none';
|
||
}
|
||
}
|
||
|
||
// Close tooltip when clicking outside
|
||
document.addEventListener('click', (e) => {
|
||
const tooltip = document.getElementById('shortcuts-help-tooltip');
|
||
const helpBtn = document.getElementById('shortcuts-help-btn');
|
||
if (tooltip && helpBtn &&
|
||
tooltip.style.display === 'block' &&
|
||
!tooltip.contains(e.target) &&
|
||
!helpBtn.contains(e.target)) {
|
||
tooltip.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// Global Escape key handler for clearing filters (works anywhere on page)
|
||
(function() {
|
||
let lastGlobalEscapeTime = 0;
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
const now = Date.now();
|
||
const timeSinceLastEscape = now - lastGlobalEscapeTime;
|
||
|
||
// Check if we're in a text input (let those handle their own Escape)
|
||
const activeElement = document.activeElement;
|
||
const isInTextInput = activeElement && (
|
||
activeElement.tagName === 'INPUT' ||
|
||
activeElement.tagName === 'TEXTAREA'
|
||
);
|
||
|
||
if (!isInTextInput && timeSinceLastEscape < 500) {
|
||
// Double Escape outside of inputs - clear all filters
|
||
console.log('Global double Escape detected - clearing filters');
|
||
e.preventDefault();
|
||
window.location.href = '/cards';
|
||
} else if (!isInTextInput) {
|
||
// First escape outside input
|
||
lastGlobalEscapeTime = now;
|
||
}
|
||
}
|
||
});
|
||
})();
|
||
|
||
function applyFilter() {
|
||
const color = document.getElementById('filter-color')?.value || '';
|
||
const type = document.getElementById('filter-type')?.value || '';
|
||
const rarity = document.getElementById('filter-rarity')?.value || '';
|
||
const search = document.getElementById('search-input')?.value || '';
|
||
const sort = document.getElementById('filter-sort')?.value || '';
|
||
const cmcMin = document.getElementById('filter-cmc-min')?.value || '';
|
||
const cmcMax = document.getElementById('filter-cmc-max')?.value || '';
|
||
const powerMin = document.getElementById('filter-power-min')?.value || '';
|
||
const powerMax = document.getElementById('filter-power-max')?.value || '';
|
||
const toughMin = document.getElementById('filter-tough-min')?.value || '';
|
||
const toughMax = document.getElementById('filter-tough-max')?.value || '';
|
||
|
||
// Collect selected themes
|
||
const themeChips = document.querySelectorAll('#selected-themes .theme-chip');
|
||
const themes = Array.from(themeChips).map(chip => chip.dataset.theme);
|
||
|
||
const params = new URLSearchParams();
|
||
if (search) params.set('search', search);
|
||
if (color) params.set('color', color);
|
||
if (type) params.set('card_type', type);
|
||
if (rarity) params.set('rarity', rarity);
|
||
// Add themes as multiple params (themes=t1&themes=t2&themes=t3)
|
||
themes.forEach(theme => params.append('themes', theme));
|
||
if (sort && sort !== 'name_asc') params.set('sort', sort); // Only include if not default
|
||
if (cmcMin) params.set('cmc_min', cmcMin);
|
||
if (cmcMax) params.set('cmc_max', cmcMax);
|
||
if (powerMin) params.set('power_min', powerMin);
|
||
if (powerMax) params.set('power_max', powerMax);
|
||
if (toughMin) params.set('tough_min', toughMin);
|
||
if (toughMax) params.set('tough_max', toughMax);
|
||
|
||
window.location.href = `/cards?${params.toString()}`;
|
||
}
|
||
|
||
// Autocomplete keyboard navigation
|
||
(function() {
|
||
const searchInput = document.getElementById('search-input');
|
||
const autocompleteDropdown = document.getElementById('search-autocomplete-dropdown');
|
||
const form = document.getElementById('card-search-form');
|
||
|
||
if (!searchInput || !autocompleteDropdown || !form) return;
|
||
|
||
let selectedIndex = -1;
|
||
let debounceTimer = null;
|
||
let lastEscapeTime = 0;
|
||
|
||
// Fetch autocomplete suggestions
|
||
const fetchSuggestions = () => {
|
||
const query = searchInput.value.trim();
|
||
if (query.length < 2) {
|
||
autocompleteDropdown.innerHTML = '';
|
||
return;
|
||
}
|
||
|
||
// Call the autocomplete endpoint
|
||
fetch(`/cards/search-autocomplete?q=${encodeURIComponent(query)}`)
|
||
.then(response => response.text())
|
||
.then(html => {
|
||
autocompleteDropdown.innerHTML = html;
|
||
})
|
||
.catch(err => {
|
||
console.error('Autocomplete error:', err);
|
||
autocompleteDropdown.innerHTML = '';
|
||
});
|
||
};
|
||
|
||
// Debounced input handler - reduced to 150ms for faster response
|
||
searchInput.addEventListener('input', () => {
|
||
clearTimeout(debounceTimer);
|
||
debounceTimer = setTimeout(fetchSuggestions, 150);
|
||
});
|
||
|
||
// Helper to get all autocomplete items
|
||
const getItems = () => Array.from(autocompleteDropdown.querySelectorAll('.autocomplete-item'));
|
||
|
||
// Helper to select an item by index
|
||
const selectItem = (index) => {
|
||
const items = getItems();
|
||
items.forEach((item, i) => {
|
||
if (i === index) {
|
||
item.classList.add('selected');
|
||
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||
} else {
|
||
item.classList.remove('selected');
|
||
}
|
||
});
|
||
selectedIndex = index;
|
||
};
|
||
|
||
// Helper to apply selected item
|
||
const applySelectedItem = () => {
|
||
const items = getItems();
|
||
const item = items[selectedIndex];
|
||
if (item && item.dataset.value) {
|
||
searchInput.value = item.dataset.value;
|
||
autocompleteDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
// Trigger search immediately
|
||
applyFilter();
|
||
}
|
||
};
|
||
|
||
// Reset selection when dropdown content changes
|
||
const observer = new MutationObserver(() => {
|
||
selectedIndex = -1;
|
||
getItems().forEach(item => item.classList.remove('selected'));
|
||
// Update aria-expanded based on dropdown content
|
||
const hasContent = autocompleteDropdown.children.length > 0;
|
||
searchInput.setAttribute('aria-expanded', hasContent ? 'true' : 'false');
|
||
});
|
||
observer.observe(autocompleteDropdown, { childList: true });
|
||
|
||
// Click handler for autocomplete items - instant navigation
|
||
document.body.addEventListener('click', (e) => {
|
||
const item = e.target.closest('.autocomplete-item');
|
||
if (item && item.dataset.value && autocompleteDropdown.contains(item)) {
|
||
e.preventDefault();
|
||
searchInput.value = item.dataset.value;
|
||
autocompleteDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
// Navigate immediately using applyFilter
|
||
applyFilter();
|
||
}
|
||
});
|
||
|
||
// Close dropdown when clicking outside
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('.autocomplete-container')) {
|
||
autocompleteDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
}
|
||
});
|
||
|
||
// Keyboard navigation
|
||
searchInput.addEventListener('keydown', (e) => {
|
||
const items = getItems();
|
||
const hasItems = items.length > 0;
|
||
|
||
if (e.key === 'Escape') {
|
||
const now = Date.now();
|
||
const timeSinceLastEscape = now - lastEscapeTime;
|
||
|
||
if (hasItems) {
|
||
// Close dropdown if open
|
||
autocompleteDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
lastEscapeTime = now;
|
||
e.preventDefault();
|
||
} else if (timeSinceLastEscape < 500) {
|
||
// Double-tap Escape within 500ms - clear all filters
|
||
console.log('Double Escape detected - clearing filters');
|
||
e.preventDefault();
|
||
window.location.href = '/cards';
|
||
} else {
|
||
// First escape with no dropdown
|
||
lastEscapeTime = now;
|
||
e.preventDefault();
|
||
}
|
||
} else if (e.key === 'ArrowDown' && hasItems) {
|
||
e.preventDefault();
|
||
const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
|
||
selectItem(newIndex);
|
||
} else if (e.key === 'ArrowUp' && hasItems) {
|
||
e.preventDefault();
|
||
const newIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
|
||
selectItem(newIndex);
|
||
} else if (e.key === 'Enter') {
|
||
if (e.shiftKey) {
|
||
// Shift+Enter: Apply all filters
|
||
e.preventDefault();
|
||
applyFilter();
|
||
} else if (selectedIndex >= 0 && hasItems) {
|
||
e.preventDefault();
|
||
applySelectedItem();
|
||
}
|
||
// Otherwise allow normal form submission
|
||
}
|
||
});
|
||
|
||
// Mouse hover to highlight items
|
||
autocompleteDropdown.addEventListener('mouseover', (e) => {
|
||
const item = e.target.closest('.autocomplete-item');
|
||
if (item) {
|
||
const items = getItems();
|
||
const index = items.indexOf(item);
|
||
if (index >= 0) {
|
||
selectItem(index);
|
||
}
|
||
}
|
||
});
|
||
})();
|
||
|
||
// Multi-select theme filter
|
||
(function() {
|
||
const themeInput = document.getElementById('filter-theme-input');
|
||
const themeDropdown = document.getElementById('theme-autocomplete-dropdown');
|
||
const selectedThemesContainer = document.getElementById('selected-themes');
|
||
|
||
if (!themeInput || !themeDropdown) return;
|
||
|
||
let selectedIndex = -1;
|
||
let debounceTimer = null;
|
||
let selectedThemes = new Set();
|
||
let lastEscapeTime = 0;
|
||
|
||
// Initialize with existing themes from URL
|
||
const existingChips = selectedThemesContainer.querySelectorAll('.theme-chip');
|
||
existingChips.forEach(chip => {
|
||
selectedThemes.add(chip.dataset.theme);
|
||
});
|
||
|
||
// Update input state based on theme count
|
||
const updateThemeInputState = () => {
|
||
if (selectedThemes.size >= 5) {
|
||
themeInput.disabled = true;
|
||
themeInput.placeholder = 'Maximum 5 themes selected';
|
||
themeInput.classList.add('disabled');
|
||
} else {
|
||
themeInput.disabled = false;
|
||
themeInput.placeholder = 'Add theme...';
|
||
themeInput.classList.remove('disabled');
|
||
}
|
||
};
|
||
|
||
// Initialize the input state
|
||
updateThemeInputState();
|
||
|
||
// Fetch theme suggestions
|
||
const fetchThemeSuggestions = () => {
|
||
const query = themeInput.value.trim();
|
||
if (query.length < 2) {
|
||
themeDropdown.innerHTML = '';
|
||
return;
|
||
}
|
||
|
||
fetch(`/cards/theme-autocomplete?q=${encodeURIComponent(query)}`)
|
||
.then(response => response.text())
|
||
.then(html => {
|
||
themeDropdown.innerHTML = html;
|
||
})
|
||
.catch(err => {
|
||
console.error('Theme autocomplete error:', err);
|
||
themeDropdown.innerHTML = '';
|
||
});
|
||
};
|
||
|
||
// Add theme chip
|
||
window.addTheme = function(theme) {
|
||
if (selectedThemes.size >= 5) {
|
||
return; // Input should already be disabled, but double-check
|
||
}
|
||
if (selectedThemes.has(theme)) {
|
||
return; // Already selected
|
||
}
|
||
|
||
selectedThemes.add(theme);
|
||
|
||
const chip = document.createElement('span');
|
||
chip.className = 'theme-chip';
|
||
chip.dataset.theme = theme;
|
||
chip.innerHTML = `${theme} <button type="button" onclick="removeTheme('${theme.replace(/'/g, "\\'")}')" style="margin-left:0.5rem; background:none; border:none; color:inherit; cursor:pointer; padding:0; font-weight:bold;">×</button>`;
|
||
|
||
selectedThemesContainer.appendChild(chip);
|
||
themeInput.value = '';
|
||
themeDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
|
||
updateThemeInputState();
|
||
|
||
// Auto-focus the input on desktop (not mobile) for quick multi-selection
|
||
// Focus immediately since we're NOT reloading the page anymore
|
||
if (selectedThemes.size < 5 && window.innerWidth >= 768) {
|
||
// Small delay to ensure DOM updates are complete
|
||
requestAnimationFrame(() => {
|
||
themeInput.focus();
|
||
});
|
||
}
|
||
|
||
// Don't auto-apply filter - let user add multiple themes then click Apply
|
||
// This allows the auto-focus to work and provides better UX
|
||
// applyFilter();
|
||
};
|
||
|
||
// Remove theme chip
|
||
window.removeTheme = function(theme) {
|
||
selectedThemes.delete(theme);
|
||
const chip = selectedThemesContainer.querySelector(`.theme-chip[data-theme="${theme}"]`);
|
||
if (chip) {
|
||
chip.remove();
|
||
}
|
||
updateThemeInputState();
|
||
// Don't auto-apply filter - let user manage themes then click Apply
|
||
// applyFilter();
|
||
};
|
||
|
||
// Debounced input handler
|
||
themeInput.addEventListener('input', () => {
|
||
clearTimeout(debounceTimer);
|
||
debounceTimer = setTimeout(fetchThemeSuggestions, 150);
|
||
});
|
||
|
||
// Helper functions
|
||
const getItems = () => Array.from(themeDropdown.querySelectorAll('.autocomplete-item'));
|
||
|
||
const selectItem = (index) => {
|
||
const items = getItems();
|
||
items.forEach((item, i) => {
|
||
if (i === index) {
|
||
item.classList.add('selected');
|
||
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||
} else {
|
||
item.classList.remove('selected');
|
||
}
|
||
});
|
||
selectedIndex = index;
|
||
};
|
||
|
||
const applySelectedItem = () => {
|
||
const items = getItems();
|
||
const item = items[selectedIndex];
|
||
if (item && item.dataset.value) {
|
||
addTheme(item.dataset.value);
|
||
}
|
||
};
|
||
|
||
// Reset selection when dropdown changes
|
||
const observer = new MutationObserver(() => {
|
||
selectedIndex = -1;
|
||
getItems().forEach(item => item.classList.remove('selected'));
|
||
const hasContent = themeDropdown.children.length > 0;
|
||
themeInput.setAttribute('aria-expanded', hasContent ? 'true' : 'false');
|
||
});
|
||
observer.observe(themeDropdown, { childList: true });
|
||
|
||
// Click handler
|
||
document.body.addEventListener('click', (e) => {
|
||
const item = e.target.closest('.autocomplete-item');
|
||
if (item && item.dataset.value && themeDropdown.contains(item)) {
|
||
e.preventDefault();
|
||
addTheme(item.dataset.value);
|
||
}
|
||
});
|
||
|
||
// Close dropdown when clicking outside
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('#filter-theme-input') && !e.target.closest('#theme-autocomplete-dropdown')) {
|
||
themeDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
}
|
||
});
|
||
|
||
// Keyboard navigation
|
||
themeInput.addEventListener('keydown', (e) => {
|
||
const items = getItems();
|
||
const hasItems = items.length > 0;
|
||
|
||
if (e.key === 'Escape') {
|
||
const now = Date.now();
|
||
const timeSinceLastEscape = now - lastEscapeTime;
|
||
|
||
if (hasItems) {
|
||
// Close dropdown if open
|
||
themeDropdown.innerHTML = '';
|
||
selectedIndex = -1;
|
||
lastEscapeTime = now;
|
||
e.preventDefault();
|
||
} else if (timeSinceLastEscape < 500) {
|
||
// Double-tap Escape within 500ms - clear all filters
|
||
console.log('Double Escape detected - clearing filters');
|
||
e.preventDefault();
|
||
window.location.href = '/cards';
|
||
} else {
|
||
// First escape with no dropdown
|
||
lastEscapeTime = now;
|
||
e.preventDefault();
|
||
}
|
||
} else if (e.key === 'ArrowDown' && hasItems) {
|
||
e.preventDefault();
|
||
const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
|
||
selectItem(newIndex);
|
||
} else if (e.key === 'ArrowUp' && hasItems) {
|
||
e.preventDefault();
|
||
const newIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
|
||
selectItem(newIndex);
|
||
} else if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
if (e.shiftKey) {
|
||
// Shift+Enter: Add current theme if any, then apply all filters
|
||
if (hasItems) {
|
||
// Add the first match before applying
|
||
if (selectedIndex >= 0) {
|
||
applySelectedItem();
|
||
} else {
|
||
selectItem(0);
|
||
applySelectedItem();
|
||
}
|
||
// Small delay to ensure theme is added before applying filters
|
||
setTimeout(() => applyFilter(), 50);
|
||
} else {
|
||
// No autocomplete, just apply filters
|
||
applyFilter();
|
||
}
|
||
} else if (selectedIndex >= 0 && hasItems) {
|
||
// Apply the explicitly selected item
|
||
applySelectedItem();
|
||
} else if (hasItems) {
|
||
// No item selected, but there are items - select the first one
|
||
selectItem(0);
|
||
applySelectedItem();
|
||
}
|
||
}
|
||
});
|
||
|
||
// Mouse hover
|
||
themeDropdown.addEventListener('mouseover', (e) => {
|
||
const item = e.target.closest('.autocomplete-item');
|
||
if (item) {
|
||
const items = getItems();
|
||
const index = items.indexOf(item);
|
||
if (index >= 0) {
|
||
selectItem(index);
|
||
}
|
||
}
|
||
});
|
||
})();
|
||
|
||
// Update card count after loading more cards via HTMX
|
||
let autoLoadEnabled = true;
|
||
let lastCardCount = 0;
|
||
|
||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||
// Only update if this was a card grid load
|
||
if (event.detail.target.id === 'card-grid') {
|
||
const cardTiles = document.querySelectorAll('#card-grid .card-tile');
|
||
const totalCount = cardTiles.length;
|
||
const resultsCount = document.getElementById('results-count');
|
||
|
||
if (resultsCount && totalCount > 0) {
|
||
// Extract the "of X filtered cards" or "of X cards" part
|
||
const originalText = resultsCount.textContent;
|
||
const match = originalText.match(/of (\d+)( filtered)? cards/);
|
||
|
||
if (match) {
|
||
const totalCards = match[1];
|
||
const filtered = match[2] || '';
|
||
const searchMatch = originalText.match(/matching "([^"]+)"/);
|
||
const searchText = searchMatch ? ` matching "${searchMatch[1]}"` : '';
|
||
|
||
resultsCount.textContent = `Showing ${totalCount} of ${totalCards}${filtered} cards${searchText}`;
|
||
}
|
||
}
|
||
|
||
// Check if we just crossed a 100-card boundary
|
||
const currentHundred = Math.floor(totalCount / 100);
|
||
const lastHundred = Math.floor(lastCardCount / 100);
|
||
|
||
if (currentHundred > lastHundred && totalCount % 100 === 0) {
|
||
autoLoadEnabled = false;
|
||
}
|
||
|
||
lastCardCount = totalCount;
|
||
|
||
// Re-observe the new load more button
|
||
const loadMoreContainer = document.getElementById('load-more-container');
|
||
if (loadMoreContainer) {
|
||
scrollObserver.observe(loadMoreContainer);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Scroll observer for infinite scroll
|
||
const scrollObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && autoLoadEnabled) {
|
||
const loadMoreBtn = document.querySelector('#load-more-container button');
|
||
if (loadMoreBtn) {
|
||
loadMoreBtn.click();
|
||
}
|
||
}
|
||
});
|
||
}, {
|
||
rootMargin: '200px' // Start loading 200px before reaching the button
|
||
});
|
||
|
||
// Manual "Load More" click re-enables auto-load
|
||
document.body.addEventListener('click', function(event) {
|
||
const loadMoreBtn = event.target.closest('#load-more-container button');
|
||
if (loadMoreBtn && !autoLoadEnabled) {
|
||
autoLoadEnabled = true;
|
||
}
|
||
});
|
||
|
||
// Initial observation
|
||
window.addEventListener('load', function() {
|
||
const loadMoreContainer = document.getElementById('load-more-container');
|
||
if (loadMoreContainer) {
|
||
scrollObserver.observe(loadMoreContainer);
|
||
}
|
||
|
||
// Initialize theme chips from URL params
|
||
{% if themes %}
|
||
{% for theme in themes %}
|
||
addTheme('{{ theme|replace("'", "\\'") }}');
|
||
{% endfor %}
|
||
{% endif %}
|
||
});
|
||
</script>
|
||
{% endblock %} |