TimelineJS/source/js/Core/Embed/Embed.js

//StoryJS Embed Loader
// Provide a bootstrap method for instantiating a timeline. On page load, check the definition of these window scoped variables in this order: [url_config, timeline_config, storyjs_config, config]. As soon as one of these is found to be defined with type 'object,' it will be used to automatically instantiate a timeline.

/* 	CodeKit Import
	http://incident57.com/codekit/ 
================================================== */
// @codekit-prepend "Embed.LoadLib.js";

var WebFontConfig;

if(typeof embed_path == 'undefined') {
	// REPLACE WITH YOUR BASEPATH IF YOU WANT OTHERWISE IT WILL TRY AND FIGURE IT OUT
	var _tmp_script_path = getEmbedScriptPath("storyjs-embed.js");
	var embed_path = _tmp_script_path.substr(0,_tmp_script_path.lastIndexOf('js/'))
}

function getEmbedScriptPath(scriptname) {
	var scriptTags = document.getElementsByTagName('script'),
		script_path = "",
		script_path_end = "";
	for(var i = 0; i < scriptTags.length; i++) {
		if (scriptTags[i].src.match(scriptname)) {
			script_path = scriptTags[i].src;
		}
	}
	if (script_path != "") {
		script_path_end = "/"
	}
	return script_path.split('?')[0].split('/').slice(0, -1).join('/') + script_path_end;
}

/* CHECK TO SEE IF A CONFIG IS ALREADY DEFINED (FOR EASY EMBED)
================================================== */
(function() {
	if (typeof url_config == 'object') {
		createStoryJS(url_config);
	} else if (typeof timeline_config == 'object') {
		createStoryJS(timeline_config);
	} else if (typeof storyjs_config == 'object') {
		createStoryJS(storyjs_config);
	} else if (typeof config == 'object') {
		createStoryJS(config);
	} else {
		// No existing config. Call createStoryJS(your_config) manually with a config
	}
})();

