Skip to content

Commit e6a1f0b

Browse files
mesmerizingwaftmesmerizingwaft
committed
implement a wrapper for CSS font loading API
1 parent b6d60e4 commit e6a1f0b

File tree

9 files changed

+186
-0
lines changed

9 files changed

+186
-0
lines changed

‎examples/css_font_load/BebasNeue-Regular.ttf‎

56.3 KB
Binary file not shown.

‎examples/css_font_load/css_font_load.ml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
open Js_of_ocaml
2+
3+
let is_loading = ref true
4+
5+
let render_loop (context: Dom_html.canvasRenderingContext2D Js.t) =
6+
let next_time = Js.float 15. in
7+
let rec inner () =
8+
context##save;
9+
context##.fillStyle := Js.string "rgb(0, 0, 0)";
10+
context##fillRect (Js.float 0.) (Js.float 0.) (Js.float 800.) (Js.float 600.);
11+
context##.fillStyle := Js.string "rgb(255,255,255)";
12+
context##.textBaseline := Js.string "top";
13+
context##.lineWidth := Js.float 3.;
14+
if !is_loading
15+
then begin
16+
context##.font := Js.string "48px caption";
17+
context##fillText (Js.string "Loading") (Js.float 0.) (Js.float 0.)
18+
end
19+
else begin
20+
context##.font := Js.string "48px caption";
21+
context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 0.);
22+
context##.font := Js.string "48px 'Bebas Neue', caption";
23+
context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 50.)
24+
end;
25+
context##restore;
26+
ignore @@ Dom_html.window##setTimeout (Js.wrap_callback inner) next_time
27+
in
28+
inner ()
29+
30+
let _ =
31+
let canvas =
32+
Option.get
33+
@@ Dom_html.getElementById_coerce "main-canvas" Dom_html.CoerceTo.canvas in
34+
let context = canvas##getContext (Dom_html._2d_) in
35+
let bebas = Css_font.create_font_face
36+
(Js.string "Bebas Neue") (Js.string "url(BebasNeue-Regular.ttf)")
37+
in
38+
Css_font.load_and_then bebas (fun () ->
39+
is_loading := false
40+
);
41+
Dom_html.document##.fonts##add bebas;
42+
render_loop context

‎examples/css_font_load/dune‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
(executables
2+
(names css_font_load)
3+
(libraries js_of_ocaml)
4+
(modes js)
5+
(preprocess
6+
(pps js_of_ocaml-ppx)))
7+
8+
(alias
9+
(name default)
10+
(deps css_font_load.bc.js index.html))
11+
12+
(alias
13+
(name default)
14+
(deps BebasNeue-Regular.ttf))

‎examples/css_font_load/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3+
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4+
<html xmlns="http://www.w3.org/1999/xhtml">
5+
<head>
6+
<title>CSS FONT LOAD</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<script type="text/javascript" src="css_font_load.bc.js" defer></script>
10+
</head>
11+
<body>
12+
<canvas id="main-canvas" width="800" height="600"></canvas>
13+
</body>
14+
</html>

‎lib/js_of_ocaml/css_font.ml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
(* Js_of_ocaml library
2+
* http://www.ocsigen.org/js_of_ocaml/
3+
* Copyright (C) 2014 Hugo Heuzard
4+
* Copyright (C) 2014 Jérôme Vouillon
5+
*
6+
* This program is free software; you can redistribute it and/or modify
7+
* it under the terms of the GNU Lesser General Public License as published by
8+
* the Free Software Foundation, with linking exception;
9+
* either version 2.1 of the License, or (at your option) any later version.
10+
*
11+
* This program is distributed in the hope that it will be useful,
12+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
* GNU Lesser General Public License for more details.
15+
*
16+
* You should have received a copy of the GNU Lesser General Public License
17+
* along with this program; if not, write to the Free Software
18+
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
19+
*)
20+
21+
(** CSS Font Loading API binding
22+
23+
This is a partial binding to the CSS Font Loading API
24+
*)
25+
26+
open Js
27+
28+
class type fontFaceElement = object
29+
method family : js_string t readonly_prop
30+
method style : js_string t readonly_prop
31+
method weight : js_string t readonly_prop
32+
method stretch : js_string t readonly_prop
33+
method unicodeRange : js_string t readonly_prop
34+
method variant : js_string t readonly_prop
35+
method featureSettings : js_string t readonly_prop
36+
method display : js_string t readonly_prop
37+
method src : js_string t readonly_prop
38+
method status : js_string t readonly_prop
39+
method load : unit -> 'a meth
40+
end
41+
42+
class type fontFaceSet = object
43+
method add : fontFaceElement Js.t -> unit meth
44+
method check : js_string t -> js_string t -> bool meth
45+
method delete : fontFaceElement Js.t -> unit meth
46+
method load : unit -> 'a meth
47+
method ready : bool readonly_prop
48+
method status : js_string t readonly_prop
49+
end
50+
51+
let create_font_face (family: js_string Js.t) (source: js_string Js.t) =
52+
let family = Unsafe.coerce family in
53+
let source = Unsafe.coerce source in
54+
Unsafe.coerce @@ Unsafe.new_obj (Unsafe.pure_js_expr "FontFace") [|family; source|]
55+
56+
let load_and_then (font_face: fontFaceElement Js.t) (f: unit -> unit) =
57+
let f = Unsafe.inject @@ Js.wrap_meth_callback f in
58+
let js_promise = font_face##load () in
59+
Unsafe.meth_call js_promise "then" [|Unsafe.coerce f|]

