webfontloader 1.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. data/Gemfile +9 -0
  2. data/LICENSE +201 -0
  3. data/README.md +148 -0
  4. data/Rakefile +243 -0
  5. data/bin/webfontloader-demos +28 -0
  6. data/docs/EVENTS.md +115 -0
  7. data/docs/MODULES.md +49 -0
  8. data/docs/TRANSITIONS.md +107 -0
  9. data/lib/webfontloader.rb +10 -0
  10. data/lib/webfontloader/demo/public/ascender.html +99 -0
  11. data/lib/webfontloader/demo/public/basic.css +9 -0
  12. data/lib/webfontloader/demo/public/custom.html +88 -0
  13. data/lib/webfontloader/demo/public/event-css-active-multiple.html +44 -0
  14. data/lib/webfontloader/demo/public/event-css-active.html +38 -0
  15. data/lib/webfontloader/demo/public/event-css-inactive.html +38 -0
  16. data/lib/webfontloader/demo/public/event-css-loading.html +55 -0
  17. data/lib/webfontloader/demo/public/event-js-active.html +39 -0
  18. data/lib/webfontloader/demo/public/event-js-font-active.html +40 -0
  19. data/lib/webfontloader/demo/public/event-js-loading.html +60 -0
  20. data/lib/webfontloader/demo/public/events-variations.html +130 -0
  21. data/lib/webfontloader/demo/public/events.html +103 -0
  22. data/lib/webfontloader/demo/public/google-css.html +27 -0
  23. data/lib/webfontloader/demo/public/google.html +33 -0
  24. data/lib/webfontloader/demo/public/ie-fast-js.html +47 -0
  25. data/lib/webfontloader/demo/public/ie-slow-js.html +48 -0
  26. data/lib/webfontloader/demo/public/ie-slow-link.html +38 -0
  27. data/lib/webfontloader/demo/public/index.html +70 -0
  28. data/lib/webfontloader/demo/public/typekit-variations.html +50 -0
  29. data/lib/webfontloader/demo/public/typekit.html +41 -0
  30. data/lib/webfontloader/demo/server.rb +92 -0
  31. data/lib/webfontloader/modules.rb +44 -0
  32. data/src-test/ascender/ascender_script_test.js +48 -0
  33. data/src-test/core/cssclassnametest.js +42 -0
  34. data/src-test/core/cssfontfamilynametest.js +54 -0
  35. data/src-test/core/domhelpertest.js +81 -0
  36. data/src-test/core/eventdispatchertest.js +99 -0
  37. data/src-test/core/fontmoduleloadertest.js +30 -0
  38. data/src-test/core/fonttest.js +92 -0
  39. data/src-test/core/fontvariationdescriptiontest.js +76 -0
  40. data/src-test/core/fontwatchertest.js +510 -0
  41. data/src-test/core/useragenttest.js +395 -0
  42. data/src-test/custom/customcsstest.js +30 -0
  43. data/src-test/google/fontapiparsertest.js +92 -0
  44. data/src-test/google/fontapiurlbuildertest.js +28 -0
  45. data/src-test/google/googlefontapitest.js +173 -0
  46. data/src-test/typekit/typekit_script_test.js +171 -0
  47. data/src/ascender/ascender_script.js +84 -0
  48. data/src/async_load.js +3 -0
  49. data/src/closure.js +3 -0
  50. data/src/core/cssclassname.js +21 -0
  51. data/src/core/cssfontfamilyname.js +20 -0
  52. data/src/core/domhelper.js +103 -0
  53. data/src/core/eventdispatcher.js +78 -0
  54. data/src/core/font.js +84 -0
  55. data/src/core/fontmoduleloader.js +25 -0
  56. data/src/core/fontvariationdescription.js +112 -0
  57. data/src/core/fontwatcher.js +121 -0
  58. data/src/core/initialize.js +26 -0
  59. data/src/core/namespace.js +11 -0
  60. data/src/core/useragent.js +41 -0
  61. data/src/core/useragentparser.js +234 -0
  62. data/src/custom/customcss.js +37 -0
  63. data/src/google/fontapiparser.js +94 -0
  64. data/src/google/fontapiurlbuilder.js +39 -0
  65. data/src/google/googlefontapi.js +49 -0
  66. data/src/modules.yml +27 -0
  67. data/src/typekit/typekit_script.js +58 -0
  68. data/tools/compiler/compiler.jar +0 -0
  69. data/tools/jstestdriver/JsTestDriver-1.2.1.jar +0 -0
  70. data/webfontloader.gemspec +144 -0
  71. metadata +191 -0
