brr
This commit is contained in:
parent
cd03f75612
commit
f73e220176
20 changed files with 166 additions and 178 deletions
|
|
@ -1,220 +0,0 @@
|
|||
open Brr
|
||||
|
||||
let log = Format.printf
|
||||
|
||||
type image_size =
|
||||
| Big
|
||||
| Small
|
||||
|
||||
let of_string = function
|
||||
| "post-image" -> Some Small
|
||||
| "post-image-big" -> Some Big
|
||||
| _ -> None
|
||||
|
||||
let to_string = function Small -> "post-image" | Big -> "post-image-big"
|
||||
|
||||
(*change postImage class to make it bigger/smaller on click*)
|
||||
let image_click post_image event =
|
||||
log "image_click@\n";
|
||||
let class_jstr = Jstr.of_string "class" in
|
||||
let current_class =
|
||||
match El.at class_jstr post_image with
|
||||
| None -> failwith "no class for post_image"
|
||||
| Some c -> Jstr.to_string c
|
||||
in
|
||||
let new_class =
|
||||
match of_string current_class with
|
||||
| Some image_size -> ( match image_size with Big -> Small | Small -> Big )
|
||||
| None -> failwith "invalid image class name"
|
||||
in
|
||||
El.set_at class_jstr (Some (Jstr.of_string (to_string new_class))) post_image;
|
||||
let id =
|
||||
match El.at (Jstr.of_string "data-id") post_image with
|
||||
| None -> failwith "no data-id on post_image"
|
||||
| Some id -> Jstr.to_string id
|
||||
in
|
||||
let src =
|
||||
match new_class with
|
||||
| Small -> Format.sprintf "/img/s/%s" id
|
||||
| Big -> Format.sprintf "/img/%s" id
|
||||
in
|
||||
El.set_at (Jstr.of_string "src") (Some (Jstr.of_string src)) post_image;
|
||||
(*prevent redirect to /img/:img*)
|
||||
Ev.prevent_default event;
|
||||
Ev.stop_propagation event
|
||||
|
||||
let render_time date_span =
|
||||
log "render time@\n";
|
||||
let data_time =
|
||||
match 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 =
|
||||
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
|
||||
let inner_html = El.Prop.jstr (Jstr.of_string "innerHTML") in
|
||||
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
|
||||
|
||||
let on_hashchange _event =
|
||||
log "on hashchange";
|
||||
let frag = Jstr.to_string @@ Uri.fragment @@ Window.location G.window in
|
||||
if frag = "" then ()
|
||||
else
|
||||
match Document.find_el_by_id G.document (Jstr.of_string frag) with
|
||||
| None -> log "fragment not found on the page"
|
||||
| Some reply ->
|
||||
let () =
|
||||
match !selected_ref with
|
||||
| None -> ()
|
||||
| Some item -> El.set_class (Jstr.of_string "selected") false item
|
||||
in
|
||||
El.set_class (Jstr.of_string "selected") true reply;
|
||||
selected_ref := Some reply
|
||||
|
||||
let clone_element el =
|
||||
(* TODO: how to clone with Brr? *)
|
||||
let id =
|
||||
match El.at (Jstr.of_string "id") el with
|
||||
| None -> failwith "element as no id for cloning"
|
||||
| Some id -> Jstr.to_string id
|
||||
in
|
||||
(* get reply_div as a Jv.t *)
|
||||
let original_div = Jv.get Jv.global id in
|
||||
let div = Jv.call original_div "cloneNode" [| Jv.of_bool true |] in
|
||||
ignore
|
||||
@@ Jv.call div "setAttribute"
|
||||
[| Jv.of_string "id"; Jv.of_string "floating-reply-preview" |];
|
||||
ignore
|
||||
@@ Jv.call div "setAttribute"
|
||||
[| Jv.of_string "class"; Jv.of_string "post highlight" |];
|
||||
|
||||
(* append to DOM *)
|
||||
(* we needs to add it to `body` and not `original_div` or it might change the display
|
||||
* and do buggy things with mouse events on `original_div`*)
|
||||
let document = Jv.get Jv.global "document" in
|
||||
let body = Jv.get document "body" in
|
||||
ignore @@ Jv.call body "append" [| div |];
|
||||
(* go back to El *)
|
||||
match
|
||||
Document.find_el_by_id G.document (Jstr.of_string "floating-reply-preview")
|
||||
with
|
||||
| None -> failwith "error cloning element"
|
||||
| Some el -> el
|
||||
|
||||
let on_mouse_over el _event =
|
||||
log "on mouse over@\n";
|
||||
|
||||
let reply_id =
|
||||
match El.at (Jstr.of_string "data-id") el with
|
||||
| None -> failwith "no data-id on element"
|
||||
| Some data_id -> data_id
|
||||
in
|
||||
|
||||
match Document.find_el_by_id G.document 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 window = Jv.get Jv.global "window" in
|
||||
let window_height = Jv.get window "innerHeight" |> Jv.to_int in
|
||||
let reply_top = El.bound_y reply_div |> int_of_float in
|
||||
if reply_top < window_height - 50 && reply_top + 50 > 0 then (
|
||||
(* just highlight if reply is in viewport *)
|
||||
El.set_class (Jstr.of_string "highlight") true reply_div;
|
||||
highlighted_ref := Some reply_div )
|
||||
else
|
||||
(* copy it to make new div `floating-reply-preview` *)
|
||||
let preview_div = clone_element reply_div in
|
||||
|
||||
(* place it next to the reply-link el*)
|
||||
let top =
|
||||
let el_top = El.bound_y el in
|
||||
let h = El.bound_h preview_div in
|
||||
(* clamp to viewport *)
|
||||
let top =
|
||||
Float.min
|
||||
(el_top -. (0.5 *. h))
|
||||
(float_of_int window_height -. h -. 7.0)
|
||||
in
|
||||
let top = Float.max top 0.0 in
|
||||
top |> int_of_float |> Format.sprintf "%dpx" |> Jstr.of_string
|
||||
in
|
||||
let left =
|
||||
El.bound_x el +. El.bound_w el
|
||||
|> int_of_float |> Format.sprintf "%dpx" |> Jstr.of_string
|
||||
in
|
||||
El.set_inline_style El.Style.position (Jstr.of_string "fixed") preview_div;
|
||||
El.set_inline_style El.Style.z_index (Jstr.of_string "42") preview_div;
|
||||
El.set_inline_style El.Style.top top preview_div;
|
||||
El.set_inline_style El.Style.left left preview_div;
|
||||
(* also highlight class doesn't work if we set inline style idk why wtf css *)
|
||||
El.set_inline_style El.Style.background_color (Jstr.of_string "#9dd162")
|
||||
preview_div;
|
||||
|
||||
(* 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 ->
|
||||
El.set_class (Jstr.of_string "highlight") false highlighted_div
|
||||
in
|
||||
match !preview_ref with
|
||||
| None -> ()
|
||||
| Some preview_div -> El.remove preview_div
|
||||
|
||||
let make_pretty _event =
|
||||
log "make pretty@\n";
|
||||
|
||||
let add_event_to_class ~name ~event handler =
|
||||
let event = Ev.Type.create (Jstr.of_string event) in
|
||||
let el_list = El.find_by_class (Jstr.of_string name) in
|
||||
List.iter (fun el -> Ev.listen event (handler el) (El.as_target el)) el_list
|
||||
in
|
||||
|
||||
let dates = 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
|
||||
let () =
|
||||
add_event_to_class ~name:"reply-link" ~event:"mouseout" on_mouse_out
|
||||
in
|
||||
|
||||
(* add fragment listener to mark as selected the linked post *)
|
||||
(* TODO call with brr*)
|
||||
let hashchange = Ev.Type.create (Jstr.of_string "hashchange") in
|
||||
Ev.listen hashchange on_hashchange (Window.as_target G.window);
|
||||
(* call hashchange on page load too *)
|
||||
on_hashchange ()
|
||||
|
||||
(*make pretty after page load*)
|
||||
let () =
|
||||
log "add load eventlistener to make pretty@\n";
|
||||
let load = Ev.Type.create (Jstr.of_string "load") in
|
||||
Ev.listen load make_pretty (Window.as_target G.window)
|
||||
|
||||
(* 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 *)
|
||||
Loading…
Add table
Add a link
Reference in a new issue