added modal for demo gif

GwenTastic · May 7, 2024 · b00481f · b00481f
1 parent 6bddcb0
commit b00481f
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 3 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -13,6 +13,12 @@
     <![endif]-->
   </head>
   <body class="container">
+
+    <div id="modal">
+      <div id="modal-content">
+
+      </div>
+    </div>
       <header>
         <h1 class="header">{{ site.title | default: site.github.repository_name }}</h1>
         <p class="header">{{ site.description | default: site.github.project_tagline }}</p>

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -300,4 +300,47 @@ blockquote.warning {
     background-color: var(--dark-purple-trans);
     border: medium double var(--light-purple);
     padding: 5px 5px 5px 10px;
+}
+
+#modal {
+    display: none; 
+    position: fixed; 
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+  }
+
+#modal-content {
+    background-color: #fefefe;
+    margin: 15% auto; 
+    padding: 20px;
+    border: 1px solid #888;
+    width: 90%; 
+    background-repeat: no-repeat;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover, .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#modal-content img.demo {
+    max-width: unset;
+    max-height: unset;
+    width: 100%;
+    margin: unset;
+    padding: unset;
 }
diff --git a/index.md b/index.md
@@ -44,6 +44,46 @@ Once you are done setting up the rules you can hit the red `Separate Passages!`
 
 
 ## Showcase:
-Here's an example workflow
-
-<img class="demo" src="assets/images/TweeFileSplitter_demo_1.gif"/>
+Here's an example workflow (left mouse click to enlarge)
+<span id="preview-image">
+  <img class="demo" src="assets/images/TweeFileSplitter_demo_1.gif"/>
+</span>
+
+<script defer>
+  setTimeout(function() {
+    let modal = document.getElementById("modal");
+    let image = document.getElementById("preview-image");
+    console.log(image);
+    //var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks on the button, open the modal
+    console.log("setup image clicked");
+    image.addEventListener("click", function(e) {
+      console.log("clicked");
+      let modal = document.getElementById("modal");
+      let content = document.getElementById("modal-content");
+      let img = document.querySelector("#preview-image img");
+      console.log(img);
+      modal.style.display = "block";
+      content.replaceChildren(img);
+      // content.style.backgroundImage = `url("${img.src}")`; 
+    });
+
+    // When the user clicks on <span> (x), close the modal
+    // span.onclick = function() {
+      //   modal.style.display = "none";
+    // }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+      if (event.target == modal) {
+        let img = document.querySelector("#modal-content img");
+        // let content = document.getElementById("");
+        let content = document.getElementById("preview-image");
+
+        content.replaceChildren(img);
+        modal.style.display = "none";
+      }
+    } 
+  }, 1000);
+</script>