Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added namespacing to Boot.getFont. Code optimization.

  • Loading branch information...
commit d08f59232d92355803f068fa065ea9e68ee90bdb 1 parent 353005a
@artzstudio artzstudio authored
Showing with 58 additions and 50 deletions.
  1. +48 −45 src/boot.js
  2. +1 −1  src/boot.min.js
  3. +9 −4 test/boot.getfont.html
View
93 src/boot.js
@@ -176,8 +176,7 @@
/test/regex-vs-indexof.html
* http://www.dustindiaz.com/smallest-domready-ever
- This was interesting but upon closer inspection, doesn't work
- and also will pile on expensive setTimeout loops.
+ This was interesting but upon closer inspection, doesn't work.
*/
var isReady = 0,
isReadyBound = 0,
@@ -191,10 +190,11 @@
// This check looks for #2, the equivalent of DOM ready.
// Needs to be "interactive" or "loaded" (Safari) or "complete" (catch all)
// "e" fits the bill nicely.
- // indexOf is much faster than regex in Safari and IE (see /test/regex-vs-indexof.html)
+ // indexOf is much faster than regex or doScroll hack in Safari and IE (see /test/regex-vs-indexof.html)
return contains( document.readyState, "e" );
},
-
+/*
+ Replaced this with Boot.poll. So far so good!
pollReadyState = function(){
if ( checkReady() ) {
execReady();
@@ -202,7 +202,7 @@
SetTimeout( pollReadyState, 50 );
}
},
-
+*/
execReady = function(){
isReady = 1;
// console.log("READY, clearing callbacks.");
@@ -250,13 +250,13 @@
document.addEventListener( "DOMContentLoaded", execReady, false );
// IE.
} else {
- pollReadyState();
+ poll( checkReady, execReady, 50 );
}
}
}
}
- return global;
+
};
// Public reference.
@@ -283,7 +283,7 @@
} else if (object.addEventListener) {
object.addEventListener(event, callback, false);
}
- return global;
+
}
global.bind = bind;
@@ -332,10 +332,9 @@
if ( contains( document.readyState, "m" ) ) {
loaded();
} else {
- global.bind( window, strLoad, loaded );
+ bind( window, strLoad, loaded );
}
- return global;
}
global.load = load;
@@ -358,23 +357,20 @@
function attr( elem, attribute, value ){
- var ret = global;
-
if ( value !== undefined ) {
if ( value === null ) {
elem.removeAttribute( attribute );
} else if ( attribute === "style" && styleNode.styleSheet ) {
- elem.cssText = css;
+ elem.cssText = value;
} else {
elem.setAttribute( attribute, value );
}
} else {
- ret = elem.getAttribute( attribute );
+ return elem.getAttribute( attribute );
}
- return ret;
}
global.attr = attr;
/*
@@ -397,7 +393,7 @@
callback.call( array[i], i, array[i] );
}
}
- return global;
+
}
global.each = each;
@@ -423,7 +419,7 @@
window[ "eval" ].call( window, data );
} )( data );
- return global;
+
}
global.globalEval = globalEval;
@@ -620,10 +616,11 @@
// hang perpetually, making users sad. :(
body.appendChild( elem );
+
}, delay || 0 );
}
- return global;
+
}
global.cacheScript = cacheScript;
@@ -680,6 +677,7 @@
// We basically make it synchronously like in FF3.
// Not ideal, but we found <object> to be MUCH slower
// DOM nodes in Firefox.
+ // Check out /test/benchmarks/speed-test-* (need to update files)
script.async = options.async || false;
// Attach handlers for all browsers
@@ -715,7 +713,7 @@
firstScriptParent.insertBefore( script, firstScript );
}, 0);
- return global;
+
}
global.getScript = getScript;
@@ -747,7 +745,8 @@
lastScript,
- isGecko = "MozAppearance" in document.documentElement.style,
+ docElem = document.documentElement,
+ isGecko = "MozAppearance" in docElem.style,
// If the browser supports asynchronous executing scripts. (Firefox 3.6, Opera, Chrome 12)
isScriptAsync = isGecko || window.opera || document.createElement( strScript ).async === true,
@@ -941,8 +940,6 @@
eventQueue.push( callback );
- return global;
-
}
global.on = on;
@@ -972,7 +969,6 @@
});
}
- return global;
}
global.emit = emit;
@@ -994,7 +990,7 @@
styleSheet = style.styleSheet,
textNode;
-// attr( style, "type", "text/css" ); // Not needed in HTML5 :D
+// attr( style, "type", "text/css" ); // Not needed in HTML5 :D
// IE
if ( styleSheet ) {
@@ -1017,7 +1013,7 @@
div.innerHTML = html;
return div.firstChild;
}
-
+ // Valuable publicly as Boot.createNode? jQuery's territory?
/*
Boot.poll
@@ -1052,11 +1048,14 @@
Boot.getFont
*/
var getFontOptions = {
+ namespace: "wf-",
path: "fonts/{f}/{f}-webfont",
fontface: "@font-face { font-family: '{f}'; src: url('{p}.eot'); src: url('{p}.eot?#iefix') format('embedded-opentype'), url('{p}.woff') format('woff'), url('{p}.ttf') format('truetype'), url('{p}.svg#{f}') format('svg'); font-weight: normal; font-style: normal; }"
},
- docElem = document.documentElement,
- testDiv;
+ testDiv, // Keep it empty until invoked the first time.
+ strLoading = "-loading",
+ strActive = "-active",
+ strInactive = "-inactive";
function getFont( /* options, options, ... */ ) {
@@ -1075,10 +1074,9 @@
fontDiv,
// testDiv = hiddenDiv.cloneNode(),
fontName,
+ namespacedFontName,
fontPath,
fontFace,
- pollDelay = 50, // Doesn't need to be too small.
- pollTimeout = 10000, // Give up polling after this time.
fontfaceCSS = [],
i = 0,
l = args.length; i < l; i++ ) {
@@ -1097,15 +1095,19 @@
fontfaceCSS.push( fontFace );
- fontDiv = testDiv.cloneNode(true);
+ fontDiv = testDiv.cloneNode( true );
fontDiv.style.fontFamily = "'" + fontName + "',serif";
docElem.appendChild( fontDiv );
- docElem.className += " " + fontName + "-loading";
+ docElem.className += " " + namespacedFontName + strLoading;
+
+ emit( namespacedFontName + strLoading );
- (function( fontDiv, fontName ) {
+ namespacedFontName = options.namespace + fontName;
+
+ (function( fontDiv, namespacedFontName ) {
poll( function( time ){
// Boot.log( "Test width: " + testDiv.offsetWidth + ", " + fontName + ": " + fontDiv.offsetWidth );
@@ -1113,19 +1115,19 @@
}, function( isTimeout, time){
// Boot.log("Different widths detected in " + time + "ms. Timeout? " + isTimeout);
if ( isTimeout ) {
- docElem.className = docElem.className.replace( fontName + "-loading", fontName + "-inactive" );
- emit( fontName + "-inactive" );
+ docElem.className = docElem.className.replace( namespacedFontName + strLoading, namespacedFontName + strInactive );
+ emit( namespacedFontName + strInactive );
// emit( "get-font-inactive", { name: fontName } );
- window.console && console.log( "Font timeout: " + fontName );
- } else {
- docElem.className = docElem.className.replace( fontName + "-loading", fontName + "-active" );
- emit( fontName + "-active" );
+// window.console && console.log( "Font timeout: " + namespacedFontName );
+ } else {console.log( namespacedFontName );
+ docElem.className = docElem.className.replace( namespacedFontName + strLoading, namespacedFontName + strActive );
+ emit( namespacedFontName + strActive );
// emit( "get-font-active", { name: fontName } );
}
// fontDiv.parentNode.removeChild( fontDiv ); // Unnecessary expense?
- }, pollDelay, pollTimeout );
+ }, 25, 10000 );
- })( fontDiv, fontName );
+ })( fontDiv, namespacedFontName );
}
@@ -1133,6 +1135,7 @@
}
/*
+ Allow customizable settings someday maybe.
getFont.set = function( options ) {
};
@@ -1140,11 +1143,11 @@
global.getFont = getFont;
/*
- To Do?
- - Boot.once - Do a callback once only.
- - Boot.removeEvent - Remove event.
- - Screen detection? Maybe this is a plugin instead.
- - getFont()
+ To Do
+ - Screen detection.
+ - Browser targeting for CSS (.ie, .ie6, .ie7, .ie8, .ie9, .ie10, .ff, .ff3, .ff4, .ff5, .ff3-5, .ff3-5-1, .sa, .sa4, .sa5 .ch ...)
+ ? Boot.once - Do a callback once only.
+ ? Boot.off / Boot.removeEvent - Remove custom event.
*/
})("Boot", this);
View
2  src/boot.min.js
@@ -1 +1 @@
-(function(C,g,o){function p(){return(new Date).getTime()}function D(a,c){k||(k=f.body);E.push(p()-da+"ms: "+a);if(F&&(i||(i=c)||k&&(i=f.createElement("div"))&&k.insertBefore(i,k.firstChild)))i.innerHTML=["<ul><li>",E.join("</li><li>"),"</li></ul>"].join("")}function G(){for(var a=arguments,c=a[0],b,e,d=1,f=a.length;d<f;d++)for(b in e=a[d],e)e.hasOwnProperty(b)&&(H(e[b])?(c[b]=I(e[b])?[]:{},G(c[b],e[b])):c[b]=e[b]);return c}function J(a){function c(){m();h(a,0)}j(f.readyState,"m")?c():d.bind(g,K,c);return d}function q(a,c){if(a&&a.length)for(var b=0,e=a.length;b<e;b++)c.call(a[b],b,a[b]);return d}function I(a){return a&&j(a.constructor.toString(),"rray")}function H(a){return typeof a===r}function s(a){return typeof a===L}function M(a){return a.replace(/^\s\s*/,"").replace(/\s\s*$/,"")}function j(a,c){return a&&a.indexOf(c)!==-1}function N(a,c){var b,e=f.body;c&&(c*=1E3);e&&h(function(){b=f.createElement(O?r:"img");b.src=b.data=a;b.alt="";b.width=b.height=0;b.style.position="absolute";e.appendChild(b)},c||0);return d}function t(a,c,b){var e=f.createElement(u),g=0,b=b||c||{},c=s(c)?c:ea;e.src=a;e.type=b.type||"";b.text&&(e.innerHTML=b.text);e.async=b.async||!1;e[P]=e[Q]=function(){if(!g&&(!e[v]||e[v]==="loaded"||e[v]===fa))g=1,c(a),e[P]=e[Q]=null};h(function(){ga.insertBefore(e,R)},0);return d}function w(){n.shift();x()}function x(a){var c=n[0]||{},b=c.src||c;S[a]=1;S[b]&&!T[b]?(y=b,T[b]=1,z?w():t(b,w)):s(b)&&(z?b(y):h(function(){b(y)},0),w())}function U(a){for(;a[0];)V(a[0]),a.shift()}function V(){q(arguments,function(a,c){var b={},e,d;switch(typeof c){case W:b.src=c;break;case L:b.callback=c;break;case r:b=c,e=b.defer,d=b.callback,b.defer=o}e==="ready"?(X.push(b),Y(function(){U(X)})):e===K?(Z.push(b),J(function(){U(Z)})):(e=b.src,d=b.callback,b.callback=o,j(b.type,"cache")?e&&!$[e]&&N(e,b.delay):e&&!$[e]&&(n.push(b),t(e,x,{type:ha})),d&&n.push(d));x()})}var d=g[C]||(g[C]={}),f=g.document,A=g.JSON,h=setTimeout,K="load",W="string",L="function",r="object",u="script",v="readyState",Q="onreadystatechange",P="onload",fa="complete";d.now=p;var i,k,E=[],da=p(),F=0;D.init=function(a){F=1;i=a.elem};d.log=D;d.extend=G;var aa=0,ba=0,l=[],ca=function(){j(f.readyState,"e")?m():h(ca,50)},m=function(){aa=1;for(var a=0,c=l.length;a<c;a++)h(l[a],0);l=[]},Y=function(a){aa?h(a,0):ba?l.push(a):(ba=1,l=[a],j(f.readyState,"e")?m():f.addEventListener?f.addEventListener("DOMContentLoaded",m,!1):ca());return d};d.ready=Y;d.bind=function(a,c,b){a.attachEvent?a.attachEvent("on"+c,b):a.addEventListener&&a.addEventListener(c,b,!1);return d};d.load=J;d.attr=function(a,c,b){var e=d;b!==o?b===null?a.removeAttribute(c):a.setAttribute(c,b):e=a.getAttribute(c);return e};d.each=q;d.globalEval=function(a){(g.execScript||function(a){g.eval.call(g,a)})(a);return d};d.isArray=I;d.isObject=H;d.isString=function(a){return typeof a===W};d.isBoolean=function(a){return typeof a==="boolean"};d.isFunction=s;d.isNumber=function(a){return typeof a==="number"};d.trim=M;d.parseJSON=function(a){try{a=M(a);if(A&&A.parse)return A.parse(a);return(new Function("return "+a))()}catch(c){g.console&&console.log("Bad JSON: "+a)}};d.contains=j;d.cacheScript=N;var ea=function(){},R=f.getElementsByTagName(u)[0],ga=R.parentNode;d.getScript=t;var $={},S={},T={},n=[],X=[],Z=[],y,O="MozAppearance"in f.documentElement.style,z=O||g.opera||f.createElement(u).async===!0,ha=z?"":"c";d.getJS=V;var B={};d.sub=function(a,c){(B[a]||(B[a]=[])).push(c);return d};d.pub=function(a,c){var b=B[a];b&&q(b,function(a){b[a].call(c,c)});return d}})("Boot",this);
+(function(af,aq,q){var o=aq[af]||(aq[af]={}),M=aq.document,j=aq.JSON,aj=setTimeout,y="load",i="string",ad="function",R="object",ab="number",C="boolean",ax="script",t="readyState",aC="onreadystatechange",V="onload",ar="complete";function ay(){return new Date().getTime()}o.now=ay;var a,n,U=[],x=ay(),b=0;function f(aI,aH){n||(n=M.body);U.push((ay()-x)+"ms: "+aI);if(b){if(a||(a=aH)||(n&&(a=M.createElement("div"))&&n.insertBefore(a,n.firstChild))){a.innerHTML=["<ul><li>",U.join("</li><li>"),"</li></ul>"].join("")}}}f.init=function(aH){b=1;a=aH.elem};o.log=f;function ac(){var aJ=arguments,aM=aJ[0],aI,aL,aK=1,aH=aJ.length;for(;aK<aH;aK++){aL=aJ[aK];for(aI in aL){if(aL.hasOwnProperty(aI)){if(D(aL[aI])){aM[aI]=c(aL[aI])?[]:{};ac(aM[aI],aL[aI])}else{aM[aI]=aL[aI]}}}}return aM}o.extend=ac;var T=0,aw=0,aG=[],Y=function(){return S(M.readyState,"e")},e=function(){T=1;for(var aI=0,aH=aG.length;aI<aH;aI++){aj(aG[aI],0)}aG=[]},r=function(aH){if(T){aj(aH,0)}else{if(aw){aG.push(aH)}else{aw=1;aG=[aH];if(Y()){e()}else{if(M.addEventListener){M.addEventListener("DOMContentLoaded",e,false)}else{E(Y,e,50)}}}}};o.ready=r;function au(aH,aI,aJ){if(aH.attachEvent){aH.attachEvent("on"+aI,aJ)}else{if(aH.addEventListener){aH.addEventListener(aI,aJ,false)}}}o.bind=au;var aA=0;function g(aI){function aH(){e();aA=1;aj(aI,0)}if(S(M.readyState,"m")){aH()}else{au(aq,y,aH)}}o.load=g;var h=M.createElement("style");function O(aI,aH,aJ){if(aJ!==q){if(aJ===null){aI.removeAttribute(aH)}else{if(aH==="style"&&h.styleSheet){aI.cssText=aJ}else{aI.setAttribute(aH,aJ)}}}else{return aI.getAttribute(aH)}}o.attr=O;function aD(aK,aJ){if(aK&&aK.length){for(var aI=0,aH=aK.length;aI<aH;aI++){aJ.call(aK[aI],aI,aK[aI])}}}o.each=aD;function aE(aH){(aq.execScript||function(aI){aq["eval"].call(aq,aI)})(aH)}o.globalEval=aE;function F(aI,aH){return typeof aI===aH}function c(aH){return aH&&S(aH.constructor.toString(),"rray")}o.isArray=c;function D(aH){return F(aH,R)}o.isObject=D;function az(aH){return F(aH,i)}o.isString=az;function ap(aH){return F(aH,C)}o.isBoolean=ap;function an(aH){return F(aH,ad)}o.isFunction=an;function J(aH){return F(aH,ab)}o.isNumber=J;function ao(aH){return aH.replace(/^\s\s*/,"").replace(/\s\s*$/,"")}o.trim=ao;function G(aH){try{aH=ao(aH);if(j&&j.parse){return j.parse(aH)}return(new Function("return "+aH))()}catch(aI){if(aq.console){console.log("Bad JSON: "+aH)}}}o.parseJSON=G;function S(aH,aI){return aH&&aH.indexOf(aI)!==-1}o.contains=S;function N(aJ,aH){var aI;n||(n=M.body);if(aH){aH=aH*1000}if(n){aj(function(){aI=M.createElement(L?R:"img");aI.src=aI.data=aJ;aI.alt="";aI.width=aI.height=0;aI.style.position="absolute";n.appendChild(aI)},aH||0)}}o.cacheScript=N;var A=function(){},z=M.getElementsByTagName(ax),H=z[0],d=H.parentNode;function av(aK,aL,aJ){var aI=M.createElement(ax),aH=0;aJ=aJ||aL||{};aL=an(aL)?aL:A;aI.src=aK;aI.type=aJ.type||"";aJ.text&&(aI.innerHTML=aJ.text);aI.async=aJ.async||false;aI[V]=aI[aC]=function(){if(!aH&&(!aI[t]||aI[t]==="loaded"||aI[t]===ar)){aH=1;aL(aK);aI[V]=aI[aC]=null}};aj(function(){d.insertBefore(aI,H)},0)}o.getScript=av;var ah={},ak={},w={},W=[],Q=[],u=[],ai,B=M.documentElement,L="MozAppearance" in B.style,m=L||aq.opera||M.createElement(ax).async===true,aF=m?"":"c";function aB(){W.shift();am()}function am(aJ){var aH=W[0]||{},aI=aH.src||aH;ak[aJ]=1;if(ak[aI]&&!w[aI]){ai=aI;w[aI]=1;if(m){aB()}else{av(aI,aB)}}else{if(an(aI)){if(m){aI(ai)}else{aj(function(){aI(ai)},0)}aB()}}}function s(aH){while(aH[0]){l(aH[0]);aH.shift()}}function l(){aD(arguments,function(aJ,aH){var aI={},aL,aK,aM;switch(typeof aH){case i:aI.src=aH;break;case ad:aI.callback=aH;break;case R:aI=aH;aL=aI.defer;aM=aI.callback;aI.defer=q}if(aL==="ready"){Q.push(aI);r(function(){s(Q)})}else{if(aL===y){u.push(aI);g(function(){s(u)})}else{aK=aI.src;aM=aI.callback;aI.callback=q;if(S(aI.type,"cache")){if(aK&&!ah[aK]){N(aK,aI.delay)}}else{if(aK&&!ah[aK]){W.push(aI);av(aK,am,{type:aF})}}if(aM){W.push(aM)}}}am()})}o.getJS=l;var v={};function I(aI,aJ){var aH=v[aI]||(v[aI]=[]);aH.push(aJ)}o.on=I;function X(aI,aJ){var aH=v[aI];if(aH){aD(aH,function(aK){aH[aK].call(aJ,aJ)})}}o.emit=X;function aa(aH){var aI=h.cloneNode(0),aK=aI.styleSheet,aJ;if(aK){aK.cssText=aH}else{aJ=M.createTextNode(aH);aI.appendChild(aJ)}d.insertBefore(aI,H)}o.inlineCSS=aa;function P(aH){var aI=M.createElement("div");aI.innerHTML=aH;return aI.firstChild}var at={},al=0;function E(aI,aO,aK,aL){var aJ=al++,aN=ay(),aM,aH=false;at[aJ]=setInterval(function(){aM=ay()-aN;if(aI()||(aL&&(aH=aM>aL))){aO.call(aq,aH,aM);clearInterval(at[aJ])}},aK)}o.poll=E;var ae={namespace:"wf-",path:"fonts/{f}/{f}-webfont",fontface:"@font-face { font-family: '{f}'; src: url('{p}.eot'); src: url('{p}.eot?#iefix') format('embedded-opentype'), url('{p}.woff') format('woff'), url('{p}.ttf') format('truetype'), url('{p}.svg#{f}') format('svg'); font-weight: normal; font-style: normal; }"},Z,ag="-loading",p="-active",k="-inactive";function K(){if(!Z){Z=P('<div style="position:absolute;top:-999px;left:-999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;font-family:serif">BESs</div>');B.appendChild(Z)}for(var aN=arguments,aR=ae,aI=/{f}/g,aQ=/{p}/g,aO,aH,aL,aS,aM,aP=[],aK=0,aJ=aN.length;aK<aJ;aK++){aH=aN[aK].toLowerCase();aS=aR.path.replace(aI,aH);aM=aR.fontface.replace(aI,aH).replace(aQ,aS);aP.push(aM);aO=Z.cloneNode(true);aO.style.fontFamily="'"+aH+"',serif";B.appendChild(aO);B.className+=" "+aL+ag;X(aL+ag);aL=aR.namespace+aH;(function(aT,aU){E(function(aV){return Z.offsetWidth!==aT.offsetWidth},function(aV,aW){if(aV){B.className=B.className.replace(aU+ag,aU+k);X(aU+k)}else{console.log(aU);B.className=B.className.replace(aU+ag,aU+p);X(aU+p)}},25,10000)})(aO,aL)}aa(aP.join(""))}o.getFont=K})("Boot",this);
View
13 test/boot.getfont.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Boot.attr</title>
+<title>Boot.getFont</title>
<style>
body {
font: 16px/1.5 verdana;
@@ -41,19 +41,24 @@
Boot.log.init({
elem: logElem
});
+
Boot.log("boot.getjs.html: Starting tests.");
-Boot.getFont("Chewy", "SpecialElite");
+Boot.getFont("Chewy", "SpecialElite", "NotThere");
// Boot.getFont("specialelite");
-Boot.on( "chewy-active", function(){
+Boot.on( "wf-chewy-active", function(){
Boot.log( "boot.getjs.html: Chewy active!" );
});
-Boot.on( "specialelite-active", function(){
+Boot.on( "wf-specialelite-active", function(){
Boot.log( "boot.getjs.html: SpecialElite active!" );
});
+Boot.on( "wf-notthere-inactive", function(){
+ Boot.log( "boot.getjs.html: NotThere is not there! (10 sec timeout)" );
+});
+
</script>
<p>This paragraph of text should not be blocked.</p>
<script type="text/javascript">
Please sign in to comment.
Something went wrong with that request. Please try again.