// Modified by Bo Zhao, zhao2@oregonstate.edu
// Originally obtained from http://atlefren.github.io/storymap/
// Updated on 05/04/2018 | version 2.4.0 | MIT License
(function ($) {
$.fn.autoplay = function (options){
var defaults = {
selector: 'section',
stepperSelector: '.storymap-scroll-down'
};
var settings = $.extend(defaults, options);
var i = 0;
var sceneNum = $(settings.selector).length - 1;
setInterval(function(){
if ( i < sceneNum){
if ($('.storymap-navbar').length !== 0) {
window.scrollBy(0, $($(settings.selector)[i+1]).offset().top - $(window).scrollTop() - $('.storymap-navbar').height() - 30);
} else {
window.scrollBy(0, $($(settings.selector)[i+1]).offset().top - $(window).scrollTop() - 10);
}
i += 1;
}
}, 3000);
};
$.fn.storymap = function (options) {
var defaults = {
selector: '[data-scene]',
triggerpos: '30%',
navbar: false,
navwidget: false,
legend: true,
loader: true,
flyto: false,
scalebar: false,
scrolldown: true,
progressline: true,
mapinteraction: false,
createMap: function () {
var map = L.map($('.storymap-map')[0], {zoomControl: false}).setView([44, -120], 7);
// L.tileLayer('http://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png').addTo(map);
return map;
}
};
var settings = $.extend(defaults, options);
if (typeof(L) === 'undefined') {
throw new Error('Storymap requires Leaflet.');
}
function getDistanceToTop(elem, top) {
var docViewTop = $(window).scrollTop();
var elemTop = $(elem).offset().top;
var dist = elemTop - docViewTop;
var d = top - dist;
if (d < 0) {
return $(document).height();
}
return d;
}
function highlightTopPara(sections, top) {
var distances = $.map(sections, function (element) {
var dist = getDistanceToTop(element, top);
return {
el: $(element),
distance: dist
};
});
function findMin(pre, cur) {
if (pre.distance > cur.distance) {
return cur;
} else {
return pre;
}
}
var closest = distances.reduce(findMin);
$.each(sections, function (key, element) {
var section = $(element);
if (section[0] !== closest.el[0]) {
section.trigger('notviewing');
}
// if (section.height() <= $(window).height() * 0.33 ) {
// section.height($(window).height() * 0.33)
// }
if (section.height() <= $(window).height() * 0.33 && section.has("img").length === 0) {
section.height($(window).height() * 0.33)
}
});
if (!closest.el.hasClass('viewing')) {
closest.el.trigger('viewing');
}
}
function watchHighlight(element, searchfor, top) {
var sections = element.find(searchfor);
highlightTopPara(sections, top);
$(window).scroll(function () {
highlightTopPara(sections, top);
});
}
//support video for IE 8 and 9.
document.createElement('video');
var makeStoryMap = function (element, scenes) {
$(element).addClass("storymap");
var topElem = $('
')
.css('top', settings.triggerpos);
$('body').append(topElem);
var top = topElem.offset().top - $(window).scrollTop();
var searchfor = settings.selector;
var sections = $(element).find(searchfor);
var map = settings.createMap();
var currentLayerGroup = L.layerGroup().addTo(map);
var nav = $("nav");
if (settings.baselayer) {
// add an base map, which can be either OSM, mapbox, tilelayer, wmslayer or those designed by yourself.
settings.baselayer.layer.addTo(map);
}
if (settings.legend) {
$(".storymap").append("")
}
if (settings.scrolldown) {
$(".storymap").append("
keyboard_arrow_down
")
}
if (settings.scalebar) {
L.control.scale({
position: "bottomright",
metric: false
}).addTo(map);
}
if (settings.progressline) {
$(".storymap").append("")
}
if (settings.navwidget) {
$(".storymap").append("")
}
if (settings.loader) {
$(".storymap").append("
");
$.each(sections, function (key, element) {
var section = $(element);
// if no name attribute for a specific scene, the name on the navigation bar will be the object name.
if (typeof(scenes[section.data('scene')].name) === "undefined") {
sceneName = section.data('scene');
} else {
sceneName = scenes[section.data('scene')].name.replace(" ", " ");
}
scrollScript = "javascript:window.scrollBy(0, $('section[data-scene=\\'" + section.data('scene') + "\\']').offset().top - $(window).scrollTop() - $('.storymap-navbar').height() - 30);";
// $(".storymap-navbar").append('