wip

src/content/assets/css/style.css

@@ -35,6 +35,14 @@ blockquote.blockquote {
   display: table;
 }
 
+.post + .highlight {
+  background-color: #9dd162;
+  margin: 5px 5px 5px 5px;
+  border: 2px solid #FFB300;
+  padding: 2px;
+  display: table;
+}
+
 .post-info {
   display: block;
   width: 100%;

src/js/js_pretty_post.ml

@@ -56,26 +56,109 @@ let render_time date_span =
   in
   ignore @@ Jv.set date_span "innerHTML" (Jv.of_string date)
 
+let preview_ref = ref None
+
+let highlighted_ref = ref None
+
+let on_mouse_over el _event =
+  log "on mouse over@\n";
+  (*get id of reply *)
+  let reply_id =
+    Jv.to_string @@ Jv.call el "getAttribute" [| Jv.of_string "data-id" |]
+  in
+  (* (try to) get div of reply *)
+  match Jv.find Jv.global reply_id with
+  | None -> failwith "error getting reply_div, this reply is not on this page"
+  | Some reply_div ->
+    (* check if it in view, if it is, just make it of class `highlight` *)
+    let reply_bounding_rect = Jv.call reply_div "getBoundingClientRect" [||] in
+    let window = Jv.get Jv.global "window" in
+    let window_height = Jv.get window "innerHeight" |> Jv.to_int in
+    let reply_top = Jv.get reply_bounding_rect "top" |> Jv.to_int in
+    if reply_top < window_height - 50 then (
+      let class_list = Jv.get reply_div "classList" in
+      ignore @@ Jv.call class_list "add" [| Jv.of_string "highlight" |];
+      highlighted_ref := Some reply_div )
+    else
+      (* copy it to make new div  `floating-reply-preview` *)
+      let preview_div = Jv.call reply_div "cloneNode" [| Jv.of_bool true |] in
+      ignore
+      @@ Jv.call preview_div "setAttribute"
+           [| Jv.of_string "class"
+            ; Jv.of_string "floating-reply-preview post"
+           |];
+      ignore
+      @@ Jv.call preview_div "setAttribute"
+           [| Jv.of_string "id"; Jv.of_string "floating-reply-preview" |];
+      (* append to DOM *)
+      ignore @@ Jv.call el "after" [| preview_div |];
+      (* place it next to the reply-link el*)
+      let bounding_rect = Jv.call el "getBoundingClientRect" [||] in
+      let top =
+        let el_top = Jv.get bounding_rect "top" |> Jv.to_int in
+        let reply_height = Jv.get reply_bounding_rect "height" |> Jv.to_int in
+        Int.min el_top (window_height - reply_height - 5)
+        |> Format.sprintf "%dpx" |> Jv.of_string
+      in
+      let right =
+        Jv.get bounding_rect "right"
+        |> Jv.to_int |> Format.sprintf "%dpx" |> Jv.of_string
+      in
+      let style = Jv.get preview_div "style" in
+      ignore @@ Jv.set style "position" (Jv.of_string "fixed");
+      ignore @@ Jv.set style "z-index" (Jv.of_int 42);
+      ignore @@ Jv.set style "top" top;
+      ignore @@ Jv.set style "left" right;
+
+      (* set preview_div ref for on_mouse_out *)
+      preview_ref := Some preview_div;
+      ()
+
+let on_mouse_out _el _event =
+  log "on mouse out@\n";
+  (* get the `reply-preview` element, delete it if Some*)
+  let () =
+    match !highlighted_ref with
+    | None -> ()
+    | Some highlighted_div ->
+      let class_list = Jv.get highlighted_div "classList" in
+      ignore @@ Jv.call class_list "remove" [| Jv.of_string "highlight" |]
+  in
+  match !preview_ref with
+  | None -> ()
+  | Some preview_div ->
+    ignore @@ Jv.call preview_div "remove" [||];
+    (* if None, get the `selected-reply-preview` element (by class) and remove this class *)
+    ()
+
 let make_pretty _event =
   log "make pretty@\n";
 
-  let times =
+  let get_class name =
     Jv.to_jv_list
-    @@ Jv.call document "getElementsByClassName" [| Jv.of_string "date" |]
+    @@ Jv.call document "getElementsByClassName" [| Jv.of_string name |]
   in
-  List.iter render_time times;
+
+  let add_event_to_class ~name ~event handler =
+    (* TODO use brr? *)
+    let add_event el =
+      ignore
+      @@ Jv.call el "addEventListener"
+           [| Jv.of_string event; Jv.repr (handler el) |]
+    in
+    List.iter add_event (get_class name)
+  in
+
+  List.iter render_time (get_class "date");
 
   (*add event image_click to all postImage*)
-  let post_images =
+  let () = add_event_to_class ~name:"post-image" ~event:"click" image_click in
-    Jv.to_jv_list
+
-    @@ Jv.call document "getElementsByClassName" [| Jv.of_string "post-image" |]
+  (*add event mouse_over/out to all reply-link *)
+  let () =
+    add_event_to_class ~name:"reply-link" ~event:"mouseover" on_mouse_over
   in
-  let add_click el =
+  add_event_to_class ~name:"reply-link" ~event:"mouseout" on_mouse_out
-    ignore
-    @@ Jv.call el "addEventListener"
-         [| Jv.of_string "click"; Jv.repr (image_click el) |]
-  in
-  List.iter add_click post_images
 
 (*make pretty after page load*)
 let () =
@@ -84,3 +167,11 @@ let () =
   ignore
   @@ Jv.call window "addEventListener"
        [| Jv.of_string "load"; Jv.repr make_pretty |]
+
+(* TODO add event with Brr etc*)
+(* TODO add a selected class for post clicked / in fragment *)
+(* see https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event *)
+(* TODO reply can be in another thread, how to display it? if displaying it on mouseover we need to fetch it. and display it in special color. need to change pp_post in pp_babillard *)
+(* mouseout not fired when scrolling wtf *)
+(* TODO link to post in comment should be of class reply-link *)
+(* TODO preview should stay in viewport (bug if near the end of viewport) *)

src/pp_babillard.ml

@@ -118,10 +118,17 @@ let pp_post fmt t =
   let tags = List.sort String.compare tags in
   let tags_view fmt () = pp_print_tags fmt tags in
 
-  let subject =
+  let pp_subject fmt () =
-    Option.fold ~none:""
+    match thread_data_opt with
-      ~some:(fun thread_data -> thread_data.subject)
+    | None -> Format.fprintf fmt ""
-      thread_data_opt
+    | Some thread_data ->
+      Format.fprintf fmt
+        {|
+        <div class="thread-subject">
+            %s
+        </div>
+        |}
+        thread_data.subject
   in
   (* put a link in if its a preview *)
   let link fmt () =
@@ -133,9 +140,7 @@ let pp_post fmt t =
   Format.fprintf fmt
     {|
     <div class="position-relative post" id="%s">
-        <div class="thread-subject">
+        %a
-            %s
-        </div>
         %a
         %a
         %a
@@ -143,7 +148,8 @@ let pp_post fmt t =
         %a
     </div>
 |}
-    id subject link () post_info_view () image_view () comment tags_view ()
+    id pp_subject () link () post_info_view () image_view () comment tags_view
+    ()
 
 let view_post id =
   let* post = get_post id in

src/template.eml.html

@@ -10,7 +10,7 @@ let render_unsafe ~title ~content request =
     </head>
     <body>
       <header>
-          <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+          <nav class="navbar navbar-expand-md navbar-dark bg-dark">
               <div class="container-fluid">
                 <a class="navbar-brand" href="/"><img src="/assets/img/favicon.png" alt="Permap" height="22" /></a>
                   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">