add class; todo more brr

src/content/assets/css/style.css

@@ -43,6 +43,14 @@ blockquote.blockquote {
   display: table;
 }
 
+.post + .selected {
+  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

@@ -1,5 +1,8 @@
 let log = Format.printf
 
+(* TODO do like in render_time everywhere *)
+let inner_html = Brr.El.Prop.jstr (Jstr.of_string "innerHTML")
+
 type image_size =
   | Big
   | Small
@@ -45,21 +48,55 @@ let image_click post_image event =
 
 let render_time date_span =
   log "render time@\n";
-  let t =
-    Jv.to_float
-      (Jv.call date_span "getAttribute" [| Jv.of_string "data-time" |])
+  let data_time =
+    match Brr.El.at (Jstr.of_string "data-time") date_span with
+    | None -> failwith "no attribute data-time for date element"
+    | Some data_time -> Jstr.to_float data_time
   in
-  let t = Unix.localtime t in
+  (*
+     let t =
+       Jv.to_float
+         (Jv.call date_span "getAttribute" [| Jv.of_string "data-time" |])
+     in
+  *)
+  let t = Unix.localtime data_time in
   let date =
     Format.sprintf "%02d-%02d-%02d %02d:%02d" (1900 + t.tm_year) (1 + t.tm_mon)
       t.tm_mday t.tm_hour t.tm_min
   in
-  ignore @@ Jv.set date_span "innerHTML" (Jv.of_string date)
+  Brr.El.set_prop inner_html (Jstr.of_string date) date_span
 
 let preview_ref = ref None
 
 let highlighted_ref = ref None
 
+let selected_ref = ref None
+
+(* todo use brr *)
+let add_class name el =
+  let class_list = Jv.get el "classList" in
+  ignore @@ Jv.call class_list "add" [| Jv.of_string name |]
+
+let remove_class name el =
+  let class_list = Jv.get el "classList" in
+  ignore @@ Jv.call class_list "remove" [| Jv.of_string name |]
+
+let on_hashchange _event =
+  log "on hashchange";
+  let frag =
+    Jstr.to_string @@ Brr.Uri.fragment @@ Brr.Window.location Brr.G.window
+  in
+  match Jv.find Jv.global frag with
+  | None -> log "fragment not found on the page"
+  | Some reply ->
+    let () =
+      match !selected_ref with
+      | None -> ()
+      | Some item -> remove_class "selected" item
+    in
+    let () = add_class "selected" reply in
+    selected_ref := Some reply
+
 let on_mouse_over el _event =
   log "on mouse over@\n";
   (*get id of reply *)
@@ -134,31 +171,37 @@ let on_mouse_out _el _event =
 let make_pretty _event =
   log "make pretty@\n";
 
-  let get_class name =
-    Jv.to_jv_list
-    @@ Jv.call document "getElementsByClassName" [| Jv.of_string name |]
-  in
-
   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) |]
+    let event = Brr.Ev.Type.create (Jstr.of_string event) in
+    let el_list = Brr.El.find_by_class (Jstr.of_string name) in
+    List.iter
+      (fun el ->
+        (* TODO handler should take Brr.El. ? *)
+        Brr.Ev.listen event (handler el) (Brr.El.as_target el) )
+      el_list
+  in
+
+  let dates = Brr.El.find_by_class (Jstr.of_string "date") in
+  List.iter render_time dates;
+
+  (*(*add event image_click to all postImage*)
+    let () = add_event_to_class ~name:"post-image" ~event:"click" image_click in
+
+    (*add event mouse_over/out to all reply-link *)
+    let () =
+      add_event_to_class ~name:"reply-link" ~event:"mouseover" on_mouse_over
     in
-    List.iter add_event (get_class name)
-  in
-
-  List.iter render_time (get_class "date");
-
-  (*add event image_click to all postImage*)
-  let () = add_event_to_class ~name:"post-image" ~event:"click" image_click in
-
-  (*add event mouse_over/out to all reply-link *)
+  *)
   let () =
-    add_event_to_class ~name:"reply-link" ~event:"mouseover" on_mouse_over
+    add_event_to_class ~name:"reply-link" ~event:"mouseout" on_mouse_out
   in
-  add_event_to_class ~name:"reply-link" ~event:"mouseout" on_mouse_out
+
+  (* add fragment listener to mark as selected the linked post *)
+  let window = Jv.get Jv.global "window" in
+  ignore
+  @@ Jv.call window "addEventListener"
+       [| Jv.of_string "hashchange"; Jv.repr on_hashchange |]
 
 (*make pretty after page load*)
 let () =
@@ -168,7 +211,6 @@ let () =
   @@ 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 *)