Last active
January 22, 2016 09:24
-
-
Save nerik/ed679dc2078330783a84 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
data |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype><html><head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Odyssey.js Slides</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png"> | |
<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png"> | |
<link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css"> | |
<link rel="stylesheet" href="http://cartodb.github.io/odyssey.js/sandbox/css/slides.css"> | |
<script src="http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script> | |
</head> | |
<body> | |
<div id="map" style="width: 100%; height: 100%;"></div> | |
<div id="slides_container" style="display:block;"> | |
<div id="dots"></div> | |
<div id="slides"></div> | |
<ul id="navButtons"> | |
<li><a class="prev"></a></li> | |
<li><a class="next"></a></li> | |
</ul> | |
</div> | |
<div id="credits"> | |
<span class="title" id="title">Title</span> | |
<span class="author"><strong id="author">By Name using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span> | |
</span></span></div> | |
<script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script> | |
<script src="http://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script> | |
<script> | |
var resizePID; | |
function clearResize() { | |
clearTimeout(resizePID); | |
resizePID = setTimeout(function() { adjustSlides(); }, 100); | |
} | |
if (!window.addEventListener) { | |
window.attachEvent("resize", function load(event) { | |
clearResize(); | |
}); | |
} else { | |
window.addEventListener("resize", function load(event) { | |
clearResize(); | |
}); | |
} | |
function adjustSlides() { | |
var container = document.getElementById("slides_container"), | |
slide = document.querySelectorAll('.selected_slide')[0]; | |
if (slide) { | |
if (slide.offsetHeight+169+40+80 >= window.innerHeight) { | |
container.style.bottom = "80px"; | |
var h = container.offsetHeight; | |
slide.style.height = h-169+"px"; | |
slide.classList.add("scrolled"); | |
} else { | |
container.style.bottom = "auto"; | |
container.style.minHeight = "0"; | |
slide.style.height = "auto"; | |
slide.classList.remove("scrolled"); | |
} | |
} | |
} | |
var resizeAction = O.Action(function() { | |
function imageLoaded() { | |
counter--; | |
if (counter === 0) { | |
adjustSlides(); | |
} | |
} | |
var images = $('img'); | |
var counter = images.length; | |
images.each(function() { | |
if (this.complete) { | |
imageLoaded.call( this ); | |
} else { | |
$(this).one('load', imageLoaded); | |
} | |
}); | |
}); | |
function click(el) { | |
var element = O.Core.getElement(el); | |
var t = O.Trigger(); | |
// TODO: clean properly | |
function click() { | |
t.trigger(); | |
} | |
if (element) element.onclick = click; | |
return t; | |
} | |
O.Template({ | |
init: function() { | |
var seq = O.Triggers.Sequential(); | |
var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png'; | |
var map = this.map = L.map('map').setView([0, 0.0], 4); | |
var basemap = this.basemap = L.tileLayer(baseurl, { | |
attribution: 'data OSM - map CartoDB' | |
}).addTo(map); | |
// enanle keys to move | |
O.Keys().on('map').left().then(seq.prev, seq) | |
O.Keys().on('map').right().then(seq.next, seq) | |
click(document.querySelectorAll('.next')).then(seq.next, seq) | |
click(document.querySelectorAll('.prev')).then(seq.prev, seq) | |
var slides = O.Actions.Slides('slides'); | |
var story = O.Story() | |
this.story = story; | |
this.seq = seq; | |
this.slides = slides; | |
this.progress = O.UI.DotProgress('dots').count(0); | |
}, | |
update: function(actions) { | |
var self = this; | |
if (!actions.length) return; | |
this.story.clear(); | |
if (this.baseurl && (this.baseurl !== actions.global.baseurl)) { | |
this.baseurl = actions.global.baseurl || 'http://0.api.cartocdn.com/base-dark/{z}/{x}/{y}.png'; | |
this.basemap.setUrl(this.baseurl); | |
} | |
if (this.cartoDBLayer && ("http://"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) { | |
this.map.removeLayer(this.cartoDBLayer); | |
this.cartoDBLayer = null; | |
this.created = false; | |
} | |
if (actions.global.vizjson && !this.cartoDBLayer) { | |
if (!this.created) { // sendCode debounce < vis loader | |
cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) { | |
self.map.fitBounds(vizjson.bounds); | |
cartodb.createLayer(self.map, vizjson) | |
.done(function(layer) { | |
self.cartoDBLayer = layer; | |
var sublayer = layer.getSubLayer(0), | |
layer_name = layer.layers[0].options.layer_name, | |
filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : ""; | |
sublayer.setSQL("SELECT * FROM "+layer_name+filter) | |
self.map.addLayer(layer); | |
self._resetActions(actions); | |
}).on('error', function(err) { | |
console.log("some error occurred: " + err); | |
}); | |
}); | |
this.created = true; | |
} | |
return; | |
} | |
this._resetActions(actions); | |
}, | |
_resetActions: function(actions) { | |
// update footer title and author | |
var title_ = actions.global.title === undefined ? '' : actions.global.title, | |
author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using'; | |
document.getElementById('title').innerHTML = title_; | |
document.getElementById('author').innerHTML = author_; | |
document.title = title_ + " | " + author_ +' Odyssey.js'; | |
var sl = actions; | |
document.getElementById('slides').innerHTML = '' | |
this.progress.count(sl.length); | |
// create new story | |
for(var i = 0; i < sl.length; ++i) { | |
var slide = sl[i]; | |
var tmpl = "<div class='slide' style='diplay:none'>"; | |
tmpl += slide.html(); | |
tmpl += "</div>"; | |
document.getElementById('slides').innerHTML += tmpl; | |
this.progress.step(i).then(this.seq.step(i), this.seq) | |
var actions = O.Parallel( | |
this.slides.activate(i), | |
slide(this), | |
this.progress.activate(i), | |
resizeAction | |
); | |
actions.on("finish.app", function() { | |
adjustSlides(); | |
}); | |
this.story.addState( | |
this.seq.step(i), | |
actions | |
) | |
} | |
this.story.go(this.seq.current()); | |
}, | |
changeSlide: function(n) { | |
this.seq.current(n); | |
} | |
}); | |
</script> | |
<script> | |
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
ga('create', 'UA-20934186-21', 'cartodb.github.io'); | |
ga('send', 'pageview'); | |
</script> | |
<script type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script> | |
<script id="md_template" type="text/template">``` | |
-title: "Star Wars filming locations" | |
-author: "CartoDB" | |
-vizjson: "http://nerik.cartodb.com/api/v2/viz/4c9d71ee-a416-11e5-baef-0e787de82d45/viz.json" | |
``` | |
#Star Wars filming locations | |
``` | |
- center: [45.0890, -32.3438] | |
- zoom: 3 | |
``` | |
Some intro | |
#London region | |
``` | |
- center: [51.5019, -0.5466] | |
- zoom: 9 | |
``` | |
Read | |
http://starwars.wikia.com/wiki/Elstree_Studios | |
http://www.hollywoodreporter.com/news/star-wars-heading-back-londons-747786 | |
#Tunisia / Tattouine | |
``` | |
- center: [33.6398, 10.1898] | |
- zoom: 8 | |
``` | |
See http://www.losapos.com/starwarstunisia | |
</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment