Created
December 3, 2014 18:57
-
-
Save clhenrick/9a65503a408bb19a8964 to your computer and use it in GitHub Desktop.
hacking odyssey part 2
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><html><head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Bushwick Community Map Intro</title> | |
<meta name="description" content="An introduction to the Bushwick Community Map"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<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="test" style="position:absolute; width:200px; height:200px; background:#FFF; top:0; right:0; z-index: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">Bushwick Community Map Introduction</span> | |
<span class="author"><strong id="author">By @clhenrick using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span> | |
</span></span></div> | |
<!-- JavaScript libraries --> | |
<!-- <script src="../js/cartodb.js"></script> | |
<script src="../js/odyssey.js"></script> --> | |
<!-- Javascripts --> | |
<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, | |
slides; | |
// fire this each time the user changes a slide | |
function trackCurrentSlide() { | |
slides = $('#slides').children(); // creates an array of slides | |
slides.each(function(i){ | |
if ($(this).hasClass('selected')) { | |
console.log('index: ', i); | |
checkIndex(i); | |
} | |
}); | |
} | |
// check the index being returned by trackCurrentSlide() | |
function checkIndex(index) { | |
if (index === 0) { | |
console.log('first slide!'); | |
} | |
else if (index === 1) { | |
console.log('second slide!'); | |
} | |
} | |
// test console.log function | |
var logTest = function() { | |
console.log('window event listen test'); | |
} | |
// trigger a custom event called SlideChange | |
var emitSlideChange = O.Action( function() { | |
$(document).trigger('slideChange', function() { | |
console.log(seq.current()) | |
}); | |
}); | |
// listen for the slideChange event to be triggered | |
function listenSlideChange() { | |
$(document).on('slideChange', function() { | |
// logTest() | |
trackCurrentSlide(); | |
}); | |
} | |
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); | |
} | |
}); | |
}); | |
// test Action | |
var test = O.Action(function() { | |
$('#test').append('<p>bla bla bla</p>'); | |
console.log('hey'); | |
}); | |
function click(el) { | |
var element = O.Core.getElement(el); | |
var t = O.Trigger(); | |
// TODO: clean properly | |
function click() { | |
// console.log(el); | |
t.trigger(); | |
} | |
if (element) element.onclick = click; | |
return t; | |
} | |
listenSlideChange(); | |
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([40.6941, -73.9162], 14); | |
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; | |
cur = O.Sequential().current(); | |
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), | |
test, | |
emitSlideChange, | |
resizeAction | |
); | |
actions.on("finish.app", function() { | |
adjustSlides(); | |
}); | |
this.story.addState( | |
this.seq.step(i), | |
actions | |
); | |
} // end for loop | |
this.story.go(this.seq.current()); | |
// console.log(this.seq.current()); // only logs 0 when map loads | |
}, | |
changeSlide: function(n) { | |
this.seq.current(n); | |
} | |
}); | |
</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: "The Bushwick Community Map" | |
-author: "@clhenrick" | |
-vizjson: "http://chenrick.cartodb.com/api/v2/viz/f4cbc5ac-688d-11e4-957b-0e9d821ea90d/viz.json" | |
-baseurl: "http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg" | |
``` | |
#The Bushwick Community Map | |
``` | |
- center: [40.6941, -73.9162] | |
- zoom: 15 | |
L.marker([40.6941, -73.9162]).actions.addRemove(S.map) | |
``` | |
## Introduction | |
bla bla bla | |
#Here's another slide! | |
``` | |
- center: [40.7348, -73.9970] | |
- zoom: 14 | |
L.marker([40.7348, -73.9970]).actions.addRemove(S.map) | |
``` | |
##Bla Bla Bla | |
Lorem Ipsum something bla bla bla | |
#A third slide here! | |
``` | |
- center: [40.6941, -73.9162] | |
- zoom: 16 | |
``` | |
##More stuff and stories | |
bla bla bla bla | |
</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment