Fix the popover for larger images.

Author: gjong

docs/_layouts/section.html

@@ -138,6 +138,10 @@ <h3>Table of contents</h3>
             {% endif %}
         </div>
     </div>
+
+    <div class="popup" id="popup" onclick="closePopup()">
+        <div id="content"></div>
+    </div>
 </main>
 
 </body>
@@ -154,5 +158,24 @@ <h3>Table of contents</h3>
             section.querySelector('img').src = '/images/icons/nav-chevron-down.png';
         }
     }
+
+    const popover = document.getElementById('content');
+    const scalable = document.getElementsByClassName('scalable-image');
+    for (const scalableElement of scalable) {
+        scalableElement.addEventListener('click', () => {
+            const image = scalableElement.getElementsByTagName('img')[0];
+            const title = () => image.alt ? `<h1>${image.alt}</h1>` : ''
+
+            popover.innerHTML = `${title()}${image.outerHTML}`
+
+            document.getElementById('popup')
+                .classList.add('open')
+        })
+    }
+
+    function closePopup() {
+        document.getElementById('popup')
+            .classList.remove('open')
+    }
 </script>
 </html>

docs/images/css/_popover.scss

@@ -36,6 +36,7 @@
 
   &.open {
     display: flex;
+    justify-content: center;
   }
 }
 

docs/images/css/section.scss

@@ -63,6 +63,8 @@ body {
         @import "section-layout/page-navigation";
       }
     }
+
+    @import "popover";
   }
 }