Add fullscreen display for image expandos

css/resFullscreenGallery.css

@@ -0,0 +1,29 @@
+.res-gallery,
+.imagePost
+    .res-expando-box:not([data-host="redditgallery"])
+    .res-expando-box-inner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100%;
+    z-index: 200;
+    background-color: black;
+    color: white;
+}
+.expando-button.image.expanded {
+    position: fixed;
+    top: 25px;
+    right: 0;
+    z-index: 201;
+    width: 48px;
+    height: 48px;
+}
+.res-gallery-pieces,
+.imagePost
+    .res-expando-box:not([data-host="redditgallery"])
+    .res-expando-box-inner {
+    flex-grow: 1;
+    display: flex !important;
+    align-items: center;
+}

js/cs.js

@@ -6,4 +6,5 @@ import "~/css/hideAds.css";
 import "~/css/redditChanges.css";
 import "~/css/customUi.css";
 import "~/css/userTabIcons.css";
+import "~/css/resFullscreenGallery.css";
 console.log("Content script loaded.");

js/posts/expando.js

@@ -0,0 +1,10 @@
+export default function (post) {
+    const expando_btn = post.querySelector(".expando-button");
+    console.log(expando_btn.classList);
+    if (
+        expando_btn.classList.contains("image") ||
+        expando_btn.classList.contains("video")
+    ) {
+        post.classList.add("imagePost");
+    }
+}

js/posts/index.js

@@ -1,5 +1,6 @@
 import setupNativeShare from "./nativeSharing.js";
 import setupToggles from "./postToggles.js";
+import expando from "./expando.js";
 import "@fortawesome/fontawesome-free/js/all.js";
 import "@fortawesome/fontawesome-free/css/all.css";
 import "~/css/postIcons.css";
@@ -26,6 +27,33 @@ export default function setupPosts() {
                 comments.innerText = "0";
             }
         }
+        const expando_btn = post.querySelector(".expando-button");
+        if (expando_btn !== null) {
+            if (
+                expando_btn.getAttribute("title") === "Expando is not yet ready"
+            ) {
+                const attrObserver = new MutationObserver((mutations) => {
+                    mutations.forEach((mu) => {
+                        if (
+                            mu.type !== "attributes" &&
+                            mu.attributeName !== "class"
+                        )
+                            return;
+                        console.log("class was modified!");
+                        expando(post);
+                        attrObserver.disconnect();
+                    });
+                });
+                console.log(
+                    "Expando is not ready yet, setting up mutation observer for",
+                    expando_btn
+                );
+                attrObserver.observe(expando_btn, { attributes: true });
+            } else {
+                expando(post);
+            }
+        }
+
         // remove thumbnail no-image indicator. Could be done with CSS, but FF doesn't support :has.
         const thumbnail = post.querySelector(".thumbnail");
         if (thumbnail !== null && thumbnail.children.length === 0) {