shawn/exif-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add GPS-only toggle on import screen

Browse Source 
Adds a toggle switch in the summary bar to quickly hide non-GPS
photos from the gallery grid. More discoverable than filter chips.

- Toggle switch with clean CSS animation (sliding pill)
- Renders inline in summary grid next to GPS/no-GPS counts
- Overrides filter chips when active (GPS-only supremacy)
- Persists across photo additions (DOM state, not reset)
- Gallery, detail card, and upload functions all respect it
This commit is contained in:
Shawn
2026-05-25 21:24:15 -04:00
parent e3d8481f4f
commit bbc5b41868
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+21
View File
@@ -162,6 +162,14 @@ if ('serviceWorker' in navigator) {
}
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Toggle switch */
.switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--card2); border: 1px solid var(--border); border-radius: 18px; transition: .2s; }
.slider::before { content: ''; position: absolute; height: 12px; width: 12px; left: 2px; bottom: 2px; background: var(--text3); border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(14px); background: #fff; }
.asset-card {
background: var(--card2); border-radius: var(--radius-sm);
padding: 12px; margin-top: 10px; border-left: 3px solid var(--green);
@@ -399,6 +407,13 @@ if ('serviceWorker' in navigator) {
<div><div class="summary-num summary-total" id="sumTotal">0</div><div class="summary-label">Total</div></div>
<div><div class="summary-num summary-gps" id="sumGps">0</div><div class="summary-label">📍 Have GPS</div></div>
<div><div class="summary-num summary-nogps" id="sumNoGps">0</div><div class="summary-label">⚠️ No GPS</div></div>
<div style="display:flex;align-items:center;gap:6px;justify-content:center;">
<label class="switch">
<input type="checkbox" id="gpsToggle" onchange="renderGallery()">
<span class="slider"></span>
</label>
<span style="font-size:11px;color:var(--text2);white-space:nowrap;">📍 GPS only</span>
</div>
</div>
</div>
@@ -908,6 +923,12 @@ function renderGallery() {
if (currentFilter === 'gps') filtered = allPhotos.filter(p => p.hasGps);
else if (currentFilter === 'nogps') filtered = allPhotos.filter(p => !p.hasGps);
// Apply GPS-only toggle (overrides chips for hide-no-gps use case)
const gpsToggle = document.getElementById('gpsToggle');
if (gpsToggle && gpsToggle.checked) {
filtered = filtered.filter(p => p.hasGps);
}
// Sync filter chip visual state with currentFilter
updateFilterChips();