Add inner navigation feature. Closes #4.
This commit is contained in:
Oleg Roschupkin
parent
bb7407a0e7
commit
df3401ed9d
4
en.htm
4
en.htm
|
|
@ -172,7 +172,7 @@
|
|||
|
||||
After activation of the last child pressing next
|
||||
button will turn next slide.
|
||||
|
||||
-->
|
||||
<div class="slide" id="InnerNavigation"><div>
|
||||
<section>
|
||||
<header>
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
<li>Erase your hard drive.</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div></div> -->
|
||||
</div></div>
|
||||
<div class="slide" id="ThankYou"><div>
|
||||
<section>
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@
|
|||
slides = document.querySelectorAll('div.slide'),
|
||||
progress = document.querySelector('div.progress div'),
|
||||
slideList = [],
|
||||
l = slides.length,
|
||||
i;
|
||||
l = slides.length, i;
|
||||
|
||||
for (i = 0; i < l; i++) {
|
||||
slideList.push(slides[i].id);
|
||||
slideList.push({
|
||||
id: slides[i].id,
|
||||
hasInnerNavigation: null !== slides[i].querySelector('.inner')
|
||||
});
|
||||
}
|
||||
|
||||
function getTransform() {
|
||||
|
|
@ -28,62 +30,73 @@
|
|||
body.style.transform = transform;
|
||||
}
|
||||
|
||||
function enterSingleSlideMode() {
|
||||
function enterSlideMode() {
|
||||
body.className = 'full';
|
||||
applyTransform(getTransform());
|
||||
}
|
||||
|
||||
function enterSlideListMode() {
|
||||
function enterListMode() {
|
||||
body.className = 'list';
|
||||
applyTransform('none');
|
||||
}
|
||||
|
||||
function getCurrentSlideNumber() {
|
||||
return slideList.indexOf(url.hash.substr(1));
|
||||
var i, l = slideList.length,
|
||||
currentSlideId = url.hash.substr(1);
|
||||
|
||||
for (i = 0; i < l; ++i) {
|
||||
if (currentSlideId === slideList[i].id) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
function scrollToCurrentSlide() {
|
||||
var current_slide = document.getElementById(slideList[getCurrentSlideNumber()]);
|
||||
var currentSlide = document.getElementById(
|
||||
slideList[getCurrentSlideNumber()].id
|
||||
);
|
||||
|
||||
if (null != current_slide) {
|
||||
window.scrollTo(0, current_slide.offsetTop);
|
||||
if (null != currentSlide) {
|
||||
window.scrollTo(0, currentSlide.offsetTop);
|
||||
}
|
||||
}
|
||||
|
||||
function isSlideListMode() {
|
||||
function isListMode() {
|
||||
return 'full' !== url.search.substr(1);
|
||||
}
|
||||
|
||||
function normalizeSlideNumber(slide_number) {
|
||||
if (0 > slide_number) {
|
||||
function normalizeSlideNumber(slideNumber) {
|
||||
if (0 > slideNumber) {
|
||||
return slideList.length - 1;
|
||||
} else if (slideList.length <= slide_number) {
|
||||
} else if (slideList.length <= slideNumber) {
|
||||
return 0;
|
||||
} else {
|
||||
return slide_number;
|
||||
return slideNumber;
|
||||
}
|
||||
}
|
||||
|
||||
function updateProgress(slide_number) {
|
||||
if (!progress) return;
|
||||
progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slide_number)).toFixed(2) + '%';
|
||||
function updateProgress(slideNumber) {
|
||||
if (null === progress) { return; }
|
||||
progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
|
||||
}
|
||||
|
||||
function getSlideHashByNumber(slide_number) {
|
||||
return '#' + slideList[normalizeSlideNumber(slide_number)];
|
||||
function getSlideHash(slideNumber) {
|
||||
return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
|
||||
}
|
||||
|
||||
function goToSlide(slide_number) {
|
||||
url.hash = getSlideHashByNumber(slide_number);
|
||||
function goToSlide(slideNumber) {
|
||||
url.hash = getSlideHash(slideNumber);
|
||||
|
||||
if (!isSlideListMode()) {
|
||||
updateProgress(slide_number);
|
||||
if (!isListMode()) {
|
||||
updateProgress(slideNumber);
|
||||
}
|
||||
}
|
||||
|
||||
function getContainingSlideId(el) {
|
||||
var node = el;
|
||||
while ('BODY' !== node.nodeName) {
|
||||
while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
|
||||
if (-1 !== node.className.indexOf('slide')) {
|
||||
return node.id;
|
||||
} else {
|
||||
|
|
@ -97,78 +110,111 @@
|
|||
function dispatchSingleSlideMode(e) {
|
||||
var slideId = getContainingSlideId(e.target);
|
||||
|
||||
if ('' !== slideId && isSlideListMode()) {
|
||||
if ('' !== slideId && isListMode()) {
|
||||
e.preventDefault();
|
||||
|
||||
// NOTE: we should update hash to get things work properly
|
||||
url.hash = '#' + slideId;
|
||||
history.replaceState(null, null, url.pathname + '?full#' + slideId);
|
||||
enterSingleSlideMode();
|
||||
enterSlideMode();
|
||||
|
||||
updateProgress(getCurrentSlideNumber());
|
||||
}
|
||||
}
|
||||
|
||||
// Increases inner navigation by adding 'active' class to next inactive
|
||||
// inner navigation item.
|
||||
function increaseInnerNavigation(slideNumber) {
|
||||
// Shortcut for slides without inner navigation
|
||||
if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
|
||||
|
||||
var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
|
||||
// NOTE: we assume there is no other elements in inner navigation
|
||||
node = activeNodes[activeNodes.length - 1].nextElementSibling;
|
||||
|
||||
if (null !== node) {
|
||||
node.classList.add('active');
|
||||
// NOTE: 'auto-added' class is used in resetInnerNavigation - to
|
||||
// overcome problems with manually added 'active' class.
|
||||
node.classList.add('auto-added');
|
||||
|
||||
return activeNodes.length + 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Resets inner navigation by removing 'active' class from all previously
|
||||
// activated elements.
|
||||
function resetInnerNavigation(slideNumber) {
|
||||
// Shortcut for slides without inner navigation
|
||||
if (true !== slideList[slideNumber].hasInnerNavigation) { return; }
|
||||
|
||||
var activeNodes = document.querySelectorAll(
|
||||
getSlideHash(slideNumber) + ' .active.auto-added'
|
||||
),
|
||||
i = 0, l;
|
||||
|
||||
for (l = activeNodes.length; i < l; i++) {
|
||||
activeNodes[i].classList.remove('active');
|
||||
activeNodes[i].classList.remove('auto-added');
|
||||
}
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
if (!isSlideListMode()) {
|
||||
// "?full" is present without slide hash so we should display first
|
||||
if (!isListMode()) {
|
||||
// "?full" is present without slide hash, so we should display first
|
||||
// slide
|
||||
if ( -1 === getCurrentSlideNumber() ) {
|
||||
history.replaceState(null, null, url.pathname + '?full' + getSlideHashByNumber( 0 ) );
|
||||
if (-1 === getCurrentSlideNumber()) {
|
||||
history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0));
|
||||
}
|
||||
|
||||
enterSingleSlideMode();
|
||||
enterSlideMode();
|
||||
updateProgress(getCurrentSlideNumber());
|
||||
}
|
||||
}, false);
|
||||
|
||||
window.addEventListener('popstate', function (e) {
|
||||
if (isSlideListMode()) {
|
||||
enterSlideListMode();
|
||||
if (isListMode()) {
|
||||
enterListMode();
|
||||
scrollToCurrentSlide();
|
||||
} else {
|
||||
enterSingleSlideMode();
|
||||
enterSlideMode();
|
||||
}
|
||||
}, false);
|
||||
|
||||
window.addEventListener('resize', function (e) {
|
||||
if (!isSlideListMode()) {
|
||||
if (!isListMode()) {
|
||||
applyTransform(getTransform());
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.altKey || e.ctrlKey || e.metaKey) return;
|
||||
// Shortcut for alt, shift and meta keys
|
||||
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
|
||||
|
||||
var current_slide_number = getCurrentSlideNumber();
|
||||
var currentSlideNumber = getCurrentSlideNumber();
|
||||
|
||||
switch (e.which) {
|
||||
case 9: // Tab = +1; Shift + Tab = -1
|
||||
if (isSlideListMode()) {
|
||||
e.preventDefault();
|
||||
|
||||
current_slide_number += e.shiftKey ? -1 : 1;
|
||||
url.hash = getSlideHashByNumber(current_slide_number);
|
||||
}
|
||||
break;
|
||||
|
||||
case 13: // Enter
|
||||
if (isSlideListMode()) {
|
||||
if (isListMode()) {
|
||||
e.preventDefault();
|
||||
|
||||
history.pushState(null, null, url.pathname + '?full' + getSlideHashByNumber(current_slide_number));
|
||||
enterSingleSlideMode();
|
||||
history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
|
||||
enterSlideMode();
|
||||
|
||||
updateProgress(current_slide_number);
|
||||
updateProgress(currentSlideNumber);
|
||||
}
|
||||
break;
|
||||
|
||||
case 27: // Esc
|
||||
if (!isSlideListMode()) {
|
||||
if (!isListMode()) {
|
||||
e.preventDefault();
|
||||
|
||||
history.pushState(null, null, url.pathname + getSlideHashByNumber(current_slide_number));
|
||||
enterSlideListMode();
|
||||
history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
|
||||
enterListMode();
|
||||
scrollToCurrentSlide();
|
||||
}
|
||||
break;
|
||||
|
|
@ -180,8 +226,9 @@
|
|||
case 75: // k
|
||||
e.preventDefault();
|
||||
|
||||
current_slide_number--;
|
||||
goToSlide(current_slide_number);
|
||||
resetInnerNavigation(currentSlideNumber);
|
||||
currentSlideNumber--;
|
||||
goToSlide(currentSlideNumber);
|
||||
break;
|
||||
|
||||
case 34: // PgDown
|
||||
|
|
@ -191,29 +238,41 @@
|
|||
case 74: // j
|
||||
e.preventDefault();
|
||||
|
||||
current_slide_number++;
|
||||
goToSlide(current_slide_number);
|
||||
// Only go to next slide if current slide have no inner
|
||||
// navigation or inner navigation is fully shown
|
||||
if (
|
||||
!slideList[currentSlideNumber].hasInnerNavigation ||
|
||||
-1 === increaseInnerNavigation(currentSlideNumber)
|
||||
) {
|
||||
resetInnerNavigation(currentSlideNumber);
|
||||
currentSlideNumber++;
|
||||
goToSlide(currentSlideNumber);
|
||||
}
|
||||
break;
|
||||
|
||||
case 36: // Home
|
||||
e.preventDefault();
|
||||
|
||||
current_slide_number = 0;
|
||||
goToSlide(current_slide_number);
|
||||
resetInnerNavigation(currentSlideNumber);
|
||||
currentSlideNumber = 0;
|
||||
goToSlide(currentSlideNumber);
|
||||
break;
|
||||
|
||||
case 35: // End
|
||||
e.preventDefault();
|
||||
|
||||
current_slide_number = slideList.length - 1;
|
||||
goToSlide(current_slide_number);
|
||||
resetInnerNavigation(currentSlideNumber);
|
||||
currentSlideNumber = slideList.length - 1;
|
||||
goToSlide(currentSlideNumber);
|
||||
break;
|
||||
|
||||
case 9: // Tab = +1; Shift + Tab = -1
|
||||
case 32: // Space = +1; Shift + Space = -1
|
||||
e.preventDefault();
|
||||
|
||||
current_slide_number += e.shiftKey ? -1 : 1;
|
||||
goToSlide(current_slide_number);
|
||||
resetInnerNavigation(currentSlideNumber);
|
||||
currentSlideNumber += e.shiftKey ? -1 : 1;
|
||||
goToSlide(currentSlideNumber);
|
||||
break;
|
||||
|
||||
default:
|
||||
|
|
@ -225,20 +284,21 @@
|
|||
document.addEventListener('touchend', dispatchSingleSlideMode, false);
|
||||
|
||||
document.addEventListener('touchstart', function (e) {
|
||||
if(!isSlideListMode()) {
|
||||
var current_slide_number = getCurrentSlideNumber(),
|
||||
if (!isListMode()) {
|
||||
var currentSlideNumber = getCurrentSlideNumber(),
|
||||
x = e.touches[0].pageX;
|
||||
if (x > window.innerWidth/2) {
|
||||
current_slide_number++;
|
||||
if (x > window.innerWidth / 2) {
|
||||
currentSlideNumber++;
|
||||
} else {
|
||||
current_slide_number--;
|
||||
currentSlideNumber--;
|
||||
}
|
||||
goToSlide(current_slide_number);
|
||||
|
||||
goToSlide(currentSlideNumber);
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.addEventListener('touchmove', function (e) {
|
||||
if(!isSlideListMode()) {
|
||||
if (!isListMode()) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}, false);
|
||||
|
|
|
|||
Loading…
Reference in New Issue