Last active
August 29, 2015 14:24
-
-
Save jsanz/fa6d2361c4b8a59911b9 to your computer and use it in GitHub Desktop.
FOSS4G Odissey (WIP)
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="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.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 <a href="https://cartodb.com/team/jorge-sanz">Jorge Sanz</a> using | |
</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a> | |
</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-light/{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-light/{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> | |
<!-- CONTENT | |
For each conf: | |
- Find logo | |
- Website | |
- Photo of the group? | |
--> | |
<script id="md_template" type="text/template"> | |
``` | |
-baseurl: "https://cartocdn_a.global.ssl.fastly.net/base-light/{z}/{x}/{y}.png" | |
-title: "FOSS4G Odissey" | |
-author: "Jorge" | |
``` | |
#FOSS4G 2006: Laussane | |
``` | |
- center: [46.5518, 6.5860] | |
- zoom: 9 | |
L.marker([46.5518,6.5860]).actions.addRemove(S.map) | |
``` | |
This was the first FOSS4G conference after the agreement of joining several geo-conferences from different projcets | |
#FOSS4G 2007: Victoria | |
``` | |
- center: [48.4520, -123.3620] | |
- zoom: 10 | |
L.marker([48.4474, -123.3559]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2008: Cape Town | |
``` | |
- center: [-33.9137, 18.5175] | |
- zoom: 9 | |
L.marker([-33.9137, 18.5175]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2009: Sydney | |
``` | |
- center: [-33.8978, 151.1856] | |
- zoom: 9 | |
L.marker([-33.8978, 151.1856]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2010: Barcelona | |
``` | |
- center: [41.3737, 2.1698] | |
- zoom: 10 | |
L.marker([41.3737, 2.1698]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2011: Denver | |
``` | |
- center: [39.7684, -104.9991] | |
- zoom: 10 | |
L.marker([39.7684, -104.9991]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2013: Nottingham | |
``` | |
- center: [52.9701, -1.1618] | |
- zoom: 9 | |
L.marker([52.9701, -1.1618]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2014: Portland | |
``` | |
- center: [45.5160, -122.6733] | |
- zoom: 9 | |
L.marker([45.5160, -122.6733]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2015: Seoul | |
``` | |
- center: [37.5446, -233.0118] | |
- zoom: 9 | |
L.marker([37.5446, -233.0118]).actions.addRemove(S.map) | |
``` | |
#FOSS4G 2016: Bonn | |
``` | |
- center: [50.7191, 7.0889] | |
- zoom: 10 | |
L.marker([50.7191, 7.0889]).actions.addRemove(S.map) | |
``` | |
</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment