Add functionality to enlarge figure by clicking on it

themes/maik-blog/assets/js/list_columns.js

@@ -1,26 +0,0 @@
-function resizeItem(masonry, item){
-  let rowHeight = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-auto-rows'));
-  let rowGap = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-row-gap'));
-  let rowSpan = Math.ceil((item.querySelector('.masonry-item-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
-  item.style.gridRowEnd = "span "+rowSpan;
-}
-
-function resizeAll(){
-  let masonry = document.getElementsByClassName("masonry")[0];
-
-  if (!masonry) return;
-
-  masonry.style.gridAutoRows = "20px"
-  masonry.style.marginBottom = "80px"
-  let allItems = masonry.getElementsByClassName("masonry-item");
-
-  for (const item of allItems) {
-    resizeItem(masonry, item)
-  }
-}
-
-window.addEventListener("load", () => {
-  resizeAll()
-
-  window.addEventListener("resize", resizeAll);
-})

themes/maik-blog/assets/js/main.js

@@ -1 +1,20 @@
-// Some code could be here ...
+window.addEventListener("load", () => {
+    for (let figure of document.getElementsByTagName("figure")) {
+        if (figure.classList.contains("post-cover"))
+            continue
+
+        figure.addEventListener("click", () => {
+            figure.classList.toggle("floated-focus")
+        })
+    }
+
+    document.addEventListener('keydown', (e) => {
+        if (e.keyCode !== 27)
+            return
+
+        for (let figure of document.getElementsByClassName("floated-focus")) {
+            figure.classList.remove("floated-focus")
+        }
+
+    })
+})