webfontloader 1.0.31 → 1.1.0
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.
- data/CHANGELOG +6 -0
- data/README.md +20 -3
- data/lib/webfontloader/demo/public/ascender-iframe.html +46 -0
- data/lib/webfontloader/demo/public/blank.html +9 -0
- data/lib/webfontloader/demo/public/custom-iframe.html +41 -0
- data/lib/webfontloader/demo/public/custom.html +10 -10
- data/lib/webfontloader/demo/public/google-iframe.html +40 -0
- data/lib/webfontloader/demo/public/index.html +15 -2
- data/lib/webfontloader/demo/public/monotype-iframe.html +46 -0
- data/lib/webfontloader/demo/public/typekit-iframe.html +41 -0
- data/lib/webfontloader/demo/public/typekit.html +7 -9
- data/lib/webfontloader.rb +1 -1
- data/src/ascender/ascender_script.js +2 -3
- data/src/core/domhelper.js +36 -4
- data/src/core/font.js +12 -6
- data/src/core/fontmoduleloader.js +2 -2
- data/src/core/initialize.js +2 -3
- data/src/custom/customcss.js +1 -2
- data/src/fontdeck/fontdeck_script.js +12 -10
- data/src/google/fontapiurlbuilder.js +1 -3
- data/src/google/googlefontapi.js +3 -4
- data/src/monotype/monotype_script.js +8 -25
- data/src/typekit/typekit_script.js +9 -10
- data/src-test/ascender/ascender_script_test.js +3 -0
- data/src-test/core/domhelpertest.js +44 -1
- data/src-test/core/eventdispatchertest.js +1 -1
- data/src-test/core/fonttest.js +53 -28
- data/src-test/fontdeck/fontdeck_script_test.js +26 -16
- data/src-test/google/fontapiurlbuildertest.js +5 -5
- data/src-test/google/googlefontapitest.js +12 -0
- data/src-test/monotype/monotype_script_test.js +36 -62
- data/src-test/typekit/typekit_script_test.js +30 -6
- data/webfontloader.gemspec +8 -2
- metadata +10 -4
data/CHANGELOG
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
v1.1.0 (December 5, 2012)
|
|
2
|
+
* Adds the ability to load fonts into a same-origin child window or iframe using the new optional `context` configuration option (thanks to @ryanwolf of Google).
|
|
3
|
+
* Updates the demos to fix broken stuff and demonstrate the new context option in action.
|
|
4
|
+
* DomHelper interface changed to take the main window and an optional separate window for loading.
|
|
5
|
+
* Methods added to retrieve both windows and get the correct protocol for assets from the location's protocol.
|
|
6
|
+
|
|
1
7
|
v1.0.31 (September 11, 2012)
|
|
2
8
|
* Improvements to Google's module to recognize more variation descriptor formats (such as 100italic and 200n).
|
|
3
9
|
|
data/README.md
CHANGED
|
@@ -67,12 +67,29 @@ this.
|
|
|
67
67
|
|
|
68
68
|
Learn more about [events][evt].
|
|
69
69
|
|
|
70
|
+
## Manage loading everywhere
|
|
71
|
+
|
|
72
|
+
Usually, it's easiest to include a copy of webfontloader in every window where
|
|
73
|
+
fonts are needed, so that each window manages its own fonts. However, if you
|
|
74
|
+
need to have a single window manage fonts for multiple same-origin child windows
|
|
75
|
+
or iframes that are built up using JavaScript, webfontloader supports that as
|
|
76
|
+
well. Just use the optional `context` configuration option and give it a
|
|
77
|
+
reference to the target window for loading:
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
WebFont.load({
|
|
81
|
+
google: {
|
|
82
|
+
families: ['Droid Sans']
|
|
83
|
+
},
|
|
84
|
+
context: frames['my-child']
|
|
85
|
+
});
|
|
86
|
+
</script>
|
|
70
87
|
|
|
71
88
|
## A common ground
|
|
72
89
|
|
|
73
90
|
WebFont Loader aims to provide a common interface for font loading. Today it
|
|
74
|
-
works with Google, Typekit, Fonts.com Web fonts and your own
|
|
75
|
-
[transitions][trn].
|
|
91
|
+
works with Google, Typekit, Ascender, Fontdeck, Fonts.com Web fonts and your own
|
|
92
|
+
CSS. Learn more in [transitions][trn].
|
|
76
93
|
|
|
77
94
|
|
|
78
95
|
## More to see
|
|
@@ -125,11 +142,11 @@ Then, run the tests.
|
|
|
125
142
|
* That's it!
|
|
126
143
|
|
|
127
144
|
|
|
128
|
-
|
|
129
145
|
## Authors
|
|
130
146
|
|
|
131
147
|
* Ryan Carver / ryan@typekit.com
|
|
132
148
|
* Jeremie Lenfant-engelmann / jeremiele@google.com
|
|
149
|
+
* Sean McBride / sean@typekit.com
|
|
133
150
|
|
|
134
151
|
|
|
135
152
|
## License
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Ascender Module Demo</title>
|
|
5
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
6
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
7
|
+
<style type="text/css">
|
|
8
|
+
iframe {
|
|
9
|
+
height: 100px;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<script type="text/javascript">
|
|
16
|
+
function loaded() {
|
|
17
|
+
var child = frames["child"];
|
|
18
|
+
child.document.body.innerHTML = "<h1 style=\"font-family: 'AyitaPro'\">Hello World. I am Ayita Pro.</h1>";
|
|
19
|
+
WebFont.load({
|
|
20
|
+
ascender: {
|
|
21
|
+
key:'ec2de397-11ae-4c10-937f-bf94283a70c1',
|
|
22
|
+
families:['AyitaPro:regular,bold,bolditalic,italic']
|
|
23
|
+
},
|
|
24
|
+
context: child
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
30
|
+
|
|
31
|
+
<hr>
|
|
32
|
+
|
|
33
|
+
<p>
|
|
34
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
35
|
+
<a href="/ascender.html">Reload Cached</a>
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
Note: use "localhost" when testing web fonts.
|
|
39
|
+
</p>
|
|
40
|
+
<p>
|
|
41
|
+
The goal of this page is to show how fonts load from Ascender in a child
|
|
42
|
+
iframe.
|
|
43
|
+
</p>
|
|
44
|
+
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Custom Module</title>
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<style >
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
var child = frames["child"];
|
|
17
|
+
child.document.body.innerHTML = "<h1 style=\"font-family: 'ChunkFiveRegular'\">Hello World. I am ChunkFive.</h1>";
|
|
18
|
+
WebFont.load({
|
|
19
|
+
custom: {
|
|
20
|
+
families: ['ChunkFiveRegular'],
|
|
21
|
+
urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css']
|
|
22
|
+
},
|
|
23
|
+
context: child
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
29
|
+
|
|
30
|
+
<hr>
|
|
31
|
+
<p>
|
|
32
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
<a href="/custom.html">Reload Cached</a>
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
The goal of this page is to show how fonts load from a custom module in a
|
|
37
|
+
child iframe.
|
|
38
|
+
</p>
|
|
39
|
+
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style type="text/css">
|
|
7
7
|
|
|
8
8
|
h1 {
|
|
9
|
-
font-family: '
|
|
9
|
+
font-family: 'ChunkFiveRegular';
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
/* All Class hooks */
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
html.wf-loading #classes .Loading,
|
|
15
15
|
html.wf-active #classes .Active,
|
|
16
16
|
html.wf-inactive #classes .Inactive,
|
|
17
|
-
html.wf-
|
|
18
|
-
html.wf-
|
|
19
|
-
html.wf-
|
|
17
|
+
html.wf-chunkfiveregular-n4-loading #classes .ChunkFiveLoading,
|
|
18
|
+
html.wf-chunkfiveregular-n4-active #classes .ChunkFiveActive,
|
|
19
|
+
html.wf-chunkfiveregular-n4-inactive #classes .ChunkFiveInactive {
|
|
20
20
|
color: #000;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
</head>
|
|
25
25
|
<body>
|
|
26
26
|
<h1 class="tagesschrift">
|
|
27
|
-
Hello World. I am
|
|
27
|
+
Hello World. I am ChunkFive.
|
|
28
28
|
</h1>
|
|
29
29
|
<hr>
|
|
30
30
|
<p>
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
<li class="Loading">Loading</li>
|
|
40
40
|
<li class="Active">Active</li>
|
|
41
41
|
<li class="Inactive">Inactive</li>
|
|
42
|
-
<li class="
|
|
43
|
-
<li class="
|
|
44
|
-
<li class="
|
|
42
|
+
<li class="ChunkFiveLoading">ChunkFive Loading</li>
|
|
43
|
+
<li class="ChunkFiveActive">ChunkFive Active</li>
|
|
44
|
+
<li class="ChunkFiveInactive">ChunkFive Inactive</li>
|
|
45
45
|
</ul>
|
|
46
46
|
<h2>JavaScript Event Progress</h2>
|
|
47
47
|
<ol id="events"></ol>
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
}
|
|
62
62
|
WebFont.load({
|
|
63
63
|
custom: {
|
|
64
|
-
families: ['
|
|
65
|
-
urls : ['http://
|
|
64
|
+
families: ['ChunkFiveRegular'],
|
|
65
|
+
urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css']
|
|
66
66
|
},
|
|
67
67
|
loading: function() {
|
|
68
68
|
progress('loading');
|
|
@@ -0,0 +1,40 @@
|
|
|
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
|
+
<style type="text/css">
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
var child = frames["child"];
|
|
17
|
+
child.document.body.innerHTML = "<h1 style=\"font-family: 'Droid Sans'\">Hello World. I am Droid Sans.</h1>";
|
|
18
|
+
WebFont.load({
|
|
19
|
+
google: {
|
|
20
|
+
families: ['Droid Sans'],
|
|
21
|
+
api: '/fonts/api'
|
|
22
|
+
},
|
|
23
|
+
context: child
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
29
|
+
|
|
30
|
+
<hr>
|
|
31
|
+
<p>
|
|
32
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
<a href="/google.html">Reload Cached</a>
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
The goal of this page is demonstrate fonts loading from Google via
|
|
37
|
+
Javascript into a child iframe.
|
|
38
|
+
</p>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
<h2>Modules</h2>
|
|
18
18
|
<p>
|
|
19
|
-
WebFont Loader provides modules to load fonts from many places.
|
|
19
|
+
WebFont Loader provides modules to load fonts from many places.
|
|
20
20
|
</p>
|
|
21
21
|
<ol>
|
|
22
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>
|
|
@@ -25,7 +25,20 @@
|
|
|
25
25
|
<li><a href="/custom.html">Custom / WebFont Loader</a>: Load fonts from your own CSS with WebFont Loader.</li>
|
|
26
26
|
<li><a href="/ascender.html">Ascender / WebFont Loader</a>: Load fonts from Ascender with WebFont Loader.</li>
|
|
27
27
|
<li><a href="/fontdeck.html">Fontdeck / WebFont Loader</a>: Load fonts from Fontdeck with WebFont Loader.</li>
|
|
28
|
-
<li><a href="/monotype.html">
|
|
28
|
+
<li><a href="/monotype.html">Monotype / WebFont Loader</a>: Load fonts from webfonts.fonts.com with WebFont Loader.</li>
|
|
29
|
+
</ol>
|
|
30
|
+
|
|
31
|
+
<h2>Modules in Iframes</h2>
|
|
32
|
+
<p>
|
|
33
|
+
WebFont Loader provides the ability to load fonts in child iframes using modules, instead of the main window.
|
|
34
|
+
</p>
|
|
35
|
+
<ol>
|
|
36
|
+
<li><a href="/google-iframe.html">Google / WebFont Loader</a>: Load fonts from Google in a child iframe with WebFont Loader.</li>
|
|
37
|
+
<li><a href="/typekit-iframe.html">Typekit / WebFont Loader</a>: Load fonts from Typekit in a child iframe with WebFont Loader.</li>
|
|
38
|
+
<li><a href="/custom-iframe.html">Custom / WebFont Loader</a>: Load fonts from your own CSS in a child iframe with WebFont Loader.</li>
|
|
39
|
+
<li><a href="/ascender-iframe.html">Ascender / WebFont Loader</a>: Load fonts from Ascender in a child iframe with WebFont Loader.</li>
|
|
40
|
+
<li>Fontdeck / WebFont Loader: Their demo fonts seem to be broken at the moment, so we don't have an iframe demo of this module.</li>
|
|
41
|
+
<li><a href="/monotype-iframe.html">Monotype / WebFont Loader</a>: Load fonts from webfonts.fonts.com in a child iframe with WebFont Loader.</li>
|
|
29
42
|
</ol>
|
|
30
43
|
|
|
31
44
|
<h2>Events</h2>
|
|
@@ -0,0 +1,46 @@
|
|
|
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
|
+
<style>
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
frames["child"].document.body.innerHTML = "<h1>Hello World. I am DIN Next Bold.</h1>";
|
|
17
|
+
WebFont.load({
|
|
18
|
+
monotype: {
|
|
19
|
+
projectId: 'b726c28f-a28a-45be-993f-3db719bacfab'
|
|
20
|
+
},
|
|
21
|
+
context: frames["child"]
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
27
|
+
|
|
28
|
+
<hr>
|
|
29
|
+
|
|
30
|
+
<p>
|
|
31
|
+
|
|
32
|
+
<a href="#" onClick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
|
|
34
|
+
<a href="/monotype.html">Reload Cached</a>
|
|
35
|
+
|
|
36
|
+
</p>
|
|
37
|
+
|
|
38
|
+
<p>
|
|
39
|
+
The goal of this page is to show how monotype fonts load in a child iframe.
|
|
40
|
+
</p>
|
|
41
|
+
|
|
42
|
+
<p>
|
|
43
|
+
You must use "localhost" when testing monotype fonts.
|
|
44
|
+
</p>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -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
|
+
<style type="text/css">
|
|
7
|
+
iframe {
|
|
8
|
+
height: 100px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
function loaded() {
|
|
16
|
+
var child = frames["child"];
|
|
17
|
+
child.document.body.innerHTML = "<h1>Hello World. I am Futura PT.</h1>";
|
|
18
|
+
WebFont.load({
|
|
19
|
+
typekit: {
|
|
20
|
+
id: 'bod7grh'
|
|
21
|
+
},
|
|
22
|
+
context: child
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<iframe name="child" src="/blank.html" onload="loaded()"></iframe>
|
|
28
|
+
|
|
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 into an iframe.
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
You must load the fonts on "localhost" for this demo to work.
|
|
39
|
+
</p>
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
|
@@ -6,8 +6,7 @@
|
|
|
6
6
|
<script type="text/javascript">
|
|
7
7
|
WebFont.load({
|
|
8
8
|
typekit: {
|
|
9
|
-
id: '
|
|
10
|
-
api: '/typekit'
|
|
9
|
+
id: 'bod7grh'
|
|
11
10
|
}
|
|
12
11
|
});
|
|
13
12
|
</script>
|
|
@@ -16,15 +15,14 @@
|
|
|
16
15
|
h1 {
|
|
17
16
|
visibility: hidden;
|
|
18
17
|
}
|
|
19
|
-
.wf-
|
|
20
|
-
font-family: 'Arial Black';
|
|
18
|
+
.wf-futurapt-n7-active h1 {
|
|
21
19
|
visibility: visible;
|
|
22
20
|
}
|
|
23
21
|
</style>
|
|
24
22
|
</head>
|
|
25
23
|
<body>
|
|
26
24
|
<h1>
|
|
27
|
-
Hello World. I am
|
|
25
|
+
Hello World. I am Futura PT.
|
|
28
26
|
</h1>
|
|
29
27
|
<hr>
|
|
30
28
|
<p>
|
|
@@ -32,10 +30,10 @@
|
|
|
32
30
|
<a href="/typekit.html">Reload Cached</a>
|
|
33
31
|
</p>
|
|
34
32
|
<p>
|
|
35
|
-
The goal of this page is to show how Typekit fonts load.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
The goal of this page is to show how Typekit fonts load.
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
You must load this page on "localhost" in order for the fonts to load.
|
|
39
37
|
</p>
|
|
40
38
|
</body>
|
|
41
39
|
</html>
|
data/lib/webfontloader.rb
CHANGED
|
@@ -33,7 +33,7 @@ webfont.AscenderScript.prototype.supportUserAgent = function(userAgent, support)
|
|
|
33
33
|
|
|
34
34
|
webfont.AscenderScript.prototype.load = function(onReady) {
|
|
35
35
|
var key = this.configuration_['key'];
|
|
36
|
-
var protocol =
|
|
36
|
+
var protocol = this.domHelper_.getProtocol();
|
|
37
37
|
var url = protocol + '//webfonts.fontslive.com/css/' + key + '.css';
|
|
38
38
|
this.domHelper_.insertInto('head', this.domHelper_.createCssLink(url));
|
|
39
39
|
var fv = this.parseFamiliesAndVariations(this.configuration_['families']);
|
|
@@ -78,7 +78,6 @@ webfont.AscenderScript.prototype.parseVariations = function(source){
|
|
|
78
78
|
return variations;
|
|
79
79
|
};
|
|
80
80
|
|
|
81
|
-
globalNamespaceObject.addModule(webfont.AscenderScript.NAME, function(configuration) {
|
|
82
|
-
var domHelper = new webfont.DomHelper(document);
|
|
81
|
+
globalNamespaceObject.addModule(webfont.AscenderScript.NAME, function(configuration, domHelper) {
|
|
83
82
|
return new webfont.AscenderScript(domHelper, configuration);
|
|
84
83
|
});
|