webfontloader 1.0.31 → 1.1.0

data/src/core/domhelper.js

@@ -1,11 +1,17 @@
 /**
  * Handles common DOM manipulation tasks. The aim of this library is to cover
  * the needs of typical font loading. Not more, not less.
- * @param {HTMLDocument} doc The HTML document we'll manipulate.
+ * @param {Window} mainWindow The main window webfontloader.js is loaded in.
+ * @param {Window=} opt_loadWindow The window we'll load the font into. By
+ *   default, the main window is used.
  * @constructor
  */
-webfont.DomHelper = function(doc) {
-  this.document_ = doc;
+webfont.DomHelper = function(mainWindow, opt_loadWindow) {
+  this.mainWindow_ = mainWindow;
+  this.loadWindow_ = opt_loadWindow || mainWindow;
+
+  /** @type {Document} */
+  this.document_ = this.loadWindow_.document;
 
   /** @type {boolean|undefined} */
   this.supportForStyle_ = undefined;
@@ -28,7 +34,7 @@ webfont.DomHelper.prototype.createElement = function(elem, opt_attr,
       if (opt_attr.hasOwnProperty(attr)) {
         if (attr == "style") {
           this.setStyle(domElement, opt_attr[attr]);
-	} else {
+        } else {
           domElement.setAttribute(attr, opt_attr[attr]);
         }
       }
@@ -194,3 +200,29 @@ webfont.DomHelper.prototype.hasSupportForStyle_ = function() {
   }
   return this.supportForStyle_
 };
+
+/**
+ * @return {Window} The main window webfontloader.js is loaded in (for config).
+ */
+webfont.DomHelper.prototype.getMainWindow = function() {
+  return this.mainWindow_;
+};
+
+/**
+ * @return {Window} The window that we're loading the font(s) into.
+ */
+webfont.DomHelper.prototype.getLoadWindow = function() {
+  return this.loadWindow_;
+};
+
+/**
+ * @return {string} The protocol (http: or https:) to request resources in.
+ */
+webfont.DomHelper.prototype.getProtocol = function() {
+  var protocol = this.loadWindow_.location.protocol;
+  // For empty iframes, fallback to main window's protocol.
+  if (protocol == 'about:') {
+    protocol = this.mainWindow_.location.protocol;
+  }
+  return protocol == 'https:' ? 'https:' : 'http:';
+};

data/src/core/font.js

@@ -1,11 +1,14 @@
 /**
+ * @param {Window} mainWindow The main application window containing
+ *   webfontloader.js.
+ * @param {webfont.FontModuleLoader} fontModuleLoader A loader instance to use.
+ * @param {function(function(), number=)} asyncCall An async function to use.
+ * @param {webfont.UserAgent} userAgent The detected user agent to load for.
  * @constructor
  */
-webfont.WebFont = function(domHelper, fontModuleLoader, htmlElement, asyncCall,
-    userAgent) {
-  this.domHelper_ = domHelper;
+webfont.WebFont = function(mainWindow, fontModuleLoader, asyncCall, userAgent) {
+  this.mainWindow_ = mainWindow;
   this.fontModuleLoader_ = fontModuleLoader;
-  this.htmlElement_ = htmlElement;
   this.asyncCall_ = asyncCall;
   this.userAgent_ = userAgent;
   this.moduleLoading_ = 0;
@@ -17,8 +20,11 @@ webfont.WebFont.prototype.addModule = function(name, factory) {
 };
 
 webfont.WebFont.prototype.load = function(configuration) {
+  var context = configuration['context'] || this.mainWindow_;
+  this.domHelper_ = new webfont.DomHelper(this.mainWindow_, context);
+
   var eventDispatcher = new webfont.EventDispatcher(
-      this.domHelper_, this.htmlElement_, configuration);
+      this.domHelper_, context.document.documentElement, configuration);
 
   if (this.userAgent_.isSupportingWebFont()) {
     this.load_(eventDispatcher, configuration);
@@ -66,7 +72,7 @@ webfont.WebFont.prototype.onModuleReady_ = function(eventDispatcher, fontWatcher
 };
 
 webfont.WebFont.prototype.load_ = function(eventDispatcher, configuration) {
-  var modules = this.fontModuleLoader_.getModules(configuration),
+  var modules = this.fontModuleLoader_.getModules(configuration, this.domHelper_),
       self = this;
 
   this.moduleFailedLoading_ = this.moduleLoading_ = modules.length;

data/src/core/fontmoduleloader.js

@@ -9,7 +9,7 @@ webfont.FontModuleLoader.prototype.addModuleFactory = function(name, factory) {
   this.modules_[name] = factory;
 };
 
-webfont.FontModuleLoader.prototype.getModules = function(configuration) {
+webfont.FontModuleLoader.prototype.getModules = function(configuration, domHelper) {
   var modules = [];
 
   for (var key in configuration) {
@@ -17,7 +17,7 @@ webfont.FontModuleLoader.prototype.getModules = function(configuration) {
       var moduleFactory = this.modules_[key];
 
       if (moduleFactory) {
-        modules.push(moduleFactory(configuration[key]));
+        modules.push(moduleFactory(configuration[key], domHelper));
       }
     }
   }

data/src/core/initialize.js

@@ -5,11 +5,10 @@ var globalName = 'WebFont';
 var globalNamespaceObject = window[globalName] = (function() {
   var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
   var userAgent = userAgentParser.parse();
-  var domHelper = new webfont.DomHelper(document);
+  var fontModuleLoader = new webfont.FontModuleLoader();
   var asyncCall = function(func, timeout) { setTimeout(func, timeout); };
 
-  return new webfont.WebFont(domHelper, new webfont.FontModuleLoader(),
-      document.documentElement, asyncCall, userAgent);
+  return new webfont.WebFont(window, fontModuleLoader, asyncCall, userAgent);
 })();
 
 // Export the public API.

data/src/custom/customcss.js

@@ -31,7 +31,6 @@ webfont.CustomCss.prototype.supportUserAgent = function(userAgent, support) {
   return support(userAgent.isSupportingWebFont());
 };
 
-globalNamespaceObject.addModule(webfont.CustomCss.NAME, function(configuration) {
-  var domHelper = new webfont.DomHelper(document);
+globalNamespaceObject.addModule(webfont.CustomCss.NAME, function(configuration, domHelper) {
   return new webfont.CustomCss(domHelper, configuration);
 });

data/src/fontdeck/fontdeck_script.js

@@ -1,8 +1,7 @@
 /**
  * @constructor
  */
-webfont.FontdeckScript = function(global, domHelper, configuration) {
-  this.global_ = global;
+webfont.FontdeckScript = function(domHelper, configuration) {
   this.domHelper_ = domHelper;
   this.configuration_ = configuration;
   this.fontFamilies_ = [];
@@ -15,24 +14,28 @@ webfont.FontdeckScript.HOOK = '__webfontfontdeckmodule__';
 webfont.FontdeckScript.API = '//f.fontdeck.com/s/css/js/';
 
 webfont.FontdeckScript.prototype.getScriptSrc = function(projectId) {
-  var protocol = 'https:' == this.global_.location.protocol ? 'https:' : 'http:';
+  var protocol = this.domHelper_.getProtocol();
+  // For empty iframes, fall back to main window's hostname.
+  var hostname = this.domHelper_.getLoadWindow().location.hostname ||
+      this.domHelper_.getMainWindow().location.hostname;
   var api = this.configuration_['api'] || webfont.FontdeckScript.API;
-  return protocol + api + this.global_.document.location.hostname + '/' + projectId + '.js';
+  return protocol + api + hostname + '/' + projectId + '.js';
 };
 
 webfont.FontdeckScript.prototype.supportUserAgent = function(userAgent, support) {
   var projectId = this.configuration_['id'];
+  var loadWindow = this.domHelper_.getLoadWindow();
   var self = this;
 
   if (projectId) {
     // Provide data to Fontdeck for processing.
-    if (!this.global_[webfont.FontdeckScript.HOOK]) {
-      this.global_[webfont.FontdeckScript.HOOK] = {};
+    if (!loadWindow[webfont.FontdeckScript.HOOK]) {
+      loadWindow[webfont.FontdeckScript.HOOK] = {};
     }
 
     // Fontdeck will call this function to indicate support status
     // and what fonts are provided.
-    this.global_[webfont.FontdeckScript.HOOK][projectId] = function(fontdeckSupports, data) {
+    loadWindow[webfont.FontdeckScript.HOOK][projectId] = function(fontdeckSupports, data) {
       for (var i = 0, j = data['fonts'].length; i<j; ++i) {
         var font = data['fonts'][i];
         // Add the FVDs
@@ -55,7 +58,6 @@ webfont.FontdeckScript.prototype.load = function(onReady) {
   onReady(this.fontFamilies_, this.fontVariations_);
 };
 
-globalNamespaceObject.addModule(webfont.FontdeckScript.NAME, function(configuration) {
-  var domHelper = new webfont.DomHelper(document);
-  return new webfont.FontdeckScript(window, domHelper, configuration);
+globalNamespaceObject.addModule(webfont.FontdeckScript.NAME, function(configuration, domHelper) {
+  return new webfont.FontdeckScript(domHelper, configuration);
 });

data/src/google/fontapiurlbuilder.js

@@ -1,12 +1,10 @@
 /**
  * @constructor
  */
-webfont.FontApiUrlBuilder = function(apiUrl) {
+webfont.FontApiUrlBuilder = function(apiUrl, protocol) {
   if (apiUrl) {
     this.apiUrl_ = apiUrl;
   } else {
-    var protocol = 'https:' == window.location.protocol ? 'https:' : 'http:';
-
     this.apiUrl_ = protocol + webfont.FontApiUrlBuilder.DEFAULT_API_URL;
   }
   this.fontFamilies_ = [];

data/src/google/googlefontapi.js

@@ -35,7 +35,7 @@ webfont.GoogleFontApi.prototype.load = function(onReady) {
 webfont.GoogleFontApi.prototype.insertLink_ = function(onReady) {
   var domHelper = this.domHelper_;
   var fontApiUrlBuilder = new webfont.FontApiUrlBuilder(
-      this.configuration_['api']);
+      this.configuration_['api'], domHelper.getProtocol());
   var fontFamilies = this.configuration_['families'];
   fontApiUrlBuilder.setFontFamilies(fontFamilies);
 
@@ -48,9 +48,8 @@ webfont.GoogleFontApi.prototype.insertLink_ = function(onReady) {
       fontApiParser.getFontTestStrings());
 };
 
-globalNamespaceObject.addModule(webfont.GoogleFontApi.NAME, function(configuration) {
+globalNamespaceObject.addModule(webfont.GoogleFontApi.NAME, function(configuration, domHelper) {
   var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
   var userAgent = userAgentParser.parse();
-  return new webfont.GoogleFontApi(userAgent, new webfont.DomHelper(document),
-      configuration);
+  return new webfont.GoogleFontApi(userAgent, domHelper, configuration);
 });

data/src/monotype/monotype_script.js

@@ -9,11 +9,9 @@ projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'//this is your Fonts.com Web fo
 /**
  * @constructor
  */
-webfont.MonotypeScript = function (global, userAgent, domHelper, doc, configuration) {
-  this.global_ = global;
+webfont.MonotypeScript = function (userAgent, domHelper, configuration) {
   this.userAgent_ = userAgent;
   this.domHelper_ = domHelper;
-  this.doc_ = doc;
   this.configuration_ = configuration;
   this.fontFamilies_ = [];
   this.fontVariations_ = {};
@@ -32,7 +30,7 @@ webfont.MonotypeScript.NAME = 'monotype';
 webfont.MonotypeScript.HOOK = '__mti_fntLst';
 
 /**
- * __MonotypeAPIScript__ is the id of script added by google API. Currently 'webfonts.fonts.com' supports only one script in a page. 
+ * __MonotypeAPIScript__ is the id of script added by google API. Currently 'webfonts.fonts.com' supports only one script in a page.
  * This may require change in future if 'webfonts.fonts.com' begins supporting multiple scripts per page.
  * @const
  */
@@ -52,9 +50,10 @@ webfont.MonotypeScript.prototype.supportUserAgent = function (userAgent, support
       }
     };
 
+    var loadWindow = this.domHelper_.getLoadWindow();
     sc["onload"] = function (e) {
-      if (self.global_[webfont.MonotypeScript.HOOK + projectId]) {
-        var mti_fnts = self.global_[webfont.MonotypeScript.HOOK + projectId]();
+      if (loadWindow[webfont.MonotypeScript.HOOK + projectId]) {
+        var mti_fnts = loadWindow[webfont.MonotypeScript.HOOK + projectId]();
         if (mti_fnts && mti_fnts.length) {
           var i;
           for (i = 0; i < mti_fnts.length; i++) {
@@ -73,7 +72,7 @@ webfont.MonotypeScript.prototype.supportUserAgent = function (userAgent, support
 };
 
 webfont.MonotypeScript.prototype.getScriptSrc = function (projectId) {
-  var p = this.protocol();
+  var p = this.domHelper_.getProtocol();
   var api = (this.configuration_['api'] || 'fast.fonts.com/jsapi').replace(/^.*http(s?):(\/\/)?/, "");
   return p + "//" + api + '/' + projectId + '.js';
 };
@@ -82,24 +81,8 @@ webfont.MonotypeScript.prototype.load = function (onReady) {
   onReady(this.fontFamilies_, this.fontVariations_);
 };
 
-webfont.MonotypeScript.prototype.protocol = function () {
-  var supportedProtocols = ["http:", "https:"];
-  var defaultProtocol = supportedProtocols[0];
-  if (this.doc_ && this.doc_.location && this.doc_.location.protocol) {
-    var i = 0;
-    for (i = 0; i < supportedProtocols.length; i++) {
-      if (this.doc_.location.protocol === supportedProtocols[i]) {
-        return this.doc_.location.protocol;
-      }
-    }
-  }
-
-  return defaultProtocol;
-};
-
-globalNamespaceObject.addModule(webfont.MonotypeScript.NAME, function (configuration) {
+globalNamespaceObject.addModule(webfont.MonotypeScript.NAME, function (configuration, domHelper) {
   var userAgentParser = new webfont.UserAgentParser(navigator.userAgent, document);
   var userAgent = userAgentParser.parse();
-  var domHelper = new webfont.DomHelper(document);
-  return new webfont.MonotypeScript(window, userAgent, domHelper, document, configuration);
+  return new webfont.MonotypeScript(userAgent, domHelper, configuration);
 });

data/src/typekit/typekit_script.js

@@ -1,8 +1,7 @@
 /**
  * @constructor
  */
-webfont.TypekitScript = function(global, domHelper, configuration) {
-  this.global_ = global;
+webfont.TypekitScript = function(domHelper, configuration) {
   this.domHelper_ = domHelper;
   this.configuration_ = configuration;
   this.fontFamilies_ = [];
@@ -13,7 +12,7 @@ webfont.TypekitScript.NAME = 'typekit';
 webfont.TypekitScript.HOOK = '__webfonttypekitmodule__';
 
 webfont.TypekitScript.prototype.getScriptSrc = function(kitId) {
-  var protocol = 'https:' == window.location.protocol ? 'https:' : 'http:';
+  var protocol = this.domHelper_.getProtocol();
   var api = this.configuration_['api'] || protocol + '//use.typekit.com';
   return api + '/' + kitId + '.js';
 };
@@ -21,17 +20,18 @@ webfont.TypekitScript.prototype.getScriptSrc = function(kitId) {
 webfont.TypekitScript.prototype.supportUserAgent = function(userAgent, support) {
   var kitId = this.configuration_['id'];
   var configuration = this.configuration_;
+  var loadWindow = this.domHelper_.getLoadWindow();
   var self = this;
 
   if (kitId) {
-    // Provide data to Typekit for processing.
-    if (!this.global_[webfont.TypekitScript.HOOK]) {
-      this.global_[webfont.TypekitScript.HOOK] = {};
+    // Provide data to Typekit for processing.main
+    if (!loadWindow[webfont.TypekitScript.HOOK]) {
+      loadWindow[webfont.TypekitScript.HOOK] = {};
     }
 
     // Typekit will call 'init' to indicate whether it supports fonts
     // and what fonts will be provided.
-    this.global_[webfont.TypekitScript.HOOK][kitId] = function(callback) {
+    loadWindow[webfont.TypekitScript.HOOK][kitId] = function(callback) {
       var init = function(typekitSupports, fontFamilies, fontVariations) {
         self.fontFamilies_ = fontFamilies;
         self.fontVariations_ = fontVariations;
@@ -53,8 +53,7 @@ webfont.TypekitScript.prototype.load = function(onReady) {
   onReady(this.fontFamilies_, this.fontVariations_);
 };
 
-globalNamespaceObject.addModule(webfont.TypekitScript.NAME, function(configuration) {
-  var domHelper = new webfont.DomHelper(document);
-  return new webfont.TypekitScript(window, domHelper, configuration);
+globalNamespaceObject.addModule(webfont.TypekitScript.NAME, function(configuration, domHelper) {
+  return new webfont.TypekitScript(domHelper, configuration);
 });
 

data/src-test/ascender/ascender_script_test.js

@@ -14,6 +14,9 @@ AscenderScriptTest.prototype.testLoadAndFamilyVariations = function(){
       createCssLink: function(cssLink) {
         css = cssLink;
         return '<link href="' + css + '" type="text/css" />';
+      },
+      getProtocol: function() {
+        return 'http:';
       }
   };
 

data/src-test/core/domhelpertest.js

@@ -1,7 +1,7 @@
 var DomHelperTest = TestCase('DomHelperTest');
 
 DomHelperTest.prototype.setUp = function() {
-  this.domHelper_ = new webfont.DomHelper(document);
+  this.domHelper_ = new webfont.DomHelper(window);
 };
 
 DomHelperTest.prototype.testCreateElementNoAttr = function() {
@@ -106,3 +106,46 @@ DomHelperTest.prototype.testHasSupportForStyle = function() {
   this.domHelper_.supportForStyle_ = true;
   assertTrue(this.domHelper_.hasSupportForStyle_());
 };
+
+DomHelperTest.prototype.testGetWindows = function() {
+  var fakeMainWindow = 'main window';
+  var fakeLoadWindow = 'load window';
+  var domHelper = new webfont.DomHelper(fakeMainWindow, fakeLoadWindow);
+  assertEquals('main window', domHelper.getMainWindow());
+  assertEquals('load window', domHelper.getLoadWindow());
+};
+
+DomHelperTest.prototype.testGetProtocol = function() {
+  var fakeWindow = {
+    location: {
+      protocol: 'https:'
+    }
+  };
+  var domHelper = new webfont.DomHelper(fakeWindow);
+  assertEquals('https:', domHelper.getProtocol());
+};
+
+DomHelperTest.prototype.testGetProtocolHttpDefault = function() {
+  var fakeWindow = {
+    location: {
+      protocol: 'file:'
+    }
+  };
+  var domHelper = new webfont.DomHelper(fakeWindow);
+  assertEquals('http:', domHelper.getProtocol());
+};
+
+DomHelperTest.prototype.testGetProtocolIframeFallback = function() {
+  var fakeMainWindow = {
+    location: {
+      protocol: 'https:'
+    }
+  };
+  var fakeLoadWindow = {
+    location: {
+      protocol: 'about:'
+    }
+  };
+  var domHelper = new webfont.DomHelper(fakeMainWindow, fakeLoadWindow);
+  assertEquals('https:', domHelper.getProtocol());
+};

data/src-test/core/eventdispatchertest.js

@@ -15,7 +15,7 @@ EventDispatcherTest.prototype.setUp = function() {
   var self = this;
 
   this.eventDispatcher_ = new webfont.EventDispatcher(new webfont.DomHelper(
-      document), this.fakeHtmlElement_, {
+      window), this.fakeHtmlElement_, {
         loading: function() {
           self.loadingEventCalled_ = true;
         },

data/src-test/core/fonttest.js

@@ -1,49 +1,38 @@
 var FontTest = TestCase('FontTest');
 
 FontTest.prototype.setUp = function() {
-  this.fakeHtmlElement_ = { className: '' };
-  this.fakeDomHelper_ = {
-    appendClassName: function() {},
-    removeClassName: function() {},
-    hasClassName: function() {},
-    createElement: function(name) {
-      return document.createElement(name);
-    },
-    insertInto: function() {},
-    removeElement: function() {}
-  };
   this.fontModuleLoader_ = new webfont.FontModuleLoader();
 };
 
 FontTest.prototype.testFontLoad = function() {
   var userAgent = new webfont.UserAgent('Firefox', '3.6', 'Gecko', '1.9.2',
       'Macintosh', '10.6', undefined, true);
-  var font = new webfont.WebFont(this.fakeDomHelper_, this.fontModuleLoader_,
-      this.fakeHtmlElement_, function(func, timeout) { func(); }, userAgent);
-  var self = this;
+  var font = new webfont.WebFont(window, this.fontModuleLoader_,
+      function(func, timeout) { func(); }, userAgent);
   var testModule = null;
 
-  font.addModule('test', function(conf) {
+  font.addModule('test', function(conf, domHelper) {
     testModule = new function() {
       this.conf = conf;
+      this.domHelper = domHelper;
       this.loadCalled = false;
       this.supportUserAgentCalled = false;
-   };
-   testModule.load = function(onReady) {
-     this.loadCalled = true;
-     onReady([]);
     };
-   testModule.supportUserAgent = function(ua, support) {
-     this.supportUserAgentCalled = true;
-     support(true);
-   };
-   return testModule;
+    testModule.load = function(onReady) {
+      this.loadCalled = true;
+      onReady([]);
+    };
+    testModule.supportUserAgent = function(ua, support) {
+      this.supportUserAgentCalled = true;
+      support(true);
+    };
+    return testModule;
   });
-  var loadingEventCalled = false;
 
   assertEquals(0, font.moduleFailedLoading_);
   assertEquals(0, font.moduleLoading_);
 
+  var loadingEventCalled = false;
   font.load({
       test: {
         somedata: 'in french a cow says meuh'
@@ -58,17 +47,53 @@ FontTest.prototype.testFontLoad = function() {
   assertNotNull(testModule);
   assertNotUndefined(testModule.conf);
   assertNotNull(testModule.conf);
+  assertNotUndefined(testModule.domHelper);
+  assertNotNull(testModule.domHelper);
+  assertSame(window, testModule.domHelper.getMainWindow());
+  assertSame(window, testModule.domHelper.getLoadWindow());
   assertEquals('in french a cow says meuh', testModule.conf.somedata);
   assertTrue(testModule.loadCalled);
   assertTrue(testModule.supportUserAgentCalled);
   assertTrue(loadingEventCalled);
 };
 
+FontTest.prototype.testFontLoadWithContext = function() {
+  var fakeMainWindow = {};
+
+  var userAgent = new webfont.UserAgent('Firefox', '3.6', 'Gecko', '1.9.2',
+      'Macintosh', '10.6', undefined, true);
+  var font = new webfont.WebFont(fakeMainWindow, this.fontModuleLoader_,
+      function(func, timeout) { func(); }, userAgent);
+  var testModule = null;
+
+  font.addModule('test', function(conf, domHelper) {
+    testModule = new function() {
+      this.domHelper = domHelper;
+    };
+    testModule.load = function() {};
+    testModule.supportUserAgent = function(ua, support) {
+      support(true);
+    };
+    return testModule;
+  });
+
+  font.load({
+    test: {
+      somedata: 'in french a cow says meuh'
+    },
+    context: window
+  });
+
+  assertNotUndefined(testModule.domHelper);
+  assertNotNull(testModule.domHelper);
+  assertSame(fakeMainWindow, testModule.domHelper.getMainWindow());
+  assertSame(window, testModule.domHelper.getLoadWindow());
+};
+
 FontTest.prototype.testFontInactive = function() {
   var userAgent = new webfont.UserAgent('Firefox', '3.0', false);
-  var font = new webfont.WebFont(this.fakeDomHelper_, this.fontModuleLoader_,
-      this.fakeHtmlElement_, function(func, timeout) { func(); }, userAgent);
-  var self = this;
+  var font = new webfont.WebFont(window, this.fontModuleLoader_,
+      function(func, timeout) { func(); }, userAgent);
   var testModule;
 
   font.addModule('test', function(conf) {