/*! * HeadJS The only script in your * Author Tero Piirainen (tipiirai) * Maintainer Robert Hoffmann (itechnology) * License MIT / http://bit.ly/mit-license * * Version 0.99 * http://headjs.com */ ; (function (win, undefined) { "use strict"; var doc = win.document, domWaiters = [], queue = [], // waiters for the "head ready" event handlers = {}, // user functions waiting for events assets = {}, // loadable items in various states isAsync = "async" in doc.createElement("script") || "MozAppearance" in doc.documentElement.style || win.opera, isHeadReady, isDomReady, /*** public API ***/ headVar = win.head_conf && win.head_conf.head || "head", api = win[headVar] = (win[headVar] || function () { api.ready.apply(null, arguments); }), // states PRELOADING = 1, PRELOADED = 2, LOADING = 3, LOADED = 4; // Method 1: simply load and let browser take care of ordering if (isAsync) { api.load = function () { ///

/// INFO: use cases /// head.load("http://domain.com/file.js","http://domain.com/file.js", callBack) /// head.load({ label1: "http://domain.com/file.js" }, { label2: "http://domain.com/file.js" }, callBack) ///

var args = arguments, callback = args[args.length - 1], items = {}; if (!isFunction(callback)) { callback = null; } each(args, function (item, i) { if (item !== callback) { item = getAsset(item); items[item.name] = item; load(item, callback && (item.async || i === args.length - 2) ? function () { if (allLoaded(items)) { one(callback); } } : null); } }); return api; }; // Method 2: preload with text/cache hack } else { api.load = function () { var args = arguments, rest = [].slice.call(args, 1), next = rest[0]; // wait for a while. immediate execution causes some browsers to ignore caching if (!isHeadReady) { queue.push(function () { api.load.apply(null, args); }); return api; } // multiple arguments if (!!next) { /* Preload with text/cache hack (not good!) * http://blog.getify.com/on-script-loaders/ * http://www.nczonline.net/blog/2010/12/21/thoughts-on-script-loaders/ * If caching is not configured correctly on the server, then items could load twice ! *************************************************************************************/ each(rest, function (item) { if (!isFunction(item)) { preLoad(getAsset(item)); } }); // execute load(getAsset(args[0]), isFunction(next) ? next : function () { api.load.apply(null, rest); }); } else { // single item load(getAsset(args[0])); } return api; }; } // INFO: for retro compatibility api.js = api.load; api.test = function (test, success, failure, callback) { ///

/// INFO: use cases: /// head.test(condition, null , "file.NOk" , callback); /// head.test(condition, "fileOk.js", null , callback); /// head.test(condition, "fileOk.js", "file.NOk" , callback); /// head.test(condition, "fileOk.js", ["file.NOk", "file.NOk"], callback); /// head.test({ /// test : condition, /// success : [{ label1: "file1Ok.js" }, { label2: "file2Ok.js" }], /// failure : [{ label1: "file1NOk.js" }, { label2: "file2NOk.js" }], /// callback: callback /// ); /// head.test({ /// test : condition, /// success : ["file1Ok.js" , "file2Ok.js"], /// failure : ["file1NOk.js", "file2NOk.js"], /// callback: callback /// ); ///

var obj = (typeof test === 'object') ? test : { test: test, success: !!success ? isArray(success) ? success : [success] : false, failure: !!failure ? isArray(failure) ? failure : [failure] : false, callback: callback || noop }; // Test Passed ? var passed = !!obj.test; // Do we have a success case if (passed && !!obj.success) { obj.success.push(obj.callback); api.load.apply(null, obj.success); } // Do we have a fail case else if (!passed && !!obj.failure) { obj.failure.push(obj.callback); api.load.apply(null, obj.failure); } else { callback(); } return api; }; api.ready = function (key, callback) { ///

/// INFO: use cases: /// head.ready(callBack) /// head.ready(document , callBack) /// head.ready("file.js", callBack); /// head.ready("label" , callBack); /// head.ready(["label1", "label2"], callback); ///

// DOM ready check: head.ready(document, function() { }); if (key === doc) { if (isDomReady) { one(callback); } else { domWaiters.push(callback); } return api; } // shift arguments if (isFunction(key)) { callback = key; key = "ALL"; } // queue all items from key and return. The callback will be executed if all items from key are already loaded. if (isArray(key)) { var items = {}; each(key, function (item) { items[item] = assets[item]; api.ready(item, function() { allLoaded(items) && one(callback); }); }); return api; } // make sure arguments are sane if (typeof key !== 'string' || !isFunction(callback)) { return api; } // This can also be called when we trigger events based on filenames & labels var asset = assets[key]; // item already loaded --> execute and return if (asset && asset.state === LOADED || key === 'ALL' && allLoaded() && isDomReady) { one(callback); return api; } var arr = handlers[key]; if (!arr) { arr = handlers[key] = [callback]; } else { arr.push(callback); } return api; }; // perform this when DOM is ready api.ready(doc, function () { if (allLoaded()) { each(handlers.ALL, function (callback) { one(callback); }); } if (api.feature) { api.feature("domloaded", true); } }); /* private functions *********************/ function noop() { // does nothing } function each(arr, callback) { if (!arr) { return; } // arguments special type if (typeof arr === 'object') { arr = [].slice.call(arr); } // do the job for (var i = 0, l = arr.length; i < l; i++) { callback.call(arr, arr[i], i); } } /* A must read: http://bonsaiden.github.com/JavaScript-Garden ************************************************************/ function is(type, obj) { var clas = Object.prototype.toString.call(obj).slice(8, -1); return obj !== undefined && obj !== null && clas === type; } function isFunction(item) { return is("Function", item); } function isArray(item) { return is("Array", item); } function toLabel(url) { ///

Converts a url to a file label

var items = url.split("/"), name = items[items.length - 1], i = name.indexOf("?"); return i !== -1 ? name.substring(0, i) : name; } // INFO: this look like a "im triggering callbacks all over the place, but only wanna run it one time function" ..should try to make everything work without it if possible // INFO: Even better. Look into promises/defered's like jQuery is doing function one(callback) { ///

