Files
cv-site/templates/partials/widgets/bg-photo-toggle.html
T

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}}