All examples By author By category About

clhenrick

Full window Github gist

hacking odyssey part 2

<!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">

</head>
  <body>
      <div id="map" style="width: 100%; height: 100%;"></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="https://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
      </span></span></div>

<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
      <script src="https://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></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();

// 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 || 'https://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';

this.basemap.setUrl(this.baseurl);
            }

if (this.cartoDBLayer && ("https://"+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>

#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>

Modified http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js to a secure url

Modified http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js to a secure url

Modified http://cartodb.github.io/odyssey.js/dist/odyssey.js to a secure url

Modified http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js to a secure url

https://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js

https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js

https://cartodb.github.io/odyssey.js/dist/odyssey.js

https://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js