Finish up a working asynchronous embed

It works, just need to test IE etc.

source/js/timeline-embed.js

@@ -24,29 +24,72 @@
 
 
 /* TIMELINE CDN LOADER
-	Add container div so that user can set width and height
+================================================== */
 
+/* Embed code with config
 ================================================== */
-// <div id="timeline-embed"></div><script src="load-timeline.js"></script>
+/*
+<!-- Begin Embed Code -->
+<div id="timeline-embed"></div>
+<script type="text/javascript">
+    var config = {
+		width: 900,
+		height: 700,
+		source: 'https://docs.google.com/a/digitalartwork.net/spreadsheet/ccc?hl=en_US&key=0Agl_Dv6iEbDadGRwZjJSRTR4RHJpanE2U3lkb0lyYUE&rm=full#gid=0',
+		css: '../timeline.css',
+		js: '../timeline.js'
+	}
+</script>
+<script type="text/javascript" src="../timeline-embed.js"></script>
+<!-- End Embed Code -->
+*/
+
 
+(function() {
 	
-(function(embed_loc, embed_doc, embed_window) {
+	/* CONFIG Default
+	================================================== */
+	var embed_config = {
+		width: 800,
+		height: 600,
+		source: 'taylor/data.json',
+		css: 'http://veritetimeline.appspot.com/latest/timeline.css',
+		js: 'http://veritetimeline.appspot.com/latest/timeline-min.js'
+	}
 	
+	if (typeof config == 'object') {
+	    var x;
+		for (x in config) {
+			if (Object.prototype.hasOwnProperty.call(config, x)) {
+				embed_config[x] = config[x];
+			}
+		}
+	}
 	
+	/* VARS
+	================================================== */
 	var jsReady = false;
 	var cssReady = false;
+	var isReady = false;
 	var preload_checks = 0;
-	
+	var timeout;
+	var timeline;
 	/* Add Timeline Div
 	================================================== */
 	var t = document.createElement('div');
-	document.getElementById("timeline-embed").appendChild(t);
+	var te = document.getElementById("timeline-embed");
+	te.appendChild(t);
 	t.setAttribute("id", 'timeline');
+	te.style.width = embed_config.width + 'px';
+	te.style.height = embed_config.height + 'px';
+	t.style.position = 'relative';
 	
+	/* Load CSS
+	================================================== */
+	LazyLoad.css(embed_config.css, cssComplete);
 	
-	
+	/* Check for jQuery
-	LazyLoad.css('http://veritetimeline.appspot.com/latest/timeline.css', cssComplete);
+	================================================== */
-	
 	try {
 	    var jqueryLoaded=jQuery;
 	    jqueryLoaded=true;
@@ -54,7 +97,8 @@
 	    var jqueryLoaded=false;
 	}
 	
-	//var head= document.getElementsByTagName('head')[0];
+	/* Load jQuery if it doesn't exist
+	================================================== */
 	if (!jqueryLoaded) {
 		LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded);
 	} else {
@@ -63,7 +107,7 @@
 	
 	
 	function onJQueryLoaded() {
-		LazyLoad.js('http://veritetimeline.appspot.com/latest/timeline-min.js', onJSLoaded);
+		LazyLoad.js(embed_config.js, onJSLoaded);
 	}
 	
 	function onJSLoaded() {
@@ -76,65 +120,50 @@
 		checkLoad();
 	}
 	
+	/* Check to see if everything is loaded.
+	================================================== */
 	function checkLoad() {
 		if (preload_checks > 40) {
 			return;
-			alert("Error Loading Files")
+			alert("Error Loading Files");
 		} else {
 			preload_checks++;
 			
 			if (jsReady && cssReady) {
-				var timeline = new VMM.Timeline();
+				if (!isReady) {
-				timeline.init("taylor/data.json");
+					isReady = true;
+					timeline = new VMM.Timeline();
+					timeline.init(embed_config.source);
+				}
 			} else {
-				setTimeout('checkLoad();', 250);
+				//alert("run timeout");
+				timeout = setTimeout('checkAgain();', 250);
 			}
 		}
 	}
 
+	this.checkAgain = function() {
+		checkLoad();
+	}
 	
-	/*
-	var stylesheet = document.createElement('link');
-	stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
-	stylesheet.rel = 'stylesheet';
-	stylesheet.type = 'text/css';
-	document.getElementsByTagName('head')[0].appendChild(stylesheet);
 	
-	var tjs = document.createElement('script');
-	tjs.type = 'text/javascript';
-	tjs.async = true;
-	tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
-	document.getElementsByTagName('head')[0].appendChild(tjs);
-	*/
 	
-}) (this, document, window);
+})();
 
