Refactor pre-retcon image viewing code into separate directory

Sixthhokage1 · Sep 2, 2017 · d1dadd3 · d1dadd3
1 parent a83f562
commit d1dadd3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 19 deletions.
diff --git a/POV Cam/injection.js b/POV Cam/injection.js
@@ -214,25 +214,9 @@ function modifyPage() {
 
         // View pre-retcon pages
         if (items.preretcon == "yes") {
-            sheet.addRule('img.preretcon:hover', 'opacity: 0;');
-            var currentImages = document.querySelectorAll("img[src*='retcon'");
-            for (var i = 0; i < currentImages.length; i++) {
-                var doubleImageContainer = document.createElement("div");
-                doubleImageContainer.style.display = "inline-block";
-                doubleImageContainer.style.position = "relative";
-                currentImages[i].parentElement.insertBefore(doubleImageContainer, currentImages[i]);
-                doubleImageContainer.appendChild(currentImages[i]);
-
-                var preRetconImage = document.createElement("img");
-                preRetconImage.src = currentImages[i].src.replace("_retcon", "").replace("retcon", "");
-                preRetconImage.style.position = "absolute";
-                preRetconImage.style.top = 0;
-                preRetconImage.style.left = 0;
-                preRetconImage.className = "preretcon";
-                preRetconImage.style.transition = "opacity 0.3s";
-
-                doubleImageContainer.appendChild(preRetconImage);
-            }
+            document.querySelectorAll("img[src*='retcon']").forEach(postRetconImage => {
+                overlayPreRetconImage(postRetconImage);
+            });
         }
 
         // Flash controls

diff --git a/POV Cam/manifest.json b/POV Cam/manifest.json
@@ -37,12 +37,18 @@
             "js": [
                 "timelines.js",
                 "page-captions.js",
+
                 "lord-english-text.js",
+                "pre-retcon-images/pre-retcon-images.js",
+
                 "injection.js",
 
                 "flash-controls/flash-lengths.js",
                 "flash-controls/flash-controls.js"
             ],
+            "css": [
+                "pre-retcon-images/pre-retcon-images.css"
+            ],
             "run_at": "document_end",
             "all_frames": true
         }

diff --git a/POV Cam/pre-retcon-images/pre-retcon-images.css b/POV Cam/pre-retcon-images/pre-retcon-images.css
@@ -0,0 +1,15 @@
+div.retcon-container {
+    display: inline-block;
+    position: relative;
+}
+
+img.pre-retcon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 0.3s;
+}
+
+img.pre-retcon:hover {
+    opacity: 0;
+}
diff --git a/POV Cam/pre-retcon-images/pre-retcon-images.js b/POV Cam/pre-retcon-images/pre-retcon-images.js
@@ -0,0 +1,23 @@
+/*
+    Some pages have been retro-actively modified by the author
+    This utility allows you to switch back and forth between the pre and post retcon images
+*/
+
+function createPreRetconImage(postRetconImage) {
+    var preRetconImage = document.createElement("img");
+
+    preRetconImage.src = postRetconImage.src.replace("_retcon", "").replace("retcon", "");
+    preRetconImage.className = "pre-retcon";
+
+    return preRetconImage;
+}
+
+function overlayPreRetconImage(postRetconImage) {
+    var doubleImageContainer = document.createElement("div");
+    doubleImageContainer.className = "retcon-container";
+
+    postRetconImage.parentElement.insertBefore(doubleImageContainer, postRetconImage);
+
+    doubleImageContainer.appendChild(postRetconImage);
+    doubleImageContainer.appendChild(createPreRetconImage(postRetconImage));
+}