ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add inner navigation feature. Closes #4.

This commit is contained in:
Oleg Roschupkin 2011-08-10 01:47:32 +09:00
parent bb7407a0e7
commit df3401ed9d
2 changed files with 137 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
en.htm
View File

@ -172,7 +172,7 @@
After activation of the last child pressing next After activation of the last child pressing next
button will turn next slide. button will turn next slide.
-->
<div class="slide" id="InnerNavigation"><div> <div class="slide" id="InnerNavigation"><div>
<section> <section>
<header> <header>
@ -185,7 +185,7 @@
<li>Erase your hard drive.</li> <li>Erase your hard drive.</li>
</ol> </ol>
</section> </section>
</div></div> --> </div></div>
<div class="slide" id="ThankYou"><div> <div class="slide" id="ThankYou"><div>
<section> <section>
<header> <header>
@ -208,4 +208,4 @@
<script src="scripts/script.js"></script> <script src="scripts/script.js"></script>
<!-- Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ --> <!-- Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ -->
</body> </body>
</html> </html>

208
scripts/script.js
View File

@ -4,11 +4,13 @@
slides = document.querySelectorAll('div.slide'), slides = document.querySelectorAll('div.slide'),
progress = document.querySelector('div.progress div'), progress = document.querySelector('div.progress div'),
slideList = [], slideList = [],
l = slides.length, l = slides.length, i;
i;
for (i = 0; i < l; 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() { function getTransform() {
@ -28,62 +30,73 @@
body.style.transform = transform; body.style.transform = transform;
} }
function enterSingleSlideMode() { function enterSlideMode() {
body.className = 'full'; body.className = 'full';
applyTransform(getTransform()); applyTransform(getTransform());
} }
function enterSlideListMode() { function enterListMode() {
body.className = 'list'; body.className = 'list';
applyTransform('none'); applyTransform('none');
} }
function getCurrentSlideNumber() { 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() { function scrollToCurrentSlide() {
var current_slide = document.getElementById(slideList[getCurrentSlideNumber()]); var currentSlide = document.getElementById(
slideList[getCurrentSlideNumber()].id
);
if (null != current_slide) { if (null != currentSlide) {
window.scrollTo(0, current_slide.offsetTop); window.scrollTo(0, currentSlide.offsetTop);
} }
} }
function isSlideListMode() { function isListMode() {
return 'full' !== url.search.substr(1); return 'full' !== url.search.substr(1);
} }
function normalizeSlideNumber(slide_number) { function normalizeSlideNumber(slideNumber) {
if (0 > slide_number) { if (0 > slideNumber) {
return slideList.length - 1; return slideList.length - 1;
} else if (slideList.length <= slide_number) { } else if (slideList.length <= slideNumber) {
return 0; return 0;
} else { } else {
return slide_number; return slideNumber;
} }
} }
function updateProgress(slide_number) { function updateProgress(slideNumber) {
if (!progress) return; if (null === progress) { return; }
progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slide_number)).toFixed(2) + '%'; progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
} }
function getSlideHashByNumber(slide_number) { function getSlideHash(slideNumber) {
return '#' + slideList[normalizeSlideNumber(slide_number)]; return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
} }
function goToSlide(slide_number) { function goToSlide(slideNumber) {
url.hash = getSlideHashByNumber(slide_number); url.hash = getSlideHash(slideNumber);
if (!isSlideListMode()) { if (!isListMode()) {
updateProgress(slide_number); updateProgress(slideNumber);
} }
} }
function getContainingSlideId(el) { function getContainingSlideId(el) {
var node = el; var node = el;
while ('BODY' !== node.nodeName) { while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
if (-1 !== node.className.indexOf('slide')) { if (-1 !== node.className.indexOf('slide')) {
return node.id; return node.id;
} else { } else {
@ -93,82 +106,115 @@
return ''; return '';
} }
function dispatchSingleSlideMode(e) { function dispatchSingleSlideMode(e) {
var slideId = getContainingSlideId(e.target); var slideId = getContainingSlideId(e.target);
if ('' !== slideId && isSlideListMode()) { if ('' !== slideId && isListMode()) {
e.preventDefault(); e.preventDefault();
// NOTE: we should update hash to get things work properly // NOTE: we should update hash to get things work properly
url.hash = '#' + slideId; url.hash = '#' + slideId;
history.replaceState(null, null, url.pathname + '?full#' + slideId); history.replaceState(null, null, url.pathname + '?full#' + slideId);
enterSingleSlideMode(); enterSlideMode();
updateProgress(getCurrentSlideNumber()); 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 () { window.addEventListener('DOMContentLoaded', function () {
if (!isSlideListMode()) { if (!isListMode()) {
// "?full" is present without slide hash so we should display first // "?full" is present without slide hash, so we should display first
// slide // slide
if ( -1 === getCurrentSlideNumber() ) { if (-1 === getCurrentSlideNumber()) {
history.replaceState(null, null, url.pathname + '?full' + getSlideHashByNumber( 0 ) ); history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0));
} }
enterSingleSlideMode(); enterSlideMode();
updateProgress(getCurrentSlideNumber()); updateProgress(getCurrentSlideNumber());
} }
}, false); }, false);
window.addEventListener('popstate', function (e) { window.addEventListener('popstate', function (e) {
if (isSlideListMode()) { if (isListMode()) {
enterSlideListMode(); enterListMode();
scrollToCurrentSlide(); scrollToCurrentSlide();
} else { } else {
enterSingleSlideMode(); enterSlideMode();
} }
}, false); }, false);
window.addEventListener('resize', function (e) { window.addEventListener('resize', function (e) {
if (!isSlideListMode()) { if (!isListMode()) {
applyTransform(getTransform()); applyTransform(getTransform());
} }
}, false); }, false);
document.addEventListener('keydown', function (e) { 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) { 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 case 13: // Enter
if (isSlideListMode()) { if (isListMode()) {
e.preventDefault(); e.preventDefault();
history.pushState(null, null, url.pathname + '?full' + getSlideHashByNumber(current_slide_number)); history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
enterSingleSlideMode(); enterSlideMode();
updateProgress(current_slide_number); updateProgress(currentSlideNumber);
} }
break; break;
case 27: // Esc case 27: // Esc
if (!isSlideListMode()) { if (!isListMode()) {
e.preventDefault(); e.preventDefault();
history.pushState(null, null, url.pathname + getSlideHashByNumber(current_slide_number)); history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
enterSlideListMode(); enterListMode();
scrollToCurrentSlide(); scrollToCurrentSlide();
} }
break; break;
@ -180,8 +226,9 @@
case 75: // k case 75: // k
e.preventDefault(); e.preventDefault();
current_slide_number--; resetInnerNavigation(currentSlideNumber);
goToSlide(current_slide_number); currentSlideNumber--;
goToSlide(currentSlideNumber);
break; break;
case 34: // PgDown case 34: // PgDown
@ -191,29 +238,41 @@
case 74: // j case 74: // j
e.preventDefault(); e.preventDefault();
current_slide_number++; // Only go to next slide if current slide have no inner
goToSlide(current_slide_number); // navigation or inner navigation is fully shown
if (
!slideList[currentSlideNumber].hasInnerNavigation ||
-1 === increaseInnerNavigation(currentSlideNumber)
) {
resetInnerNavigation(currentSlideNumber);
currentSlideNumber++;
goToSlide(currentSlideNumber);
}
break; break;
case 36: // Home case 36: // Home
e.preventDefault(); e.preventDefault();
current_slide_number = 0; resetInnerNavigation(currentSlideNumber);
goToSlide(current_slide_number); currentSlideNumber = 0;
goToSlide(currentSlideNumber);
break; break;
case 35: // End case 35: // End
e.preventDefault(); e.preventDefault();
current_slide_number = slideList.length - 1; resetInnerNavigation(currentSlideNumber);
goToSlide(current_slide_number); currentSlideNumber = slideList.length - 1;
goToSlide(currentSlideNumber);
break; break;
case 9: // Tab = +1; Shift + Tab = -1
case 32: // Space = +1; Shift + Space = -1 case 32: // Space = +1; Shift + Space = -1
e.preventDefault(); e.preventDefault();
current_slide_number += e.shiftKey ? -1 : 1; resetInnerNavigation(currentSlideNumber);
goToSlide(current_slide_number); currentSlideNumber += e.shiftKey ? -1 : 1;
goToSlide(currentSlideNumber);
break; break;
default: default:
@ -225,20 +284,21 @@
document.addEventListener('touchend', dispatchSingleSlideMode, false); document.addEventListener('touchend', dispatchSingleSlideMode, false);
document.addEventListener('touchstart', function (e) { document.addEventListener('touchstart', function (e) {
if(!isSlideListMode()) { if (!isListMode()) {
var current_slide_number = getCurrentSlideNumber(), var currentSlideNumber = getCurrentSlideNumber(),
x = e.touches[0].pageX; x = e.touches[0].pageX;
if (x > window.innerWidth/2) { if (x > window.innerWidth / 2) {
current_slide_number++; currentSlideNumber++;
} else { } else {
current_slide_number--; currentSlideNumber--;
} }
goToSlide(current_slide_number);
goToSlide(currentSlideNumber);
} }
}, false); }, false);
document.addEventListener('touchmove', function (e) { document.addEventListener('touchmove', function (e) {
if(!isSlideListMode()) { if (!isListMode()) {
e.preventDefault(); e.preventDefault();
} }
}, false); }, false);