-/*
 
-document.getElementById('myText');
+/*
-function(embed_loc, embed_doc, embed_window) {
+	Thinking of ditching Lazy loader after some more testing.
-	function e(embed_loc, embed_doc) {
+*/
-        var c,
+/*
-        d = [],
+var stylesheet = document.createElement('link');
-        e,
+stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
-        g;
+stylesheet.rel = 'stylesheet';
-        try {
+stylesheet.type = 'text/css';
-            if (document.querySelectorAll) d = document.querySelectorAll(embed_loc + "." + embed_doc);
+document.getElementsByTagName('head')[0].appendChild(stylesheet);
-            else if (document.getElementsByClassName) {
+
-                c = document.getElementsByClassName(embed_doc);
+var tjs = document.createElement('script');
-                for (e = 0; g = c[e]; e++) g.tagName.toLowerCase() == embed_loc && d.push(g)
+tjs.type = 'text/javascript';
-            } else {
+tjs.async = true;
-                c = document.getElementsByTagName(a);
+tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
-                var h = RegExp("\\b" + embed_doc + "\\b");
+document.getElementsByTagName('head')[0].appendChild(tjs);
-                f(c,
-                function(embed_loc, embed_doc) {
-                    var c = embed_loc.className || embed_loc.getAttribute("class");
-                    c && c.match(h) && d.push(embed_loc)
-                })
-            }
-        } catch(i) {}
-        return d
-    }
-	
-} (this, document, window)
 */

source/less/structure.less

@@ -32,6 +32,9 @@
 	background-color:@color-background;
 	position: absolute;
 	//border: 1px solid @color-line;
+	
+	z-index:100;
+	clear:both;
 	overflow:hidden;
 	
 	

timeline-embed.js

