bmstu-mt-wp/scripts/script.js

338 lines
8.2 KiB
JavaScript
Raw Normal View History

2011-07-20 22:08:31 +04:00
(function () {
var url = window.location,
body = document.body,
slides = document.querySelectorAll('div.slide'),
2010-11-15 16:45:40 +03:00
progress = document.querySelector('div.progress div'),
2011-07-20 22:08:31 +04:00
slideList = [],
timer,
l = slides.length, i;
2010-10-30 04:16:19 +04:00
2011-07-20 22:08:31 +04:00
for (i = 0; i < l; i++) {
// Slide ID's are optional. In case of missing ID we set it to the
// slide number
if (!slides[i].id) {
slides[i].id = i + 1;
}
slideList.push({
id: slides[i].id,
hasInnerNavigation: null !== slides[i].querySelector('.next'),
hasTiming: null != slides[i].dataset.timing
});
}
2011-07-16 05:13:35 +04:00
2011-07-20 22:08:31 +04:00
function getTransform() {
var denominator = Math.max(
body.clientWidth / window.innerWidth,
body.clientHeight / window.innerHeight
);
return 'scale(' + (1 / denominator) + ')';
}
function applyTransform(transform) {
2011-07-12 15:08:29 +04:00
body.style.WebkitTransform = transform;
2011-12-12 21:13:08 +04:00
body.style.MozTransform = transform;
2011-07-12 15:08:29 +04:00
body.style.msTransform = transform;
2011-12-12 21:13:08 +04:00
body.style.OTransform = transform;
2011-07-12 15:08:29 +04:00
body.style.transform = transform;
}
2011-07-12 15:18:02 +04:00
function enterSlideMode() {
2011-07-20 22:08:31 +04:00
body.className = 'full';
applyTransform(getTransform());
2010-11-08 02:26:01 +03:00
}
2010-10-30 04:16:19 +04:00
function enterListMode() {
2011-07-20 22:08:31 +04:00
body.className = 'list';
applyTransform('none');
2011-07-18 12:03:49 +04:00
}
2011-07-20 22:08:31 +04:00
function getCurrentSlideNumber() {
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;
2011-07-12 15:08:29 +04:00
}
function scrollToSlide(slideNumber) {
if (-1 === slideNumber ) { return; }
var currentSlide = document.getElementById(slideList[slideNumber].id);
2011-07-20 22:08:31 +04:00
if (null != currentSlide) {
window.scrollTo(0, currentSlide.offsetTop);
2011-07-20 22:08:31 +04:00
}
2011-07-12 15:08:29 +04:00
}
2011-07-16 05:13:35 +04:00
function isListMode() {
2011-07-20 22:08:31 +04:00
return 'full' !== url.search.substr(1);
}
2011-07-12 15:08:29 +04:00
function normalizeSlideNumber(slideNumber) {
if (0 > slideNumber) {
2011-07-20 22:08:31 +04:00
return slideList.length - 1;
} else if (slideList.length <= slideNumber) {
2011-07-20 22:08:31 +04:00
return 0;
} else {
return slideNumber;
2011-07-20 22:08:31 +04:00
}
2010-11-15 16:45:40 +03:00
}
2011-07-20 22:08:31 +04:00
function updateProgress(slideNumber) {
if (null === progress) { return; }
progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
2011-07-18 16:40:01 +04:00
}
2010-10-30 04:16:19 +04:00
function updateCurrentAndPassedSlides(slideNumber) {
var i, l = slideList.length, slide;
slideNumber = normalizeSlideNumber(slideNumber);
for ( i = 0; i < l; ++i ) {
slide = document.getElementById(slideList[i].id);
if ( i < slideNumber ) {
slide.classList.remove('current');
slide.classList.add('passed');
} else if ( i > slideNumber ) {
slide.classList.remove('passed');
slide.classList.remove('current');
} else {
slide.classList.remove('passed');
slide.classList.add('current');
}
}
}
function getSlideHash(slideNumber) {
return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
}
function goToSlide(slideNumber) {
url.hash = getSlideHash(slideNumber);
2011-07-20 22:08:31 +04:00
if (!isListMode()) {
updateProgress(slideNumber);
updateCurrentAndPassedSlides(slideNumber);
2011-07-20 22:08:31 +04:00
}
}
function getContainingSlideId(el) {
var node = el;
while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
if (node.classList.contains('slide')) {
return node.id;
} else {
node = node.parentNode;
}
}
return '';
}
function dispatchSingleSlideMode(e) {
var slideId = getContainingSlideId(e.target);
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);
enterSlideMode();
updateProgress(getCurrentSlideNumber());
updateCurrentAndPassedSlides(getCurrentSlideNumber());
runSlideshowIfPresented(getCurrentSlideNumber());
}
}
function runSlideshowIfPresented(slideNumber) {
slideNumber = normalizeSlideNumber(slideNumber);
clearTimeout(timer);
if (slideList[slideNumber].hasTiming) {
// Compute number of milliseconds from format "X:Y", where X is
// number of minutes, and Y is number of seconds
var timing = document.getElementById(slideList[slideNumber].id).dataset.timing.split(':');
timing = parseInt(timing[0]) * 60 * 1000 + parseInt(timing[1]) * 1000;
timer = setTimeout( function () {
goToSlide(slideNumber + 1);
runSlideshowIfPresented(slideNumber + 1);
}, timing );
}
}
2011-07-20 22:08:31 +04:00
// 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 nextNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .next:not(.active)'),
node;
if (0 !== nextNodes.length) {
node = nextNodes[0];
node.classList.add('active');
return nextNodes.length - 1;
} else {
return -1;
}
}
// Event handlers
2011-07-20 22:08:31 +04:00
window.addEventListener('DOMContentLoaded', function () {
if (!isListMode()) {
// "?full" is present without slide hash, so we should display first slide
if (-1 === getCurrentSlideNumber()) {
history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0));
}
enterSlideMode();
updateProgress(getCurrentSlideNumber());
updateCurrentAndPassedSlides(getCurrentSlideNumber());
runSlideshowIfPresented(getCurrentSlideNumber())
2011-07-20 22:08:31 +04:00
}
}, false);
window.addEventListener('popstate', function (e) {
if (isListMode()) {
enterListMode();
scrollToSlide(getCurrentSlideNumber());
2011-07-20 22:08:31 +04:00
} else {
enterSlideMode();
2011-07-20 22:08:31 +04:00
}
}, false);
window.addEventListener('resize', function (e) {
if (!isListMode()) {
2011-07-20 22:08:31 +04:00
applyTransform(getTransform());
}
}, false);
2011-07-20 22:08:31 +04:00
document.addEventListener('keydown', function (e) {
// Shortcut for alt, shift and meta keys
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
2011-07-20 22:08:31 +04:00
var currentSlideNumber = getCurrentSlideNumber();
2011-07-20 22:08:31 +04:00
switch (e.which) {
case 116: // F5
2011-07-20 22:08:31 +04:00
case 13: // Enter
if (isListMode() && -1 !== currentSlideNumber) {
2011-07-20 22:08:31 +04:00
e.preventDefault();
history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
enterSlideMode();
2011-07-20 22:08:31 +04:00
updateProgress(currentSlideNumber);
updateCurrentAndPassedSlides(currentSlideNumber);
runSlideshowIfPresented(currentSlideNumber);
2011-07-20 22:08:31 +04:00
}
break;
case 27: // Esc
if (!isListMode()) {
2011-07-20 22:08:31 +04:00
e.preventDefault();
history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
enterListMode();
scrollToSlide(currentSlideNumber);
2011-07-20 22:08:31 +04:00
}
break;
case 33: // PgUp
case 38: // Up
case 37: // Left
case 72: // h
2011-07-20 22:08:31 +04:00
case 75: // k
e.preventDefault();
currentSlideNumber--;
goToSlide(currentSlideNumber);
2011-07-20 22:08:31 +04:00
break;
case 34: // PgDown
case 40: // Down
case 39: // Right
case 76: // l
2011-07-20 22:08:31 +04:00
case 74: // j
e.preventDefault();
// Only go to next slide if current slide have no inner
// navigation or inner navigation is fully shown
// NOTE: But first of all check if there is no current slide
if (
-1 === currentSlideNumber ||
!slideList[currentSlideNumber].hasInnerNavigation ||
-1 === increaseInnerNavigation(currentSlideNumber)
) {
currentSlideNumber++;
goToSlide(currentSlideNumber);
if (!isListMode()) {
runSlideshowIfPresented(currentSlideNumber);
}
}
2011-07-20 22:08:31 +04:00
break;
case 36: // Home
e.preventDefault();
currentSlideNumber = 0;
goToSlide(currentSlideNumber);
2011-07-20 22:08:31 +04:00
break;
case 35: // End
e.preventDefault();
currentSlideNumber = slideList.length - 1;
goToSlide(currentSlideNumber);
2011-07-20 22:08:31 +04:00
break;
case 9: // Tab = +1; Shift + Tab = -1
2011-07-20 22:08:31 +04:00
case 32: // Space = +1; Shift + Space = -1
e.preventDefault();
currentSlideNumber += e.shiftKey ? -1 : 1;
goToSlide(currentSlideNumber);
2011-07-20 22:08:31 +04:00
break;
default:
// Behave as usual
}
2011-07-18 13:39:47 +04:00
}, false);
document.addEventListener('click', dispatchSingleSlideMode, false);
document.addEventListener('touchend', dispatchSingleSlideMode, false);
2011-07-20 22:08:31 +04:00
document.addEventListener('touchstart', function (e) {
if (!isListMode()) {
var currentSlideNumber = getCurrentSlideNumber(),
x = e.touches[0].pageX;
if (x > window.innerWidth / 2) {
currentSlideNumber++;
} else {
currentSlideNumber--;
}
goToSlide(currentSlideNumber);
}
}, false);
2011-07-20 22:08:31 +04:00
document.addEventListener('touchmove', function (e) {
if (!isListMode()) {
e.preventDefault();
2011-07-20 22:08:31 +04:00
}
}, false);
2010-11-08 02:26:01 +03:00
}());