Skip to content
This repository
  • 6 commits
  • 9 files changed
  • 0 comments
  • 1 contributor
Apr 18, 2012
Remove UserAgent from DomHelper, replace with feature detection
UserAgent was required to construct a DomHelper, but the only thing it was
used for is in setStyle to determine if we're in an old IE and need to use a
different approach. I was using DomHelper in some code and finding it cumbersome
to have a UserAgent instance around as well. This goal is better accomplished
with a feature-detection approach anyway.

I've replaced the UserAgent arg with feature detection for getting/setting the
style attribute. This is a very similar approach to the one that jQuery uses to
detect the same feature.

This has the added side-effect of allowing many of the modules to no longer
construct a UserAgent instance using the parser, since they only used it for the
DomHelper, which simplifies things.
f31011c
Move feature detection out of the constructor
Otherwise, the JS can't run in environments that don't have a DOM
implementation, which makes things difficult.
410db65
Use a "feature detect on first call" style to avoid constructor DOM
This is a less onerous way to avoid DOM construction caused by the DomHelper
constructor. We make a method to check if a feature is supported and memoize
the value the first time it's called.
41cf459
Fix type union syntax for Closure compiler 53e4b1f
Add an additional test for the feature detection behavior bce89f1
Apr 20, 2012
Merge pull request #50 from typekit/sm-domhelper-update
Remove UserAgent from DomHelper, replace with feature detection
552ad81
21  src-test/core/domhelpertest.js
... ...
@@ -1,8 +1,7 @@
1 1
 var DomHelperTest = TestCase('DomHelperTest');
2 2
 
3 3
 DomHelperTest.prototype.setUp = function() {
4  
-  this.domHelper_ = new webfont.DomHelper(document, new webfont.UserAgent("name", "version",
5  
-      "engine", "engineVersion", "platform", "platformVersion", true));
  4
+  this.domHelper_ = new webfont.DomHelper(document);
6 5
 };
7 6
 
8 7
 DomHelperTest.prototype.testCreateElementNoAttr = function() {
@@ -90,4 +89,20 @@ DomHelperTest.prototype.testHasClassName = function() {
90 89
   assertTrue(this.domHelper_.hasClassName(div, 'moo-meuh'));
91 90
   assertFalse(this.domHelper_.hasClassName(div, 'meuh'));
92 91
   assertFalse(this.domHelper_.hasClassName(div, 'missingClassName'));
93  
-}
  92
+};
  93
+
  94
+DomHelperTest.prototype.testSetStyle = function() {
  95
+  var e = this.domHelper_.createElement('span')
  96
+  this.domHelper_.setStyle(e, 'left:3px;top:1px;');
  97
+  assertEquals('3px', e.style.left)
  98
+  assertEquals('1px', e.style.top);
  99
+};
  100
+
  101
+DomHelperTest.prototype.testHasSupportForStyle = function() {
  102
+  assertUndefined(this.domHelper_.supportForStyle_);
  103
+  assertBoolean(this.domHelper_.hasSupportForStyle_());
  104
+  this.domHelper_.supportForStyle_ = false;
  105
+  assertFalse(this.domHelper_.hasSupportForStyle_());
  106
+  this.domHelper_.supportForStyle_ = true;
  107
+  assertTrue(this.domHelper_.hasSupportForStyle_());
  108
+};
4  src/ascender/ascender_script.js
@@ -79,8 +79,6 @@ webfont.AscenderScript.prototype.parseVariations = function(source){
79 79
 };
80 80
 
81 81
 window['WebFont'].addModule(webfont.AscenderScript.NAME, function(configuration) {
82  
-  var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
83  
-  var userAgent = userAgentParser.parse();
84  
-  var domHelper = new webfont.DomHelper(document, userAgent);
  82
+  var domHelper = new webfont.DomHelper(document);
85 83
   return new webfont.AscenderScript(domHelper, configuration);
86 84
 });
29  src/core/domhelper.js
@@ -2,12 +2,13 @@
2 2
  * Handles common DOM manipulation tasks. The aim of this library is to cover
3 3
  * the needs of typical font loading. Not more, not less.
4 4
  * @param {HTMLDocument} doc The HTML document we'll manipulate.
5  
- * @param {webfont.UserAgent} userAgent The current user agent.
6 5
  * @constructor
7 6
  */
