Small JS optimizations

ModdingLinked · Nov 18, 2024 · bebf6d6 · bebf6d6
1 parent eacda56
commit bebf6d6
Show file tree

Hide file tree

Showing 23 changed files with 111 additions and 202 deletions.
diff --git a/avoid-mods.html b/avoid-mods.html
@@ -557,13 +557,6 @@ <h3>DSOAL</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
 </body>
 
 </html>
diff --git a/avoid-tools.html b/avoid-tools.html
@@ -267,13 +267,6 @@ <h3>Save Cleaner</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
 </body>
 
 </html>
diff --git a/basefinish.html b/basefinish.html
@@ -26,6 +26,7 @@
     <meta http-equiv='pragma' content='no-cache'>    
     <meta http-equiv='clear-site-data' content='cache'>
 
+    <script src="imageViewer.js"></script>
     <script src="javascript.js"></script>
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/cards.css">

diff --git a/bugfix.html b/bugfix.html
@@ -690,14 +690,6 @@ <h3 class="install">Installation instructions</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
-
 </body>
 
 </html>
diff --git a/changelog.html b/changelog.html
@@ -2557,13 +2557,6 @@ <h2><strong>Utilities</strong></h2>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
 </body>
 
 </html>
diff --git a/content.html b/content.html
@@ -296,14 +296,6 @@ <h3 class="install">Installation instructions</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
-
 </body>
 
 </html>
diff --git a/decompress.html b/decompress.html
@@ -26,6 +26,7 @@
     <meta http-equiv='pragma' content='no-cache'>    
     <meta http-equiv='clear-site-data' content='cache'>
 
+    <script src="imageViewer.js"></script>
     <script src="javascript.js"></script>
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/cards.css">

diff --git a/faq.html b/faq.html
@@ -681,13 +681,6 @@ <h3>Why didn't I get any DLC pop-ups/items after starting a new game?</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
 </body>
 
 </html>
diff --git a/finish.html b/finish.html
@@ -26,6 +26,7 @@
     <meta http-equiv='pragma' content='no-cache'>    
     <meta http-equiv='clear-site-data' content='cache'>
 
+    <script src="imageViewer.js"></script>
     <script src="javascript.js"></script>
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/cards.css">

diff --git a/gameplay.html b/gameplay.html
@@ -341,14 +341,6 @@ <h3 class="install">Installation instructions</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
-
 </body>
 
 </html>
diff --git a/hud.html b/hud.html
@@ -348,14 +348,6 @@ <h3 class="install">Installation instructions</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
-
 </body>
 
 </html>
diff --git a/imageViewer.js b/imageViewer.js
@@ -0,0 +1,29 @@
+// Image overlay
+
+document.addEventListener('DOMContentLoaded', function () {
+    createImageHandlers();
+});
+
+function createImageHandlers() {
+    const imageOverlay  = document.getElementById('image-overlay');
+    const enlargedImage = document.getElementById('enlarged-image');
+    if (!enlargedImage || !imageOverlay)
+        return;
+
+    const images = document.querySelectorAll('.content-img');
+
+    if (!images)
+        return;
+
+    images.forEach(image => {
+        image.addEventListener('click', function () {
+            imageOverlay.style.display = "flex";
+            enlargedImage.src = this.src;
+        });
+    });
+
+    imageOverlay.addEventListener('click', function () {
+        imageOverlay.style.display = "none";
+        enlargedImage.src = '';
+    });
+}
diff --git a/intro.html b/intro.html
@@ -294,14 +294,6 @@ <h3 onclick="location.href='#RecommendedSpecs'">Recommended Specs</h3>
     </div>
 
     <footer>ModdingLinked 2024</footer>
-
-    <div id="image-overlay" class="overlay" hidden>
-        <div class="image-container">
-            <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
-            <div class="resize-overlay shrink"></div>
-        </div>
-    </div>
-
 </body>
 
 </html>