diff --git a/examples/css_font_load/BebasNeue-Regular.ttf b/examples/css_font_load/BebasNeue-Regular.ttf new file mode 100644 index 0000000000..d2190b5139 Binary files /dev/null and b/examples/css_font_load/BebasNeue-Regular.ttf differ diff --git a/examples/css_font_load/css_font_load.ml b/examples/css_font_load/css_font_load.ml new file mode 100644 index 0000000000..cb1fc30cc8 --- /dev/null +++ b/examples/css_font_load/css_font_load.ml @@ -0,0 +1,40 @@ +open Js_of_ocaml + +let is_loading = ref true + +let render_loop (context : Dom_html.canvasRenderingContext2D Js.t) = + let next_time = Js.float 15. in + let rec inner () = + context##save; + context##.fillStyle := Js.string "rgb(0, 0, 0)"; + context##fillRect (Js.float 0.) (Js.float 0.) (Js.float 800.) (Js.float 600.); + context##.fillStyle := Js.string "rgb(255,255,255)"; + context##.textBaseline := Js.string "top"; + context##.lineWidth := Js.float 3.; + if !is_loading + then ( + context##.font := Js.string "48px caption"; + context##fillText (Js.string "Loading") (Js.float 0.) (Js.float 0.)) + else ( + context##.font := Js.string "48px caption"; + context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 0.); + context##.font := Js.string "48px 'Bebas Neue', caption"; + context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 50.)); + context##restore; + ignore @@ Dom_html.window##setTimeout (Js.wrap_callback inner) next_time + in + inner () + +let _ = + let canvas = + Option.get @@ Dom_html.getElementById_coerce "main-canvas" Dom_html.CoerceTo.canvas + in + let context = canvas##getContext Dom_html._2d_ in + let bebas = + Css_font.create_font_face + (Js.string "Bebas Neue") + (Js.string "url(BebasNeue-Regular.ttf)") + in + Css_font.load_and_then bebas (fun () -> is_loading := false); + Dom_html.document##.fonts##add bebas; + render_loop context diff --git a/examples/css_font_load/dune b/examples/css_font_load/dune new file mode 100644 index 0000000000..c8c8a29464 --- /dev/null +++ b/examples/css_font_load/dune @@ -0,0 +1,14 @@ +(executables + (names css_font_load) + (libraries js_of_ocaml) + (modes js) + (preprocess + (pps js_of_ocaml-ppx))) + +(alias + (name default) + (deps css_font_load.bc.js index.html)) + +(alias + (name default) + (deps BebasNeue-Regular.ttf)) diff --git a/examples/css_font_load/index.html b/examples/css_font_load/index.html new file mode 100644 index 0000000000..111a0253b5 --- /dev/null +++ b/examples/css_font_load/index.html @@ -0,0 +1,14 @@ + + + + + CSS FONT LOAD + + + + + + + + diff --git a/lib/js_of_ocaml/css_font.ml b/lib/js_of_ocaml/css_font.ml new file mode 100644 index 0000000000..58b78ab6f1 --- /dev/null +++ b/lib/js_of_ocaml/css_font.ml @@ -0,0 +1,75 @@ +(* Js_of_ocaml library + * http://www.ocsigen.org/js_of_ocaml/ + * Copyright (C) 2014 Hugo Heuzard + * Copyright (C) 2014 Jérôme Vouillon + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, with linking exception; + * either version 2.1 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. + *) + +(** CSS Font Loading API binding + +This is a partial binding to the CSS Font Loading API +*) + +open Js + +class type fontFaceElement = object + method family : js_string t readonly_prop + + method style : js_string t readonly_prop + + method weight : js_string t readonly_prop + + method stretch : js_string t readonly_prop + + method unicodeRange : js_string t readonly_prop + + method variant : js_string t readonly_prop + + method featureSettings : js_string t readonly_prop + + method display : js_string t readonly_prop + + method src : js_string t readonly_prop + + method status : js_string t readonly_prop + + method load : unit -> 'a meth +end + +class type fontFaceSet = object + method add : fontFaceElement Js.t -> unit meth + + method check : js_string t -> js_string t -> bool meth + + method delete : fontFaceElement Js.t -> unit meth + + method load : unit -> 'a meth + + method ready : bool readonly_prop + + method status : js_string t readonly_prop +end + +let constr : (js_string t -> js_string t -> fontFaceElement t) Js.constr = + Unsafe.pure_js_expr "FontFace" + +let create_font_face (family : js_string Js.t) (source : js_string Js.t) = + new%js constr family source + +let load_and_then (font_face : fontFaceElement Js.t) (f : unit -> unit) = + let f = Unsafe.inject @@ Js.wrap_meth_callback f in + let js_promise = font_face##load () in + Unsafe.meth_call js_promise "then" [| Unsafe.coerce f |] diff --git a/lib/js_of_ocaml/css_font.mli b/lib/js_of_ocaml/css_font.mli new file mode 100644 index 0000000000..c7fd632ab8 --- /dev/null +++ b/lib/js_of_ocaml/css_font.mli @@ -0,0 +1,68 @@ +(* Js_of_ocaml library + * http://www.ocsigen.org/js_of_ocaml/ + * Copyright (C) 2014 Hugo Heuzard + * Copyright (C) 2014 Jérôme Vouillon + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, with linking exception; + * either version 2.1 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. + *) + +(** CSS Font Loading API binding + +This is a partial binding to the CSS Font Loading API +*) + +open Js + +class type fontFaceElement = object + method family : js_string t readonly_prop + + method style : js_string t readonly_prop + + method weight : js_string t readonly_prop + + method stretch : js_string t readonly_prop + + method unicodeRange : js_string t readonly_prop + + method variant : js_string t readonly_prop + + method featureSettings : js_string t readonly_prop + + method display : js_string t readonly_prop + + method src : js_string t readonly_prop + + method status : js_string t readonly_prop + + method load : unit -> 'a meth +end + +class type fontFaceSet = object + method add : fontFaceElement Js.t -> unit meth + + method check : js_string t -> js_string t -> bool meth + + method delete : fontFaceElement Js.t -> unit meth + + method load : unit -> 'a meth + + method ready : bool readonly_prop + + method status : js_string t readonly_prop +end + +val create_font_face : js_string t -> js_string t -> fontFaceElement t + +val load_and_then : fontFaceElement Js.t -> (unit -> unit) -> unit diff --git a/lib/js_of_ocaml/dom_html.ml b/lib/js_of_ocaml/dom_html.ml index 7751d08eab..cae57d8e1d 100644 --- a/lib/js_of_ocaml/dom_html.ml +++ b/lib/js_of_ocaml/dom_html.ml @@ -2161,6 +2161,8 @@ class type document = object method images : imageElement collection t readonly_prop + method fonts : Css_font.fontFaceSet t readonly_prop + method applets : element collection t readonly_prop method links : element collection t readonly_prop diff --git a/lib/js_of_ocaml/dom_html.mli b/lib/js_of_ocaml/dom_html.mli index 1561753162..187609b4b4 100644 --- a/lib/js_of_ocaml/dom_html.mli +++ b/lib/js_of_ocaml/dom_html.mli @@ -1978,6 +1978,8 @@ class type document = object method images : imageElement collection t readonly_prop + method fonts : Css_font.fontFaceSet t readonly_prop + method applets : element collection t readonly_prop method links : element collection t readonly_prop diff --git a/lib/js_of_ocaml/js_of_ocaml.ml b/lib/js_of_ocaml/js_of_ocaml.ml index 6f1683ffd8..201dbb9957 100644 --- a/lib/js_of_ocaml/js_of_ocaml.ml +++ b/lib/js_of_ocaml/js_of_ocaml.ml @@ -23,6 +23,7 @@ module Dom = Dom module Dom_events = Dom_events module Dom_html = Dom_html module Dom_svg = Dom_svg +module Css_font = Css_font module Effect_js = Effect_js module EventSource = EventSource module File = File