Permalink
Fetching contributors…
Cannot retrieve contributors at this time
203 lines (182 sloc) 6.46 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>StoryMapJS Embed</title>
<meta charset="utf-8">
<meta name="description" content="StoryMapJS Embed">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- build:css ../css/storymap.css -->
<link rel="stylesheet" href="/build/css/storymap.css">
<!-- endbuild -->
<!-- build:js ../js/storymap-min.js -->
<script type="text/javascript" src="/build/js/storymap.js"></script>
<!-- endbuild -->
<!-- build:js ../js/json2.min.js -->
<script type="text/javascript" src="/build/js/json2.min.js"></script>
<!-- endbuild -->
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#storymap-embed {
/*border: 1px solid #999;*/
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="storymap-embed"></div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-27829802-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-27829802-2',
{
'anonymize_ip': true,
'linker': {
'domains': ['knightlab.com']
}
});
gtag('event', 'EmbeddedIn', {
'event_label': document.referrer,
'event_category': 'StoryMapJS',
'non_interaction': true
});
</script>
<script type="text/javascript">
function parseQuerystring() {
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
for(var i = 0; i < pairs.length; i++) {
var p = pairs[i].split('=');
nvpair[p[0]] = p[1];
}
return nvpair;
}
function getScriptPath(scriptname) {
var scriptTags = document.getElementsByTagName('script');
for(var i = 0; i < scriptTags.length; i++) {
if(scriptTags[i].src.match(scriptname)) {
script_path = scriptTags[i].src;
return script_path.split('?')[0].split('/').slice(0, -1).join('/');
}
}
return '';
}
function url_join(url, concat) { // see http://stackoverflow.com/questions/2676178/joining-relative-urls
function build(parts,container) {
for (var i = 0, l = parts.length; i < l; i ++) {
if (parts[i] == '..') {
container.pop();
} else if (parts[i] == '.') {
continue;
} else {
container.push(parts[i]);
}
}
}
var url_parts = [ ];
build(url.split('/'),url_parts);
build(concat.split('/'),url_parts);
return url_parts.join('/');
}
var storymap = null;
var params = parseQuerystring();
var storymap_url = decodeURIComponent(params['url']);
if(!!navigator.userAgent.match(/AppleWebKit\/.* Mobile\//)
|| !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
|| !!navigator.userAgent.toLowerCase().match(/msie [789]/)) {
if(storymap_url.match(/^https?:\/\/www\.googledrive\.com\/host\//)) {
storymap_url = location.protocol+'//proxy.knightlab.com/'+storymap_url.split('://')[1];
trace('proxy, '+storymap_url);
}
}
var options = {
script_path: getScriptPath(/storymap(-min)?\.js/),
start_at_slide: 0
};
if(params.hasOwnProperty('start_at_slide')) {
options.start_at_slide = parseInt(params.start_at_slide);
}
function storymap_onload(d) {
trace('embed: storymap data loaded');
if (d && d.storymap) {
var font = "stock:default";
if(d.font_css) {
font = d.font_css;
}
if(font.indexOf("stock:") == 0) {
var font_name = font.split(':')[1];
var base_url = url_join(options.script_path,"../css/fonts");
font = url_join(base_url, "font." + font_name + ".css");
} else if(!font.match('^(http|https|//)')) {
font = url_join(options.script_path, font);
}
VCO.Load.css(font,function(){ trace('font loaded: ' + font);});
storymap = new VCO.StoryMap('storymap-embed', d, options, {title: on_storymap_title});
}
var mapType = storymap.options.map_type;
if(mapType && mapType.match('^zoomify.*')) {
ga('send', 'event', 'StoryMapJS', 'zoomify', document.referrer)
}
}
function on_storymap_title(e) {
document.title = "StoryMapJS: " + e.title;
};
function storymap_getjson() {
if('withCredentials' in new XMLHttpRequest()) {
// Supports cross-domain requests
trace('embed: loading data via XMLHttpRequest');
VCO.getJSON(storymap_url, storymap_onload);
} else if(typeof XDomainRequest !== "undefined") {
// Use IE-specific "CORS" code with XDR
trace('embed: loading data via XDomainRequest');
var xdr = new XDomainRequest();
xdr.onload = function() {
storymap_onload(JSON.parse(xdr.responseText));
};
xdr.onerror = function() {
trace('embed: error loading data via XDomainRequest');
};
xdr.onprogress = function() {};
xdr.open("get", storymap_url);
xdr.send();
}
}
window.onload = function() {
if(storymap_url.match('\\.js$')) {
trace('embed: loading data via script injection');
var loaded = false;
var script = document.createElement("script");
script.type = "text/javascript";
script.src = storymap_url;
script.onload = script.onreadystatechange = function() {
if(!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
loaded = true;
storymap_onload(storymap_json);
}
}
// document.head not standard before HTML5
var insertionPoint = document.head || document.getElementsByTagName('head').item(0) || document.documentElement.childNodes[0];
insertionPoint.appendChild(script);
} else {
storymap_getjson();
}
}
window.onresize = function(event) {
if(storymap) {
storymap.updateDisplay();
}
}
</script>
</body>
</html>