/* CREATE StoryJS Embed
================================================== */
function createStoryJS(c, src) {
	/* VARS
	================================================== */
	var storyjs_embedjs, t, te, x,
		isCDN					= false,
		js_version				= "2.24",
		jquery_version_required	= "1.7.1",
		jquery_version			= "",
		ready = {
			timeout:	"",
			checks:		0,
			finished:	false,
			js:			false,
			css:		false,
			jquery:		false,
			has_jquery:	false,
			language:	false,
			font: {
				css:	false,
				js:		false
			}
		},
		path = {
			base:		embed_path,
			css:		embed_path + "css/",
			js:			embed_path + "js/",
			locale:		embed_path + "js/locale/",
			jquery:		"//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
			font: {
				google:	false,
				css:	embed_path + "css/themes/font/",
				js:		"//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"
			}
		},
		storyjs_e_config = {
			version:	js_version,
			debug:		false,
			type:		'timeline',
			id:			'storyjs',
			embed_id:	'timeline-embed',
			embed:		true,
			width:		'100%',
			height:		'100%',
			source:		'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadFYzRjJPUGktY0NkWXFUWkVIZDNGRHc&output=html',
			lang:		'en',
			font:		'default',
			css:		path.css + 'timeline.css?'+js_version,
			js:			'',
			api_keys: {
				google:				"",
				flickr:				"",
				twitter:			""
			},
			gmap_key: 	""
		},
		font_presets = [
			{ name:	"Merriweather-NewsCycle",		google:	[ 'News+Cycle:400,700:latin', 'Merriweather:400,700,900:latin' ] },
			{ name:	"NewsCycle-Merriweather",		google:	[ 'News+Cycle:400,700:latin', 'Merriweather:300,400,700:latin' ] },
			{ name:	"PoiretOne-Molengo",			google:	[ 'Poiret+One::latin', 'Molengo::latin' ] },
			{ name:	"Arvo-PTSans",					google:	[ 'Arvo:400,700,400italic:latin', 'PT+Sans:400,700,400italic:latin' ] },
			{ name:	"PTSerif-PTSans",				google:	[ 'PT+Sans:400,700,400italic:latin', 'PT+Serif:400,700,400italic:latin' ] },
			{ name:	"PT",							google:	[ 'PT+Sans+Narrow:400,700:latin', 'PT+Sans:400,700,400italic:latin', 'PT+Serif:400,700,400italic:latin' ] },
			{ name:	"DroidSerif-DroidSans",			google:	[ 'Droid+Sans:400,700:latin', 'Droid+Serif:400,700,400italic:latin' ] },
			{ name:	"Lekton-Molengo",				google:	[ 'Lekton:400,700,400italic:latin', 'Molengo::latin' ] },
			{ name:	"NixieOne-Ledger",				google:	[ 'Nixie+One::latin', 'Ledger::latin' ] },
			{ name:	"AbrilFatface-Average",			google:	[ 'Average::latin', 'Abril+Fatface::latin' ] },
			{ name:	"PlayfairDisplay-Muli",			google:	[ 'Playfair+Display:400,400italic:latin', 'Muli:300,400,300italic,400italic:latin' ] },
			{ name:	"Rancho-Gudea",					google:	[ 'Rancho::latin', 'Gudea:400,700,400italic:latin' ] },
			{ name:	"Bevan-PotanoSans",				google:	[ 'Bevan::latin', 'Pontano+Sans::latin' ] },
			{ name:	"BreeSerif-OpenSans",			google:	[ 'Bree+Serif::latin', 'Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800:latin' ] },
			{ name:	"SansitaOne-Kameron",			google:	[ 'Sansita+One::latin', 'Kameron:400,700:latin' ] },
			{ name:	"Lora-Istok",					google:	[ 'Lora:400,700,400italic,700italic:latin', 'Istok+Web:400,700,400italic,700italic:latin' ] },
			{ name:	"Pacifico-Arimo",				google:	[ 'Pacifico::latin', 'Arimo:400,700,400italic,700italic:latin' ] }
		];
			
	/* BUILD CONFIG
	================================================== */	
	if (typeof c == 'object') {
		for (x in c) {
			if (Object.prototype.hasOwnProperty.call(c, x)) {
				storyjs_e_config[x] = c[x];
			}
		}
	}
		
	if (typeof src != 'undefined') {
		storyjs_e_config.source = src;
	}
		
	/* CDN VERSION?
	================================================== */
	if (typeof url_config == 'object') {
		isCDN = true;
			
		/* IS THE SOURCE GOOGLE SPREADSHEET WITH JUST THE KEY?
		================================================== */
		if (storyjs_e_config.source.match("docs.google.com") || storyjs_e_config.source.match("json") || storyjs_e_config.source.match("storify") ) {
				
		} else {
			storyjs_e_config.source = "https://docs.google.com/spreadsheet/pub?key=" + storyjs_e_config.source + "&output=html";
		}
			
	}
		
	/* DETERMINE TYPE
	================================================== */
	// Check for old installs still using the old method of language
	if (storyjs_e_config.js.match("locale")) {
		// TODO Issue #618 better splitting
		storyjs_e_config.lang = storyjs_e_config.js.split("locale/")[1].replace(".js", "");
		storyjs_e_config.js		= path.js + 'timeline-min.js?' + js_version;
	}
	
	if (storyjs_e_config.js.match("/")) {
		
	} else {
		storyjs_e_config.css	= path.css + storyjs_e_config.type + ".css?" + js_version;
		
		// Use unminified js file if in debug mode
		storyjs_e_config.js		= path.js  + storyjs_e_config.type;
		if (storyjs_e_config.debug) {
			storyjs_e_config.js	+= ".js?"  + js_version;
		} else {
			storyjs_e_config.js	+= "-min.js?"  + js_version;
		}
		
		storyjs_e_config.id		= "storyjs-" + storyjs_e_config.type;
	}
	
	/* PREPARE LANGUAGE
	================================================== */
	if (storyjs_e_config.lang.match("/")) {
		path.locale = storyjs_e_config.lang;
	} else {
		path.locale = path.locale + storyjs_e_config.lang + ".js?" + js_version;
	}
	
		
	/* PREPARE
	================================================== */
	createEmbedDiv();
	
	/* Load CSS
	================================================== */
	LoadLib.css(storyjs_e_config.css, onloaded_css);
	
	/* Load FONT
	================================================== */
	if (storyjs_e_config.font == "default") {
		ready.font.js		= true;
		ready.font.css		= true;
	} else {
		// FONT CSS
		var fn;
		if (storyjs_e_config.font.match("/")) {
			// TODO Issue #618 better splitting
			fn				= storyjs_e_config.font.split(".css")[0].split("/");
			path.font.name	= fn[fn.length -1];
			path.font.css	= storyjs_e_config.font;
		} else {
			path.font.name	= storyjs_e_config.font;
			path.font.css	= path.font.css + storyjs_e_config.font + ".css?" + js_version;
		}
		LoadLib.css(path.font.css, onloaded_font_css);
		
		// FONT GOOGLE JS
		for(var i = 0; i < font_presets.length; i++) {
			if (path.font.name == font_presets[i].name) {
				path.font.google = true;
				WebFontConfig = {google: { families: font_presets[i].google }};
			}
		}
		
		if (path.font.google) {
			LoadLib.js(path.font.js, onloaded_font_js);
		} else {
			ready.font.js		= true;
		}
		
	}
	
	/* Load jQuery
	================================================== */
	try {
	    ready.has_jquery = jQuery;
	    ready.has_jquery = true;
		if (ready.has_jquery) {
			var jquery_version_array = jQuery.fn.jquery.split(".");
			var jquery_version_required_array = jquery_version_required.split(".");
			ready.jquery = true;
			for (i = 0; i < 2; i++) {
				if (parseFloat(jquery_version_array[i]) < parseFloat(jquery_version_required_array[i])) {
					//console.log("NOT THE REQUIRED VERSION OF JQUERY, LOADING THE REQUIRED VERSION");
					//console.log("YOU HAVE VERSION " + jQuery.fn.jquery + ", JQUERY VERSION " + jquery_version_required + " OR ABOVE NEEDED");
					ready.jquery = false;
				}
			}
		}
	} catch(err) {
	    ready.jquery = false;
	}
	if (!ready.jquery) {
		LoadLib.js(path.jquery, onloaded_jquery);
	} else {
		onloaded_jquery();
	}
	
	/* On Loaded
	================================================== */
	
	function onloaded_jquery() {
		LoadLib.js(storyjs_e_config.js, onloaded_js);
	}
	function onloaded_js() {
		ready.js = true;
		if (storyjs_e_config.lang != "en") {
			LazyLoad.js(path.locale, onloaded_language);
		} else {
			ready.language = true;
		}
		onloaded_check();
	}
	function onloaded_language() {
		ready.language = true;
		onloaded_check();
	}
	function onloaded_css() {
		ready.css = true;
		onloaded_check();
	}
	function onloaded_font_css() {
		ready.font.css = true;
		onloaded_check();
	}
	function onloaded_font_js() {
		ready.font.js = true;
		onloaded_check();
	}
	function onloaded_check() {
		if (ready.checks > 40) {
			return;
			alert("Error Loading Files");
		} else {
			ready.checks++;
			if (ready.js && ready.css && ready.font.css && ready.font.js && ready.language) {
				if (!ready.finished) {
					ready.finished = true;
					buildEmbed();
				}
			} else {
				ready.timeout = setTimeout('onloaded_check_again();', 250);
			}
		}
	};
	this.onloaded_check_again = function() {
		onloaded_check();
	};
	
	/* Build Timeline
	================================================== */
	function createEmbedDiv() {
		var embed_classname	= "storyjs-embed";
		
		t = document.createElement('div');
		
		if (storyjs_e_config.embed_id != "") {
			te = document.getElementById(storyjs_e_config.embed_id);
		} else {
			te = document.getElementById("timeline-embed");
		}
		
		te.appendChild(t);
		t.setAttribute("id", storyjs_e_config.id);
		
		if (storyjs_e_config.width.toString().match("%") ) {
			te.style.width = storyjs_e_config.width.split("%")[0] + "%";
		} else {
			storyjs_e_config.width = storyjs_e_config.width - 2;
			te.style.width = (storyjs_e_config.width) + 'px';
		}
		
		if (storyjs_e_config.height.toString().match("%")) {
			te.style.height = storyjs_e_config.height;
			embed_classname	+= " full-embed";
			te.style.height = storyjs_e_config.height.split("%")[0] + "%";
			
		} else if (storyjs_e_config.width.toString().match("%")) {
			embed_classname	+= " full-embed";
			storyjs_e_config.height = storyjs_e_config.height - 16;
			te.style.height = (storyjs_e_config.height) + 'px';
		}else {
			embed_classname	+= " sized-embed";
			storyjs_e_config.height = storyjs_e_config.height - 16;
			te.style.height = (storyjs_e_config.height) + 'px';
		}
		
		te.setAttribute("class", embed_classname);
		te.setAttribute("className", embed_classname); 
		t.style.position = 'relative';
	}
	
	function buildEmbed() {
		VMM.debug = storyjs_e_config.debug;
		storyjs_embedjs = new VMM.Timeline(storyjs_e_config.id);
		storyjs_embedjs.init(storyjs_e_config);
		if (isCDN) {
			VMM.bindEvent(global, onHeadline, "HEADLINE");
		}
	}
		
}