Merge pull request #3 from ahus1/ISIS-2368-adding-lightbox-for-figures

ISIS-2368: porting lightbox feature for figures without an anchor
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
index 4b55997..0afebe5 100644
--- a/build/ui-bundle.zip
+++ b/build/ui-bundle.zip
Binary files differ
diff --git a/src/css/lightbox.css b/src/css/lightbox.css
new file mode 100644
index 0000000..031456e
--- /dev/null
+++ b/src/css/lightbox.css
@@ -0,0 +1,57 @@
+/* The Modal (background) */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 10;
+  padding-top: 5vh;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  backdrop-filter: blur(3px);
+  background-color: rgba(30, 30, 30, 0.8);
+}
+
+img.lightbox {
+  cursor: pointer;
+}
+/* Modal Content */
+.modal .modal-content {
+  position: relative;
+  margin: auto;
+  padding: 0;
+  width: 90%;
+  max-width: 1200px;
+  max-height: 90vh;
+  cursor: pointer;
+}
+
+.modal .modal-content img {
+  width: auto;
+  height: auto;
+  max-width: 90vw;
+  max-height: 90vh;
+  min-width: 90vw;
+  min-height: 90vh;
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  object-fit: contain;
+}
+/* The Close Button */
+.modal .close {
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  font-size: 35px;
+  font-weight: bold;
+}
+
+.modal .close:hover,
+.modal .close:focus {
+  color: #999;
+  text-decoration: none;
+  cursor: pointer;
+}
diff --git a/src/css/site.css b/src/css/site.css
index bdd0f3a..9b95431 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -13,6 +13,7 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
+@import "lightbox.css";
 @import "fa-icons.css";
 @import "links-external.css";
 @import "links-internal.css";
diff --git a/src/js/06-lightbox.js b/src/js/06-lightbox.js
new file mode 100644
index 0000000..e47f5fe
--- /dev/null
+++ b/src/js/06-lightbox.js
@@ -0,0 +1,43 @@
+;(function () {
+  'use strict'
+  var lightbox
+
+  function init () {
+    if (!lightbox) {
+      lightbox = document.createElement('div')
+      lightbox.className = 'modal'
+      lightbox.innerHTML = '<span class="close cursor">&times;</span>\n' +
+        '  <div class="modal-content">\n' +
+        '    <img alt="filled at runtime">\n' +
+        '  </div>'
+
+      var footer = document.getElementsByTagName('footer')[0]
+      footer.parentNode.insertBefore(lightbox, footer.nextSibling)
+
+      lightbox.getElementsByTagName('div')[0].onclick = closeModal
+      lightbox.getElementsByTagName('span')[0].onclick = closeModal
+    }
+  }
+
+  function openModal () {
+    lightbox.style.display = 'block'
+  }
+
+  function closeModal () {
+    lightbox.style.display = 'none'
+  }
+
+  document.querySelectorAll('.imageblock img').forEach(function (element) {
+    if (element.parentNode.nodeName === 'A') {
+      // if parent node is an anchor, keep the anchor instead of opening lightbox
+      return
+    }
+    element.className += ' lightbox'
+    element.addEventListener('click', function (evt) {
+      init()
+      lightbox.getElementsByTagName('img')[0].setAttribute('src', evt.currentTarget.getAttribute('src'))
+      lightbox.getElementsByTagName('img')[0].setAttribute('alt', evt.currentTarget.getAttribute('alt'))
+      openModal()
+    })
+  })
+})()