39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
{{define "bg-photo-toggle"}}
|
|
{{if .BgPhotos}}
|
|
<!-- Background Photo — random on each load -->
|
|
<script>
|
|
(function() {
|
|
var photos = [{{range $i, $p := .BgPhotos}}{{if $i}},{{end}}'{{$p}}'{{end}}];
|
|
if (!photos.length) return;
|
|
var url = photos[Math.floor(Math.random() * photos.length)];
|
|
document.body.style.setProperty('--bg-photo-url', 'url("' + url + '")');
|
|
document.body.classList.add('bg-photo');
|
|
|
|
window.toggleBgPhoto = function() {
|
|
var isOn = document.body.classList.contains('bg-photo');
|
|
if (isOn) {
|
|
document.body.classList.remove('bg-photo');
|
|
} else {
|
|
document.body.classList.add('bg-photo');
|
|
}
|
|
var btn = document.getElementById('bg-photo-toggle');
|
|
if (btn) {
|
|
var icon = btn.querySelector('iconify-icon');
|
|
if (icon) icon.setAttribute('icon', isOn ? 'mdi:image-outline' : 'mdi:image');
|
|
}
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<!-- Background Photo Toggle -->
|
|
<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" width="24" height="24"></iconify-icon>
|
|
</button>
|
|
{{end}}
|
|
{{end}}
|