webfontloader 1.0.16 → 1.0.18
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 +9 -0
- data/bin/webfontloader-demos +1 -1
- data/docs/EVENTS.md +34 -0
- data/docs/MODULES.md +14 -1
- data/lib/webfontloader.rb +1 -1
- data/lib/webfontloader/demo/public/fontdeck.html +75 -0
- data/lib/webfontloader/demo/public/index.html +1 -0
- data/src-test/core/cssfontfamilynametest.js +5 -5
- data/src-test/core/domhelpertest.js +12 -0
- data/src-test/core/eventdispatchertest.js +178 -13
- data/src-test/core/fonttest.js +1 -0
- data/src-test/fontdeck/fontdeck_script_test.js +49 -0
- data/src-test/google/fontapiparsertest.js +119 -2
- data/src-test/google/fontapiurlbuildertest.js +11 -0
- data/src/core/cssfontfamilyname.js +1 -1
- data/src/core/domhelper.js +16 -0
- data/src/core/eventdispatcher.js +42 -5
- data/src/core/fontwatchrunner.js +4 -2
- data/src/fontdeck/fontdeck_script.js +67 -0
- data/src/google/fontapiparser.js +42 -12
- data/src/google/fontapiurlbuilder.js +27 -4
- data/src/google/googlefontapi.js +1 -4
- data/src/modules.yml +3 -0
- data/webfontloader.gemspec +5 -2
- metadata +13 -10
data/CHANGELOG
CHANGED
@@ -1,3 +1,12 @@
|
|
1
|
+
v1.0.18 (January 24, 2011)
|
2
|
+
* Improve behavior of CSS classes over multiple loads on a single page. (Documented in docs/EVENTS.md)
|
3
|
+
* Add support for international subsets in the Google module.
|
4
|
+
* Add a module for Fontdeck.
|
5
|
+
|
6
|
+
v1.0.17 (December 1, 2010)
|
7
|
+
* Changed CSS style for hidden span in order to be less affected by environment
|
8
|
+
* Removed restriction on iPhone/iPad/iPod in the google modules
|
9
|
+
|
1
10
|
v1.0.16 (November 18, 2010)
|
2
11
|
* Fix a bug where we fail to detect that fonts have loaded if they have the same width as the fallback font.
|
3
12
|
|
data/bin/webfontloader-demos
CHANGED
@@ -17,7 +17,7 @@ rescue LoadError => e
|
|
17
17
|
abort "Please gem install vegas"
|
18
18
|
end
|
19
19
|
|
20
|
-
Vegas::Runner.new(WebFontLoader::Demo::Server, 'font-demos') do |runner, opts, app|
|
20
|
+
Vegas::Runner.new(WebFontLoader::Demo::Server, 'font-demos', :host => "localhost") do |runner, opts, app|
|
21
21
|
opts.on('--compiled_js FILE', "Dynamically build the JS with the given modules") { |file|
|
22
22
|
app.set :compiled_js, File.read(file)
|
23
23
|
}
|
data/docs/EVENTS.md
CHANGED
@@ -47,6 +47,40 @@ describing the style and weight of a particular font. Here are a few examples:
|
|
47
47
|
If no style/weight is specified, the default "n4" (font-style: normal;
|
48
48
|
font-weight: normal;) will be used.
|
49
49
|
|
50
|
+
If fonts are loaded multiple times on a single page, the CSS classes continue
|
51
|
+
to update to reflect the current state of the page. The global `wf-loading`
|
52
|
+
class is applied whenever fonts are being requested (even if other fonts are
|
53
|
+
already active or inactive). The `wf-inactive` class is applied only if none of
|
54
|
+
the fonts on the page have rendered. Otherwise, the `wf-active` class is applied
|
55
|
+
instead (even if some fonts are inactive).
|
56
|
+
|
57
|
+
Here's an example of CSS classes over multiple loads:
|
58
|
+
|
59
|
+
* Droid Sans n4 is requested
|
60
|
+
* The `html` element has `wf-loading wf-droidsans-n4-loading`
|
61
|
+
* Droid Sans n4 is detected as active
|
62
|
+
* The `html` element has `wf-active wf-droidsans-n4-active`
|
63
|
+
* Droid Sans n7 is subsequently requested
|
64
|
+
* The `html` element has `wf-active wf-loading wf-droidsans-n4-active
|
65
|
+
wf-droidsans-n7-loading`
|
66
|
+
* Droid Sans n7 is detected as active
|
67
|
+
* The `html` element has `wf-active wf-droidsans-n4-active
|
68
|
+
wf-droidsans-n7-active`
|
69
|
+
|
70
|
+
Here's another example of CSS classes over multiple loads when one of the
|
71
|
+
requested fonts is inactive:
|
72
|
+
|
73
|
+
* Droid Sans n9 is requested (which doesn't exist)
|
74
|
+
* The `html` element has `wf-loading wf-droidsans-n9-loading`
|
75
|
+
* Droid Sans n9 is detected as inactive
|
76
|
+
* The `html` element has `wf-inactive wf-droidsans-n9-inactive`
|
77
|
+
* Droid Sans n4 is subsequently requested
|
78
|
+
* The `html` element has `wf-inactive wf-loading wf-droidsans-n9-inactive
|
79
|
+
wf-droidsans-n4-loading`
|
80
|
+
* Droid Sans n4 is detected as active
|
81
|
+
* The `html` element has `wf-active wf-droidsans-n9-inactive
|
82
|
+
wf-droidsans-n4-active`
|
83
|
+
|
50
84
|
|
51
85
|
### JavaScript Flavored
|
52
86
|
|
data/docs/MODULES.md
CHANGED
@@ -30,6 +30,18 @@ ID within Typekit's Kit Editor interface.
|
|
30
30
|
|
31
31
|
Learn more about [Typekit][tk].
|
32
32
|
|
33
|
+
## Fontdeck
|
34
|
+
|
35
|
+
To use Fontdeck, specify the ID of your website. You can find this ID on the
|
36
|
+
website page within your account settings.
|
37
|
+
|
38
|
+
WebFont.load({
|
39
|
+
fontdeck: {
|
40
|
+
id: 'xxxxx'
|
41
|
+
}
|
42
|
+
});
|
43
|
+
|
44
|
+
Learn more about [Fontdeck][fd].
|
33
45
|
|
34
46
|
## Custom
|
35
47
|
|
@@ -46,4 +58,5 @@ provides.
|
|
46
58
|
|
47
59
|
|
48
60
|
[gfontapi]: https://code.google.com/apis/webfonts/docs/getting_started.html
|
49
|
-
[tk]: http://typekit.com/
|
61
|
+
[tk]: http://typekit.com/
|
62
|
+
[fd]: http://fontdeck.com/
|
data/lib/webfontloader.rb
CHANGED
@@ -0,0 +1,75 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
5
|
+
<script src="/webfont.js"></script>
|
6
|
+
<script>
|
7
|
+
function progress(message) {
|
8
|
+
var output = document.getElementById('events');
|
9
|
+
if (output) {
|
10
|
+
var e = document.createElement('li');
|
11
|
+
e.innerHTML = message;
|
12
|
+
output.appendChild(e);
|
13
|
+
}
|
14
|
+
if (window.console && window.console.log) {
|
15
|
+
window.console.log(message);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
WebFont.load({
|
19
|
+
fontdeck: {
|
20
|
+
id: '2282'
|
21
|
+
},
|
22
|
+
loading: function() {
|
23
|
+
progress('loading');
|
24
|
+
},
|
25
|
+
active: function() {
|
26
|
+
progress('active');
|
27
|
+
},
|
28
|
+
inactive: function() {
|
29
|
+
progress('inactive');
|
30
|
+
},
|
31
|
+
fontloading: function(fontFamily, fontDescription) {
|
32
|
+
progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
|
33
|
+
},
|
34
|
+
fontactive: function(fontFamily, fontDescription) {
|
35
|
+
progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
|
36
|
+
},
|
37
|
+
fontinactive: function(fontFamily, fontDescription) {
|
38
|
+
progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
|
39
|
+
}
|
40
|
+
});
|
41
|
+
</script>
|
42
|
+
<style>
|
43
|
+
h1 {
|
44
|
+
font-family: 'Fertigo Pro Regular';
|
45
|
+
visibility: hidden;
|
46
|
+
}
|
47
|
+
h2 {
|
48
|
+
font-family: 'Bodoni Display Bold Italic';
|
49
|
+
font-weight: bold;
|
50
|
+
font-style: italic;
|
51
|
+
visibility: hidden;
|
52
|
+
}
|
53
|
+
.wf-fertigoproregular-n4-active h1,
|
54
|
+
.wf-bodonidisplaybolditalic-i7-active h2 {
|
55
|
+
visibility: visible;
|
56
|
+
}
|
57
|
+
</style>
|
58
|
+
</head>
|
59
|
+
<body>
|
60
|
+
<h1>Hello World. I am Fertigo Pro Regular.</h1>
|
61
|
+
<h2>Hello World. I am Bodoni Display Bold Italic.</h2>
|
62
|
+
<hr>
|
63
|
+
<p>
|
64
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
65
|
+
<a href="/fontdeck.html">Reload Cached</a>
|
66
|
+
</p>
|
67
|
+
<p>
|
68
|
+
The goal of this page is to show how Fontdeck fonts load.
|
69
|
+
</p>
|
70
|
+
<p>
|
71
|
+
You must use "localhost" when testing Fontdeck fonts.
|
72
|
+
</p>
|
73
|
+
<ol id="events"></ol>
|
74
|
+
</body>
|
75
|
+
</html>
|
@@ -24,6 +24,7 @@
|
|
24
24
|
<li><a href="/typekit.html">Typekit / WebFont Loader</a>: Load fonts from Typekit with WebFont Loader.</li>
|
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
|
+
<li><a href="/fontdeck.html">Fontdeck / WebFont Loader</a>: Load fonts from Fontdeck with WebFont Loader.</li>
|
27
28
|
</ol>
|
28
29
|
|
29
30
|
<h2>Events</h2>
|
@@ -7,31 +7,31 @@ CssFontFamilyNameTest.prototype.setUp = function() {
|
|
7
7
|
CssFontFamilyNameTest.prototype.testSpaceNameWithoutQuotes = function() {
|
8
8
|
var result = this.sanitizer_.quote('My Family');
|
9
9
|
|
10
|
-
assertEquals('
|
10
|
+
assertEquals("'My Family'", result);
|
11
11
|
};
|
12
12
|
|
13
13
|
CssFontFamilyNameTest.prototype.testSpaceNameWithDoubleQuotes = function() {
|
14
14
|
var result = this.sanitizer_.quote('"My Family"');
|
15
15
|
|
16
|
-
assertEquals('
|
16
|
+
assertEquals("'My Family'", result);
|
17
17
|
};
|
18
18
|
|
19
19
|
CssFontFamilyNameTest.prototype.testSpaceNameWithSingleQuotes = function() {
|
20
20
|
var result = this.sanitizer_.quote('\'My Family\'');
|
21
21
|
|
22
|
-
assertEquals('
|
22
|
+
assertEquals("'My Family'", result);
|
23
23
|
};
|
24
24
|
|
25
25
|
CssFontFamilyNameTest.prototype.testSpaceNameWithCommasAndQuotes = function() {
|
26
26
|
var result = this.sanitizer_.quote('\'family 1\',\'family 2\'');
|
27
27
|
|
28
|
-
assertEquals('
|
28
|
+
assertEquals("'family 1','family 2'", result);
|
29
29
|
};
|
30
30
|
|
31
31
|
CssFontFamilyNameTest.prototype.testSpaceNameWithCommaSpaceAndQuotes = function() {
|
32
32
|
var result = this.sanitizer_.quote('\'family 1\', \'family 2\'');
|
33
33
|
|
34
|
-
assertEquals('
|
34
|
+
assertEquals("'family 1','family 2'", result);
|
35
35
|
};
|
36
36
|
|
37
37
|
CssFontFamilyNameTest.prototype.testNoSpaceNameWithoutQuotes = function() {
|
@@ -79,3 +79,15 @@ DomHelperTest.prototype.testAppendAndRemoveClassNames = function() {
|
|
79
79
|
assertEquals('', div.className);
|
80
80
|
|
81
81
|
};
|
82
|
+
|
83
|
+
DomHelperTest.prototype.testHasClassName = function() {
|
84
|
+
var div = this.domHelper_.createElement('div');
|
85
|
+
|
86
|
+
this.domHelper_.appendClassName(div, 'moo');
|
87
|
+
this.domHelper_.appendClassName(div, 'moo-meuh');
|
88
|
+
|
89
|
+
assertTrue(this.domHelper_.hasClassName(div, 'moo'));
|
90
|
+
assertTrue(this.domHelper_.hasClassName(div, 'moo-meuh'));
|
91
|
+
assertFalse(this.domHelper_.hasClassName(div, 'meuh'));
|
92
|
+
assertFalse(this.domHelper_.hasClassName(div, 'missingClassName'));
|
93
|
+
}
|
@@ -7,7 +7,7 @@ EventDispatcherTest.prototype.setUp = function() {
|
|
7
7
|
this.fontLoading_ = '';
|
8
8
|
this.fontActiveEventCalled_ = false;
|
9
9
|
this.fontActive_ = '';
|
10
|
-
this.
|
10
|
+
this.fontInactiveEventCalled_ = false;
|
11
11
|
this.fontInactive_ = '';
|
12
12
|
this.activeEventCalled_ = false;
|
13
13
|
this.inactiveEventCalled_ = false;
|
@@ -34,7 +34,7 @@ EventDispatcherTest.prototype.setUp = function() {
|
|
34
34
|
self.fontActive_ = fontFamily + ' ' + fontDescription;
|
35
35
|
},
|
36
36
|
fontinactive: function(fontFamily, fontDescription) {
|
37
|
-
self.
|
37
|
+
self.fontInactiveEventCalled_ = true;
|
38
38
|
self.fontInactive_ = fontFamily + ' ' + fontDescription;
|
39
39
|
}
|
40
40
|
}, namespace);
|
@@ -51,6 +51,19 @@ EventDispatcherTest.prototype.testClassNamesOnActiveLoad = function() {
|
|
51
51
|
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
52
52
|
};
|
53
53
|
|
54
|
+
EventDispatcherTest.prototype.testEventsOnActiveLoad = function() {
|
55
|
+
this.eventDispatcher_.dispatchLoading();
|
56
|
+
assertTrue(this.loadingEventCalled_);
|
57
|
+
this.eventDispatcher_.dispatchFontLoading('fontFamilyLoading', 'n4');
|
58
|
+
assertTrue(this.fontLoadingEventCalled_);
|
59
|
+
assertEquals('fontFamilyLoading n4', this.fontLoading_);
|
60
|
+
this.eventDispatcher_.dispatchFontActive('fontFamilyActive', 'n4');
|
61
|
+
assertTrue(this.fontActiveEventCalled_);
|
62
|
+
assertEquals('fontFamilyActive n4', this.fontActive_);
|
63
|
+
this.eventDispatcher_.dispatchActive();
|
64
|
+
assertTrue(this.activeEventCalled_);
|
65
|
+
};
|
66
|
+
|
54
67
|
EventDispatcherTest.prototype.testClassNamesOnInactiveFontButActive = function() {
|
55
68
|
this.eventDispatcher_.dispatchLoading();
|
56
69
|
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
@@ -62,19 +75,30 @@ EventDispatcherTest.prototype.testClassNamesOnInactiveFontButActive = function()
|
|
62
75
|
assertEquals('ns-myfamily-n4-inactive ns-active', this.fakeHtmlElement_.className);
|
63
76
|
};
|
64
77
|
|
65
|
-
EventDispatcherTest.prototype.
|
78
|
+
EventDispatcherTest.prototype.testEventsOnInactiveFontButActive = function() {
|
66
79
|
this.eventDispatcher_.dispatchLoading();
|
67
80
|
assertTrue(this.loadingEventCalled_);
|
68
81
|
this.eventDispatcher_.dispatchFontLoading('fontFamilyLoading', 'n4');
|
69
82
|
assertTrue(this.fontLoadingEventCalled_);
|
70
83
|
assertEquals('fontFamilyLoading n4', this.fontLoading_);
|
71
|
-
this.eventDispatcher_.
|
72
|
-
assertTrue(this.
|
73
|
-
assertEquals('
|
84
|
+
this.eventDispatcher_.dispatchFontInactive('fontFamilyInactive', 'n4');
|
85
|
+
assertTrue(this.fontInactiveEventCalled_);
|
86
|
+
assertEquals('fontFamilyInactive n4', this.fontInactive_);
|
74
87
|
this.eventDispatcher_.dispatchActive();
|
75
88
|
assertTrue(this.activeEventCalled_);
|
76
89
|
};
|
77
90
|
|
91
|
+
EventDispatcherTest.prototype.testClassNamesOnInactiveLoad = function() {
|
92
|
+
this.eventDispatcher_.dispatchLoading();
|
93
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
94
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
95
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
96
|
+
this.eventDispatcher_.dispatchFontInactive('My Family', 'n4');
|
97
|
+
assertEquals('ns-loading ns-myfamily-n4-inactive', this.fakeHtmlElement_.className);
|
98
|
+
this.eventDispatcher_.dispatchInactive();
|
99
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive', this.fakeHtmlElement_.className);
|
100
|
+
};
|
101
|
+
|
78
102
|
EventDispatcherTest.prototype.testEventsOnInactiveLoad = function() {
|
79
103
|
this.eventDispatcher_.dispatchLoading();
|
80
104
|
assertTrue(this.loadingEventCalled_);
|
@@ -82,13 +106,42 @@ EventDispatcherTest.prototype.testEventsOnInactiveLoad = function() {
|
|
82
106
|
assertTrue(this.fontLoadingEventCalled_);
|
83
107
|
assertEquals('fontFamilyLoading n4', this.fontLoading_);
|
84
108
|
this.eventDispatcher_.dispatchFontInactive('fontFamilyInactive', 'n4');
|
85
|
-
assertTrue(this.
|
109
|
+
assertTrue(this.fontInactiveEventCalled_);
|
86
110
|
assertEquals('fontFamilyInactive n4', this.fontInactive_);
|
111
|
+
this.eventDispatcher_.dispatchInactive();
|
112
|
+
assertTrue(this.inactiveEventCalled_);
|
113
|
+
};
|
114
|
+
|
115
|
+
EventDispatcherTest.prototype.testClassNamesOnInactive = function() {
|
116
|
+
this.eventDispatcher_.dispatchInactive();
|
117
|
+
assertEquals('ns-inactive', this.fakeHtmlElement_.className);
|
118
|
+
};
|
119
|
+
|
120
|
+
EventDispatcherTest.prototype.testEventsOnInactive = function() {
|
121
|
+
this.eventDispatcher_.dispatchInactive();
|
122
|
+
assertTrue(this.inactiveEventCalled_);
|
123
|
+
};
|
124
|
+
|
125
|
+
EventDispatcherTest.prototype.testClassNamesOnInactiveThenActiveLoad = function() {
|
126
|
+
this.eventDispatcher_.dispatchLoading();
|
127
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
128
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
129
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
130
|
+
this.eventDispatcher_.dispatchFontInactive('My Family', 'n4');
|
131
|
+
assertEquals('ns-loading ns-myfamily-n4-inactive', this.fakeHtmlElement_.className);
|
132
|
+
this.eventDispatcher_.dispatchInactive();
|
133
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive', this.fakeHtmlElement_.className);
|
134
|
+
this.eventDispatcher_.dispatchLoading();
|
135
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading', this.fakeHtmlElement_.className);
|
136
|
+
this.eventDispatcher_.dispatchFontLoading('My Family 2', 'n4');
|
137
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading ns-myfamily2-n4-loading', this.fakeHtmlElement_.className);
|
138
|
+
this.eventDispatcher_.dispatchFontActive('My Family 2', 'n4');
|
139
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading ns-myfamily2-n4-active', this.fakeHtmlElement_.className);
|
87
140
|
this.eventDispatcher_.dispatchActive();
|
88
|
-
|
141
|
+
assertEquals('ns-myfamily-n4-inactive ns-myfamily2-n4-active ns-active', this.fakeHtmlElement_.className);
|
89
142
|
};
|
90
143
|
|
91
|
-
EventDispatcherTest.prototype.
|
144
|
+
EventDispatcherTest.prototype.testClassNamesOnInactiveThenActiveLoadSameFont = function() {
|
92
145
|
this.eventDispatcher_.dispatchLoading();
|
93
146
|
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
94
147
|
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
@@ -97,14 +150,126 @@ EventDispatcherTest.prototype.testClassNamesOnInactiveLoad = function() {
|
|
97
150
|
assertEquals('ns-loading ns-myfamily-n4-inactive', this.fakeHtmlElement_.className);
|
98
151
|
this.eventDispatcher_.dispatchInactive();
|
99
152
|
assertEquals('ns-myfamily-n4-inactive ns-inactive', this.fakeHtmlElement_.className);
|
153
|
+
this.eventDispatcher_.dispatchLoading();
|
154
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading', this.fakeHtmlElement_.className);
|
155
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
156
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
157
|
+
this.eventDispatcher_.dispatchFontActive('My Family', 'n4');
|
158
|
+
assertEquals('ns-inactive ns-loading ns-myfamily-n4-active', this.fakeHtmlElement_.className);
|
159
|
+
this.eventDispatcher_.dispatchActive();
|
160
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
100
161
|
};
|
101
162
|
|
102
|
-
EventDispatcherTest.prototype.
|
163
|
+
EventDispatcherTest.prototype.testClassNamesOnActiveThenInactiveLoad = function() {
|
164
|
+
this.eventDispatcher_.dispatchLoading();
|
165
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
166
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
167
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
168
|
+
this.eventDispatcher_.dispatchFontActive('My Family', 'n4');
|
169
|
+
assertEquals('ns-loading ns-myfamily-n4-active', this.fakeHtmlElement_.className);
|
170
|
+
this.eventDispatcher_.dispatchActive();
|
171
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
172
|
+
this.eventDispatcher_.dispatchLoading();
|
173
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading', this.fakeHtmlElement_.className);
|
174
|
+
this.eventDispatcher_.dispatchFontLoading('My Family 2', 'n4');
|
175
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading ns-myfamily2-n4-loading', this.fakeHtmlElement_.className);
|
176
|
+
this.eventDispatcher_.dispatchFontInactive('My Family 2', 'n4');
|
177
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading ns-myfamily2-n4-inactive', this.fakeHtmlElement_.className);
|
103
178
|
this.eventDispatcher_.dispatchInactive();
|
104
|
-
assertEquals('ns-inactive', this.fakeHtmlElement_.className);
|
179
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-myfamily2-n4-inactive', this.fakeHtmlElement_.className);
|
105
180
|
};
|
106
181
|
|
107
|
-
EventDispatcherTest.prototype.
|
182
|
+
EventDispatcherTest.prototype.testClassNamesOnActiveThenInactiveLoadSameFont = function() {
|
183
|
+
this.eventDispatcher_.dispatchLoading();
|
184
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
185
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
186
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
187
|
+
this.eventDispatcher_.dispatchFontActive('My Family', 'n4');
|
188
|
+
assertEquals('ns-loading ns-myfamily-n4-active', this.fakeHtmlElement_.className);
|
189
|
+
this.eventDispatcher_.dispatchActive();
|
190
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
191
|
+
this.eventDispatcher_.dispatchLoading();
|
192
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading', this.fakeHtmlElement_.className);
|
193
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
194
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
195
|
+
this.eventDispatcher_.dispatchFontInactive('My Family', 'n4');
|
196
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading', this.fakeHtmlElement_.className);
|
108
197
|
this.eventDispatcher_.dispatchInactive();
|
109
|
-
|
198
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
199
|
+
};
|
200
|
+
|
201
|
+
EventDispatcherTest.prototype.testClassNamesOnActiveThenActiveLoad = function() {
|
202
|
+
this.eventDispatcher_.dispatchLoading();
|
203
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
204
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
205
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
206
|
+
this.eventDispatcher_.dispatchFontActive('My Family', 'n4');
|
207
|
+
assertEquals('ns-loading ns-myfamily-n4-active', this.fakeHtmlElement_.className);
|
208
|
+
this.eventDispatcher_.dispatchActive();
|
209
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
210
|
+
this.eventDispatcher_.dispatchLoading();
|
211
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading', this.fakeHtmlElement_.className);
|
212
|
+
this.eventDispatcher_.dispatchFontLoading('My Family 2', 'n4');
|
213
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading ns-myfamily2-n4-loading', this.fakeHtmlElement_.className);
|
214
|
+
this.eventDispatcher_.dispatchFontActive('My Family 2', 'n4');
|
215
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading ns-myfamily2-n4-active', this.fakeHtmlElement_.className);
|
216
|
+
this.eventDispatcher_.dispatchActive();
|
217
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-myfamily2-n4-active', this.fakeHtmlElement_.className);
|
218
|
+
};
|
219
|
+
|
220
|
+
EventDispatcherTest.prototype.testClassNamesOnActiveThenActiveLoadSameFont = function() {
|
221
|
+
this.eventDispatcher_.dispatchLoading();
|
222
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
223
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
224
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
225
|
+
this.eventDispatcher_.dispatchFontActive('My Family', 'n4');
|
226
|
+
assertEquals('ns-loading ns-myfamily-n4-active', this.fakeHtmlElement_.className);
|
227
|
+
this.eventDispatcher_.dispatchActive();
|
228
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
229
|
+
this.eventDispatcher_.dispatchLoading();
|
230
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading', this.fakeHtmlElement_.className);
|
231
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
232
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
233
|
+
this.eventDispatcher_.dispatchFontActive('My Family', 'n4');
|
234
|
+
assertEquals('ns-myfamily-n4-active ns-active ns-loading', this.fakeHtmlElement_.className);
|
235
|
+
this.eventDispatcher_.dispatchActive();
|
236
|
+
assertEquals('ns-myfamily-n4-active ns-active', this.fakeHtmlElement_.className);
|
237
|
+
};
|
238
|
+
|
239
|
+
EventDispatcherTest.prototype.testClassNamesOnInactiveThenInactiveLoad = function() {
|
240
|
+
this.eventDispatcher_.dispatchLoading();
|
241
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
242
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
243
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
244
|
+
this.eventDispatcher_.dispatchFontInactive('My Family', 'n4');
|
245
|
+
assertEquals('ns-loading ns-myfamily-n4-inactive', this.fakeHtmlElement_.className);
|
246
|
+
this.eventDispatcher_.dispatchInactive();
|
247
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive', this.fakeHtmlElement_.className);
|
248
|
+
this.eventDispatcher_.dispatchLoading();
|
249
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading', this.fakeHtmlElement_.className);
|
250
|
+
this.eventDispatcher_.dispatchFontLoading('My Family 2', 'n4');
|
251
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading ns-myfamily2-n4-loading', this.fakeHtmlElement_.className);
|
252
|
+
this.eventDispatcher_.dispatchFontInactive('My Family 2', 'n4');
|
253
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading ns-myfamily2-n4-inactive', this.fakeHtmlElement_.className);
|
254
|
+
this.eventDispatcher_.dispatchInactive();
|
255
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-myfamily2-n4-inactive', this.fakeHtmlElement_.className);
|
256
|
+
};
|
257
|
+
|
258
|
+
EventDispatcherTest.prototype.testClassNamesOnInactiveThenInactiveLoadSameFont = function() {
|
259
|
+
this.eventDispatcher_.dispatchLoading();
|
260
|
+
assertEquals('ns-loading', this.fakeHtmlElement_.className);
|
261
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
262
|
+
assertEquals('ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
263
|
+
this.eventDispatcher_.dispatchFontInactive('My Family', 'n4');
|
264
|
+
assertEquals('ns-loading ns-myfamily-n4-inactive', this.fakeHtmlElement_.className);
|
265
|
+
this.eventDispatcher_.dispatchInactive();
|
266
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive', this.fakeHtmlElement_.className);
|
267
|
+
this.eventDispatcher_.dispatchLoading();
|
268
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading', this.fakeHtmlElement_.className);
|
269
|
+
this.eventDispatcher_.dispatchFontLoading('My Family', 'n4');
|
270
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading ns-myfamily-n4-loading', this.fakeHtmlElement_.className);
|
271
|
+
this.eventDispatcher_.dispatchFontInactive('My Family', 'n4');
|
272
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive ns-loading', this.fakeHtmlElement_.className);
|
273
|
+
this.eventDispatcher_.dispatchInactive();
|
274
|
+
assertEquals('ns-myfamily-n4-inactive ns-inactive', this.fakeHtmlElement_.className);
|
110
275
|
};
|
data/src-test/core/fonttest.js
CHANGED
@@ -0,0 +1,49 @@
|
|
1
|
+
var FontdeckScriptTest = TestCase('FontdeckScriptTest');
|
2
|
+
|
3
|
+
FontdeckScriptTest.prototype.testSupportAndLoadLifecycle = function() {
|
4
|
+
var configuration = {
|
5
|
+
'id': '2282'
|
6
|
+
};
|
7
|
+
var apiResponse = {
|
8
|
+
'css':'http://fontdeck.com/s/css/uH5+KWQnibDTJRYggGJ9XZLTAgw/webfontloader/2282.css',
|
9
|
+
'provides':[
|
10
|
+
{'font_size_adjust':null,'weight':'normal','style':'normal','name':'Fertigo Pro Regular'},
|
11
|
+
{'font_size_adjust':'0.5','weight':'bold','style':'italic','name':'Bodoni Display Bold Italic'}
|
12
|
+
]
|
13
|
+
};
|
14
|
+
var insert = '';
|
15
|
+
var src = '';
|
16
|
+
var fakeDomHelper = {
|
17
|
+
insertInto: function(tag, e) {
|
18
|
+
insert = tag;
|
19
|
+
},
|
20
|
+
createScriptSrc: function(srcLink) {
|
21
|
+
src = srcLink;
|
22
|
+
},
|
23
|
+
createCssLink: function(cssLink) {
|
24
|
+
css = cssLink;
|
25
|
+
return '<link href="' + css + '" type="text/css" />';
|
26
|
+
}
|
27
|
+
};
|
28
|
+
var global = {};
|
29
|
+
var fontdeck = new webfont.FontdeckScript(global, fakeDomHelper, configuration);
|
30
|
+
|
31
|
+
// supportUserAgent
|
32
|
+
var userAgent = 'user agent';
|
33
|
+
var isSupport = null;
|
34
|
+
|
35
|
+
fontdeck.supportUserAgent(userAgent, function(support) { isSupport = support; });
|
36
|
+
assertEquals('head', insert);
|
37
|
+
assertEquals('http://fontdeck.com/api/v1/project-info?project=2282&domain=localhost&callback=window.__webfontfontdeckmodule__[2282]', src);
|
38
|
+
assertEquals(null, isSupport);
|
39
|
+
|
40
|
+
assertNotNull(global.__webfontfontdeckmodule__);
|
41
|
+
assertNotNull(global.__webfontfontdeckmodule__['2282']);
|
42
|
+
|
43
|
+
// Call the callback function passing in dummy API response.
|
44
|
+
global.__webfontfontdeckmodule__['2282'](apiResponse);
|
45
|
+
|
46
|
+
assertEquals(fontdeck.fontFamilies_, [apiResponse.provides[0].name, apiResponse.provides[1].name]);
|
47
|
+
assertEquals(fontdeck.fontVariations_[apiResponse.provides[0].name], ['n4']);
|
48
|
+
assertEquals(fontdeck.fontVariations_[apiResponse.provides[1].name], ['i7']);
|
49
|
+
};
|
@@ -73,7 +73,8 @@ FontApiParserTest.prototype.testTypoBildInsteadOfBold = function() {
|
|
73
73
|
|
74
74
|
var variations = fontApiParser.getVariations();
|
75
75
|
var nobile = variations['Nobile'];
|
76
|
-
|
76
|
+
assertEquals(1, nobile.length);
|
77
|
+
assertEquals('n4', nobile[0]);
|
77
78
|
};
|
78
79
|
|
79
80
|
FontApiParserTest.prototype.testNonSense = function() {
|
@@ -88,5 +89,121 @@ FontApiParserTest.prototype.testNonSense = function() {
|
|
88
89
|
|
89
90
|
var variations = fontApiParser.getVariations();
|
90
91
|
var nobile = variations['Nobile'];
|
91
|
-
|
92
|
+
assertEquals(1, nobile.length);
|
93
|
+
assertEquals('n4', nobile[0]);
|
94
|
+
};
|
95
|
+
|
96
|
+
FontApiParserTest.prototype.testNoWeightOneSubsetDefined = function() {
|
97
|
+
var fontFamilies = [ 'Cantarell::greek' ];
|
98
|
+
var fontApiParser = new webfont.FontApiParser(fontFamilies);
|
99
|
+
|
100
|
+
fontApiParser.parse();
|
101
|
+
|
102
|
+
var parsedFontFamilies = fontApiParser.getFontFamilies();
|
103
|
+
assertEquals(1, parsedFontFamilies.length);
|
104
|
+
assertEquals('Cantarell', parsedFontFamilies[0]);
|
105
|
+
|
106
|
+
var variations = fontApiParser.getVariations();
|
107
|
+
var cantarellVariations = variations['Cantarell'];
|
108
|
+
assertEquals(1, cantarellVariations.length);
|
109
|
+
assertEquals('n4', cantarellVariations[0]);
|
110
|
+
|
111
|
+
var testStrings = fontApiParser.getFontTestStrings();
|
112
|
+
var cantarellTestStrings = testStrings['Cantarell'];
|
113
|
+
assertNotUndefined(cantarellTestStrings);
|
114
|
+
assertEquals(webfont.FontApiParser.INT_FONTS['greek'],
|
115
|
+
cantarellTestStrings);
|
116
|
+
};
|
117
|
+
|
118
|
+
|
119
|
+
FontApiParserTest.prototype.testNoWeightMultipleSubsetsDefined = function() {
|
120
|
+
var fontFamilies = [ 'Cantarell::cyrillic,greek,latin' ];
|
121
|
+
var fontApiParser = new webfont.FontApiParser(fontFamilies);
|
122
|
+
|
123
|
+
fontApiParser.parse();
|
124
|
+
|
125
|
+
var parsedFontFamilies = fontApiParser.getFontFamilies();
|
126
|
+
assertEquals(1, parsedFontFamilies.length);
|
127
|
+
assertEquals('Cantarell', parsedFontFamilies[0]);
|
128
|
+
|
129
|
+
var variations = fontApiParser.getVariations();
|
130
|
+
var cantarellVariations = variations['Cantarell'];
|
131
|
+
assertEquals(1, cantarellVariations.length);
|
132
|
+
assertEquals('n4', cantarellVariations[0]);
|
133
|
+
|
134
|
+
var testStrings = fontApiParser.getFontTestStrings();
|
135
|
+
var cantarellTestStrings = testStrings['Cantarell'];
|
136
|
+
assertNotUndefined(cantarellTestStrings);
|
137
|
+
assertEquals(webfont.FontApiParser.INT_FONTS['cyrillic'],
|
138
|
+
cantarellTestStrings);
|
139
|
+
};
|
140
|
+
|
141
|
+
|
142
|
+
FontApiParserTest.prototype.testWeightAndMultipleSubsetsDefined = function() {
|
143
|
+
var fontFamilies = [ 'Cantarell:regular,bold:cyrillic,greek,latin' ];
|
144
|
+
var fontApiParser = new webfont.FontApiParser(fontFamilies);
|
145
|
+
|
146
|
+
fontApiParser.parse();
|
147
|
+
|
148
|
+
var parsedFontFamilies = fontApiParser.getFontFamilies();
|
149
|
+
assertEquals(1, parsedFontFamilies.length);
|
150
|
+
assertEquals('Cantarell', parsedFontFamilies[0]);
|
151
|
+
|
152
|
+
var variations = fontApiParser.getVariations();
|
153
|
+
var cantarellVariations = variations['Cantarell'];
|
154
|
+
assertEquals(2, cantarellVariations.length);
|
155
|
+
assertEquals('n4', cantarellVariations[0]);
|
156
|
+
assertEquals('n7', cantarellVariations[1]);
|
157
|
+
|
158
|
+
var testStrings = fontApiParser.getFontTestStrings();
|
159
|
+
var cantarellTestStrings = testStrings['Cantarell'];
|
160
|
+
assertNotUndefined(cantarellTestStrings);
|
161
|
+
assertEquals(webfont.FontApiParser.INT_FONTS['cyrillic'],
|
162
|
+
cantarellTestStrings);
|
163
|
+
};
|
164
|
+
|
165
|
+
|
166
|
+
FontApiParserTest.prototype.testHanumanIsBackwardCompatible = function() {
|
167
|
+
var fontFamilies = [ 'Hanuman' ];
|
168
|
+
var fontApiParser = new webfont.FontApiParser(fontFamilies);
|
169
|
+
|
170
|
+
fontApiParser.parse();
|
171
|
+
|
172
|
+
var parsedFontFamilies = fontApiParser.getFontFamilies();
|
173
|
+
assertEquals(1, parsedFontFamilies.length);
|
174
|
+
assertEquals('Hanuman', parsedFontFamilies[0]);
|
175
|
+
|
176
|
+
var variations = fontApiParser.getVariations();
|
177
|
+
var hanumanVariations = variations['Hanuman'];
|
178
|
+
assertEquals(1, hanumanVariations.length);
|
179
|
+
assertEquals('n4', hanumanVariations[0]);
|
180
|
+
|
181
|
+
var testStrings = fontApiParser.getFontTestStrings();
|
182
|
+
var hanumanTestStrings = testStrings['Hanuman'];
|
183
|
+
assertNotUndefined(hanumanTestStrings);
|
184
|
+
assertEquals(webfont.FontApiParser.INT_FONTS['Hanuman'],
|
185
|
+
hanumanTestStrings);
|
186
|
+
};
|
187
|
+
|
188
|
+
|
189
|
+
FontApiParserTest.prototype.testHanumanIsForwardCompatible = function() {
|
190
|
+
var fontFamilies = [ 'Hanuman::khmer' ];
|
191
|
+
var fontApiParser = new webfont.FontApiParser(fontFamilies);
|
192
|
+
|
193
|
+
fontApiParser.parse();
|
194
|
+
|
195
|
+
var parsedFontFamilies = fontApiParser.getFontFamilies();
|
196
|
+
assertEquals(1, parsedFontFamilies.length);
|
197
|
+
assertEquals('Hanuman', parsedFontFamilies[0]);
|
198
|
+
|
199
|
+
var variations = fontApiParser.getVariations();
|
200
|
+
var hanumanVariations = variations['Hanuman'];
|
201
|
+
assertEquals(1, hanumanVariations.length);
|
202
|
+
assertEquals('n4', hanumanVariations[0]);
|
203
|
+
|
204
|
+
var testStrings = fontApiParser.getFontTestStrings();
|
205
|
+
var hanumanTestStrings = testStrings['Hanuman'];
|
206
|
+
assertNotUndefined(hanumanTestStrings);
|
207
|
+
assertEquals(webfont.FontApiParser.INT_FONTS['khmer'],
|
208
|
+
hanumanTestStrings);
|
92
209
|
};
|
@@ -26,3 +26,14 @@ FontApiUrlBuilderTest.prototype.testBuildProperDefaultUrl = function() {
|
|
26
26
|
assertEquals("http:" + webfont.FontApiUrlBuilder.DEFAULT_API_URL +
|
27
27
|
'?family=Font1%7CFont2', fontApiUrlBuilder.build());
|
28
28
|
};
|
29
|
+
|
30
|
+
|
31
|
+
FontApiUrlBuilderTest.prototype.testBuildProperUrlWithSubsets = function() {
|
32
|
+
var fontApiUrlBuilder = new webfont.FontApiUrlBuilder();
|
33
|
+
|
34
|
+
fontApiUrlBuilder.setFontFamilies([ 'Font1:bold:greek,cyrillic',
|
35
|
+
'Font2:italic', 'Font3' ]);
|
36
|
+
assertEquals("http:" + webfont.FontApiUrlBuilder.DEFAULT_API_URL +
|
37
|
+
'?family=Font1:bold%7CFont2:italic%7CFont3' +
|
38
|
+
'&subset=greek,cyrillic', fontApiUrlBuilder.build());
|
39
|
+
};
|
data/src/core/domhelper.js
CHANGED
@@ -148,3 +148,19 @@ webfont.DomHelper.prototype.removeClassName = function(e, name) {
|
|
148
148
|
e.className = remainingClasses.join(' ').replace(/^\s+/, '')
|
149
149
|
.replace(/\s+$/, '');
|
150
150
|
};
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Returns true if an element has a given class name and false otherwise.
|
154
|
+
* @param {Element} e The element.
|
155
|
+
* @param {string} name The class name to check for.
|
156
|
+
* @return {boolean} Whether or not the element has this class name.
|
157
|
+
*/
|
158
|
+
webfont.DomHelper.prototype.hasClassName = function(e, name) {
|
159
|
+
var classes = e.className.split(/\s+/);
|
160
|
+
for (var i = 0, len = classes.length; i < len; i++) {
|
161
|
+
if (classes[i] == name) {
|
162
|
+
return true;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
return false;
|
166
|
+
};
|
data/src/core/eventdispatcher.js
CHANGED
@@ -1,4 +1,9 @@
|
|
1
1
|
/**
|
2
|
+
* A class to dispatch events and manage the event class names on an html
|
3
|
+
* element that represent the current state of fonts on the page. Active class
|
4
|
+
* names always overwrite inactive class names of the same type, while loading
|
5
|
+
* class names may be present whenever a font is loading (regardless of if an
|
6
|
+
* associated active or inactive class name is also present).
|
2
7
|
* @param {webfont.DomHelper} domHelper
|
3
8
|
* @param {HTMLElement} htmlElement
|
4
9
|
* @param {Object} callbacks
|
@@ -44,6 +49,9 @@ webfont.EventDispatcher.INACTIVE = 'inactive';
|
|
44
49
|
*/
|
45
50
|
webfont.EventDispatcher.FONT = 'font';
|
46
51
|
|
52
|
+
/**
|
53
|
+
* Dispatch the loading event and append the loading class name.
|
54
|
+
*/
|
47
55
|
webfont.EventDispatcher.prototype.dispatchLoading = function() {
|
48
56
|
this.domHelper_.appendClassName(this.htmlElement_,
|
49
57
|
this.cssClassName_.build(
|
@@ -52,6 +60,7 @@ webfont.EventDispatcher.prototype.dispatchLoading = function() {
|
|
52
60
|
};
|
53
61
|
|
54
62
|
/**
|
63
|
+
* Dispatch the font loading event and append the font loading class name.
|
55
64
|
* @param {string} fontFamily
|
56
65
|
* @param {string} fontDescription
|
57
66
|
*/
|
@@ -64,6 +73,8 @@ webfont.EventDispatcher.prototype.dispatchFontLoading = function(fontFamily, fon
|
|
64
73
|
};
|
65
74
|
|
66
75
|
/**
|
76
|
+
* Dispatch the font active event, remove the font loading class name, remove
|
77
|
+
* the font inactive class name, and append the font active class name.
|
67
78
|
* @param {string} fontFamily
|
68
79
|
* @param {string} fontDescription
|
69
80
|
*/
|
@@ -71,6 +82,9 @@ webfont.EventDispatcher.prototype.dispatchFontActive = function(fontFamily, font
|
|
71
82
|
this.domHelper_.removeClassName(this.htmlElement_,
|
72
83
|
this.cssClassName_.build(
|
73
84
|
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.LOADING));
|
85
|
+
this.domHelper_.removeClassName(this.htmlElement_,
|
86
|
+
this.cssClassName_.build(
|
87
|
+
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.INACTIVE));
|
74
88
|
this.domHelper_.appendClassName(this.htmlElement_,
|
75
89
|
this.cssClassName_.build(
|
76
90
|
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.ACTIVE));
|
@@ -79,6 +93,9 @@ webfont.EventDispatcher.prototype.dispatchFontActive = function(fontFamily, font
|
|
79
93
|
};
|
80
94
|
|
81
95
|
/**
|
96
|
+
* Dispatch the font inactive event, remove the font loading class name, and
|
97
|
+
* append the font inactive class name (unless the font active class name is
|
98
|
+
* already present).
|
82
99
|
* @param {string} fontFamily
|
83
100
|
* @param {string} fontDescription
|
84
101
|
*/
|
@@ -86,28 +103,48 @@ webfont.EventDispatcher.prototype.dispatchFontInactive = function(fontFamily, fo
|
|
86
103
|
this.domHelper_.removeClassName(this.htmlElement_,
|
87
104
|
this.cssClassName_.build(
|
88
105
|
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.LOADING));
|
89
|
-
this.domHelper_.
|
106
|
+
var hasFontActive = this.domHelper_.hasClassName(this.htmlElement_,
|
90
107
|
this.cssClassName_.build(
|
91
|
-
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.
|
108
|
+
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.ACTIVE));
|
109
|
+
if (!hasFontActive) {
|
110
|
+
this.domHelper_.appendClassName(this.htmlElement_,
|
111
|
+
this.cssClassName_.build(
|
112
|
+
this.namespace_, fontFamily, fontDescription, webfont.EventDispatcher.INACTIVE));
|
113
|
+
}
|
92
114
|
this.dispatch_(
|
93
115
|
webfont.EventDispatcher.FONT + webfont.EventDispatcher.INACTIVE, fontFamily, fontDescription);
|
94
116
|
};
|
95
117
|
|
118
|
+
/**
|
119
|
+
* Dispatch the inactive event, remove the loading class name, and append the
|
120
|
+
* inactive class name (unless the active class name is already present).
|
121
|
+
*/
|
96
122
|
webfont.EventDispatcher.prototype.dispatchInactive = function() {
|
97
123
|
this.domHelper_.removeClassName(this.htmlElement_,
|
98
124
|
this.cssClassName_.build(
|
99
125
|
this.namespace_, webfont.EventDispatcher.LOADING));
|
100
|
-
this.domHelper_.
|
126
|
+
var hasActive = this.domHelper_.hasClassName(this.htmlElement_,
|
101
127
|
this.cssClassName_.build(
|
102
|
-
|
128
|
+
this.namespace_, webfont.EventDispatcher.ACTIVE));
|
129
|
+
if (!hasActive) {
|
130
|
+
this.domHelper_.appendClassName(this.htmlElement_,
|
131
|
+
this.cssClassName_.build(
|
132
|
+
this.namespace_, webfont.EventDispatcher.INACTIVE));
|
133
|
+
}
|
103
134
|
this.dispatch_(webfont.EventDispatcher.INACTIVE);
|
104
135
|
};
|
105
136
|
|
137
|
+
/**
|
138
|
+
* Dispatch the active event, remove the loading class name, remove the inactive
|
139
|
+
* class name, and append the active class name.
|
140
|
+
*/
|
106
141
|
webfont.EventDispatcher.prototype.dispatchActive = function() {
|
107
|
-
// what about inactive? maybe if all fonts failed to load?
|
108
142
|
this.domHelper_.removeClassName(this.htmlElement_,
|
109
143
|
this.cssClassName_.build(
|
110
144
|
this.namespace_, webfont.EventDispatcher.LOADING));
|
145
|
+
this.domHelper_.removeClassName(this.htmlElement_,
|
146
|
+
this.cssClassName_.build(
|
147
|
+
this.namespace_, webfont.EventDispatcher.INACTIVE));
|
111
148
|
this.domHelper_.appendClassName(this.htmlElement_,
|
112
149
|
this.cssClassName_.build(
|
113
150
|
this.namespace_, webfont.EventDispatcher.ACTIVE));
|
data/src/core/fontwatchrunner.js
CHANGED
@@ -125,8 +125,10 @@ webfont.FontWatchRunner.prototype.getDefaultFontSize_ = function(defaultFonts) {
|
|
125
125
|
webfont.FontWatchRunner.prototype.createHiddenElementWithFont_ = function(
|
126
126
|
defaultFonts, opt_withoutFontFamily) {
|
127
127
|
var variationCss = this.fvd_.expand(this.fontDescription_);
|
128
|
-
var styleString = "position:absolute;top:-999px;font-size:300px;
|
129
|
-
|
128
|
+
var styleString = "position:absolute;top:-999px;font-size:300px;" +
|
129
|
+
"width:auto;height:auto;line-height:normal;margin:0;padding:0;" +
|
130
|
+
"font-variant:normal;font-family:" + (opt_withoutFontFamily ? "" :
|
131
|
+
this.nameHelper_.quote(this.fontFamily_) + ",") +
|
130
132
|
defaultFonts + ";" + variationCss;
|
131
133
|
var span = this.domHelper_.createElement('span', { 'style': styleString },
|
132
134
|
this.fontTestString_);
|
@@ -0,0 +1,67 @@
|
|
1
|
+
/**
|
2
|
+
* @constructor
|
3
|
+
*/
|
4
|
+
webfont.FontdeckScript = function(global, domHelper, configuration) {
|
5
|
+
this.global_ = global;
|
6
|
+
this.domHelper_ = domHelper;
|
7
|
+
this.configuration_ = configuration;
|
8
|
+
this.fontFamilies_ = [];
|
9
|
+
this.fontVariations_ = {};
|
10
|
+
this.fvd_ = new webfont.FontVariationDescription();
|
11
|
+
};
|
12
|
+
|
13
|
+
webfont.FontdeckScript.NAME = 'fontdeck';
|
14
|
+
webfont.FontdeckScript.HOOK = '__webfontfontdeckmodule__';
|
15
|
+
webfont.FontdeckScript.API = 'http://fontdeck.com/api/v1/project-info?'
|
16
|
+
|
17
|
+
webfont.FontdeckScript.prototype.getScriptSrc = function(projectId) {
|
18
|
+
var api = this.configuration_['api'] || webfont.FontdeckScript.API;
|
19
|
+
return api + 'project=' + projectId + '&domain=' + document.location.hostname + '&callback=window.__webfontfontdeckmodule__[' + projectId + ']';
|
20
|
+
};
|
21
|
+
|
22
|
+
webfont.FontdeckScript.prototype.supportUserAgent = function(userAgent, support) {
|
23
|
+
var projectId = this.configuration_['id'];
|
24
|
+
var families = this.configuration_['families'] || null;
|
25
|
+
var self = this;
|
26
|
+
|
27
|
+
if (projectId) {
|
28
|
+
// Provide data to Fontdeck for processing.
|
29
|
+
if (!this.global_[webfont.FontdeckScript.HOOK]) {
|
30
|
+
this.global_[webfont.FontdeckScript.HOOK] = {};
|
31
|
+
}
|
32
|
+
|
33
|
+
// The API will call this function with a link to the CSS
|
34
|
+
// and a list of supported fonts.
|
35
|
+
this.global_[webfont.FontdeckScript.HOOK][projectId] = function(data) {
|
36
|
+
self.domHelper_.insertInto('head', self.domHelper_.createCssLink(data['css']));
|
37
|
+
for (var i = 0, j = data['provides'].length; i < j; ++i) {
|
38
|
+
var font = data['provides'][i];
|
39
|
+
self.fontFamilies_.push(font['name']);
|
40
|
+
self.fontVariations_[font['name']] = [self.fvd_.compact("font-weight:" + font['weight'] + ";font-style:" + font['style'])];
|
41
|
+
}
|
42
|
+
// If families were passed into load, then use them instead.
|
43
|
+
if (families !== null) {
|
44
|
+
self.fontFamilies_ = families;
|
45
|
+
}
|
46
|
+
support(true);
|
47
|
+
};
|
48
|
+
|
49
|
+
// Call the Fontdeck API.
|
50
|
+
var script = this.domHelper_.createScriptSrc(this.getScriptSrc(projectId));
|
51
|
+
this.domHelper_.insertInto('head', script);
|
52
|
+
|
53
|
+
} else {
|
54
|
+
support(true);
|
55
|
+
}
|
56
|
+
};
|
57
|
+
|
58
|
+
webfont.FontdeckScript.prototype.load = function(onReady) {
|
59
|
+
onReady(this.fontFamilies_, this.fontVariations_);
|
60
|
+
};
|
61
|
+
|
62
|
+
window['WebFont'].addModule(webfont.FontdeckScript.NAME, function(configuration) {
|
63
|
+
var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
|
64
|
+
var userAgent = userAgentParser.parse();
|
65
|
+
var domHelper = new webfont.DomHelper(document, userAgent);
|
66
|
+
return new webfont.FontdeckScript(window, domHelper, configuration);
|
67
|
+
});
|
data/src/google/fontapiparser.js
CHANGED
@@ -25,32 +25,47 @@ webfont.FontApiParser.VARIATIONS = {
|
|
25
25
|
};
|
26
26
|
|
27
27
|
webfont.FontApiParser.INT_FONTS = {
|
28
|
-
'
|
28
|
+
'latin': webfont.FontWatchRunner.DEFAULT_TEST_STRING,
|
29
|
+
'cyrillic': 'йяЖ',
|
30
|
+
'greek': 'αβΣ',
|
31
|
+
'khmer': 'កខគ',
|
32
|
+
'Hanuman': 'កខគ' // For backward compatibility
|
29
33
|
};
|
30
34
|
|
31
35
|
webfont.FontApiParser.prototype.parse = function() {
|
32
36
|
var length = this.fontFamilies_.length;
|
33
37
|
|
34
38
|
for (var i = 0; i < length; i++) {
|
35
|
-
var
|
36
|
-
var fontFamily =
|
37
|
-
var variations =
|
39
|
+
var elements = this.fontFamilies_[i].split(":");
|
40
|
+
var fontFamily = elements[0];
|
41
|
+
var variations = ['n4'];
|
38
42
|
|
39
|
-
if (
|
40
|
-
var fvds = this.parseVariations_(
|
43
|
+
if (elements.length >= 2) {
|
44
|
+
var fvds = this.parseVariations_(elements[1]);
|
41
45
|
|
42
46
|
if (fvds.length > 0) {
|
43
47
|
variations = fvds;
|
44
48
|
}
|
45
|
-
|
46
|
-
|
49
|
+
if (elements.length == 3) {
|
50
|
+
var subsets = this.parseSubsets_(elements[2]);
|
51
|
+
if (subsets.length > 0) {
|
52
|
+
var fontTestString = webfont.FontApiParser.INT_FONTS[subsets[0]];
|
53
|
+
|
54
|
+
if (fontTestString) {
|
55
|
+
this.fontTestStrings_[fontFamily] = fontTestString;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|
47
59
|
}
|
48
|
-
this.parsedFontFamilies_.push(fontFamily);
|
49
|
-
var fontTestString = webfont.FontApiParser.INT_FONTS[fontFamily];
|
50
60
|
|
51
|
-
|
52
|
-
|
61
|
+
// For backward compatibility
|
62
|
+
if (!this.fontTestStrings_[fontFamily]) {
|
63
|
+
var hanumanTestString = webfont.FontApiParser.INT_FONTS[fontFamily];
|
64
|
+
if (hanumanTestString) {
|
65
|
+
this.fontTestStrings_[fontFamily] = hanumanTestString;
|
66
|
+
}
|
53
67
|
}
|
68
|
+
this.parsedFontFamilies_.push(fontFamily);
|
54
69
|
this.variations_[fontFamily] = variations;
|
55
70
|
}
|
56
71
|
};
|
@@ -81,6 +96,10 @@ webfont.FontApiParser.prototype.generateFontVariationDescription_ = function(var
|
|
81
96
|
|
82
97
|
webfont.FontApiParser.prototype.parseVariations_ = function(variations) {
|
83
98
|
var finalVariations = [];
|
99
|
+
|
100
|
+
if (!variations) {
|
101
|
+
return finalVariations;
|
102
|
+
}
|
84
103
|
var providedVariations = variations.split(",");
|
85
104
|
var length = providedVariations.length;
|
86
105
|
|
@@ -95,6 +114,17 @@ webfont.FontApiParser.prototype.parseVariations_ = function(variations) {
|
|
95
114
|
return finalVariations;
|
96
115
|
};
|
97
116
|
|
117
|
+
|
118
|
+
webfont.FontApiParser.prototype.parseSubsets_ = function(subsets) {
|
119
|
+
var finalSubsets = [];
|
120
|
+
|
121
|
+
if (!subsets) {
|
122
|
+
return finalSubsets;
|
123
|
+
}
|
124
|
+
return subsets.split(",");
|
125
|
+
};
|
126
|
+
|
127
|
+
|
98
128
|
webfont.FontApiParser.prototype.getFontFamilies = function() {
|
99
129
|
return this.parsedFontFamilies_;
|
100
130
|
};
|
@@ -9,22 +9,41 @@ webfont.FontApiUrlBuilder = function(apiUrl) {
|
|
9
9
|
|
10
10
|
this.apiUrl_ = protocol + webfont.FontApiUrlBuilder.DEFAULT_API_URL;
|
11
11
|
}
|
12
|
-
this.fontFamilies_ =
|
12
|
+
this.fontFamilies_ = [];
|
13
|
+
this.subsets_ = [];
|
13
14
|
};
|
14
15
|
|
16
|
+
|
15
17
|
webfont.FontApiUrlBuilder.DEFAULT_API_URL = '//fonts.googleapis.com/css';
|
16
18
|
|
19
|
+
|
17
20
|
webfont.FontApiUrlBuilder.prototype.setFontFamilies = function(fontFamilies) {
|
18
|
-
|
19
|
-
this.fontFamilies_ = fontFamilies;
|
21
|
+
this.parseFontFamilies_(fontFamilies);
|
20
22
|
};
|
21
23
|
|
24
|
+
|
25
|
+
webfont.FontApiUrlBuilder.prototype.parseFontFamilies_ =
|
26
|
+
function(fontFamilies) {
|
27
|
+
var length = fontFamilies.length;
|
28
|
+
|
29
|
+
for (var i = 0; i < length; i++) {
|
30
|
+
var elements = fontFamilies[i].split(':');
|
31
|
+
|
32
|
+
if (elements.length == 3) {
|
33
|
+
this.subsets_.push(elements.pop());
|
34
|
+
}
|
35
|
+
this.fontFamilies_.push(elements.join(':'));
|
36
|
+
}
|
37
|
+
};
|
38
|
+
|
39
|
+
|
22
40
|
webfont.FontApiUrlBuilder.prototype.webSafe = function(string) {
|
23
41
|
return string.replace(/ /g, '+');
|
24
42
|
};
|
25
43
|
|
44
|
+
|
26
45
|
webfont.FontApiUrlBuilder.prototype.build = function() {
|
27
|
-
if (
|
46
|
+
if (this.fontFamilies_.length == 0) {
|
28
47
|
throw new Error('No fonts to load !');
|
29
48
|
}
|
30
49
|
if (this.apiUrl_.indexOf("kit=") != -1) {
|
@@ -38,5 +57,9 @@ webfont.FontApiUrlBuilder.prototype.build = function() {
|
|
38
57
|
}
|
39
58
|
var url = this.apiUrl_ + '?family=' + sb.join('%7C'); // '|' escaped.
|
40
59
|
|
60
|
+
if (this.subsets_.length > 0) {
|
61
|
+
url += '&subset=' + this.subsets_.join(',');
|
62
|
+
}
|
63
|
+
|
41
64
|
return url;
|
42
65
|
};
|
data/src/google/googlefontapi.js
CHANGED
@@ -10,10 +10,7 @@ webfont.GoogleFontApi = function(userAgent, domHelper, configuration) {
|
|
10
10
|
webfont.GoogleFontApi.NAME = 'google';
|
11
11
|
|
12
12
|
webfont.GoogleFontApi.prototype.supportUserAgent = function(userAgent, support) {
|
13
|
-
|
14
|
-
support(false);
|
15
|
-
}
|
16
|
-
return support(userAgent.isSupportingWebFont());
|
13
|
+
support(userAgent.isSupportingWebFont());
|
17
14
|
};
|
18
15
|
|
19
16
|
webfont.GoogleFontApi.prototype.load = function(onReady) {
|
data/src/modules.yml
CHANGED
data/webfontloader.gemspec
CHANGED
@@ -13,8 +13,8 @@ Gem::Specification.new do |s|
|
|
13
13
|
## If your rubyforge_project name is different, then edit it and comment out
|
14
14
|
## the sub! line in the Rakefile
|
15
15
|
s.name = 'webfontloader'
|
16
|
-
s.version = '1.0.
|
17
|
-
s.date = '
|
16
|
+
s.version = '1.0.18'
|
17
|
+
s.date = '2011-01-24'
|
18
18
|
|
19
19
|
## Make sure your summary is short. The description may be as long
|
20
20
|
## as you like.
|
@@ -87,6 +87,7 @@ DESC
|
|
87
87
|
lib/webfontloader/demo/public/event-js-loading.html
|
88
88
|
lib/webfontloader/demo/public/events-variations.html
|
89
89
|
lib/webfontloader/demo/public/events.html
|
90
|
+
lib/webfontloader/demo/public/fontdeck.html
|
90
91
|
lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html
|
91
92
|
lib/webfontloader/demo/public/google-css.html
|
92
93
|
lib/webfontloader/demo/public/google.html
|
@@ -111,6 +112,7 @@ DESC
|
|
111
112
|
src-test/core/fontwatchrunnertest.js
|
112
113
|
src-test/core/useragenttest.js
|
113
114
|
src-test/custom/customcsstest.js
|
115
|
+
src-test/fontdeck/fontdeck_script_test.js
|
114
116
|
src-test/google/fontapiparsertest.js
|
115
117
|
src-test/google/fontapiurlbuildertest.js
|
116
118
|
src-test/google/googlefontapitest.js
|
@@ -132,6 +134,7 @@ DESC
|
|
132
134
|
src/core/useragent.js
|
133
135
|
src/core/useragentparser.js
|
134
136
|
src/custom/customcss.js
|
137
|
+
src/fontdeck/fontdeck_script.js
|
135
138
|
src/google/fontapiparser.js
|
136
139
|
src/google/fontapiurlbuilder.js
|
137
140
|
src/google/googlefontapi.js
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: webfontloader
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 51
|
5
5
|
prerelease: false
|
6
6
|
segments:
|
7
7
|
- 1
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 1.0.
|
9
|
+
- 18
|
10
|
+
version: 1.0.18
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Ryan Carver
|
@@ -16,12 +16,10 @@ autorequire:
|
|
16
16
|
bindir: bin
|
17
17
|
cert_chain: []
|
18
18
|
|
19
|
-
date:
|
19
|
+
date: 2011-01-24 00:00:00 -08:00
|
20
20
|
default_executable:
|
21
21
|
dependencies:
|
22
22
|
- !ruby/object:Gem::Dependency
|
23
|
-
name: rack
|
24
|
-
prerelease: false
|
25
23
|
requirement: &id001 !ruby/object:Gem::Requirement
|
26
24
|
none: false
|
27
25
|
requirements:
|
@@ -34,10 +32,10 @@ dependencies:
|
|
34
32
|
- 1
|
35
33
|
version: 1.2.1
|
36
34
|
type: :development
|
35
|
+
name: rack
|
36
|
+
prerelease: false
|
37
37
|
version_requirements: *id001
|
38
38
|
- !ruby/object:Gem::Dependency
|
39
|
-
name: sinatra
|
40
|
-
prerelease: false
|
41
39
|
requirement: &id002 !ruby/object:Gem::Requirement
|
42
40
|
none: false
|
43
41
|
requirements:
|
@@ -49,10 +47,10 @@ dependencies:
|
|
49
47
|
- 0
|
50
48
|
version: "1.0"
|
51
49
|
type: :development
|
50
|
+
name: sinatra
|
51
|
+
prerelease: false
|
52
52
|
version_requirements: *id002
|
53
53
|
- !ruby/object:Gem::Dependency
|
54
|
-
name: vegas
|
55
|
-
prerelease: false
|
56
54
|
requirement: &id003 !ruby/object:Gem::Requirement
|
57
55
|
none: false
|
58
56
|
requirements:
|
@@ -65,6 +63,8 @@ dependencies:
|
|
65
63
|
- 6
|
66
64
|
version: 0.1.6
|
67
65
|
type: :development
|
66
|
+
name: vegas
|
67
|
+
prerelease: false
|
68
68
|
version_requirements: *id003
|
69
69
|
description: |
|
70
70
|
WebFont Loader gives you added control when using linked fonts via
|
@@ -105,6 +105,7 @@ files:
|
|
105
105
|
- lib/webfontloader/demo/public/event-js-loading.html
|
106
106
|
- lib/webfontloader/demo/public/events-variations.html
|
107
107
|
- lib/webfontloader/demo/public/events.html
|
108
|
+
- lib/webfontloader/demo/public/fontdeck.html
|
108
109
|
- lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html
|
109
110
|
- lib/webfontloader/demo/public/google-css.html
|
110
111
|
- lib/webfontloader/demo/public/google.html
|
@@ -129,6 +130,7 @@ files:
|
|
129
130
|
- src-test/core/fontwatchrunnertest.js
|
130
131
|
- src-test/core/useragenttest.js
|
131
132
|
- src-test/custom/customcsstest.js
|
133
|
+
- src-test/fontdeck/fontdeck_script_test.js
|
132
134
|
- src-test/google/fontapiparsertest.js
|
133
135
|
- src-test/google/fontapiurlbuildertest.js
|
134
136
|
- src-test/google/googlefontapitest.js
|
@@ -150,6 +152,7 @@ files:
|
|
150
152
|
- src/core/useragent.js
|
151
153
|
- src/core/useragentparser.js
|
152
154
|
- src/custom/customcss.js
|
155
|
+
- src/fontdeck/fontdeck_script.js
|
153
156
|
- src/google/fontapiparser.js
|
154
157
|
- src/google/fontapiurlbuilder.js
|
155
158
|
- src/google/googlefontapi.js
|