From e06e1f52d1f6c0d2d7d6da2050873e7ea47b84ae Mon Sep 17 00:00:00 2001 From: Zach Wise Date: Sun, 1 Apr 2012 21:21:48 -0500 Subject: [PATCH] Updated to non minified ver - Started development asynchronous embed feature --- timeline-embed.js | 505 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 503 insertions(+), 2 deletions(-) diff --git a/timeline-embed.js b/timeline-embed.js index 9f7e1e6..44eb0f4 100644 --- a/timeline-embed.js +++ b/timeline-embed.js @@ -1,4 +1,6 @@ -/*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false *//** +/*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false */ + +/** LazyLoad makes it easy and painless to lazily load one or more external JavaScript or CSS files on demand either during or after the rendering of a web page. @@ -33,4 +35,503 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. @class LazyLoad @static @version 2.0.3 (git) -*/LazyLoad=function(a){function h(b,c){var d=a.createElement(b),e;for(e in c)c.hasOwnProperty(e)&&d.setAttribute(e,c[e]);return d}function i(a){var b=d[a],c,g;if(b){c=b.callback;g=b.urls;g.shift();e=0;if(!g.length){c&&c.call(b.context,b.obj);d[a]=null;f[a].length&&k(a)}}}function j(){var c=navigator.userAgent;b={async:a.createElement("script").async===!0};(b.webkit=/AppleWebKit\//.test(c))||(b.ie=/MSIE/.test(c))||(b.opera=/Opera/.test(c))||(b.gecko=/Gecko\//.test(c))||(b.unknown=!0)}function k(e,g,k,n,o){var p=function(){i(e)},q=e==="css",r=[],s,t,u,v,w,x;b||j();if(g){g=typeof g=="string"?[g]:g.concat();if(q||b.async||b.gecko||b.opera)f[e].push({urls:g,callback:k,obj:n,context:o});else for(s=0,t=g.length;s=0)if(g[b].href===a.urls[0]){i("css");break}e+=1;a&&(e<200?setTimeout(m,50):i("css"))}}var b,c,d={},e=0,f={css:[],js:[]},g=a.styleSheets;return{css:function(a,b,c,d){k("css",a,b,c,d)},js:function(a,b,c,d){k("js",a,b,c,d)}}}(this.document);(function(a,b,c){function j(){LazyLoad.js("http://veritetimeline.appspot.com/latest/timeline-min.js",k)}function k(){d=!0;m()}function l(){e=!0;m()}function m(){if(f>40)return;f++;if(d&&e){var a=new VMM.Timeline;a.init("taylor/data.json")}else setTimeout("checkLoad();",250)}var d=!1,e=!1,f=0,g=document.createElement("div");document.getElementById("timeline-embed").appendChild(g);g.setAttribute("id","timeline");LazyLoad.css("http://veritetimeline.appspot.com/latest/timeline.css",l);try{var h=jQuery;h=!0}catch(i){var h=!1}h?j():LazyLoad.js("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",j)})(this,document,window); \ No newline at end of file +*/ + +LazyLoad = (function (doc) { + // -- Private Variables ------------------------------------------------------ + + // User agent and feature test information. + var env, + + // Reference to the element (populated lazily). + head, + + // Requests currently in progress, if any. + pending = {}, + + // Number of times we've polled to check whether a pending stylesheet has + // finished loading. If this gets too high, we're probably stalled. + pollCount = 0, + + // Queued requests. + queue = {css: [], js: []}, + + // Reference to the browser's list of stylesheets. + styleSheets = doc.styleSheets; + + // -- Private Methods -------------------------------------------------------- + + /** + Creates and returns an HTML element with the specified name and attributes. + + @method createNode + @param {String} name element name + @param {Object} attrs name/value mapping of element attributes + @return {HTMLElement} + @private + */ + function createNode(name, attrs) { + var node = doc.createElement(name), attr; + + for (attr in attrs) { + if (attrs.hasOwnProperty(attr)) { + node.setAttribute(attr, attrs[attr]); + } + } + + return node; + } + + /** + Called when the current pending resource of the specified type has finished + loading. Executes the associated callback (if any) and loads the next + resource in the queue. + + @method finish + @param {String} type resource type ('css' or 'js') + @private + */ + function finish(type) { + var p = pending[type], + callback, + urls; + + if (p) { + callback = p.callback; + urls = p.urls; + + urls.shift(); + pollCount = 0; + + // If this is the last of the pending URLs, execute the callback and + // start the next request in the queue (if any). + if (!urls.length) { + callback && callback.call(p.context, p.obj); + pending[type] = null; + queue[type].length && load(type); + } + } + } + + /** + Populates the env variable with user agent and feature test + information. + + @method getEnv + @private + */ + function getEnv() { + var ua = navigator.userAgent; + + env = { + // True if this browser supports disabling async mode on dynamically + // created script nodes. See + // http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order + async: doc.createElement('script').async === true + }; + + (env.webkit = /AppleWebKit\//.test(ua)) + || (env.ie = /MSIE/.test(ua)) + || (env.opera = /Opera/.test(ua)) + || (env.gecko = /Gecko\//.test(ua)) + || (env.unknown = true); + } + + /** + Loads the specified resources, or the next resource of the specified type + in the queue if no resources are specified. If a resource of the specified + type is already being loaded, the new request will be queued until the + first request has been finished. + + When an array of resource URLs is specified, those URLs will be loaded in + parallel if it is possible to do so while preserving execution order. All + browsers support parallel loading of CSS, but only Firefox and Opera + support parallel loading of scripts. In other browsers, scripts will be + queued and loaded one at a time to ensure correct execution order. + + @method load + @param {String} type resource type ('css' or 'js') + @param {String|Array} urls (optional) URL or array of URLs to load + @param {Function} callback (optional) callback function to execute when the + resource is loaded + @param {Object} obj (optional) object to pass to the callback function + @param {Object} context (optional) if provided, the callback function will + be executed in this object's context + @private + */ + function load(type, urls, callback, obj, context) { + var _finish = function () { finish(type); }, + isCSS = type === 'css', + nodes = [], + i, len, node, p, pendingUrls, url; + + env || getEnv(); + + if (urls) { + // If urls is a string, wrap it in an array. Otherwise assume it's an + // array and create a copy of it so modifications won't be made to the + // original. + urls = typeof urls === 'string' ? [urls] : urls.concat(); + + // Create a request object for each URL. If multiple URLs are specified, + // the callback will only be executed after all URLs have been loaded. + // + // Sadly, Firefox and Opera are the only browsers capable of loading + // scripts in parallel while preserving execution order. In all other + // browsers, scripts must be loaded sequentially. + // + // All browsers respect CSS specificity based on the order of the link + // elements in the DOM, regardless of the order in which the stylesheets + // are actually downloaded. + if (isCSS || env.async || env.gecko || env.opera) { + // Load in parallel. + queue[type].push({ + urls : urls, + callback: callback, + obj : obj, + context : context + }); + } else { + // Load sequentially. + for (i = 0, len = urls.length; i < len; ++i) { + queue[type].push({ + urls : [urls[i]], + callback: i === len - 1 ? callback : null, // callback is only added to the last URL + obj : obj, + context : context + }); + } + } + } + + // If a previous load request of this type is currently in progress, we'll + // wait our turn. Otherwise, grab the next item in the queue. + if (pending[type] || !(p = pending[type] = queue[type].shift())) { + return; + } + + head || (head = doc.head || doc.getElementsByTagName('head')[0]); + pendingUrls = p.urls; + + for (i = 0, len = pendingUrls.length; i < len; ++i) { + url = pendingUrls[i]; + + if (isCSS) { + node = env.gecko ? createNode('style') : createNode('link', { + href: url, + rel : 'stylesheet' + }); + } else { + node = createNode('script', {src: url}); + node.async = false; + } + + node.className = 'lazyload'; + node.setAttribute('charset', 'utf-8'); + + if (env.ie && !isCSS) { + node.onreadystatechange = function () { + if (/loaded|complete/.test(node.readyState)) { + node.onreadystatechange = null; + _finish(); + } + }; + } else if (isCSS && (env.gecko || env.webkit)) { + // Gecko and WebKit don't support the onload event on link nodes. + if (env.webkit) { + // In WebKit, we can poll for changes to document.styleSheets to + // figure out when stylesheets have loaded. + p.urls[i] = node.href; // resolve relative URLs (or polling won't work) + pollWebKit(); + } else { + // In Gecko, we can import the requested URL into a