Downstream updates from fontfaceonload

filamentgroup · Oct 30, 2014 · ccfa51d · ccfa51d
1 parent e38325f
commit ccfa51d
Showing 1 changed file with 65 additions and 25 deletions.
diff --git a/src/fontfaceonload.js b/src/fontfaceonload.js
@@ -1,4 +1,4 @@
-/*! fontfaceonload - v0.1.0 - 2014-08-04
+/*! fontfaceonload - v0.1.2 - 2014-10-29
  * https://github.com/zachleat/fontfaceonload
  * Copyright (c) 2014 Zach Leatherman (@zachleat)
  * MIT License */
@@ -13,15 +13,37 @@
 		SANS_SERIF_FONTS = 'sans-serif',
 		SERIF_FONTS = 'serif',
 
-		parent,
-		html = '<div style="font-family:%s;position:absolute;top:0;left:-9999px;font-size:48px">' + TEST_STRING + '</div>',
-		sansSerif,
-		serif,
-		dimensions,
-		appended = false;
+		// See https://github.com/typekit/webfontloader/blob/master/src/core/fontruler.js#L41
+		style = [
+			'display:block',
+			'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:%s'
+		].join(';'),
+		html = '<div style="' + style + '">' + TEST_STRING + '</div>';
+
+	var FontFaceOnloadInstance = function() {
+		this.appended = false;
+		this.dimensions = undefined;
+		this.serif = undefined;
+		this.sansSerif = undefined;
+		this.parent = undefined;
+	};
+
+	FontFaceOnloadInstance.prototype.initialMeasurements = function ( fontFamily ) {
+		var sansSerif = this.sansSerif;
+		var serif = this.serif;
 
-	function initialMeasurements( fontFamily ) {
-		dimensions = {
+		this.dimensions = {
 			sansSerif: {
 				width: sansSerif.offsetWidth,
 				height: sansSerif.offsetHeight
@@ -37,18 +59,26 @@
 		// loaded.
 		sansSerif.style.fontFamily = fontFamily + ', ' + SANS_SERIF_FONTS;
 		serif.style.fontFamily = fontFamily + ', ' + SERIF_FONTS;
-	}
+	};
 
-	function load( fontFamily, options ) {
-		var startTime = new Date();
+	FontFaceOnloadInstance.prototype.load = function ( fontFamily, options ) {
+		var startTime = new Date(),
+			that = this,
+			serif = that.serif,
+			sansSerif = that.sansSerif,
+			parent = that.parent,
+			appended = that.appended,
+			dimensions = that.dimensions,
+			tolerance = options.tolerance || TOLERANCE,
+			delay = options.delay || DELAY;
 
 		if( !parent ) {
-			parent = doc.createElement( 'div' );
+			parent = that.parent = doc.createElement( 'div' );
 		}
 
 		parent.innerHTML = html.replace(/\%s/, SANS_SERIF_FONTS ) + html.replace(/\%s/, SERIF_FONTS );
-		sansSerif = parent.firstChild;
-		serif = sansSerif.nextSibling;
+		sansSerif = that.sansSerif = parent.firstChild;
+		serif = that.serif = sansSerif.nextSibling;
 
 		if( options.glyphs ) {
 			sansSerif.innerHTML += options.glyphs;
@@ -57,29 +87,32 @@
 
 		(function checkDimensions() {
 			if( !appended && doc.body ) {
-				appended = true;
+				appended = that.appended = true;
 				doc.body.appendChild( parent );
 
-				initialMeasurements( fontFamily );
+				that.initialMeasurements( fontFamily );
 			}
 
+			dimensions = that.dimensions;
+
 			if( appended && dimensions &&
-				( Math.abs( dimensions.sansSerif.width - sansSerif.offsetWidth ) > TOLERANCE ||
-					Math.abs( dimensions.sansSerif.height - sansSerif.offsetHeight ) > TOLERANCE ||
-					Math.abs( dimensions.serif.width - serif.offsetWidth ) > TOLERANCE ||
-					Math.abs( dimensions.serif.height - serif.offsetHeight ) > TOLERANCE ) ) {
+				( Math.abs( dimensions.sansSerif.width - sansSerif.offsetWidth ) > tolerance ||
+					Math.abs( dimensions.sansSerif.height - sansSerif.offsetHeight ) > tolerance ||
+					Math.abs( dimensions.serif.width - serif.offsetWidth ) > tolerance ||
+					Math.abs( dimensions.serif.height - serif.offsetHeight ) > tolerance ) ) {
 				options.success();
 			} else if( ( new Date() ).getTime() - startTime.getTime() > options.timeout ) {
 				options.error();
 			} else {
 				setTimeout(function() {
 					checkDimensions();
-				}, DELAY);
+				}, delay );
 			}
 		})();
-	} // end load()
+	}; // end load()
 
-	var FontFaceOnload = function( fontFamily, options ) {
+	FontFaceOnloadInstance.prototype.init = function( fontFamily, options ) {
+		var that = this;
 		var defaultOptions = {
 				glyphs: '',
 				success: function() {},
@@ -111,10 +144,17 @@
 				}, options.timeout );
 			}
 		} else {
-			load( fontFamily, options );
+			that.load( fontFamily, options );
 		}
 	};
 
+	var FontFaceOnload = function( fontFamily, options ) {
+		var instance = new FontFaceOnloadInstance();
+		instance.init(fontFamily, options);
+
+		return instance;
+	};
+
 	// intentional global
 	win.FontFaceOnload = FontFaceOnload;
 })( this, this.document );