This repository has been archived on 2024-07-07. You can view files and clone it, but cannot push or open issues or pull requests.
bird.tacowolf.net/themes/avian/layouts/partials/dev/grid-indicator.html

47 lines
1.6 KiB
HTML
Raw Normal View History

2023-06-20 20:49:21 -04:00
{{ if .Site.IsServer }}
<button id="grid-menu" onclick="changeGridVisibility()"
class="w-8 h-8 mb-2 block rounded-full text-gray-700 text-sm bg-gray-200 uppercase pointer-events-auto">
<span>G</span>
</button>
<div id="grid-area" class="container w-screen h-screen mx-auto px-8 grid grid-cols-12 gap-4">
<div class="bg-blue-200 bg-opacity-25"></div>
</div>
<script>
const padOptions = ["0", "1", "2", "3", "4", "5", "6", "8", "10", "12", "16", "20", "24", "32", "40", "48", "56", "64"];
const colOptions = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
const gapOptions = ["0", "1", "2", "3", "4", "5", "6", "8", "10", "12", "16"];
/* helper function to remove a class attribute from an element */
function removeClassWith(e, part) {
var regx = new RegExp('(^|\\s)\\S*' + part + '\\S*', 'g');
e.className = e.className.replace(regx, '');
}
function setGridVisibility(data) {
var showGrid = data;
var e = document.querySelector("#grid-area");
if (e.classList.contains("hidden") == showGrid) {
e.classList.toggle("hidden");
}
sessionStorage.setItem("showGrid", showGrid);
}
function changeGridVisibility() {
var e = document.querySelector("#grid-area");
var showGrid = e.classList.contains("hidden") ? true : false;
setGridVisibility(showGrid);
}
function setupGridIndicator() {
/* load variables from local storage */
var showGrid = sessionStorage.getItem("showGrid") === "true";
setGridVisibility(showGrid);
}
window.onload = setupGridIndicator();
</script>
{{ end }}