8  
-webfont.DomHelper = function(doc, userAgent) {
  7
+webfont.DomHelper = function(doc) {
9 8
   this.document_ = doc;
10  
-  this.userAgent_ = userAgent;
  9
+
  10
+  /** @type {boolean|undefined} */
  11
+  this.supportForStyle_ = undefined;
11 12
 };
12 13
 
13 14
 /**
@@ -171,9 +172,25 @@ webfont.DomHelper.prototype.hasClassName = function(e, name) {
171 172
  * @param {string} styleString The style string.
172 173
  */
173 174
 webfont.DomHelper.prototype.setStyle = function(e, styleString) {
174  
-  if (this.userAgent_.getName() == "MSIE") {
175  
-    e.style.cssText = styleString;
176  
-  } else {
  175
+  if (this.hasSupportForStyle_()) {
177 176
     e.setAttribute("style", styleString);
  177
+  } else {
  178
+    e.style.cssText = styleString;
  179
+  }
  180
+};
  181
+
  182
+/**
  183
+ * Check if getting and setting the style attribute on an element with
  184
+ * getAttribute/setAttribute is supported. In old IE, you must use style.cssText
  185
+ * instead. Feature detection is only done the first time this is called.
  186
+ * @private
  187
+ * @return {boolean} Whether or not the feature is supported.
  188
+ */
  189
+webfont.DomHelper.prototype.hasSupportForStyle_ = function() {
  190
+  if (this.supportForStyle_ === undefined) {
  191
+    var e = this.document_.createElement('p');
  192
+    e.innerHTML = '<a style="top:1px;">w</a>';
  193
+    this.supportForStyle_ = /top/.test(e.getElementsByTagName('a')[0].getAttribute('style'));
178 194
   }
  195
+  return this.supportForStyle_
179 196
 };
2  src/core/initialize.js
@@ -5,7 +5,7 @@ var globalName = 'WebFont';
5 5
 window[globalName] = (function() {
6 6
   var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
7 7
   var userAgent = userAgentParser.parse();
8  
-  var domHelper = new webfont.DomHelper(document, userAgent);
  8
+  var domHelper = new webfont.DomHelper(document);
9 9
   var asyncCall = function(func, timeout) { setTimeout(func, timeout); };
10 10
 
11 11
   return new webfont.WebFont(domHelper, new webfont.FontModuleLoader(),
4  src/custom/customcss.js
@@ -32,8 +32,6 @@ webfont.CustomCss.prototype.supportUserAgent = function(userAgent, support) {
32 32
 };
33 33
 
34 34
 window['WebFont'].addModule(webfont.CustomCss.NAME, function(configuration) {
35  
-  var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
36  
-  var userAgent = userAgentParser.parse();
37  
-  var domHelper = new webfont.DomHelper(document, userAgent);
  35
+  var domHelper = new webfont.DomHelper(document);
38 36
   return new webfont.CustomCss(domHelper, configuration);
39 37
 });
4  src/fontdeck/fontdeck_script.js
@@ -56,8 +56,6 @@ webfont.FontdeckScript.prototype.load = function(onReady) {
56 56
 };
57 57
 
58 58
 window['WebFont'].addModule(webfont.FontdeckScript.NAME, function(configuration) {
59  
-  var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
60  
-  var userAgent = userAgentParser.parse();
61  
-  var domHelper = new webfont.DomHelper(document, userAgent);
  59
+  var domHelper = new webfont.DomHelper(document);
62 60
   return new webfont.FontdeckScript(window, domHelper, configuration);
63 61
 });
4  src/google/googlefontapi.js
@@ -51,6 +51,6 @@ webfont.GoogleFontApi.prototype.insertLink_ = function(onReady) {
51 51
 window['WebFont'].addModule(webfont.GoogleFontApi.NAME, function(configuration) {
52 52
   var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
53 53
   var userAgent = userAgentParser.parse();
54  
-  return new webfont.GoogleFontApi(userAgent,
55  
-      new webfont.DomHelper(document, userAgent), configuration);
  54
+  return new webfont.GoogleFontApi(userAgent, new webfont.DomHelper(document),
  55
+      configuration);
56 56
 });
2  src/monotype/monotype_script.js
@@ -100,6 +100,6 @@ webfont.MonotypeScript.prototype.protocol = function () {
100 100
 window['WebFont'].addModule(webfont.MonotypeScript.NAME, function (configuration) {
101 101
   var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
102 102
   var userAgent = userAgentParser.parse();
103  
-  var domHelper = new webfont.DomHelper(document, userAgent);
  103
+  var domHelper = new webfont.DomHelper(document);
104 104
   return new webfont.MonotypeScript(window, userAgent, domHelper, document, configuration);
105 105
 });
4  src/typekit/typekit_script.js
@@ -54,9 +54,7 @@ webfont.TypekitScript.prototype.load = function(onReady) {
54 54
 };
55 55
 
56 56
 window['WebFont'].addModule(webfont.TypekitScript.NAME, function(configuration) {
57  
-  var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
58  
-  var userAgent = userAgentParser.parse();
59  
-  var domHelper = new webfont.DomHelper(document, userAgent);
  57
+  var domHelper = new webfont.DomHelper(document);
60 58
   return new webfont.TypekitScript(window, domHelper, configuration);
61 59
 });
62 60
 

No commit comments for this range

Something went wrong with that request. Please try again.