@@ -421,29 +421,72 @@ LazyLoad = (function (doc) {
 
 
 /* TIMELINE CDN LOADER
-	Add container div so that user can set width and height
+================================================== */
 
+/* Embed code with config
 ================================================== */
-// <div id="timeline-embed"></div><script src="load-timeline.js"></script>
+/*
+<!-- Begin Embed Code -->
+<div id="timeline-embed"></div>
+<script type="text/javascript">
+    var config = {
+		width: 900,
+		height: 700,
+		source: 'https://docs.google.com/a/digitalartwork.net/spreadsheet/ccc?hl=en_US&key=0Agl_Dv6iEbDadGRwZjJSRTR4RHJpanE2U3lkb0lyYUE&rm=full#gid=0',
+		css: '../timeline.css',
+		js: '../timeline.js'
+	}
+</script>
+<script type="text/javascript" src="../timeline-embed.js"></script>
+<!-- End Embed Code -->
+*/
 
 
-(function(embed_loc, embed_doc, embed_window) {
+(function() {
 	
+	/* CONFIG Default
+	================================================== */
+	var embed_config = {
+		width: 800,
+		height: 600,
+		source: 'taylor/data.json',
+		css: 'http://veritetimeline.appspot.com/latest/timeline.css',
+		js: 'http://veritetimeline.appspot.com/latest/timeline-min.js'
+	}
 	
+	if (typeof config == 'object') {
+	    var x;
+		for (x in config) {
+			if (Object.prototype.hasOwnProperty.call(config, x)) {
+				embed_config[x] = config[x];
+			}
+		}
+	}
+	
+	/* VARS
+	================================================== */
 	var jsReady = false;
 	var cssReady = false;
+	var isReady = false;
 	var preload_checks = 0;
-	
+	var timeout;
+	var timeline;
 	/* Add Timeline Div
 	================================================== */
 	var t = document.createElement('div');
-	document.getElementById("timeline-embed").appendChild(t);
+	var te = document.getElementById("timeline-embed");
+	te.appendChild(t);
 	t.setAttribute("id", 'timeline');
+	te.style.width = embed_config.width + 'px';
+	te.style.height = embed_config.height + 'px';
+	t.style.position = 'relative';
 	
+	/* Load CSS
+	================================================== */
+	LazyLoad.css(embed_config.css, cssComplete);
 	
-	
+	/* Check for jQuery
-	LazyLoad.css('http://veritetimeline.appspot.com/latest/timeline.css', cssComplete);
+	================================================== */
-	
 	try {
 	    var jqueryLoaded=jQuery;
 	    jqueryLoaded=true;
@@ -451,7 +494,8 @@ LazyLoad = (function (doc) {
 	    var jqueryLoaded=false;
 	}
 	
-	//var head= document.getElementsByTagName('head')[0];
+	/* Load jQuery if it doesn't exist
+	================================================== */
 	if (!jqueryLoaded) {
 		LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded);
 	} else {
@@ -460,7 +504,7 @@ LazyLoad = (function (doc) {
 	
 	
 	function onJQueryLoaded() {
-		LazyLoad.js('http://veritetimeline.appspot.com/latest/timeline-min.js', onJSLoaded);
+		LazyLoad.js(embed_config.js, onJSLoaded);
 	}
 	
 	function onJSLoaded() {
@@ -473,65 +517,50 @@ LazyLoad = (function (doc) {
 		checkLoad();
 	}
 	
+	/* Check to see if everything is loaded.
+	================================================== */
 	function checkLoad() {
 		if (preload_checks > 40) {
 			return;
-			alert("Error Loading Files")
+			alert("Error Loading Files");
 		} else {
 			preload_checks++;
 			
 			if (jsReady && cssReady) {
-				var timeline = new VMM.Timeline();
+				if (!isReady) {
-				timeline.init("taylor/data.json");
+					isReady = true;
+					timeline = new VMM.Timeline();
+					timeline.init(embed_config.source);
+				}
 			} else {
-				setTimeout('checkLoad();', 250);
+				//alert("run timeout");
+				timeout = setTimeout('checkAgain();', 250);
 			}
 		}
 	}
 
+	this.checkAgain = function() {
+		checkLoad();
+	}
 	
-	/*
-	var stylesheet = document.createElement('link');
-	stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
-	stylesheet.rel = 'stylesheet';
-	stylesheet.type = 'text/css';
-	document.getElementsByTagName('head')[0].appendChild(stylesheet);
-
-	var tjs = document.createElement('script');
-	tjs.type = 'text/javascript';
-	tjs.async = true;
-	tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
-	document.getElementsByTagName('head')[0].appendChild(tjs);
-	*/
 	
-}) (this, document, window);
 	
-/*
+})();
 
-document.getElementById('myText');
-function(embed_loc, embed_doc, embed_window) {
-	function e(embed_loc, embed_doc) {
-        var c,
-        d = [],
-        e,
-        g;
-        try {
-            if (document.querySelectorAll) d = document.querySelectorAll(embed_loc + "." + embed_doc);
-            else if (document.getElementsByClassName) {
-                c = document.getElementsByClassName(embed_doc);
-                for (e = 0; g = c[e]; e++) g.tagName.toLowerCase() == embed_loc && d.push(g)
-            } else {
-                c = document.getElementsByTagName(a);
-                var h = RegExp("\\b" + embed_doc + "\\b");
-                f(c,
-                function(embed_loc, embed_doc) {
-                    var c = embed_loc.className || embed_loc.getAttribute("class");
-                    c && c.match(h) && d.push(embed_loc)
-                })
-            }
-        } catch(i) {}
-        return d
-    }
 
-} (this, document, window)
+/*
+	Thinking of ditching Lazy loader after some more testing.
+*/
+/*
+var stylesheet = document.createElement('link');
+stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
+stylesheet.rel = 'stylesheet';
+stylesheet.type = 'text/css';
+document.getElementsByTagName('head')[0].appendChild(stylesheet);
+
+var tjs = document.createElement('script');
+tjs.type = 'text/javascript';
+tjs.async = true;
+tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
+document.getElementsByTagName('head')[0].appendChild(tjs);
 */

timeline.css

@@ -19,7 +19,7 @@
 #timeline input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
 #timeline textarea{overflow:auto;vertical-align:top;}
 #timeline-embed{background-color:#FFF;margin-bottom:20px;border:1px solid #CCC;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:1px 2px 6px rgba(0, 0, 0, 0.25);}
-#timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;overflow:hidden;}#timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:2000;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}#timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:28px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;text-transform:uppercase;line-height:36px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
+#timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;z-index:100;clear:both;overflow:hidden;}#timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:2000;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}#timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:28px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;text-transform:uppercase;line-height:36px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
 #timeline .container.main{position:absolute;top:0px:	left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;}
 #timeline img,#timeline embed,#timeline object,#timeline video,#timeline iframe{max-width:100%;}
 #timeline img{max-height:100%;border:1px solid #999999;}