webfontloader 1.4.0 → 1.4.1

data/src/core/font.js

@@ -1,136 +1,117 @@
-goog.provide('webfont.WebFont');
-
-goog.require('webfont.DomHelper');
-goog.require('webfont.EventDispatcher');
-goog.require('webfont.FontWatcher');
+goog.provide('webfont.Font');
 
 /**
- * @param {Window} mainWindow The main application window containing
- *   webfontloader.js.
- * @param {webfont.FontModuleLoader} fontModuleLoader A loader instance to use.
- * @param {webfont.UserAgent} userAgent The detected user agent to load for.
+ * This class is an abstraction for a single font or typeface.
+ * It contains the font name and the variation (i.e. style
+ * and weight.) A collection Font instances can represent a
+ * font family.
+ *
  * @constructor
+ * @param {string} name The font family name
+ * @param {string=} opt_variation A font variation description
  */
-webfont.WebFont = function(mainWindow, fontModuleLoader, userAgent) {
-  this.mainWindow_ = mainWindow;
-  this.fontModuleLoader_ = fontModuleLoader;
-  this.userAgent_ = userAgent;
-  this.moduleLoading_ = 0;
-  this.moduleFailedLoading_ = 0;
+webfont.Font = function (name, opt_variation) {
+  this.name_ = name;
+  this.weight_ = 4;
+  this.style_ = 'n'
+
+  var variation = opt_variation || 'n4',
+      match = variation.match(/^([nio])([1-9])$/i);
+
+  if (match) {
+    this.style_ = match[1];
+    this.weight_ = parseInt(match[2], 10);
+  }
 };
 
 goog.scope(function () {
-  var WebFont = webfont.WebFont,
-      DomHelper = webfont.DomHelper,
-      EventDispatcher = webfont.EventDispatcher,
-      FontWatcher = webfont.FontWatcher;
+  var Font = webfont.Font;
 
   /**
-   * @param {string} name
-   * @param {webfont.FontModuleFactory} factory
+   * @return {string}
    */
-  WebFont.prototype.addModule = function(name, factory) {
-    this.fontModuleLoader_.addModuleFactory(name, factory);
+  Font.prototype.getName = function () {
+    return this.name_;
   };
 
   /**
-   * @param {Object} configuration
+   * @return {string}
    */
-  WebFont.prototype.load = function(configuration) {
-    var context = configuration['context'] || this.mainWindow_;
-    this.domHelper_ = new DomHelper(this.mainWindow_, context);
-
-    var eventDispatcher = new EventDispatcher(
-        this.domHelper_, context.document.documentElement, configuration);
-
-    if (this.userAgent_.getBrowserInfo().hasWebFontSupport()) {
-      this.load_(eventDispatcher, configuration);
-    } else {
-      eventDispatcher.dispatchInactive();
-    }
+  Font.prototype.getCssName = function () {
+    return this.quote_(this.name_);
   };
 
   /**
-   * @param {webfont.FontModule} module
-   * @param {webfont.EventDispatcher} eventDispatcher
-   * @param {webfont.FontWatcher} fontWatcher
-   * @param {boolean} support
+   * @private
+   * @param {string} name
+   * @return {string}
    */
-  WebFont.prototype.isModuleSupportingUserAgent_ = function(module, eventDispatcher,
-      fontWatcher, support) {
-    var fontWatchRunnerCtor = module.getFontWatchRunnerCtor ?
-        module.getFontWatchRunnerCtor() : webfont.FontWatchRunner,
-        that = this;
-
-    if (!support) {
-      var allModulesLoaded = --this.moduleLoading_ == 0;
-
-      this.moduleFailedLoading_--;
-      if (allModulesLoaded) {
-        if (this.moduleFailedLoading_ == 0) {
-          eventDispatcher.dispatchInactive();
-        } else {
-          eventDispatcher.dispatchLoading();
-        }
+  Font.prototype.quote_ = function (name) {
+    var quoted = [];
+    var split = name.split(/,\s*/);
+    for (var i = 0; i < split.length; i++) {
+      var part = split[i].replace(/['"]/g, '');
+      if (part.indexOf(' ') == -1) {
+        quoted.push(part);
+      } else {
+        quoted.push("'" + part + "'");
       }
-      fontWatcher.watch([], {}, {}, fontWatchRunnerCtor, allModulesLoaded);
-      return;
     }
-
-    module.load(function (fontFamilies, fontVariations) {
-      that.onModuleReady_(eventDispatcher, fontWatcher, fontWatchRunnerCtor, fontFamilies, fontVariations);
-    });
+    return quoted.join(',');
   };
 
   /**
-   * @param {webfont.EventDispatcher} eventDispatcher
-   * @param {webfont.FontWatcher} fontWatcher
-   * @param {function(new:webfont.FontWatchRunner,
-   *                  function(string, string),
-   *                  function(string, string),
-   *                  webfont.DomHelper,
-   *                  string,
-   *                  string,
-   *                  webfont.BrowserInfo,
-   *                  number=,
-   *                  Object.<string, boolean>=,
-   *                  string=)} fontWatchRunnerCtor
-   * @param {webfont.FontFamilies} fontFamilies
-   * @param {webfont.FontVariations=} opt_fontVariations
-   * @param {webfont.FontTestStrings=} opt_fontTestStrings
+   * @return {string}
    */
-  WebFont.prototype.onModuleReady_ = function(eventDispatcher, fontWatcher,
-      fontWatchRunnerCtor, fontFamilies, opt_fontVariations, opt_fontTestStrings) {
-    var allModulesLoaded = --this.moduleLoading_ == 0;
+  Font.prototype.getVariation = function () {
+    return this.style_ + this.weight_;
+  };
 
-    if (allModulesLoaded) {
-      eventDispatcher.dispatchLoading();
+  /**
+   * @return {string}
+   */
+  Font.prototype.getCssVariation = function () {
+    var style = 'normal',
+        weight = this.weight_ + '00';
+
+    if (this.style_ === 'o') {
+      style = 'oblique';
+    } else if (this.style_ === 'i') {
+      style = 'italic';
     }
 
-    setTimeout(function () {
-      fontWatcher.watch(fontFamilies, opt_fontVariations || {}, opt_fontTestStrings || {}, fontWatchRunnerCtor, allModulesLoaded);
-    }, 0);
+    return 'font-style:' + style + ';font-weight:' + weight + ';';
   };
 
   /**
-   * @param {webfont.EventDispatcher} eventDispatcher
-   * @param {Object} configuration
+   * Parses a CSS font declaration and returns a font
+   * variation description.
+   *
+   * @param {string} css
+   * @return {string}
    */
-  WebFont.prototype.load_ = function(eventDispatcher, configuration) {
-    var modules = this.fontModuleLoader_.getModules(configuration, this.domHelper_),
-        timeout = configuration['timeout'],
-        self = this;
+  Font.parseCssVariation = function (css) {
+    var weight = 4,
+        style = 'n',
+        m = null;
 
-    this.moduleFailedLoading_ = this.moduleLoading_ = modules.length;
+    if (css) {
+      m = css.match(/(normal|oblique|italic)/i);
 
-    var fontWatcher = new webfont.FontWatcher(this.userAgent_, this.domHelper_, eventDispatcher, timeout);
+      if (m && m[1]) {
+        style = m[1].substr(0, 1).toLowerCase();
+      }
 
-    for (var i = 0, len = modules.length; i < len; i++) {
-      var module = modules[i];
+      m = css.match(/([1-9]00|normal|bold)/i);
 
-      module.supportUserAgent(this.userAgent_,
-          goog.bind(this.isModuleSupportingUserAgent_, this, module,
-          eventDispatcher, fontWatcher));
+      if (m && m[1]) {
+        if (/bold/i.test(m[1])) {
+          weight = 7;
+        } else if (/[1-9]00/.test(m[1])) {
+          weight = parseInt(m[1].substr(0, 1), 10);
+        }
+      }
     }
-  };
+    return style + weight;
+  }
 });

data/src/core/fontmoduleloader.js

@@ -17,7 +17,7 @@ goog.scope(function () {
   FontModule.prototype.supportUserAgent = function (userAgent, support) {};
 
   /**
-   * @param {function(webfont.FontFamilies, webfont.FontVariations=, webfont.FontTestStrings=)} onReady
+   * @param {function(Array.<webfont.Font>,  webfont.FontTestStrings=)} onReady
    */
   FontModule.prototype.load = function (onReady) {};
 });

data/src/core/fontruler.js

@@ -1,8 +1,5 @@
 goog.provide('webfont.FontRuler');
 
-goog.require('webfont.CssFontFamilyName');
-goog.require('webfont.FontVariationDescription');
-
 /**
  * An element that can be used to measure the metrics
  * of a given font and string.
@@ -10,11 +7,9 @@ goog.require('webfont.FontVariationDescription');
  * @param {webfont.DomHelper} domHelper
  * @param {string} fontTestString
  */
-webfont.FontRuler = function(domHelper, fontTestString) {
+webfont.FontRuler = function (domHelper, fontTestString) {
   this.domHelper_ = domHelper;
   this.fontTestString_ = fontTestString;
-  this.nameHelper_ = new webfont.CssFontFamilyName();
-  this.fvd_ = new webfont.FontVariationDescription();
   this.el_ = this.domHelper_.createElement('span', {}, this.fontTestString_);
 };
 
@@ -22,12 +17,10 @@ goog.scope(function () {
   var FontRuler = webfont.FontRuler;
 
   /**
-   * @param {string} fontFamily
-   * @param {string=} opt_fontDescription
+   * @param {webfont.Font} font
    */
-  FontRuler.prototype.setFont = function(fontFamily, opt_fontDescription) {
-    var styleString = this.computeStyleString_(fontFamily, opt_fontDescription);
-    this.domHelper_.setStyle(this.el_, styleString);
+  FontRuler.prototype.setFont = function(font) {
+    this.domHelper_.setStyle(this.el_, this.computeStyleString_(font));
   };
 
   /**
@@ -39,17 +32,14 @@ goog.scope(function () {
 
   /**
    * @private
-   * @param {string} fontFamily
-   * @param {string=} opt_fontDescription
+   * @param {webfont.Font} font
    * @return {string}
    */
-  FontRuler.prototype.computeStyleString_ = function(fontFamily, opt_fontDescription) {
-    var variationCss = opt_fontDescription ? this.fvd_.expand(opt_fontDescription) : '';
-    var styleString = "position:absolute;top:-999px;left:-999px;" +
-        "font-size:300px;width:auto;height:auto;line-height:normal;margin:0;" +
-        "padding:0;font-variant:normal;white-space:nowrap;font-family:" +
-        this.nameHelper_.quote(fontFamily) + ";" + variationCss;
-    return styleString;
+  FontRuler.prototype.computeStyleString_ = function(font) {
+    return "position:absolute;top:-999px;left:-999px;" +
+           "font-size:300px;width:auto;height:auto;line-height:normal;margin:0;" +
+           "padding:0;font-variant:normal;white-space:nowrap;font-family:" +
+           font.getCssName() + ";" + font.getCssVariation();
   };
 
   /**

data/src/core/fontwatcher.js

@@ -20,96 +20,74 @@ webfont.FontWatcher = function(userAgent, domHelper, eventDispatcher, opt_timeou
   this.browserInfo_ = userAgent.getBrowserInfo();
 };
 
-/**
- * @type {string}
- * @const
- */
-webfont.FontWatcher.DEFAULT_VARIATION = 'n4';
-
 goog.scope(function () {
   var FontWatcher = webfont.FontWatcher;
 
   /**
    * Watches a set of font families.
-   * @param {Array.<string>} fontFamilies The font family names to watch.
-   * @param {Object.<string, Array.<string>>} fontDescriptions The font variations
-   *     of each family to watch. Described with FVD.
+   * @param {Array.<webfont.Font>} fonts The fonts to watch.
    * @param {Object.<string, string>} fontTestStrings The font test strings for
    *     each family.
    * @param {function(new:webfont.FontWatchRunner,
-   *                  function(string, string),
-   *                  function(string, string),
+   *                  function(webfont.Font),
+   *                  function(webfont.Font),
    *                  webfont.DomHelper,
-   *                  string,
-   *                  string,
+   *                  webfont.Font,
    *                  webfont.BrowserInfo,
    *                  number=,
    *                  Object.<string, boolean>=,
    *                  string=)} fontWatchRunnerCtor The font watch runner constructor.
-   * @param {boolean} last True if this is the last set of families to watch.
+   * @param {boolean} last True if this is the last set of fonts to watch.
    */
-  FontWatcher.prototype.watch = function(fontFamilies, fontDescriptions,
+  FontWatcher.prototype.watch = function(fonts,
       fontTestStrings, fontWatchRunnerCtor, last) {
-    var length = fontFamilies.length;
+    var length = fonts.length;
 
-    if (length === 0) {
+    if (length === 0 && last) {
       this.eventDispatcher_.dispatchInactive();
       return;
     }
 
-    for (var i = 0; i < length; i++) {
-      var fontFamily = fontFamilies[i];
-      if (!fontDescriptions[fontFamily]) {
-        fontDescriptions[fontFamily] = [webfont.FontWatcher.DEFAULT_VARIATION];
-      }
-      this.currentlyWatched_ += fontDescriptions[fontFamily].length;
-    }
+    this.currentlyWatched_ += length;
 
     if (last) {
       this.last_ = last;
     }
 
     for (var i = 0; i < length; i++) {
-      var fontFamily = fontFamilies[i];
-      var descriptions = fontDescriptions[fontFamily];
-      var fontTestString  = fontTestStrings[fontFamily];
+      var font = fonts[i];
+      var fontTestString  = fontTestStrings[font.getName()];
 
-      for (var j = 0, len = descriptions.length; j < len; j++) {
-        var fontDescription = descriptions[j];
+      this.eventDispatcher_.dispatchFontLoading(font);
 
-        this.eventDispatcher_.dispatchFontLoading(fontFamily, fontDescription);
+      var activeCallback = goog.bind(this.fontActive_, this);
+      var inactiveCallback = goog.bind(this.fontInactive_, this);
+      var fontWatchRunner = new fontWatchRunnerCtor(activeCallback,
+          inactiveCallback, this.domHelper_, font,
+          this.browserInfo_, this.timeout_, null, fontTestString);
 
-        var activeCallback = goog.bind(this.fontActive_, this);
-        var inactiveCallback = goog.bind(this.fontInactive_, this);
-        var fontWatchRunner = new fontWatchRunnerCtor(activeCallback,
-            inactiveCallback, this.domHelper_, fontFamily, fontDescription,
-            this.browserInfo_, this.timeout_, null, fontTestString);
-
-        fontWatchRunner.start();
-      }
+      fontWatchRunner.start();
     }
   };
 
   /**
    * Called by a FontWatchRunner when a font has been detected as active.
-   * @param {string} fontFamily
-   * @param {string} fontDescription
+   * @param {webfont.Font} font
    * @private
    */
-  FontWatcher.prototype.fontActive_ = function(fontFamily, fontDescription) {
-    this.eventDispatcher_.dispatchFontActive(fontFamily, fontDescription);
+  FontWatcher.prototype.fontActive_ = function(font) {
+    this.eventDispatcher_.dispatchFontActive(font);
     this.success_ = true;
     this.decreaseCurrentlyWatched_();
   };
 
   /**
    * Called by a FontWatchRunner when a font has been detected as inactive.
-   * @param {string} fontFamily
-   * @param {string} fontDescription
+   * @param {webfont.Font} font
    * @private
    */
-  FontWatcher.prototype.fontInactive_ = function(fontFamily, fontDescription) {
-    this.eventDispatcher_.dispatchFontInactive(fontFamily, fontDescription);
+  FontWatcher.prototype.fontInactive_ = function(font) {
+    this.eventDispatcher_.dispatchFontInactive(font);
     this.decreaseCurrentlyWatched_();
   };
 

data/src/core/fontwatchrunner.js

@@ -1,26 +1,25 @@
 goog.provide('webfont.FontWatchRunner');
 
+goog.require('webfont.Font');
 goog.require('webfont.FontRuler');
 
 /**
  * @constructor
- * @param {function(string, string)} activeCallback
- * @param {function(string, string)} inactiveCallback
+ * @param {function(webfont.Font)} activeCallback
+ * @param {function(webfont.Font)} inactiveCallback
  * @param {webfont.DomHelper} domHelper
- * @param {string} fontFamily
- * @param {string} fontDescription
+ * @param {webfont.Font} font
  * @param {webfont.BrowserInfo} browserInfo
  * @param {number=} opt_timeout
  * @param {Object.<string, boolean>=} opt_metricCompatibleFonts
  * @param {string=} opt_fontTestString
  */
 webfont.FontWatchRunner = function(activeCallback, inactiveCallback, domHelper,
-    fontFamily, fontDescription, browserInfo, opt_timeout, opt_metricCompatibleFonts, opt_fontTestString) {
+    font, browserInfo, opt_timeout, opt_metricCompatibleFonts, opt_fontTestString) {
   this.activeCallback_ = activeCallback;
   this.inactiveCallback_ = inactiveCallback;
   this.domHelper_ = domHelper;
-  this.fontFamily_ = fontFamily;
-  this.fontDescription_ = fontDescription;
+  this.font_ = font;
   this.fontTestString_ = opt_fontTestString || webfont.FontWatchRunner.DEFAULT_TEST_STRING;
   this.browserInfo_ = browserInfo;
   this.lastResortWidths_ = {};
@@ -55,6 +54,7 @@ webfont.FontWatchRunner.DEFAULT_TEST_STRING = 'BESbswy';
 
 goog.scope(function () {
   var FontWatchRunner = webfont.FontWatchRunner,
+      Font = webfont.Font,
       FontRuler = webfont.FontRuler;
 
   /**
@@ -67,7 +67,7 @@ goog.scope(function () {
 
     for (var font in FontWatchRunner.LastResortFonts) {
       if (FontWatchRunner.LastResortFonts.hasOwnProperty(font)) {
-        fontRuler.setFont(FontWatchRunner.LastResortFonts[font], this.fontDescription_);
+        fontRuler.setFont(new Font(FontWatchRunner.LastResortFonts[font], this.font_.getVariation()));
         this.lastResortWidths_[FontWatchRunner.LastResortFonts[font]] = fontRuler.getWidth();
       }
     }
@@ -82,8 +82,8 @@ goog.scope(function () {
 
     this.started_ = goog.now();
 
-    this.fontRulerA_.setFont(this.fontFamily_ + ',' + FontWatchRunner.LastResortFonts.SERIF, this.fontDescription_);
-    this.fontRulerB_.setFont(this.fontFamily_ + ',' + FontWatchRunner.LastResortFonts.SANS_SERIF, this.fontDescription_);
+    this.fontRulerA_.setFont(new Font(this.font_.getName() + ',' + FontWatchRunner.LastResortFonts.SERIF, this.font_.getVariation()));
+    this.fontRulerB_.setFont(new Font(this.font_.getName() + ',' + FontWatchRunner.LastResortFonts.SANS_SERIF, this.font_.getVariation()));
 
     this.check_();
   };
@@ -163,7 +163,7 @@ goog.scope(function () {
    * @return {boolean}
    */
   FontWatchRunner.prototype.isMetricCompatibleFont_ = function () {
-    return this.metricCompatibleFonts_ === null || this.metricCompatibleFonts_.hasOwnProperty(this.fontFamily_);
+    return this.metricCompatibleFonts_ === null || this.metricCompatibleFonts_.hasOwnProperty(this.font_.getName());
   };
 
   /**
@@ -205,11 +205,11 @@ goog.scope(function () {
 
   /**
    * @private
-   * @param {function(string, string)} callback
+   * @param {function(webfont.Font)} callback
    */
   FontWatchRunner.prototype.finish_ = function(callback) {
     this.fontRulerA_.remove();
     this.fontRulerB_.remove();
-    callback(this.fontFamily_, this.fontDescription_);
+    callback(this.font_);
   };
 });