Skip to content

Instantly share code, notes, and snippets.

@zacoppotamus

zacoppotamus/index.html

Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zacoppotamus/e8c5ec36046cbc841c85 to your computer and use it in GitHub Desktop.
Save zacoppotamus/e8c5ec36046cbc841c85 to your computer and use it in GitHub Desktop.
Download ZIP
Table Talk Stockists
Raw
index.html
<!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="slides.css">
<link rel="stylesheet" href="main.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-light/{z}/{x}/{y}.png';
var map = this.map = L.map('map', {scrollWheelZoom: false, zoomControl: false}).setView([0, 0.0], 4);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
// map.keyboard.disable();
var basemap = this.basemap = L.tileLayer(baseurl, {
attribution: 'data OSM - map CartoDB'
}).addTo(map);
// enable keys to move
O.Keys().on('map').left().then(seq.prev, seq)
O.Keys().on('map').right().then(seq.next, seq)
click(document.querySelectorAll('#map')).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>
<script type="text/template" id="md_template">```
-baseurl: "https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24"
-title: "Table Talk Stockists"
-author: "Table Talk"
```
#Distribution
```
- center: [40.7462, -73.9763]
- zoom: 13
```
Here's a list of our stockists
#Greenlight Bookstore
```
- center: [40.6861964, -73.9746329]
- zoom: 17
L.marker([40.6861, -73.9746]).actions.addRemove(S.map)
```
**Location**
686 Fulton St
Brooklyn, NY 11217
**Hours**
Mon - Sun: 10am - 10pm
**Phone**
+1 (718) 246-0200
**Website**
[greenlightbookstore.com/](http://www.greenlightbookstore.com/)
#McNally Jackson
```
- center: [40.7234, -73.9961]
- zoom: 17
L.marker([40.7234, -73.9961]).actions.addRemove(S.map)
```
**Location**
52 Prince Street
New York City, NY 10012
**Hours**
Mon - Sat: 10am - 10pm
Sun: 10am - 9pm
**Phone**
+1 (212) 274-1160
**Website**
[mcnallyjackson.com](http://mcnallyjackson.com)
#New Museum Store
```
- center: [40.722337, -73.9928445]
- zoom: 17
L.marker([40.722337, -73.9928445]).actions.addRemove(S.map)
```
**Location**
235 Bowery
New York City, NY 10002
**Hours**
Wed, Fri - Sun: 11am - 6pm
Thu: 11am - 9pm
**Phone**
+1 (212) 343-0460
**Website**
[newmuseumstore.org](http://www.newmuseumstore.org/)
#St. Mark's Bookshop
```
- center: [40.7238, -73.9859]
- zoom: 17
L.marker([40.7238, -73.9859]).actions.addRemove(S.map)
```
**Location**
136 East Third Street
New York City, NY 10009
**Hours**
Mon-Sat: 11am - 11pm
Sun: 12pm - 11pm
**Phone**
+1 (212) 260-7853
**Website**
[stmarksbookshop.com](http://www.stmarksbookshop.com)
#Sequence Press
```
- center: [40.7173, -73.9923]
- zoom: 17
L.marker([40.7173, -73.9923]).actions.addRemove(S.map)
```
**Location**
Miguel Abreu Gallery
88 Eldridge Street
New York, NY 10002
**Hours**
Wed-Sun: 10.30am - 6.30pm
**Website**
[sequencepress.com](http://www.sequencepress.com/)
#ARTBOOK @ MoMA PS1
```
- center: [40.7457, -73.9475]
- zoom: 17
L.marker([40.7457, -73.9475]).actions.addRemove(S.map)
```
**Location**
22-25 Jackson Ave (at 46th Ave.)
Long Island City, NY 11101
**Hours**
Thu-Mon: 12pm - 6pm
**Website**
[artbook.com](http://www.artbook.com/artbookps1.html)
**Phone**
+1 (718) 433-1088
#BookCourt
```
- center: [40.68866, -73.99265]
- zoom: 17
L.marker([40.68866, -73.99265]).actions.addRemove(S.map)
```
**Location**
163 Court Street
Brooklyn, NY 11201
**Hours**
Mon-Sat: 9.00am - 10.00pm
Sun: 10.00am - 10.00pm
**Website**
[bookcourt.com](http://www.bookcourt.com)
**Phone**
+1 (718) 875-3677
#Book Culture
```
- center: [40.8050, -73.9649]
- zoom: 17
L.marker([40.8050, -73.9649]).actions.addRemove(S.map)
```
**Location**
536 West 112th Street
New York, NY 10025-1601
**Hours**
Mon-Fri: 9.00am - 10.00pm
Sat: 10.00am - 8.00pm
Sun: 11.00am - 7.00pm
**Website**
[bookculture.com](http://www.bookculture.com/)
**Phone**
+1 (212) 865-1588
#Labyrinth Books
```
- center: [40.3501, -74.6590]
- zoom: 17
L.marker([40.3501, -74.6590]).actions.addRemove(S.map)
```
**Location**
122 Nassau Street
Princeton, NJ 08542
**Hours**
Mon-Fri: 9am - 8pm
Sat: 10am - 6pm
Sun: 11am - 6pm
**Website**
[labyrinthbooks.com](http://www.labyrinthbooks.com/)
**Phone**
+1 (609) 497-1600
#London Review Bookshop
```
- center: [51.5185, -0.1243]
- zoom: 17
L.marker([51.5185, -0.1243]).actions.addRemove(S.map)
```
**Location**
14 Bury Place, London
London, WC1A 2JL
**Hours**
Mon-Sat: 10am - 6.30pm
Sun: 12pm - 6pm
**Website**
[londonreviewbookshop.co.uk](http://www.londonreviewbookshop.co.uk)
**Phone**
+44 (0) 20 7269 9030
#Belgravia Books
```
- center: [51.4951, -0.1479]
- zoom: 17
L.marker([51.4951, -0.1479]).actions.addRemove(S.map)
```
**Location**
59 Ebury Street
London, SW1W 0NZ
**Hours**
Mon-Fri: 9.30am - 6pm
Sat: 11am - 5pm
**Website**
[belgraviabooks.com](http://www.belgraviabooks.com)
**Phone**
+44 (0) 20 7259 9336
#Artwords Bookshop
```
- center: [51.5263, -0.0800]
- zoom: 17
L.marker([51.5263, -0.0800]).actions.addRemove(S.map)
```
**Location**
69 Rivington Street
London, EC2A 3AY
**Hours**
Mon-Fri: 10.30am - 7pm
Sat: 11am - 7pm
Sun: 10am - 6pm
**Website**
[artwords.co.uk](http://www.artwords.co.uk)
**Phone**
+44 (0) 20 7729 2000
#Artwords Bookshop
```
- center: [51.5360, -0.0619]
- zoom: 17
L.marker([51.5360, -0.0619]).actions.addRemove(S.map)
```
**Location**
20-22 Broadway Market
London, E8 4QJ
**Hours**
Mon-Fri: 10.30am - 8pm
Sat-Sun: 10am - 6pm
**Website**
[artwords.co.uk](http://www.artwords.co.uk)
**Phone**
+44 (0) 20 7729 2000
#Housmans
```
- center: [51.5355, -0.1178]
- zoom: 17
L.marker([51.5355, -0.1178]).actions.addRemove(S.map)
```
**Location**
5 Caledonian Road - King's Cross
London, N1 9DX
**Hours**
Mon-Fri: 10am - 6.30pm
Sat: 10am - 6pm
Sun: 12pm - 6pm
**Website**
[housmans.com](http://www.housmans.com/)
**Phone**
+44 (0) 20 7837 4473
#Foyles
```
- center: [51.5146, -0.130227]
- zoom: 17
L.marker([51.5146, -0.130227]).actions.addRemove(S.map)
```
**Location**
Foyles, 107 Charing Cross Road,
London, WC2H 0DT
**Hours**
Mon-Sat: 9.30am - 9.00pm
Sun: 11.30pm - 6pm
**Website**
[foyles.co.uk](http://www.foyles.co.uk/)
#Artificium
```
- center: [52.5242, 13.4026]
- zoom: 17
L.marker([52.5242, 13.4026]).actions.addRemove(S.map)
```
**Location**
Rosenthaler Strasse 40-41
Berlin, 10178
**Hours**
Mon-Thu: 10am - 8pm
Fri-Sat: 10am - 9pm
**Website**
[artificium.com](http://www.artificium.com)
**Phone**
+49 (0) 30 30872280 / 84
#Do you read me?
```
- center: [52.5271, 13.3979]
- zoom: 17
L.marker([52.5271, 13.3979]).actions.addRemove(S.map)
```
**Location**
Auguststrasse 28
Berlin, 10117
**Hours**
Mon-Sat: 10am - 7.30pm
**Website**
[doyoureadme.de](http://www.doyoureadme.de/)
**Phone**
+49 (0) 30 695 49 695
#Pro qm
```
- center: [52.5267, 13.4100]
- zoom: 17
L.marker([52.5267, 13.4100]).actions.addRemove(S.map)
```
**Location**
Almstadtstraße 48-50
Berlin, 10119
**Hours**
Mon-Sat: 11am - 8pm
**Website**
[pro-qm.de](http://www.pro-qm.de)
**Phone**
+49 (0) 30 247 28 520
#Robinson Crusoe 389
```
- center: [41.0311, 28.9758]
- zoom: 18
L.marker([41.0311, 28.9758]).actions.addRemove(S.map)
```
**Location**
İstiklâl Street 136
Beyoğlu İstanbul, 34433
**Hours**
Mon-Sat: 9am - 9.30pm
Sun: 10am - 9.30pm
**Website**
[rob389.com](http://www.rob389.com/)
**Phone**
+90 212 293 6968
#Basheer Graphic Books
```
- center: [1.2965, 103.8535]
- zoom: 17
L.marker([1.2965, 103.8535]).actions.addRemove(S.map)
```
**Location**
Bras Basah Complex
231 Bain Street
Singapore, 180231
**Hours**
Mon-Sat: 10am - 8pm
Sun: 11am - 6.30pm
**Website**
[basheergraphic.com](http://basheergraphic.com)
**Phone**
+65 6336 1917
</script></body></html>
Raw
main.css
div#credits {
visibility: hidden;
}
#map:active {
cursor: pointer;
}
Raw
slides.css
@import url(http://fast.fonts.net/t/1.css?apiType=css&projectid=3af16084-ba56-49ca-b37d-0b49b59e1927);
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline;
margin:0;
padding:0;
}
html {
line-height:1;
}
ol,ul {
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
caption,th,td {
text-align:left;
font-weight:400;
vertical-align:middle;
}
q,blockquote {
quotes:none;
}
q:before,q:after,blockquote:before,blockquote:after {
content:none;
}
a img {
border:none;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display:block;
}
@font-face {
font-family:ProximaNovaBold;
src:url(//cartodb-assets.global.ssl.fastly.net/odyssey.js/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?#iefix) format(embedded-opentype),url(//cartodb-assets.global.ssl.fastly.net/odyssey.js/d999c07b-a049-4eb5-b8a6-4f36ae25e67e.woff) format(woff),url(//cartodb-assets.global.ssl.fastly.net/odyssey.js/4d4a75f5-d32a-4a09-8665-133afd39cc37.ttf) format(truetype),url(//cartodb-assets.global.ssl.fastly.net/odyssey.js/8152bc4e-d700-4c78-b6be-326893e6f53f.svg) format(svg);
}
body {
overflow:hidden;
}
#map {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slides_container {
display:none;
position:absolute;
top:40px;
left:40px;
width:320px;
background-color:rgba(255,255,255,0.7);
z-index:10;
padding:40px 20px 40px 40px;
}
#slides_container .slide {
display:none;
overflow-y:auto;
padding-right:20px;
}
#slides_container .slide.scrolled img {
width:100%;
margin:20px 0;
}
#slides_container .slide strong {
font-family:AleoBold;
}
#slides_container .slide em {
font-style:italic;
}
#slides_container h1,#slides_container h2,#slides_container h3,#slides_container h4,#slides_container h5,#slides_container h6 {
font-family:Helvetica, 'Proxima N W01 Bold', Sans-serif;
color:#333;
font-size:45px;
}
#slides_container h1:after,#slides_container h2:after,#slides_container h3:after,#slides_container h4:after,#slides_container h5:after,#slides_container h6:after {
display:block;
height:3px;
content:" ";
text-shadow:none;
background-color:#333;
width:140px;
margin:20px 0;
}
#slides_container h2,#slides_container h3,#slides_container h4,#slides_container h5,#slides_container h6 {
font-size:19px;
}
#slides_container h2:after,#slides_container h3:after,#slides_container h4:after,#slides_container h5:after,#slides_container h6:after {
height:1px;
width:180px;
margin:18px 0;
}
#slides_container p,#slides_container span {
font-family:AleoRegular, Serif;
color:#333;
font-size:15px;
line-height:21px;
margin:0 0 19px;
}
#slides_container a {
color:#FF7373;
text-decoration:none;
}
#slides_container a:hover {
text-decoration:underline;
}
#front_slide.hidden {
display:none;
}
#dots {
margin:0 0 20px;
}
#dots li {
display:inline;
}
#dots li a {
opacity:0.2;
color:#333;
}
#dots li a:before {
content:' \25CF';
font-size:16px;
}
#dots li a.active {
opacity:1;
}
#dots li a:hover {
opacity:1;
cursor:pointer;
text-decoration:none;
}
#slides_container img {
max-width:100%;
margin:20px 0;
}
ul#navButtons {
margin:20px 0 0;
}
ul#navButtons li {
width:30px;
display:inline;
}
ul#navButtons li a {
display:inline-block;
width:23px;
height:30px;
background:transparent url(navBtns.png?1407168450) no-repeat -10px 0;
}
ul#navButtons li a:hover {
background-position:-10px -30px;
cursor:pointer;
}
ul#navButtons li a.next {
background:transparent url(navBtns.png?1407168450) no-repeat -30px 0;
}
ul#navButtons li a.next:hover {
background-position:-30px -30px;
}
div#credits {
position:absolute;
bottom:0;
left:0;
right:0;
height:44px;
background-color:#FFF;
z-index:1000001;
}
div#credits a {
color:#ff7373;
}
div#credits span {
position:absolute;
font-size:12px;
text-transform:uppercase;
padding:18px 0 0;
}
div#credits span.title {
left:40px;
font-family:'Proxima N W01 Bold', Sans-serif;
color:#333;
}
div#credits span.author {
right:40px;
font-family:AleoRegular, Serif;
color:#999;
letter-spacing:2px;
font-size:10px;
text-align:right;
}
.slide-tip {
position:absolute;
top:-18px;
width:3px;
height:37px;
border:3px solid transparent;
border-top:0;
border-bottom-color:#ddd;
text-align:center;
}
.slide-tip:hover .tooltip {
display:inline-block!important;
}
.slide-tip:hover:after {
background:#ccc;
width:3px;
}
.slide-tip:after {
content:"";
display:inline-block;
background:#ddd;
width:1px;
height:40px;
-moz-transition:all .15s ease-in-out;
-o-transition:all .15s ease-in-out;
-webkit-transition:all .15s ease-in-out;
transition:all .15s ease-in-out;
}
.slide-tip .tooltip {
position:absolute;
display:none;
background:rgba(0,0,0,0.85);
bottom:50px;
max-width:200px;
margin-left:-17px;
box-shadow:0 0 1px rgba(255,255,255,0.2);
border-radius:2px;
color:#FFF;
line-height:1;
text-align:left;
font-size:12px;
white-space:nowrap;
padding:10px;
}
.slide-tip .tooltip h1,.slide-tip .tooltip p {
height:auto;
text-align:left;
color:#EEE;
font-weight:400;
line-height:1.1;
width:auto;
margin:0;
padding:0;
}
.slide-tip .tooltip h1 {
font-weight:700;
margin-bottom:8px;
font-size:11px;
}
.slide-tip .tooltip p {
white-space:nowrap;
}
.slide-tip .tooltip:after {
content:"";
display:block;
position:absolute;
bottom:-5px;
left:10px;
border-top:5px solid rgba(0,0,0,0.85);
border-left:7px solid transparent;
border-right:7px solid transparent;
}
div.cartodb-timeslider .ui-slider .ui-slider-range {
background-color:#FF7373;
}
.cartodb-timeslider {
bottom:50px!important;
left:40px!important;
}
#slides_container.visible,#slides_container .slide.selected {
display:block!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment