Skip to content

Commit 3ac7a3b

Browse files
mesmerizingwafthhugo
mesmerizingwaft
authored and
hhugo
committed
implement a wrapper for CSS font loading API
1 parent 97aeb36 commit 3ac7a3b

File tree

9 files changed

+216
-0
lines changed

9 files changed

+216
-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: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 (
16+
context##.font := Js.string "48px caption";
17+
context##fillText (Js.string "Loading") (Js.float 0.) (Js.float 0.))
18+
else (
19+
context##.font := Js.string "48px caption";
20+
context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 0.);
21+
context##.font := Js.string "48px 'Bebas Neue', caption";
22+
context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 50.));
23+
context##restore;
24+
ignore @@ Dom_html.window##setTimeout (Js.wrap_callback inner) next_time
25+
in
26+
inner ()
27+
28+
let _ =
29+
let canvas =
30+
Option.get @@ Dom_html.getElementById_coerce "main-canvas" Dom_html.CoerceTo.canvas
31+
in
32+
let context = canvas##getContext Dom_html._2d_ in
33+
let bebas =
34+
Css_font.create_font_face
35+
(Js.string "Bebas Neue")
36+
(Js.string "url(BebasNeue-Regular.ttf)")
37+
in
38+
Css_font.load_and_then bebas (fun () -> is_loading := false);
39+
Dom_html.document##.fonts##add bebas;
40+
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: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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+
31+
method style : js_string t readonly_prop
32+
33+
method weight : js_string t readonly_prop
34+
35+
method stretch : js_string t readonly_prop
36+
37+
method unicodeRange : js_string t readonly_prop
38+
39+
method variant : js_string t readonly_prop
40+
41+
method featureSettings : js_string t readonly_prop
42+
43+
method display : js_string t readonly_prop
44+
45+
method src : js_string t readonly_prop
46+
47+
method status : js_string t readonly_prop
48+
49+
method load : unit -> 'a meth
50+
end
51+
52+
class type fontFaceSet = object
53+
method add : fontFaceElement Js.t -> unit meth
54+
55+
method check : js_string t -> js_string t -> bool meth
56+
57+
method delete : fontFaceElement Js.t -> unit meth
58+
59+
method load : unit -> 'a meth
60+
61+
method ready : bool readonly_prop
62+
63+
method status : js_string t readonly_prop
64+
end
65+
66+
let constr : (js_string t -> js_string t -> fontFaceElement t) Js.constr =
67+
Unsafe.pure_js_expr "FontFace"
68+
69+
let create_font_face (family : js_string Js.t) (source : js_string Js.t) =
70+
new%js constr family source
71+
72+
let load_and_then (font_face : fontFaceElement Js.t) (f : unit -> unit) =
73+
let f = Unsafe.inject @@ Js.wrap_meth_callback f in
74+
let js_promise = font_face##load () in
75+
Unsafe.meth_call js_promise "then" [| Unsafe.coerce f |]

‎lib/js_of_ocaml/css_font.mli

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
31+
method style : js_string t readonly_prop
32+
33+
method weight : js_string t readonly_prop
34+
35+
method stretch : js_string t readonly_prop
36+
37+
method unicodeRange : js_string t readonly_prop
38+
39+
method variant : js_string t readonly_prop
40+
41+
method featureSettings : js_string t readonly_prop
42+
43+
method display : js_string t readonly_prop
44+
45+
method src : js_string t readonly_prop
46+
47+
method status : js_string t readonly_prop
48+
49+
method load : unit -> 'a meth
50+
end
51+
52+
class type fontFaceSet = object
53+
method add : fontFaceElement Js.t -> unit meth
54+
55+
method check : js_string t -> js_string t -> bool meth
56+
57+
method delete : fontFaceElement Js.t -> unit meth
58+
59+
method load : unit -> 'a meth
60+
61+
method ready : bool readonly_prop
62+
63+
method status : js_string t readonly_prop
64+
end
65+
66+
val create_font_face : js_string t -> js_string t -> fontFaceElement t
67+
68+
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)