juanatsap
3b6d5e781a
Dev-only toggle button enables/disables photo backgrounds. Photos are auto-discovered from static/images/backgrounds/ and randomly selected on each page load. Production is unaffected — no button, no photo.
53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
{{define "bg-photo-toggle"}}
|
|
{{if not .IsProduction}}
|
|
<!-- Background Photo Toggle (Dev Only) -->
|
|
<button
|
|
id="bg-photo-toggle"
|
|
class="fixed-btn bg-photo-btn no-print has-tooltip"
|
|
aria-label="Toggle background photo"
|
|
data-tooltip="Toggle background photo"
|
|
onclick="toggleBgPhoto()">
|
|
<iconify-icon icon="mdi:image-outline" width="24" height="24"></iconify-icon>
|
|
</button>
|
|
<script>
|
|
(function() {
|
|
var photos = [{{range $i, $p := .BgPhotos}}{{if $i}},{{end}}'{{$p}}'{{end}}];
|
|
var key = 'bg-photo-enabled';
|
|
var keyIdx = 'bg-photo-index';
|
|
|
|
function pickPhoto() {
|
|
var idx = Math.floor(Math.random() * photos.length);
|
|
localStorage.setItem(keyIdx, idx);
|
|
return photos[idx];
|
|
}
|
|
|
|
function applyPhoto(enabled) {
|
|
var btn = document.getElementById('bg-photo-toggle');
|
|
var icon = btn ? btn.querySelector('iconify-icon') : null;
|
|
if (enabled) {
|
|
var idx = parseInt(localStorage.getItem(keyIdx), 10);
|
|
var url = (isNaN(idx) || idx >= photos.length) ? pickPhoto() : photos[idx];
|
|
document.body.style.setProperty('--bg-photo-url', 'url("' + url + '")');
|
|
document.body.classList.add('bg-photo');
|
|
if (icon) icon.setAttribute('icon', 'mdi:image');
|
|
} else {
|
|
document.body.classList.remove('bg-photo');
|
|
if (icon) icon.setAttribute('icon', 'mdi:image-outline');
|
|
}
|
|
}
|
|
|
|
// Init: pick a random photo each load, restore toggle state
|
|
pickPhoto();
|
|
var enabled = localStorage.getItem(key) !== 'false'; // default on
|
|
applyPhoto(enabled);
|
|
|
|
window.toggleBgPhoto = function() {
|
|
var isOn = document.body.classList.contains('bg-photo');
|
|
localStorage.setItem(key, !isOn);
|
|
applyPhoto(!isOn);
|
|
};
|
|
})();
|
|
</script>
|
|
{{end}}
|
|
{{end}}
|