From 36c5dd78b17af41fcfabca7524e400a9f52915a1 Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@serenityos.org>
Date: Tue, 27 Sep 2022 11:36:43 +0100
Subject: [PATCH] LibWeb: Make Markdown images shrink-to-fit by default

This inserts some CSS and JS to make images in Markdown documents which
are wider than the viewport, become shrink-to-fit. Clicking on these
toggles them between shrink-to-fit and full size.

Anyone who displays Markdown documents using LibWeb gets this
functionality for free! That's Browser, Help, and Welcome's README
display.
---
 .../Libraries/LibWeb/Loader/FrameLoader.cpp   | 45 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/Userland/Libraries/LibWeb/Loader/FrameLoader.cpp b/Userland/Libraries/LibWeb/Loader/FrameLoader.cpp
index 3022a3b350..d45e90a8eb 100644
--- a/Userland/Libraries/LibWeb/Loader/FrameLoader.cpp
+++ b/Userland/Libraries/LibWeb/Loader/FrameLoader.cpp
@@ -52,7 +52,50 @@ static bool build_markdown_document(DOM::Document& document, ByteBuffer const& d
     if (!markdown_document)
         return false;
 
-    auto parser = HTML::HTMLParser::create(document, markdown_document->render_to_html(), "utf-8");
+    auto extra_head_contents = R"~~~(
+<style>
+    .zoomable {
+        cursor: zoom-in;
+        max-width: 100%;
+    }
+    .zoomable.zoomed-in {
+        cursor: zoom-out;
+        max-width: none;
+    }
+</style>
+<script>
+    function imageClickEventListener(event) {
+        let image = event.target;
+        if (image.classList.contains("zoomable")) {
+            image.classList.toggle("zoomed-in");
+        }
+    }
+    function processImages() {
+        let images = document.querySelectorAll("img");
+        let windowWidth = window.innerWidth;
+        images.forEach((image) => {
+            if (image.naturalWidth > windowWidth) {
+                image.classList.add("zoomable");
+            } else {
+                image.classList.remove("zoomable");
+                image.classList.remove("zoomed-in");
+            }
+
+            image.addEventListener("click", imageClickEventListener);
+        });
+    }
+
+    document.addEventListener("load", () => {
+        processImages();
+    });
+
+    window.addEventListener("resize", () => {
+        processImages();
+    });
+</script>
+)~~~"sv;
+
+    auto parser = HTML::HTMLParser::create(document, markdown_document->render_to_html(extra_head_contents), "utf-8");
     parser->run(document.url());
     return true;
 }