bmstu-mt-wp/shower.js

636 lines
15 KiB
JavaScript
Raw Normal View History

2012-12-01 13:47:28 +04:00
window.shower = (function(window, document, undefined) {
var shower = {},
url = window.location,
body = document.body,
2012-12-01 13:47:28 +04:00
slides = document.querySelectorAll('.slide'),
2010-11-15 16:45:40 +03:00
progress = document.querySelector('div.progress div'),
2011-07-20 22:08:31 +04:00
slideList = [],
2012-12-01 13:47:28 +04:00
timer,
isHistoryApiSupported = !!(window.history && history.pushState),
l = slides.length, i;
2010-10-30 04:16:19 +04:00
2012-12-01 13:47:28 +04:00
/**
* Get value at named data store for the DOM element.
* @private
* @param {domElem} element
* @param {string} name
* @returns {string}
*/
shower._getData = function(element, name) {
return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name);
}
2011-07-20 22:08:31 +04:00
for (i = 0; i < l; i++) {
2012-12-01 13:47:28 +04:00
// 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,
2012-12-01 13:47:28 +04:00
hasInnerNavigation: null !== slides[i].querySelector('.next'),
hasTiming: (shower._getData(slides[i], 'timing') && shower._getData(slides[i], 'timing').indexOf(':') !== -1)
});
}
2011-07-16 05:13:35 +04:00
2012-12-01 13:47:28 +04:00
/**
* Get slide scale value
* @private
* @returns {String}
*/
shower._getTransform = function() {
2011-07-20 22:08:31 +04:00
var denominator = Math.max(
body.clientWidth / window.innerWidth,
body.clientHeight / window.innerHeight
);
return 'scale(' + (1 / denominator) + ')';
2012-12-01 13:47:28 +04:00
};
/**
* Set CSS transform with prefixes to body
* @private
* @returns {true}
*/
shower._applyTransform = function(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
2012-12-01 13:47:28 +04:00
return true;
};
/**
* Show next slide. If slide is last returns false, otherwise return slide
* number which been shown.
* @returns {number|false}
*/
shower.next = function () {
var currentSlideNumber = shower.getCurrentSlideNumber(),
ret;
// 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 ||
2012-12-01 13:47:28 +04:00
-1 === shower.increaseInnerNavigation(currentSlideNumber)
) {
2012-12-01 13:47:28 +04:00
shower.go(currentSlideNumber + 1);
// slides starts from 0
ret = currentSlideNumber + 2;
} else {
ret = false;
}
2012-12-01 13:47:28 +04:00
return ret;
};
/**
* Show previous slide. If slide is first returns false, otherwise return slide
* number which been shown.
* @returns {number|false}
*/
shower.previous = function () {
var currentSlideNumber = shower.getCurrentSlideNumber(),
ret;
// slides starts from 0
if (currentSlideNumber > 0) {
ret = currentSlideNumber;
shower.go(currentSlideNumber - 1);
} else {
ret = false;
}
2011-07-20 22:08:31 +04:00
2012-12-01 13:47:28 +04:00
return ret;
};
/**
* Show first slide.
* @returns {number}
*/
shower.first = function() {
return shower.go(0);
};
/**
* Show last slide.
* @returns {number}
*/
shower.last = function() {
return shower.go(slideList.length - 1);
};
/**
* Switch to slide view.
* @returns {number}
*/
shower.enterSlideMode = function() {
// @TODO: check if it's already in slide mode...
body.classList.remove('list');
body.classList.add('full');
return shower._applyTransform(shower._getTransform());
};
/**
* Switch to list view.
* @returns {number}
*/
shower.enterListMode = function() {
// @TODO: check if it's already in list mode...
body.classList.remove('full');
body.classList.add('list');
return shower._applyTransform('none');
};
// @TODO: add method shower.toggleMode()
/**
* Get current slide number. Starts from zero. Warning: when in url you have
* slide number 1 this method will return 0.
* If something wrong return -1.
* @returns {number}
*/
shower.getCurrentSlideNumber = function() {
var i = slideList.length - 1,
currentSlideId = url.hash.substr(1);
2012-12-01 13:47:28 +04:00
// As fast as you can ;-)
// http://jsperf.com/for-vs-foreach/46
for (; i >= 0; --i) {
if (currentSlideId === slideList[i].id) {
return i;
}
}
return -1;
2012-12-01 13:47:28 +04:00
};
/**
* Check if arg is number.
* @private
* @param {number|whatelse} arg Any type
* @returns {boolean}
*/
shower._isNumber = function(arg) {
if(! ( ! isNaN(parseFloat(arg)) && isFinite(arg))) {
return false;
}
2011-07-12 15:08:29 +04:00
2012-12-01 13:47:28 +04:00
return true;
};
2012-12-01 13:47:28 +04:00
/**
* Scroll to slide.
* @param {number} slideNumber slide number (sic!)
* @returns {undefined|boolean}
*/
shower.scrollToSlide = function(slideNumber) {
var currentSlide,
ret;
2011-07-20 22:08:31 +04:00
2012-12-01 13:47:28 +04:00
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
2011-07-20 22:08:31 +04:00
}
2011-07-16 05:13:35 +04:00
2012-12-01 13:47:28 +04:00
if( ! shower.isListMode()) {
throw new Error('You can\'t to scroll cause you in slide mode. Please, switch to list mode.');
}
// @TODO: WTF?
if (-1 === slideNumber) {
return;
}
2011-07-12 15:08:29 +04:00
2012-12-01 13:47:28 +04:00
if (slideList[slideNumber]) {
currentSlide = document.getElementById(slideList[slideNumber].id);
window.scrollTo(0, currentSlide.offsetTop);
ret = true;
2011-07-20 22:08:31 +04:00
} else {
2012-12-01 13:47:28 +04:00
throw new Error('There is no slide with number ' + slideNumber);
2011-07-20 22:08:31 +04:00
}
2012-12-01 13:47:28 +04:00
return ret;
};
/**
* Chech if it's list mode.
* @returns {boolean}
*/
shower.isListMode = function() {
return isHistoryApiSupported ? ! /^full.*/.test(url.search.substr(1)) : body.classList.contains('list');
2012-12-01 13:47:28 +04:00
};
/**
* Normalize slide number.
* @private
* @param {number} slideNumber slide number (sic!)
* @returns {number}
*/
shower._normalizeSlideNumber = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
2010-10-30 04:16:19 +04:00
2012-12-01 13:47:28 +04:00
if (slideNumber < 0) {
slideNumber = 0;
}
2012-12-01 13:47:28 +04:00
if (slideNumber >= slideList.length) {
slideNumber = slideList.length - 1;
}
2011-07-20 22:08:31 +04:00
2012-12-01 13:47:28 +04:00
return slideNumber;
};
/**
* Update progress bar.
* @param {number} slideNumber slide number (sic!)
* @returns {boolean}
*/
shower.updateProgress = function(slideNumber) {
// if progress bar doesn't exist
if (null === progress) {
return false;
2011-07-20 22:08:31 +04:00
}
2012-12-01 13:47:28 +04:00
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
2012-12-01 13:47:28 +04:00
progress.style.width = (100 / (slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
return true;
};
/**
* Update current and passed slides.
* @param {number} slideNumber slide number (sic!)
* @returns {boolean}
*/
shower.updateCurrentAndPassedSlides = function(slideNumber) {
var i,
slide,
l = slideList.length;
slideNumber = shower._normalizeSlideNumber(slideNumber);
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
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');
}
}
return true;
};
/**
* Get slide hash.
* @param {number} slideNumber slide number (sic!). Attention: starts from zero.
* @returns {boolean}
*/
shower.getSlideHash = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
slideNumber = shower._normalizeSlideNumber(slideNumber);
return '#' + slideList[slideNumber].id;
};
/**
* Go to slide number...
* @param {number} slideNumber slide number (sic!). Attention: starts from zero.
* @returns {number}
*/
shower.go = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
url.hash = shower.getSlideHash(slideNumber);
if ( ! shower.isListMode()) {
shower.updateProgress(slideNumber);
shower.updateCurrentAndPassedSlides(slideNumber);
}
return slideNumber;
};
/**
* Get containing slide id.
* @private
* @param {domElem} el
* @returns {string}
*/
shower._getContainingSlideId = function(el) {
while ('BODY' !== el.nodeName && 'HTML' !== el.nodeName) {
if (el.classList.contains('slide')) {
return el.id;
} else {
2012-12-01 13:47:28 +04:00
el = el.parentNode;
}
}
return '';
2012-12-01 13:47:28 +04:00
};
/**
* Dispatch single slide mode.
* @TODO: Renaming needed? Or just some handlers rewriting?
* @private
* @param {domElem} e
* @returns {undefined}
*/
shower._dispatchSingleSlideMode = function(e) {
// Process links
// @TODO: presentation links support
if ('A' === e.target.nodeName) {
e.preventDefault();
2012-12-01 13:47:28 +04:00
window.open(e.target.getAttribute('href'));
return;
}
2012-12-01 13:47:28 +04:00
var slideId = shower._getContainingSlideId(e.target);
if ('' !== slideId && shower.isListMode()) {
e.preventDefault();
// NOTE: we should update hash to get things work properly
url.hash = '#' + slideId;
2012-12-09 16:23:47 +04:00
if (isHistoryApiSupported) {
2012-12-01 13:47:28 +04:00
history.replaceState(null, null, url.pathname + '?full#' + slideId);
2012-12-09 16:23:47 +04:00
}
2012-12-01 13:47:28 +04:00
shower.enterSlideMode();
2012-12-01 13:47:28 +04:00
shower.updateProgress(shower.getCurrentSlideNumber());
shower.updateCurrentAndPassedSlides(shower.getCurrentSlideNumber());
shower.runSlideshowIfPresented(shower.getCurrentSlideNumber());
}
2011-07-20 22:08:31 +04:00
2012-12-01 13:47:28 +04:00
return;
};
/**
* Run slide show in presented.
* @param {number} slideNumber
* @returns {undefined}
*/
shower.runSlideshowIfPresented = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
2012-12-01 13:47:28 +04:00
slideNumber = shower._normalizeSlideNumber(slideNumber);
2012-12-01 13:47:28 +04:00
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 = shower._getData(document.getElementById(slideList[slideNumber].id), 'timing').split(':');
timing = parseInt(timing[0], 10) * 60 * 1000 + parseInt(timing[1], 10) * 1000;
timer = setTimeout(function() {
shower.go(slideNumber + 1);
shower.runSlideshowIfPresented(slideNumber + 1);
},
timing);
}
};
/**
* Increases inner navigation by adding 'active' class to next inactive inner navigation item
* @param {number} slideNumber
* @returns {number}
*/
shower.increaseInnerNavigation = function(slideNumber) {
var nextNodes,
node,
ret = -1;
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
// If inner navigation in this slide...
if (slideList[slideNumber].hasInnerNavigation) {
nextNodes = document.getElementById(slideList[slideNumber].id).querySelectorAll('.next:not(.active)');
if (0 !== nextNodes.length) {
node = nextNodes[0];
node.classList.add('active');
ret = nextNodes.length - 1;
}
}
2012-12-01 13:47:28 +04:00
return ret;
};
// Event handlers
2011-07-20 22:08:31 +04:00
window.addEventListener('DOMContentLoaded', function () {
2012-12-01 13:47:28 +04:00
if ( ! shower.isListMode()) {
// "?full" is present without slide hash, so we should display first slide
2012-12-01 13:47:28 +04:00
if (-1 === shower.getCurrentSlideNumber()) {
2012-12-09 16:23:47 +04:00
if (isHistoryApiSupported) {
2012-12-01 13:47:28 +04:00
history.replaceState(null, null, url.pathname + '?full' + shower.getSlideHash(0));
2012-12-09 16:23:47 +04:00
}
}
2012-12-01 13:47:28 +04:00
shower.enterSlideMode();
shower.updateProgress(shower.getCurrentSlideNumber());
shower.updateCurrentAndPassedSlides(shower.getCurrentSlideNumber());
shower.runSlideshowIfPresented(shower.getCurrentSlideNumber());
2011-07-20 22:08:31 +04:00
}
}, false);
window.addEventListener('popstate', function (e) {
2012-12-01 13:47:28 +04:00
if (shower.isListMode()) {
shower.enterListMode();
shower.scrollToSlide(shower.getCurrentSlideNumber());
2011-07-20 22:08:31 +04:00
} else {
2012-12-01 13:47:28 +04:00
shower.enterSlideMode();
2011-07-20 22:08:31 +04:00
}
}, false);
window.addEventListener('resize', function (e) {
2012-12-01 13:47:28 +04:00
if ( ! shower.isListMode()) {
shower._applyTransform(shower._getTransform());
2011-07-20 22:08:31 +04:00
}
}, false);
2011-07-20 22:08:31 +04:00
document.addEventListener('keydown', function (e) {
2012-12-08 16:45:00 +04:00
// Shortcut for alt, ctrl and meta keys
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
2012-12-01 13:47:28 +04:00
var currentSlideNumber = shower.getCurrentSlideNumber(),
innerNavigationCompleted = true;
2011-07-20 22:08:31 +04:00
switch (e.which) {
case 116: // F5
2012-12-08 16:45:00 +04:00
e.preventDefault();
if (shower.isListMode()) {
var slideNumber = e.shiftKey ? currentSlideNumber : 0;
shower.go(slideNumber);
if (isHistoryApiSupported) {
history.pushState(null, null, url.pathname + '?full' + shower.getSlideHash(slideNumber));
}
shower.enterSlideMode();
shower.updateProgress(slideNumber);
shower.updateCurrentAndPassedSlides(slideNumber);
shower.runSlideshowIfPresented(slideNumber);
} else {
if (isHistoryApiSupported) {
history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber));
}
shower.enterListMode();
shower.scrollToSlide(currentSlideNumber);
}
break;
2011-07-20 22:08:31 +04:00
case 13: // Enter
2012-12-01 13:47:28 +04:00
if (shower.isListMode() && -1 !== currentSlideNumber) {
2011-07-20 22:08:31 +04:00
e.preventDefault();
2012-12-09 16:23:47 +04:00
if (isHistoryApiSupported) {
2012-12-01 13:47:28 +04:00
history.pushState(null, null, url.pathname + '?full' + shower.getSlideHash(currentSlideNumber));
2012-12-09 16:23:47 +04:00
}
2012-12-01 13:47:28 +04:00
shower.enterSlideMode();
2011-07-20 22:08:31 +04:00
2012-12-01 13:47:28 +04:00
shower.updateProgress(currentSlideNumber);
shower.updateCurrentAndPassedSlides(currentSlideNumber);
shower.runSlideshowIfPresented(currentSlideNumber);
2011-07-20 22:08:31 +04:00
}
break;
case 27: // Esc
2012-12-01 13:47:28 +04:00
if ( ! shower.isListMode()) {
2011-07-20 22:08:31 +04:00
e.preventDefault();
2012-12-09 16:23:47 +04:00
if (isHistoryApiSupported) {
2012-12-01 13:47:28 +04:00
history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber));
2012-12-09 16:23:47 +04:00
}
2012-12-01 13:47:28 +04:00
shower.enterListMode();
shower.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();
2012-12-01 13:47:28 +04:00
shower.previous();
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();
2012-12-01 13:47:28 +04:00
if ( ! shower.isListMode()) {
// Inner navigation is "completed" if current slide have
// no inner navigation or inner navigation is fully shown
innerNavigationCompleted = !slideList[currentSlideNumber].hasInnerNavigation ||
-1 === shower.increaseInnerNavigation(currentSlideNumber);
} else {
// Also inner navigation is always "completed" if we are in
// list mode
innerNavigationCompleted = true;
}
// NOTE: First of all check if there is no current slide
if (
-1 === currentSlideNumber || innerNavigationCompleted
) {
currentSlideNumber++;
shower.go(currentSlideNumber);
// We must run slideshow only in full mode
if ( ! shower.isListMode()) {
shower.runSlideshowIfPresented(currentSlideNumber);
}
}
2011-07-20 22:08:31 +04:00
break;
case 36: // Home
e.preventDefault();
2012-12-01 13:47:28 +04:00
shower.first();
2011-07-20 22:08:31 +04:00
break;
case 35: // End
e.preventDefault();
2012-12-01 13:47:28 +04:00
shower.last();
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();
2012-12-01 13:47:28 +04:00
shower[e.shiftKey ? 'previous' : 'next']();
2011-07-20 22:08:31 +04:00
break;
default:
// Behave as usual
}
2011-07-18 13:39:47 +04:00
}, false);
2012-12-01 13:47:28 +04:00
document.addEventListener('click', shower._dispatchSingleSlideMode, false);
document.addEventListener('touchend', shower._dispatchSingleSlideMode, false);
2011-07-20 22:08:31 +04:00
document.addEventListener('touchstart', function (e) {
2012-12-01 13:47:28 +04:00
if ( ! shower.isListMode()) {
var currentSlideNumber = shower.getCurrentSlideNumber(),
x = e.touches[0].pageX;
if (x > window.innerWidth / 2) {
currentSlideNumber++;
} else {
currentSlideNumber--;
}
2012-12-01 13:47:28 +04:00
shower.go(currentSlideNumber);
}
}, false);
2011-07-20 22:08:31 +04:00
document.addEventListener('touchmove', function (e) {
2012-12-01 13:47:28 +04:00
if ( ! shower.isListMode()) {
e.preventDefault();
2011-07-20 22:08:31 +04:00
}
}, false);
2010-11-08 02:26:01 +03:00
2012-12-01 13:47:28 +04:00
return shower;
})(this, this.document);