2012-10-05 16:44:15 +04:00
|
|
|
window.shower = (function () {
|
|
|
|
var _ = {},
|
|
|
|
url = window.location,
|
2011-07-16 04:52:21 +04:00
|
|
|
body = document.body,
|
2011-07-15 04:53:20 +04:00
|
|
|
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 = [],
|
2011-08-09 20:47:32 +04:00
|
|
|
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++) {
|
2011-08-09 20:47:32 +04:00
|
|
|
slideList.push({
|
|
|
|
id: slides[i].id,
|
2012-03-02 03:11:40 +04:00
|
|
|
hasInnerNavigation: null !== slides[i].querySelector('.inner')
|
2011-08-09 20:47:32 +04:00
|
|
|
});
|
2010-11-08 04:34:56 +03:00
|
|
|
}
|
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;
|
2010-11-08 04:34:56 +03:00
|
|
|
}
|
2011-07-12 15:18:02 +04:00
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.next = function () {
|
|
|
|
var currentSlideNumber = _.getCurrentSlideNumber();
|
|
|
|
|
|
|
|
// 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++;
|
|
|
|
_.go(currentSlideNumber);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
_.previous = function () {
|
|
|
|
_.go(_.getCurrentSlideNumber() - 1);
|
|
|
|
}
|
|
|
|
_.first = function() {
|
|
|
|
_.go(0)
|
|
|
|
}
|
|
|
|
_.last = function() {
|
|
|
|
_.go(slideList.length - 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
_.enterSlideMode = function() {
|
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
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.enterListMode = function() {
|
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
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.getCurrentSlideNumber = function() {
|
2011-08-09 20:47:32 +04:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2012-03-01 08:54:31 +04:00
|
|
|
function scrollToSlide(slideNumber) {
|
|
|
|
if (-1 === slideNumber ) { return; }
|
|
|
|
|
|
|
|
var currentSlide = document.getElementById(slideList[slideNumber].id);
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2011-08-09 20:47:32 +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
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.isListMode = function() {
|
2011-07-20 22:08:31 +04:00
|
|
|
return 'full' !== url.search.substr(1);
|
2010-11-08 04:34:56 +03:00
|
|
|
}
|
2011-07-12 15:08:29 +04:00
|
|
|
|
2011-08-09 20:47:32 +04:00
|
|
|
function normalizeSlideNumber(slideNumber) {
|
|
|
|
if (0 > slideNumber) {
|
2011-07-20 22:08:31 +04:00
|
|
|
return slideList.length - 1;
|
2011-08-09 20:47:32 +04:00
|
|
|
} else if (slideList.length <= slideNumber) {
|
2011-07-20 22:08:31 +04:00
|
|
|
return 0;
|
|
|
|
} else {
|
2011-08-09 20:47:32 +04:00
|
|
|
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
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.updateProgress = function(slideNumber) {
|
2011-08-09 20:47:32 +04:00
|
|
|
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
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.getSlideHash = function(slideNumber) {
|
2011-08-09 20:47:32 +04:00
|
|
|
return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
|
2011-07-16 14:01:16 +04:00
|
|
|
}
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.go = function(slideNumber) {
|
|
|
|
url.hash = _.getSlideHash(slideNumber);
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
if (!_.isListMode()) {
|
|
|
|
_.updateProgress(slideNumber);
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
2012-10-05 16:45:47 +04:00
|
|
|
|
|
|
|
if (typeof _.onchange == 'function')
|
|
|
|
_.onchange(slideNumber);
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
2011-08-01 16:06:35 +04:00
|
|
|
|
|
|
|
function getContainingSlideId(el) {
|
|
|
|
var node = el;
|
2011-08-09 20:47:32 +04:00
|
|
|
while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
|
2012-02-29 04:41:53 +04:00
|
|
|
if (node.classList.contains('slide')) {
|
2011-08-01 16:06:35 +04:00
|
|
|
return node.id;
|
|
|
|
} else {
|
|
|
|
node = node.parentNode;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return '';
|
|
|
|
}
|
2011-08-09 20:47:32 +04:00
|
|
|
|
2011-08-01 03:39:03 +04:00
|
|
|
function dispatchSingleSlideMode(e) {
|
2011-08-01 16:06:35 +04:00
|
|
|
var slideId = getContainingSlideId(e.target);
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
if ('' !== slideId && _.isListMode()) {
|
2011-08-01 03:39:03 +04:00
|
|
|
e.preventDefault();
|
2011-08-09 20:47:32 +04:00
|
|
|
|
2011-08-01 03:39:03 +04:00
|
|
|
// NOTE: we should update hash to get things work properly
|
2011-08-01 16:06:35 +04:00
|
|
|
url.hash = '#' + slideId;
|
|
|
|
history.replaceState(null, null, url.pathname + '?full#' + slideId);
|
2012-10-05 16:44:15 +04:00
|
|
|
_.enterSlideMode();
|
2011-08-09 20:47:32 +04:00
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.updateProgress(_.getCurrentSlideNumber());
|
2011-08-01 03:39:03 +04:00
|
|
|
}
|
|
|
|
}
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2011-08-10 13:06:49 +04:00
|
|
|
// Increases inner navigation by adding 'active' class to next inactive inner navigation item
|
2011-08-09 20:47:32 +04:00
|
|
|
function increaseInnerNavigation(slideNumber) {
|
|
|
|
// Shortcut for slides without inner navigation
|
|
|
|
if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
var activeNodes = document.querySelectorAll(_.getSlideHash(slideNumber) + ' .active'),
|
2012-03-02 03:11:40 +04:00
|
|
|
// NOTE: we assume there is no other elements in inner navigation
|
|
|
|
node = activeNodes[activeNodes.length - 1].nextElementSibling;
|
2011-08-09 20:47:32 +04:00
|
|
|
|
2012-03-02 03:11:40 +04:00
|
|
|
if (null !== node) {
|
2011-08-09 20:47:32 +04:00
|
|
|
node.classList.add('active');
|
2012-03-02 03:11:40 +04:00
|
|
|
return activeNodes.length + 1;
|
2011-08-09 20:47:32 +04:00
|
|
|
} else {
|
|
|
|
return -1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Event handlers
|
|
|
|
|
2011-07-20 22:08:31 +04:00
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
2012-10-05 16:44:15 +04:00
|
|
|
if (!_.isListMode()) {
|
2011-08-10 13:06:49 +04:00
|
|
|
// "?full" is present without slide hash, so we should display first slide
|
2012-10-05 16:44:15 +04:00
|
|
|
if (-1 === _.getCurrentSlideNumber()) {
|
|
|
|
history.replaceState(null, null, url.pathname + '?full' + _.getSlideHash(0));
|
2011-07-21 16:28:06 +04:00
|
|
|
}
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.enterSlideMode();
|
|
|
|
_.updateProgress(_.getCurrentSlideNumber());
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
window.addEventListener('popstate', function (e) {
|
2012-10-05 16:44:15 +04:00
|
|
|
if (_.isListMode()) {
|
|
|
|
_.enterListMode();
|
|
|
|
scrollToSlide(_.getCurrentSlideNumber());
|
2011-07-20 22:08:31 +04:00
|
|
|
} else {
|
2012-10-05 16:44:15 +04:00
|
|
|
_.enterSlideMode();
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
window.addEventListener('resize', function (e) {
|
2012-10-05 16:44:15 +04:00
|
|
|
if (!_.isListMode()) {
|
2011-07-20 22:08:31 +04:00
|
|
|
applyTransform(getTransform());
|
|
|
|
}
|
2011-07-16 04:52:21 +04:00
|
|
|
}, false);
|
2011-07-20 22:08:31 +04:00
|
|
|
|
|
|
|
document.addEventListener('keydown', function (e) {
|
2011-08-09 20:47:32 +04:00
|
|
|
// Shortcut for alt, shift and meta keys
|
|
|
|
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
|
2012-10-05 16:44:15 +04:00
|
|
|
var currentSlideNumber = _.getCurrentSlideNumber();
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2011-08-09 20:47:32 +04:00
|
|
|
switch (e.which) {
|
2012-02-15 16:46:51 +04:00
|
|
|
case 116: // F5
|
2011-07-20 22:08:31 +04:00
|
|
|
case 13: // Enter
|
2012-10-05 16:44:15 +04:00
|
|
|
if (_.isListMode() && -1 !== currentSlideNumber) {
|
2011-07-20 22:08:31 +04:00
|
|
|
e.preventDefault();
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
history.pushState(null, null, url.pathname + '?full' + _.getSlideHash(currentSlideNumber));
|
|
|
|
_.enterSlideMode();
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.updateProgress(currentSlideNumber);
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 27: // Esc
|
2012-10-05 16:44:15 +04:00
|
|
|
if (!_.isListMode()) {
|
2011-07-20 22:08:31 +04:00
|
|
|
e.preventDefault();
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
history.pushState(null, null, url.pathname + _.getSlideHash(currentSlideNumber));
|
|
|
|
_.enterListMode();
|
2012-03-01 08:54:31 +04:00
|
|
|
scrollToSlide(currentSlideNumber);
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 33: // PgUp
|
|
|
|
case 38: // Up
|
|
|
|
case 37: // Left
|
2011-07-25 13:13:11 +04:00
|
|
|
case 72: // h
|
2011-07-20 22:08:31 +04:00
|
|
|
case 75: // k
|
|
|
|
e.preventDefault();
|
2012-10-05 16:44:15 +04:00
|
|
|
_.previous();
|
2011-07-20 22:08:31 +04:00
|
|
|
break;
|
|
|
|
|
|
|
|
case 34: // PgDown
|
|
|
|
case 40: // Down
|
|
|
|
case 39: // Right
|
2011-07-25 13:13:11 +04:00
|
|
|
case 76: // l
|
2011-07-20 22:08:31 +04:00
|
|
|
case 74: // j
|
|
|
|
e.preventDefault();
|
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.next();
|
2011-07-20 22:08:31 +04:00
|
|
|
break;
|
|
|
|
|
|
|
|
case 36: // Home
|
|
|
|
e.preventDefault();
|
2012-10-05 16:44:15 +04:00
|
|
|
_.first();
|
2011-07-20 22:08:31 +04:00
|
|
|
break;
|
|
|
|
|
|
|
|
case 35: // End
|
|
|
|
e.preventDefault();
|
2012-10-05 16:44:15 +04:00
|
|
|
_.last();
|
2011-07-20 22:08:31 +04:00
|
|
|
break;
|
|
|
|
|
2011-08-09 20:47:32 +04:00
|
|
|
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-10-05 16:44:15 +04:00
|
|
|
_[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);
|
|
|
|
|
2011-08-01 03:39:03 +04:00
|
|
|
document.addEventListener('click', dispatchSingleSlideMode, false);
|
|
|
|
document.addEventListener('touchend', dispatchSingleSlideMode, false);
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2011-08-01 03:39:03 +04:00
|
|
|
document.addEventListener('touchstart', function (e) {
|
2012-10-05 16:44:15 +04:00
|
|
|
if (!_.isListMode()) {
|
|
|
|
var currentSlideNumber = _.getCurrentSlideNumber(),
|
2011-08-01 03:39:03 +04:00
|
|
|
x = e.touches[0].pageX;
|
2011-08-09 20:47:32 +04:00
|
|
|
if (x > window.innerWidth / 2) {
|
|
|
|
currentSlideNumber++;
|
2011-08-01 03:39:03 +04:00
|
|
|
} else {
|
2011-08-09 20:47:32 +04:00
|
|
|
currentSlideNumber--;
|
2011-08-01 03:39:03 +04:00
|
|
|
}
|
2011-08-09 20:47:32 +04:00
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
_.go(currentSlideNumber);
|
2011-08-01 03:39:03 +04:00
|
|
|
}
|
|
|
|
}, false);
|
2011-07-20 22:08:31 +04:00
|
|
|
|
2011-08-01 03:39:03 +04:00
|
|
|
document.addEventListener('touchmove', function (e) {
|
2012-10-05 16:44:15 +04:00
|
|
|
if (!_.isListMode()) {
|
2011-08-01 03:39:03 +04:00
|
|
|
e.preventDefault();
|
2011-07-20 22:08:31 +04:00
|
|
|
}
|
|
|
|
}, false);
|
2010-11-08 02:26:01 +03:00
|
|
|
|
2012-10-05 16:44:15 +04:00
|
|
|
return _;
|
2012-03-01 08:54:31 +04:00
|
|
|
}());
|