Execute a callback only once

callback = callback || noop; if (callback._done) { return; } callback(); callback._done = 1; } function getAsset(item) { ///

/// Assets are in the form of /// { /// name : label, /// url : url, /// state: state /// } ///

var asset = {}; if (typeof item === 'object') { for (var label in item) { if (!!item[label] && label !== '$async' ) { asset = { name : label, url : item[label], async: item['$async'] }; } } } else { asset = { name: toLabel(item), url : item }; } // is the item already existant var existing = assets[asset.name]; if (existing && existing.url === asset.url) { return existing; } assets[asset.name] = asset; return asset; } function allLoaded(items) { items = items || assets; for (var name in items) { if (items.hasOwnProperty(name) && items[name].state !== LOADED) { return false; } } return true; } function onPreload(asset) { asset.state = PRELOADED; each(asset.onpreload, function (afterPreload) { afterPreload.call(); }); } function preLoad(asset, callback) { if (asset.state === undefined) { asset.state = PRELOADING; asset.onpreload = [callback]; loadAsset({ url: asset.url, type: 'cache' }, function () { onPreload(asset); }); } } function load(asset, callback) { ///

Used with normal loading logic

callback = callback || noop; if (asset.state === LOADED) { callback(); return; } // INFO: why would we trigger a ready event when its not really loaded yet ? if (asset.state === LOADING) { api.ready(asset.name, callback); return; } if (asset.state === PRELOADING) { asset.onpreload.push(function () { load(asset, callback); }); return; } asset.state = LOADING; loadAsset(asset, function () { asset.state = LOADED; callback(); // handlers for this asset each(handlers[asset.name], function (fn) { one(fn); }); // dom is ready & no assets are queued for loading // INFO: shouldn't we be doing the same test above ? if (isDomReady && allLoaded()) { each(handlers.ALL, function (fn) { one(fn); }); } }); } /* Parts inspired from: https://github.com/cujojs/curl ******************************************************/ function loadAsset(asset, callback) { callback = callback || noop; var ele; if (/\.css[^\.]*$/.test(asset.url)) { ele = doc.createElement('link'); ele.type = 'text/' + (asset.type || 'css'); ele.rel = 'stylesheet'; ele.href = asset.url; } else { ele = doc.createElement('script'); ele.type = 'text/' + (asset.type || 'javascript'); ele.src = asset.url; } ele.onload = ele.onreadystatechange = process; ele.onerror = error; /* Good read, but doesn't give much hope ! * http://blog.getify.com/on-script-loaders/ * http://www.nczonline.net/blog/2010/12/21/thoughts-on-script-loaders/ * https://hacks.mozilla.org/2009/06/defer/ */ // ASYNC: load in parellel and execute as soon as possible ele.async = asset.async || false; // DEFER: load in parallel but maintain execution order ele.defer = false; function error(event) { event = event || win.event; // need some more detailed error handling here // release event listeners ele.onload = ele.onreadystatechange = ele.onerror = null; // do callback callback(); } function process(event) { event = event || win.event; // IE 7/8 (2 events on 1st load) // 1) event.type = readystatechange, s.readyState = loading // 2) event.type = readystatechange, s.readyState = loaded // IE 7/8 (1 event on reload) // 1) event.type = readystatechange, s.readyState = complete // event.type === 'readystatechange' && /loaded|complete/.test(s.readyState) // IE 9 (3 events on 1st load) // 1) event.type = readystatechange, s.readyState = loading // 2) event.type = readystatechange, s.readyState = loaded // 3) event.type = load , s.readyState = loaded // IE 9 (2 events on reload) // 1) event.type = readystatechange, s.readyState = complete // 2) event.type = load , s.readyState = complete // event.type === 'load' && /loaded|complete/.test(s.readyState) // event.type === 'readystatechange' && /loaded|complete/.test(s.readyState) // IE 10 (3 events on 1st load) // 1) event.type = readystatechange, s.readyState = loading // 2) event.type = load , s.readyState = complete // 3) event.type = readystatechange, s.readyState = loaded // IE 10 (3 events on reload) // 1) event.type = readystatechange, s.readyState = loaded // 2) event.type = load , s.readyState = complete // 3) event.type = readystatechange, s.readyState = complete // event.type === 'load' && /loaded|complete/.test(s.readyState) // event.type === 'readystatechange' && /complete/.test(s.readyState) // Other Browsers (1 event on 1st load) // 1) event.type = load, s.readyState = undefined // Other Browsers (1 event on reload) // 1) event.type = load, s.readyState = undefined // event.type == 'load' && s.readyState = undefined // !doc.documentMode is for IE6/7, IE8+ have documentMode if (event.type === 'load' || (/loaded|complete/.test(ele.readyState) && (!doc.documentMode || doc.documentMode < 9))) { // release event listeners ele.onload = ele.onreadystatechange = ele.onerror = null; // do callback callback(); } // emulates error on browsers that don't create an exception // INFO: timeout not clearing ..why ? //asset.timeout = win.setTimeout(function () { // error({ type: "timeout" }); //}, 3000); } // use insertBefore to keep IE from throwing Operation Aborted (thx Bryan Forbes!) var head = doc['head'] || doc.getElementsByTagName('head')[0]; // but insert at end of head, because otherwise if it is a stylesheet, it will not ovverride values head.insertBefore(ele, head.lastChild); } /* Mix of stuff from jQuery & IEContentLoaded * http://dev.w3.org/html5/spec/the-end.html#the-end ***************************************************/ function domReady() { // Make sure body exists, at least, in case IE gets a little overzealous (jQuery ticket #5443). if (!doc.body) { // let's not get nasty by setting a timeout too small.. (loop mania guaranteed if assets are queued) win.clearTimeout(api.readyTimeout); api.readyTimeout = win.setTimeout(domReady, 50); return; } if (!isDomReady) { isDomReady = true; each(domWaiters, function (fn) { one(fn); }); } } function domContentLoaded() { // W3C if (doc.addEventListener) { doc.removeEventListener("DOMContentLoaded", domContentLoaded, false); domReady(); } // IE else if (doc.readyState === "complete") { // we're here because readyState === "complete" in oldIE // which is good enough for us to call the dom ready! doc.detachEvent("onreadystatechange", domContentLoaded); domReady(); } }; // Catch cases where ready() is called after the browser event has already occurred. // we once tried to use readyState "interactive" here, but it caused issues like the one // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15 if (doc.readyState === "complete") { domReady(); } // W3C else if (doc.addEventListener) { doc.addEventListener("DOMContentLoaded", domContentLoaded, false); // A fallback to window.onload, that will always work win.addEventListener("load", domReady, false); } // IE else { // Ensure firing before onload, maybe late but safe also for iframes doc.attachEvent("onreadystatechange", domContentLoaded); // A fallback to window.onload, that will always work win.attachEvent("onload", domReady); // If IE and not a frame // continually check to see if the document is ready var top = false; try { top = win.frameElement == null && doc.documentElement; } catch (e) { } if (top && top.doScroll) { (function doScrollCheck() { if (!isDomReady) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll("left"); } catch (error) { // let's not get nasty by setting a timeout too small.. (loop mania guaranteed if assets are queued) win.clearTimeout(api.readyTimeout); api.readyTimeout = win.setTimeout(doScrollCheck, 50); return; } // and execute any waiting functions domReady(); } })(); } } /* We wait for 300 ms before asset loading starts. for some reason this is needed to make sure assets are cached. Not sure why this happens yet. A case study: https://github.com/headjs/headjs/issues/closed#issue/83 */ setTimeout(function () { isHeadReady = true; each(queue, function (fn) { fn(); }); }, 300); })(window);