From 964990d9bc5ec582e7109211d24c889622dbd69e Mon Sep 17 00:00:00 2001
From: Swrup <swrup@protonmail.com>
Date: Mon, 24 Jan 2022 04:40:29 +0100
Subject: [PATCH] add image_click: make image bigger on click

---
 src/babillard.ml                 |  2 +-
 src/content/assets/css/style.css |  5 +++++
 src/js_thread.ml                 | 36 +++++++++++++++++++++++++++++++-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/babillard.ml b/src/babillard.ml
index bc14024..dfb5edb 100644
--- a/src/babillard.ml
+++ b/src/babillard.ml
@@ -356,7 +356,7 @@ let view_post ?is_thread_preview post_id =
       Format.sprintf
         {|
     <div class="postImageContainer">
-        <a title="%s" href="/post_pic/%s">
+        <a title="%s" href="/post_pic/%s" target="_blank">
         <img class= "postImage" src="/post_pic/%s" loading="lazy">
         </a>
     </div> 
diff --git a/src/content/assets/css/style.css b/src/content/assets/css/style.css
index 9ca1abb..08a4b9b 100644
--- a/src/content/assets/css/style.css
+++ b/src/content/assets/css/style.css
@@ -54,6 +54,11 @@ blockquote.blockquote {
   height: auto;
 }
 
+.postImageBig {
+  max-width: 750px;
+  height: auto;
+}
+
 .quote {
   color: green;
 }
diff --git a/src/js_thread.ml b/src/js_thread.ml
index bb12f64..46fa565 100644
--- a/src/js_thread.ml
+++ b/src/js_thread.ml
@@ -1,6 +1,6 @@
 let log = Format.printf
 
-(* called by clicking post_id to reply *)
+(* called by clicking post_id *)
 (* insert id into reply form *)
 let insert_quote post_id =
   log "quote@.";
@@ -16,3 +16,37 @@ let insert_quote post_id =
     Jv.undefined
 
 let () = Jv.set Jv.global "insert_quote" (Jv.repr insert_quote)
+
+(*change postImage class to make it bigger/smaller on click*)
+let image_click post_image event =
+  log "image_click@.";
+  let current_class =
+    Jv.to_string @@ Jv.call post_image "getAttribute" [| Jv.of_string "class" |]
+  in
+  let new_class =
+    match current_class with
+    | "postImage" -> "postImageBig"
+    | "postImageBig" -> "postImage"
+    | _ -> failwith "invalid image class name"
+  in
+  ignore
+  @@ Jv.call post_image "setAttribute"
+       [| Jv.of_string "class"; Jv.of_string new_class |];
+  (*prevent opening image in new tab*)
+  ignore @@ Jv.call event "preventDefault" [||];
+  ()
+
+(*add event image_click to all postImage*)
+let () =
+  let document = Jv.get Jv.global "document" in
+  let post_images =
+    Jv.to_jv_list
+    @@ Jv.call document "getElementsByClassName" [| Jv.of_string "postImage" |]
+  in
+  let add_click el =
+    ignore
+    @@ Jv.call el "addEventListener"
+         [| Jv.of_string "click"; Jv.repr (image_click el) |]
+  in
+  List.iter add_click post_images;
+  ()