‎lib/js_of_ocaml/css_font.mli‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
(* Js_of_ocaml library
2+
* http://www.ocsigen.org/js_of_ocaml/
3+
* Copyright (C) 2014 Hugo Heuzard
4+
* Copyright (C) 2014 Jérôme Vouillon
5+
*
6+
* This program is free software; you can redistribute it and/or modify
7+
* it under the terms of the GNU Lesser General Public License as published by
8+
* the Free Software Foundation, with linking exception;
9+
* either version 2.1 of the License, or (at your option) any later version.
10+
*
11+
* This program is distributed in the hope that it will be useful,
12+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
* GNU Lesser General Public License for more details.
15+
*
16+
* You should have received a copy of the GNU Lesser General Public License
17+
* along with this program; if not, write to the Free Software
18+
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
19+
*)
20+
21+
(** CSS Font Loading API binding
22+
23+
This is a partial binding to the CSS Font Loading API
24+
*)
25+
26+
open Js
27+
28+
class type fontFaceElement = object
29+
method family : js_string t readonly_prop
30+
method style : js_string t readonly_prop
31+
method weight : js_string t readonly_prop
32+
method stretch : js_string t readonly_prop
33+
method unicodeRange : js_string t readonly_prop
34+
method variant : js_string t readonly_prop
35+
method featureSettings : js_string t readonly_prop
36+
method display : js_string t readonly_prop
37+
method src : js_string t readonly_prop
38+
method status : js_string t readonly_prop
39+
method load : unit -> 'a meth
40+
end
41+
42+
class type fontFaceSet = object
43+
method add : fontFaceElement Js.t -> unit meth
44+
method check : js_string t -> js_string t -> bool meth
45+
method delete : fontFaceElement Js.t -> unit meth
46+
method load : unit -> 'a meth
47+
method ready : bool readonly_prop
48+
method status : js_string t readonly_prop
49+
end
50+
51+
val create_font_face : js_string t -> js_string t -> fontFaceElement t
52+
val load_and_then : fontFaceElement Js.t -> (unit -> unit) -> unit

‎lib/js_of_ocaml/dom_html.ml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2153,6 +2153,8 @@ class type document = object
21532153

21542154
method images : imageElement collection t readonly_prop
21552155

2156+
method fonts : Css_font.fontFaceSet t readonly_prop
2157+
21562158
method applets : element collection t readonly_prop
21572159

21582160
method links : element collection t readonly_prop

‎lib/js_of_ocaml/dom_html.mli‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1970,6 +1970,8 @@ class type document = object
19701970

19711971
method images : imageElement collection t readonly_prop
19721972

1973+
method fonts : Css_font.fontFaceSet t readonly_prop
1974+
19731975
method applets : element collection t readonly_prop
19741976

19751977
method links : element collection t readonly_prop

‎lib/js_of_ocaml/js_of_ocaml.ml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ module Dom = Dom
2323
module Dom_events = Dom_events
2424
module Dom_html = Dom_html
2525
module Dom_svg = Dom_svg
26+
module Css_font = Css_font
2627
module Effect_js = Effect_js
2728
module EventSource = EventSource
2829
module File = File

0 commit comments

Comments
 (0)