2018-04-04 15:57:35 +00:00
|
|
|
/*************************
|
|
|
|
|
|
|
|
Giant "everything" class that handles all the misc UI:
|
|
|
|
navigation, modal dialogues, audio, etc
|
|
|
|
|
|
|
|
*************************/
|
|
|
|
function Navigation(){
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
// Navigation buttons
|
|
|
|
var nav_buttons = $all("#navigation > div");
|
|
|
|
nav_buttons.forEach(function(nav){
|
|
|
|
|
|
|
|
// Show label bubble
|
|
|
|
(function(nav){
|
|
|
|
nav.onmouseover = function(){
|
|
|
|
_showBubble(nav);
|
|
|
|
};
|
|
|
|
nav.onmouseout = function(){
|
|
|
|
_hideBubble();
|
|
|
|
};
|
|
|
|
})(nav);
|
|
|
|
|
|
|
|
// If it's a chapter, when you click it, go to that chapter!
|
|
|
|
var chapter = nav.getAttribute("chapter");
|
|
|
|
if(chapter){
|
|
|
|
(function(nav, chapter){
|
|
|
|
nav.onclick = function(){
|
2018-04-20 18:47:58 +00:00
|
|
|
publish("sound/button");
|
2018-04-04 15:57:35 +00:00
|
|
|
slideshow.gotoChapter(chapter);
|
|
|
|
};
|
2018-04-24 18:12:38 +00:00
|
|
|
_stopPropButton(nav);
|
2018-04-04 15:57:35 +00:00
|
|
|
})(nav, chapter);
|
|
|
|
}
|
|
|
|
|
2018-04-22 14:17:49 +00:00
|
|
|
// If it's a modal...
|
|
|
|
var modal = nav.getAttribute("modal");
|
|
|
|
if(modal){
|
|
|
|
(function(nav, modal){
|
|
|
|
nav.onclick = function(){
|
|
|
|
publish("sound/button");
|
|
|
|
publish("modal/"+modal);
|
|
|
|
};
|
2018-04-24 18:12:38 +00:00
|
|
|
_stopPropButton(nav);
|
2018-04-22 14:17:49 +00:00
|
|
|
})(nav, modal);
|
|
|
|
}
|
|
|
|
|
2018-04-04 15:57:35 +00:00
|
|
|
});
|
|
|
|
subscribe("slideshow/goto/",function(chapterID){
|
|
|
|
|
|
|
|
nav_buttons.forEach(function(nav){
|
|
|
|
var chapter = nav.getAttribute("chapter");
|
|
|
|
if(chapter==chapterID){
|
|
|
|
nav.setAttribute("highlight", true);
|
|
|
|
}else{
|
|
|
|
nav.removeAttribute("highlight");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// Navigation label bubble
|
|
|
|
var bubble = $("#nav_bubble");
|
|
|
|
var isShowingBubble = false;
|
|
|
|
var _showBubble = function(nav){
|
|
|
|
|
2018-04-24 14:22:06 +00:00
|
|
|
var offset = _getBoundingClientRect(nav).x - _getBoundingClientRect($("#navigation")).x;
|
2018-04-15 21:24:22 +00:00
|
|
|
var label = nav.children[1].innerHTML;
|
2018-04-25 18:46:26 +00:00
|
|
|
bubble.style.left = ( offset - (220/2) + (36/2) ) + "px";
|
2018-04-04 15:57:35 +00:00
|
|
|
bubble.innerHTML = label;
|
|
|
|
|
|
|
|
bubble.style.display = "block";
|
|
|
|
setTimeout(function(){
|
|
|
|
bubble.style.opacity = 1;
|
2018-04-25 18:46:26 +00:00
|
|
|
bubble.style.top = (-85) + "px";
|
2018-04-04 15:57:35 +00:00
|
|
|
},1);
|
|
|
|
isShowingBubble = true;
|
|
|
|
|
|
|
|
};
|
|
|
|
var _hideBubble = function(){
|
|
|
|
isShowingBubble = false;
|
|
|
|
bubble.style.opacity = 0;
|
2018-04-25 18:46:26 +00:00
|
|
|
bubble.style.top = (-80) + "px";
|
2018-04-04 15:57:35 +00:00
|
|
|
};
|
|
|
|
var _countdown = 0;
|
|
|
|
subscribe("update", function(){
|
|
|
|
if(isShowingBubble){
|
|
|
|
_countdown = 0.25;
|
|
|
|
}else{
|
|
|
|
if(_countdown>0){
|
|
|
|
_countdown -= 1/60;
|
|
|
|
}else{
|
|
|
|
bubble.style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2018-04-20 20:10:18 +00:00
|
|
|
// Sound
|
|
|
|
var isMute = false;
|
|
|
|
$("#sound").onclick = function(){
|
|
|
|
if(isMute){
|
|
|
|
Howler.mute(isMute = false);
|
|
|
|
$("#sound").setAttribute("mute","no");
|
|
|
|
}else{
|
|
|
|
Howler.mute(isMute = true);
|
|
|
|
$("#sound").setAttribute("mute","yes");
|
|
|
|
}
|
|
|
|
};
|
2018-04-24 18:12:38 +00:00
|
|
|
_stopPropButton($("#sound"));
|
2018-04-20 20:10:18 +00:00
|
|
|
|
2018-04-26 14:15:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/****************************
|
|
|
|
|
|
|
|
SOCIAL SHARING
|
|
|
|
|
|
|
|
****************************/
|
|
|
|
|
|
|
|
var shareURL = encodeURIComponent( window.location.href );
|
|
|
|
var shareTitle = encodeURIComponent( $("#share_title").innerText.trim() );
|
|
|
|
var shareDesc = encodeURIComponent( $("#share_desc").innerText.trim() );
|
|
|
|
|
|
|
|
$("#fb").href = "https://www.facebook.com/sharer/sharer.php?u="+shareURL+"&t="+shareDesc+" "+shareURL;
|
|
|
|
$("#tw").href = "https://twitter.com/intent/tweet?source="+shareURL+"&text="+shareDesc+" "+shareURL;
|
|
|
|
$("#em").href = "mailto:?subject="+shareTitle+"&body="+shareDesc+" "+shareURL;
|