webfontloader 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>