data/lib/webfontloader/demo/public/events.html ADDED
@@ -0,0 +1,103 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <script type="text/javascript" src="/webfont.js"></script>
5
+ <script type="text/javascript">
6
+ function progress(message) {
7
+ var output = document.getElementById('events');
8
+ if (output) {
9
+ var e = document.createElement('li');
10
+ e.innerHTML = message;
11
+ output.appendChild(e);
12
+ }
13
+ if (window.console && window.console.log) {
14
+ window.console.log(message);
15
+ }
16
+ }
17
+ WebFont.load({
18
+ google: {
19
+ families: ['Droid Sans', 'Tangerine']
20
+ },
21
+ loading: function() {
22
+ progress('loading');
23
+ },
24
+ active: function() {
25
+ progress('active');
26
+ },
27
+ inactive: function() {
28
+ progress('inactive');
29
+ },
30
+ fontloading: function(fontFamily, fontDescription) {
31
+ progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
32
+ },
33
+ fontactive: function(fontFamily, fontDescription) {
34
+ progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
35
+ },
36
+ fontinactive: function(fontFamily, fontDescription) {
37
+ progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
38
+ }
39
+ });
40
+ </script>
41
+ <style type="text/css">
42
+ h1 {
43
+ visibility: hidden;
44
+ }
45
+ .wf-droidsans-n4-active h1.droid {
46
+ font-family: 'Droid Sans';
47
+ font-weight: normal;
48
+ visibility: visible;
49
+ }
50
+ .wf-tangerine-n4-active h1.tangerine {
51
+ font-family: 'Tangerine';
52
+ font-weight: normal;
53
+ visibility: visible;
54
+ }
55
+
56
+ /* All Class hooks */
57
+ #classes { color: #ddd; }
58
+ html.wf-loading #classes .Loading,
59
+ html.wf-active #classes .Active,
60
+ html.wf-inactive #classes .Inactive,
61
+ html.wf-droidsans-n4-loading #classes .DroidSansLoading,
62
+ html.wf-droidsans-n4-active #classes .DroidSansActive,
63
+ html.wf-droidsans-n4-inactive #classes .DroidSansInactive,
64
+ html.wf-tangerine-n4-loading #classes .TangerineLoading,
65
+ html.wf-tangerine-n4-active #classes .TangerineActive,
66
+ html.wf-tangerine-n4-inactive #classes .TangerineInactive {
67
+ color: #000;
68
+ }
69
+
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <h1 class="droid">
74
+ Hello World. I am Droid Sans.
75
+ </h1>
76
+ <h1 class="tangerine">
77
+ Hello World. I am Tangerine.
78
+ </h1>
79
+ <hr>
80
+ <p>
81
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
82
+ <a href="/events.html">Reload Cached</a>
83
+ </p>
84
+ <p>
85
+ The goal of this page is to show all of the font loading event callbacks when
86
+ using multiple typefaces.
87
+ </p>
88
+ <h2>CSS Hook Status</h2>
89
+ <ul id="classes">
90
+ <li class="Loading">Loading</li>
91
+ <li class="Active">Active</li>
92
+ <li class="Inactive">Inactive</li>
93
+ <li class="DroidSansLoading">Droid Sans Loading</li>
94
+ <li class="DroidSansActive">Droid Sans Active</li>
95
+ <li class="DroidSansInactive">Droid Sans Inactive</li>
96
+ <li class="TangerineLoading">Tangerine Loading</li>
97
+ <li class="TangerineActive">Tangerine Active</li>
98
+ <li class="TangerineInactive">Tangerine Inactive</li>
99
+ </ul>
100
+ <h2>JavaScript Event Progress</h2>
101
+ <ol id="events"></ol>
102
+ </body>
103
+ </html>
data/lib/webfontloader/demo/public/google-css.html ADDED
@@ -0,0 +1,27 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <link href="/basic.css" rel="stylesheet" type="text/css">
5
+
6
+ <link href="/fonts/api?family=Droid+Sans" rel="stylesheet" type="text/css">
7
+
8
+ <style type="text/css">
9
+ h1 {
10
+ font-family: 'Droid Sans';
11
+ }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <h1>
16
+ Hello World. I am Droid Sans.
17
+ </h1>
18
+ <hr>
19
+ <p>
20
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
21
+ <a href="/google-css.html">Reload Cached</a>
22
+ </p>
23
+ <p>
24
+ The goal of this page is simply to use fonts directly via CSS.
25
+ </p>
26
+ </body>
27
+ </html>
data/lib/webfontloader/demo/public/google.html ADDED
@@ -0,0 +1,33 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <link href="/basic.css" rel="stylesheet" type="text/css">
5
+ <script type="text/javascript" src="/webfont.js"></script>
6
+ <script type="text/javascript">
7
+ WebFont.load({
8
+ google: {
9
+ families: ['Droid Sans'],
10
+ api: '/fonts/api'
11
+ }
12
+ });
13
+ </script>
14
+ <style type="text/css">
15
+ h1 {
16
+ font-family: 'Droid Sans';
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <h1>
22
+ Hello World. I am Droid Sans.
23
+ </h1>
24
+ <hr>
25
+ <p>
26
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
27
+ <a href="/google.html">Reload Cached</a>
28
+ </p>
29
+ <p>
30
+ The goal of this page is simply to use fonts via the JavaScript API.
31
+ </p>
32
+ </body>
33
+ </html>
data/lib/webfontloader/demo/public/ie-fast-js.html ADDED
@@ -0,0 +1,47 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+ <title>Show me Fonts</title>
6
+
7
+ <!--
8
+ An external script will block page rendering in IE, but we take care to
9
+ correct that behavior.
10
+ -->
11
+ <script type="text/javascript" src="/webfont.js"></script>
12
+ <script type="text/javascript">
13
+ WebFont.load({
14
+ google: {
15
+ families: ['Droid Sans'],
16
+ api: '/fonts/api',
17
+ }
18
+ });
19
+ </script>
20
+
21
+ <style type="text/css">
22
+ .serif {
23
+ font-family: serif;
24
+ }
25
+ .droid {
26
+ font-family: 'Droid Sans', serif;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <h1 class="serif">
32
+ I am a serif font.
33
+ </h1>
34
+ <h1 class="droid">
35
+ I am Droid Sans.
36
+ </h1>
37
+ <hr>
38
+ <p>
39
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
40
+ <a href="/ie-fast-js.html">Reload Cached</a>
41
+ </p>
42
+ <p>
43
+ The goal of this page is to show non-blocking behavior in MSIE. This
44
+ causes IE to load fonts without blocking the entire page.
45
+ </p>
46
+ </body>
47
+ </html>
data/lib/webfontloader/demo/public/ie-slow-js.html ADDED
@@ -0,0 +1,48 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+ <title>Show me Fonts</title>
6
+
7
+ <!--
8
+ An external script will block page rendering in IE. Normally we fix that
9
+ behavior, but here we'll undo the override.
10
+ -->
11
+ <script type="text/javascript" src="/webfont.js"></script>
12
+ <script type="text/javascript">
13
+ WebFont.load({
14
+ google: {
15
+ families: ['Droid Sans'],
16
+ blocking: true,
17
+ api: '/fonts/api'
18
+ }
19
+ });
20
+ </script>
21
+
22
+ <style type="text/css">
23
+ .serif {
24
+ font-family: serif;
25
+ }
26
+ .droid {
27
+ font-family: 'Droid Sans', serif;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <h1 class="serif">
33
+ I am a serif font.
34
+ </h1>
35
+ <h1 class="droid">
36
+ I am Droid Sans.
37
+ </h1>
38
+ <hr>
39
+ <p>
40
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
41
+ <a href="/ie-slow-js.html">Reload Cached</a>
42
+ </p>
43
+ <p>
44
+ The goal of this page is to restore blocking behavior in MSIE. This causes
45
+ IE to block the entire page while loading fonts.
46
+ </p>
47
+ </body>
48
+ </html>
data/lib/webfontloader/demo/public/ie-slow-link.html ADDED
@@ -0,0 +1,38 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+ <title>Show me Fonts</title>
6
+
7
+ <!--
8
+ An external stylesheet will block page rendering in IE
9
+ -->
10
+ <link href="/fonts/api?family=Droid+Sans" rel="stylesheet" type="text/css">
11
+
12
+ <style type="text/css">
13
+ .serif {
14
+ font-family: serif;
15
+ }
16
+ .droid {
17
+ font-family: 'Droid Sans', serif;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <h1 class="serif">
23
+ I am a serif font.
24
+ </h1>
25
+ <h1 class="droid">
26
+ I am Droid Sans.
27
+ </h1>
28
+ <hr>
29
+ <p>
30
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
31
+ <a href="/ie-slow-link.html">Reload Cached</a>
32
+ </p>
33
+ <p>
34
+ The goal of this page is to show that by default, MSIE will block the entire
35
+ page while an external font loads.
36
+ </p>
37
+ </body>
38
+ </html>
data/lib/webfontloader/demo/public/index.html ADDED
@@ -0,0 +1,70 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ </head>
5
+ <body>
6
+ <h1>WebFont Loader Demos</h1>
7
+ <p>
8
+ Demonstrations of pure CSS and JavaScript-enhanced use of @font-face.
9
+ </p>
10
+ <p>
11
+ Note that many of these demonstrations use a <strong>slow proxy</strong> to
12
+ increase the amount of time it takes to load a font. We do this to make it
13
+ more obvious that the events system is working. It <em>does not</em> represent
14
+ real world usage.
15
+ </p>
16
+
17
+ <h2>Modules</h2>
18
+ <p>
19
+ WebFont Loader provides modules to load fonts from many places.
20
+ </p>
21
+ <ol>
22
+ <li><a href="/google-css.html">Google / CSS Link</a>: Load fonts from Google with a <code>link</code> tag. Consider this a base case for font loading.</li>
23
+ <li><a href="/google.html">Google / WebFont Loader</a>: Load fonts from Google with WebFont Loader.</li>
24
+ <li><a href="/typekit.html">Typekit / WebFont Loader</a>: Load fonts from Typekit with WebFont Loader.</li>
25
+ <li><a href="/custom.html">Custom / WebFont Loader</a>: Load fonts from your own CSS with WebFont Loader.</li>
26
+ <li><a href="/ascender.html">Ascender / WebFont Loader</a>: Load fonts from Ascender with WebFont Loader.</li>
27
+ </ol>
28
+
29
+ <h2>Events</h2>
30
+ <p>
31
+ WebFont Loader provides events to help control font rendering across browsers. Here are some sample uses.
32
+ </p>
33
+ <ol>
34
+ <li><a href="/event-css-active.html">Show when rendered (CSS)</a>: Use CSS to show part of the page only when the font has rendered. (Webkit style)</li>
35
+ <li><a href="/event-js-active.html">Show when rendered (JS)</a>: Use JS to show part of the page only when the font has rendered. (Webkit style)</li>
36
+ <li><a href="/event-css-inactive.html">Fallback before rendered (CSS)</a>: Use CSS to show fallback font before the font has rendered. (Mozilla style)</li>
37
+ <li><a href="/event-css-loading.html">Show loading message (CSS)</a>: Use CSS to show a message while the font loads.</li>
38
+ <li><a href="/event-js-loading.html">Show loading message (JS)</a>: Use JS to show a message while the font loads.</li>
39
+ </ol>
40
+
41
+ <h2>More Events</h2>
42
+ <p>
43
+ More complex samples using events.
44
+ </p>
45
+ <ol>
46
+ <li><a href="/event-css-active-multiple.html">Multiple font loads</a>: Use CSS to control more than one font.</li>
47
+ <li><a href="/events.html">Multiple typefaces</a>: The full CSS and JS event cycle when using multiple typefaces.</li>
48
+ <li><a href="/events-variations.html">Multiple variations</a>: The full CSS and JS event cycle when using multiple weights and styles of one typeface.</li>
49
+ </ol>
50
+
51
+ <h2>IE Behavior</h2>
52
+ <p>
53
+ WebFont Loader helps workaround IE's page blocking behavior.
54
+ </p>
55
+ <ol>
56
+ <li><a href="/ie-slow-link.html">Slow Link</a>: Demonstrate that IE blocks the whole page when loading fonts via a LINK tag.</li>
57
+ <li><a href="/ie-fast-js.html">Fast JS</a>: By default, WebFont Loader works around the default IE loading behavior.</li>
58
+ <li><a href="/ie-slow-js.html">Slow JS</a>: Restore the default IE loading behavior.</li>
59
+ </ol>
60
+
61
+ <h2>Tests</h2>
62
+ <p>
63
+ Additional demo pages to test specific functionality.
64
+ </p>
65
+ <ol>
66
+ <li><a href="/typekit-variations.html">Typekit with Multiple Variations</a></li>
67
+ </ol>
68
+
69
+ </body>
70
+ </html>
data/lib/webfontloader/demo/public/typekit-variations.html ADDED
@@ -0,0 +1,50 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <link href="/basic.css" rel="stylesheet" type="text/css">
5
+ <script type="text/javascript" src="/webfont.js"></script>
6
+ <script type="text/javascript">
7
+ WebFont.load({
8
+ typekit: {
9
+ id: 'kitwithgeorgia',
10
+ api: '/typekit'
11
+ }
12
+ });
13
+ </script>
14
+ <style type="text/css">
15
+ /* Use classes to prove that Typekit triggers the event system correctly */
16
+ .georgia p {
17
+ font-family: 'Georgia';
18
+ font-size: 3em;
19
+ visibility: hidden;
20
+ }
21
+ .wf-georgia-i4-active #georgiaitalic {
22
+ visibility: visible;
23
+ }
24
+ .wf-georgia-i7-active #georgiabolditalic {
25
+ visibility: visible;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body>
30
+ <div class="georgia">
31
+ <p id="georgiaitalic">
32
+ <em>Georgia Italic</em>
33
+ </p>
34
+ <p id="georgiabolditalic">
35
+ <strong><em>Georgia Bold Italic</em></strong>
36
+ </p>
37
+ </div>
38
+ <hr>
39
+ <p>
40
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
41
+ <a href="/typekit-variations.html">Reload Cached</a>
42
+ </p>
43
+ <p>
44
+ The goal of this page is to show how Typekit fonts load. Note that it uses
45
+ a minimal Typekit script in order to reduce dependencies. This script
46
+ simply provides the system font 'Georgia' in italic and bold italic
47
+ instead of loading a web font.
48
+ </p>
49
+ </body>
50
+ </html>
data/lib/webfontloader/demo/public/typekit.html ADDED
@@ -0,0 +1,41 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <link href="/basic.css" rel="stylesheet" type="text/css">
5
+ <script type="text/javascript" src="/webfont.js"></script>
6
+ <script type="text/javascript">
7
+ WebFont.load({
8
+ typekit: {
9
+ id: 'kitwitharialblack',
10
+ api: '/typekit'
11
+ }
12
+ });
13
+ </script>
14
+ <style type="text/css">
15
+ /* Use classes to prove that Typekit triggers the event system correctly */
16
+ h1 {
17
+ visibility: hidden;
18
+ }
19
+ .wf-arialblack-n4-active h1 {
20
+ font-family: 'Arial Black';
21
+ visibility: visible;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <h1>
27
+ Hello World. I am Arial Black.
28
+ </h1>
29
+ <hr>
30
+ <p>
31
+ <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
32
+ <a href="/typekit.html">Reload Cached</a>
33
+ </p>
34
+ <p>
35
+ The goal of this page is to show how Typekit fonts load. Note that it uses
36
+ a minimal Typekit script in order to reduce dependencies. This script
37
+ simply provides the system font 'Arial Black' instead of loading a web
38
+ font.
39
+ </p>
40
+ </body>
41
+ </html>