991 lines
22 KiB
JavaScript
Executable File
991 lines
22 KiB
JavaScript
Executable File
/**
|
||
* Shower HTML presentation engine: github.com/shower/shower
|
||
* @copyright 2010–2013 Vadim Makeev, pepelsbey.net
|
||
* @license MIT license: github.com/shower/shower/wiki/MIT-License
|
||
*/
|
||
window.shower = window.shower || (function(window, document, undefined) {
|
||
var shower = {},
|
||
url = window.location,
|
||
body = document.body,
|
||
slides = [],
|
||
progress = [],
|
||
timer,
|
||
isHistoryApiSupported = !!(window.history && window.history.pushState);
|
||
|
||
/**
|
||
* Slide constructor
|
||
*
|
||
* @param {Object} opts
|
||
* @param {String} opts.id html id attribute or automaticaly assigned order number
|
||
* @param {Number} opts.number slide number
|
||
* @param {Boolean} opts.hasInnerNavigation
|
||
* @param {Number} [opts.timing]
|
||
* @param {Number} [opts.innerLength]
|
||
* @param {Number} [opts.innerComplete = 0]
|
||
* @constructor
|
||
*/
|
||
function Slide(opts) {
|
||
for (var prop in opts) {
|
||
if (opts.hasOwnProperty(prop)) {
|
||
this[prop] = opts[prop];
|
||
}
|
||
}
|
||
}
|
||
|
||
Slide.prototype = {
|
||
/**
|
||
* Get slide number.
|
||
* @returns {Number}
|
||
*/
|
||
getSlideNumber : function() {
|
||
return this.number;
|
||
},
|
||
|
||
isLast : function() {
|
||
return shower.slideList.length === this.number + 1;
|
||
},
|
||
|
||
/**
|
||
* Check if inner navigation is finished
|
||
* @returns {boolean}
|
||
*/
|
||
isFinished : function() {
|
||
return this.innerComplete >= this.innerLength;
|
||
},
|
||
|
||
/**
|
||
* Start inner navigation by timer or just switch slide after timer.
|
||
* time sets in HTML: .slide[data-timing=MM:SS]
|
||
* @returns {Object} Current slide
|
||
*/
|
||
process : function(shower) {
|
||
if (this.timing) {
|
||
this.initTimer(shower);
|
||
return this;
|
||
}
|
||
|
||
this.next(shower);
|
||
return this;
|
||
},
|
||
|
||
/**
|
||
* Init timer for inner navigation or for just turn to next slide
|
||
* @param shower
|
||
* @returns {Object|Boolean} Current slide
|
||
*/
|
||
initTimer : function(shower) {
|
||
var slide = this;
|
||
|
||
if ( ! slide.timing) {
|
||
return false;
|
||
}
|
||
|
||
slide.stopTimer();
|
||
|
||
if (slide.isFinished()) {
|
||
timer = setInterval(function() {
|
||
slide.stopTimer();
|
||
shower.next();
|
||
},
|
||
slide.timing * (slide.innerLength || 1));
|
||
} else {
|
||
timer = setInterval(function() {
|
||
if (slide.isFinished()) {
|
||
slide.stopTimer();
|
||
shower.next();
|
||
} else {
|
||
slide.next(shower);
|
||
}
|
||
},
|
||
slide.timing);
|
||
}
|
||
|
||
return this;
|
||
},
|
||
|
||
/**
|
||
* Stop timer
|
||
*/
|
||
stopTimer : function() {
|
||
if (timer) {
|
||
clearInterval(timer);
|
||
timer = false;
|
||
}
|
||
|
||
return this;
|
||
},
|
||
|
||
/**
|
||
* Previous step of inner navigation or if current step is step 0 then go to previous slide.
|
||
* @returns {Object|Boolean} Current slide
|
||
*/
|
||
prev : function(shower) {
|
||
var prevSteps,
|
||
slide = this;
|
||
|
||
if ( ! slide.hasInnerNavigation || slide.isFinished() || slide.innerComplete === 0) {
|
||
shower.prev();
|
||
return false;
|
||
}
|
||
|
||
prevSteps = document.getElementById(slide.id).querySelectorAll('.next.active');
|
||
|
||
if ( ! prevSteps || prevSteps.length < 1) {
|
||
return false;
|
||
}
|
||
|
||
if (slide.innerComplete > 0) {
|
||
slide.innerComplete--;
|
||
prevSteps[prevSteps.length - 1].classList.remove('active');
|
||
} else {
|
||
shower.prev();
|
||
}
|
||
|
||
return this;
|
||
},
|
||
|
||
/**
|
||
* Next step of inner navigation or if current step is last then go to next slide.
|
||
* @returns {Object|Boolean} Current slide
|
||
*/
|
||
next : function(shower) {
|
||
var nextSteps,
|
||
slide = this;
|
||
|
||
if ( ! slide.hasInnerNavigation || slide.isFinished()) {
|
||
shower.next();
|
||
return false;
|
||
}
|
||
|
||
if ( ! slide.isFinished()) {
|
||
nextSteps = document.getElementById(slide.id).querySelectorAll('.next:not(.active)');
|
||
nextSteps[0].classList.add('active');
|
||
|
||
slide.innerComplete++;
|
||
}
|
||
|
||
return this;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Get value at named data store for the DOM element.
|
||
* @private
|
||
* @param {HTMLElement} element
|
||
* @param {String} name
|
||
* @returns {String}
|
||
*/
|
||
shower._getData = function(element, name) {
|
||
return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name);
|
||
};
|
||
|
||
shower.slideList = [];
|
||
|
||
/**
|
||
* Shower initialization
|
||
* @param {String} [slideSelector]
|
||
* @param {String} [progressSelector]
|
||
* @returns {Object} shower
|
||
*/
|
||
shower.init = function(slideSelector, progressSelector) {
|
||
var timing;
|
||
|
||
slideSelector = slideSelector || '.slide';
|
||
progressSelector = progressSelector || 'div.progress div';
|
||
|
||
slides = document.querySelectorAll(slideSelector);
|
||
progress = document.querySelector(progressSelector);
|
||
|
||
for (var i = 0; i < slides.length; i++) {
|
||
// Slide IDs are optional.
|
||
// In case of missing ID we set it to the slide number
|
||
if ( ! slides[i].id) {
|
||
slides[i].id = i + 1;
|
||
}
|
||
|
||
timing = shower._getData(slides[i], 'timing');
|
||
|
||
// Parsing timing in [S] or [M:S] format
|
||
// and returning it in milliseconds
|
||
if (timing && /^(\d{1,2}:)?\d{1,3}$/.test(timing)) {
|
||
if (timing.indexOf(':') !== -1) {
|
||
timing = timing.split(':');
|
||
timing = (parseInt(timing[0], 10) * 60 + parseInt(timing[1], 10)) * 1000;
|
||
} else {
|
||
timing = parseInt(timing, 10) * 1000;
|
||
}
|
||
if (timing === 0) {
|
||
timing = false;
|
||
}
|
||
} else {
|
||
timing = false;
|
||
}
|
||
|
||
shower.slideList.push(new Slide({
|
||
id : slides[i].id,
|
||
number : i,
|
||
hasInnerNavigation : null !== slides[i].querySelector('.next'),
|
||
timing : timing,
|
||
innerLength : slides[i].querySelectorAll('.next').length,
|
||
innerComplete : 0
|
||
}));
|
||
}
|
||
|
||
return shower;
|
||
};
|
||
|
||
/**
|
||
* Get slide scale value.
|
||
* @private
|
||
* @returns {String}
|
||
*/
|
||
shower._getTransform = function() {
|
||
var denominator = Math.max(
|
||
body.clientWidth / window.innerWidth,
|
||
body.clientHeight / window.innerHeight
|
||
);
|
||
|
||
return 'scale(' + (1 / denominator) + ')';
|
||
};
|
||
|
||
/**
|
||
* Set CSS transform with prefixes to body.
|
||
* @private
|
||
* @returns {Boolean}
|
||
*/
|
||
shower._applyTransform = function(transform) {
|
||
[
|
||
'WebkitTransform',
|
||
'MozTransform',
|
||
'msTransform',
|
||
'OTransform',
|
||
'transform'
|
||
].forEach(function(prop) {
|
||
body.style[prop] = transform;
|
||
});
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Check if arg is number.
|
||
* @private
|
||
* @param {String|Number} arg
|
||
* @returns {Boolean}
|
||
*/
|
||
shower._isNumber = function(arg) {
|
||
return ! isNaN(parseFloat(arg)) && isFinite(arg);
|
||
};
|
||
|
||
/**
|
||
* 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!');
|
||
}
|
||
|
||
if (slideNumber < 0) {
|
||
slideNumber = 0;
|
||
}
|
||
|
||
if (slideNumber >= shower.slideList.length) {
|
||
slideNumber = shower.slideList.length - 1;
|
||
}
|
||
|
||
return slideNumber;
|
||
};
|
||
|
||
/**
|
||
* Get slide id from HTML element.
|
||
* @private
|
||
* @param {Node} el
|
||
* @returns {String}
|
||
*/
|
||
shower._getSlideIdByEl = function(el) {
|
||
while ('BODY' !== el.nodeName && 'HTML' !== el.nodeName) {
|
||
if (el.classList.contains('slide')) {
|
||
return el.id;
|
||
} else {
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
|
||
return '';
|
||
};
|
||
|
||
/**
|
||
* For touch devices: check if link is clicked.
|
||
*
|
||
* @TODO: add support for textarea/input/etc.
|
||
*
|
||
* @private
|
||
* @param {HTMLElement} e
|
||
* @returns {Boolean}
|
||
*/
|
||
shower._checkInteractiveElement = function(e) {
|
||
return 'A' === e.target.nodeName;
|
||
};
|
||
|
||
/**
|
||
* Get slide number by slideId.
|
||
* @param {String} slideId
|
||
* @returns {Number}
|
||
*/
|
||
shower.getSlideNumber = function(slideId) {
|
||
var i = shower.slideList.length - 1,
|
||
slideNumber;
|
||
|
||
if (slideId === '') {
|
||
slideNumber = 0;
|
||
}
|
||
|
||
// As fast as you can ;-)
|
||
// http://jsperf.com/for-vs-foreach/46
|
||
for (; i >= 0; --i) {
|
||
if (slideId === shower.slideList[i].id) {
|
||
slideNumber = i;
|
||
break;
|
||
}
|
||
}
|
||
|
||
return slideNumber;
|
||
};
|
||
|
||
/**
|
||
* Go to slide number.
|
||
* @param {Number} slideNumber slide number (sic!). Attention: starts from zero.
|
||
* @param {Function} [callback] runs only if you not in List mode.
|
||
* @returns {Number|Boolean}
|
||
*/
|
||
shower.go = function(slideNumber, callback) {
|
||
var slide;
|
||
|
||
if ( ! shower._isNumber(slideNumber)) {
|
||
throw new Error('Gimme slide number as Number, baby!');
|
||
}
|
||
|
||
if ( ! shower.slideList[slideNumber]) {
|
||
return false;
|
||
}
|
||
|
||
// Also triggers popstate and invoke shower.enter__Mode()
|
||
url.hash = shower.getSlideHash(slideNumber);
|
||
|
||
shower.updateProgress(slideNumber);
|
||
shower.updateActiveAndVisitedSlides(slideNumber);
|
||
|
||
if (shower.isSlideMode()) {
|
||
shower.showPresenterNotes(slideNumber);
|
||
slide = shower.slideList[slideNumber];
|
||
if (slide.timing) {
|
||
slide.initTimer(shower);
|
||
}
|
||
}
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return slideNumber;
|
||
};
|
||
|
||
/**
|
||
* Show next slide or show next Inner navigation item.
|
||
* Returns false on a last slide, otherwise returns shower.
|
||
* @param {Function} [callback] runs only if shower.next() is successfully completed.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.next = function(callback) {
|
||
var currentSlideNumber = shower.getCurrentSlideNumber(),
|
||
nextSlide = shower.slideList[currentSlideNumber + 1];
|
||
|
||
// If don't exist next slide
|
||
if (! nextSlide) {
|
||
return false;
|
||
}
|
||
|
||
shower.go(currentSlideNumber + 1);
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return this;
|
||
};
|
||
|
||
/**
|
||
*
|
||
* @param {Function} [callback]
|
||
*/
|
||
shower._turnNextSlide = function(callback) {
|
||
var currentSlideNumber = shower.getCurrentSlideNumber(),
|
||
slide = shower.slideList[currentSlideNumber];
|
||
|
||
|
||
if (shower.isSlideMode()) {
|
||
slide.stopTimer();
|
||
slide.next(shower);
|
||
} else {
|
||
shower.go(currentSlideNumber + 1);
|
||
}
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return;
|
||
};
|
||
|
||
/**
|
||
* Show previous slide. Returns false on a first slide, otherwise returns shown slide number.
|
||
* @param {Function} [callback] runs only if shower.previous() is successfully completed.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.prev = shower.previous = function(callback) {
|
||
var currentSlideNumber = shower.getCurrentSlideNumber();
|
||
|
||
// Slides starts from 0
|
||
if (currentSlideNumber < 1) {
|
||
return false;
|
||
}
|
||
|
||
shower.go(currentSlideNumber - 1);
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Show previous slide. Returns false on a first slide, otherwise returns shown slide number.
|
||
* @param {Function} [callback] runs only if shower.previous() is successfully completed.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower._turnPreviousSlide = function(callback) {
|
||
var currentSlideNumber = shower.getCurrentSlideNumber(),
|
||
slide = shower.slideList[currentSlideNumber];
|
||
|
||
slide.stopTimer();
|
||
|
||
if (shower.isSlideMode()) {
|
||
slide.prev(shower);
|
||
} else {
|
||
shower.go(currentSlideNumber - 1);
|
||
}
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Show first slide.
|
||
* @param {Function} [callback]
|
||
*/
|
||
shower.first = function(callback) {
|
||
var slide = shower.slideList[shower.getCurrentSlideNumber()];
|
||
|
||
slide.timing && slide.stopTimer();
|
||
shower.go(0);
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Show last slide.
|
||
* @param {Function} [callback]
|
||
*/
|
||
shower.last = function(callback) {
|
||
var slide = shower.slideList[shower.getCurrentSlideNumber()];
|
||
|
||
slide.timing && slide.stopTimer();
|
||
shower.go(shower.slideList.length - 1);
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Switch to slide view.
|
||
* @param {Function} [callback] runs only if shower.enterSlideMode() is successfully completed.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.enterSlideMode = function(callback) {
|
||
var currentSlideNumber = shower.getCurrentSlideNumber();
|
||
|
||
// Anyway: change body class (@TODO: refactoring)
|
||
body.classList.remove('list');
|
||
body.classList.add('full');
|
||
|
||
// Preparing URL for shower.go()
|
||
if (shower.isListMode() && isHistoryApiSupported) {
|
||
history.pushState(null, null, url.pathname + '?full' + shower.getSlideHash(currentSlideNumber));
|
||
}
|
||
|
||
shower._applyTransform(shower._getTransform());
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Switch to list view.
|
||
* @param {Function} [callback] runs only if shower.enterListMode() is successfully completed.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.enterListMode = function(callback) {
|
||
var currentSlideNumber;
|
||
|
||
// Anyway: change body class (@TODO: refactoring)
|
||
body.classList.remove('full');
|
||
body.classList.add('list');
|
||
|
||
shower.clearPresenterNotes();
|
||
|
||
if (shower.isListMode()) {
|
||
return false;
|
||
}
|
||
|
||
currentSlideNumber = shower.getCurrentSlideNumber();
|
||
|
||
shower.slideList[currentSlideNumber].stopTimer();
|
||
|
||
if (shower.isSlideMode() && isHistoryApiSupported) {
|
||
history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber));
|
||
}
|
||
|
||
shower.scrollToSlide(currentSlideNumber);
|
||
shower._applyTransform('none');
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Toggle Mode: Slide and List.
|
||
* @param {Function} [callback]
|
||
*/
|
||
shower.toggleMode = function(callback) {
|
||
if (shower.isListMode()) {
|
||
shower.enterSlideMode();
|
||
} else {
|
||
shower.enterListMode();
|
||
}
|
||
|
||
if (typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Get current slide number. Starts from zero. Warning: when you have
|
||
* slide number 1 in URL this method will return 0.
|
||
* If something is wrong return 0 to get the first slide.
|
||
* @returns {Number}
|
||
*/
|
||
shower.getCurrentSlideNumber = function() {
|
||
var i = shower.slideList.length - 1,
|
||
currentSlideId = url.hash.substr(1);
|
||
|
||
// As fast as you can ;-)
|
||
// http://jsperf.com/for-vs-foreach/46
|
||
for (; i >= 0; --i) {
|
||
if (currentSlideId === shower.slideList[i].id) {
|
||
return i;
|
||
}
|
||
}
|
||
|
||
return 0;
|
||
};
|
||
|
||
/**
|
||
* Scroll to slide.
|
||
* @param {Number} slideNumber slide number (sic!)
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.scrollToSlide = function(slideNumber) {
|
||
var currentSlide,
|
||
ret = false;
|
||
|
||
if ( ! shower._isNumber(slideNumber)) {
|
||
throw new Error('Gimme slide number as Number, baby!');
|
||
}
|
||
|
||
if (shower.isSlideMode()) {
|
||
throw new Error('You can\'t scroll to because you in slide mode. Please, switch to list mode.');
|
||
}
|
||
|
||
if (shower.slideList[slideNumber]) {
|
||
currentSlide = document.getElementById(shower.slideList[slideNumber].id);
|
||
window.scrollTo(0, currentSlide.offsetTop);
|
||
ret = true;
|
||
} else {
|
||
throw new Error('There is no slide with number ' + slideNumber);
|
||
}
|
||
|
||
return ret;
|
||
};
|
||
|
||
/**
|
||
* Check if it's List mode.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.isListMode = function() {
|
||
return isHistoryApiSupported ? ! /^full.*/.test(url.search.substr(1)) : body.classList.contains('list');
|
||
};
|
||
|
||
/**
|
||
* Check if it's Slide mode.
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.isSlideMode = function() {
|
||
return isHistoryApiSupported ? /^full.*/.test(url.search.substr(1)) : body.classList.contains('full');
|
||
};
|
||
|
||
/**
|
||
* 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;
|
||
}
|
||
|
||
if ( ! shower._isNumber(slideNumber)) {
|
||
throw new Error('Gimme slide number as Number, baby!');
|
||
}
|
||
|
||
progress.style.width = (100 / (shower.slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Update active and visited slides.
|
||
* @param {Number} slideNumber slide number (sic!)
|
||
* @returns {Boolean}
|
||
*/
|
||
shower.updateActiveAndVisitedSlides = function(slideNumber) {
|
||
var i,
|
||
slide,
|
||
l = shower.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(shower.slideList[i].id);
|
||
|
||
if (i < slideNumber) {
|
||
slide.classList.remove('active');
|
||
slide.classList.add('visited');
|
||
} else if (i > slideNumber) {
|
||
slide.classList.remove('visited');
|
||
slide.classList.remove('active');
|
||
} else {
|
||
slide.classList.remove('visited');
|
||
slide.classList.add('active');
|
||
}
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
/**
|
||
* Clear presenter notes in console (only for Slide Mode).
|
||
*/
|
||
shower.clearPresenterNotes = function() {
|
||
if (shower.isSlideMode() && window.console && window.console.clear) {
|
||
console.clear();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Show presenter notes in console.
|
||
* @param {Number} slideNumber slide number (sic!). Attention: starts from zero.
|
||
*/
|
||
shower.showPresenterNotes = function(slideNumber) {
|
||
shower.clearPresenterNotes();
|
||
|
||
if (window.console) {
|
||
slideNumber = shower._normalizeSlideNumber(slideNumber);
|
||
|
||
var slideId = shower.slideList[slideNumber].id,
|
||
nextSlideId = shower.slideList[slideNumber + 1] ? shower.slideList[slideNumber + 1].id : null,
|
||
notes = document.getElementById(slideId).querySelector('footer');
|
||
|
||
if (notes && notes.innerHTML) {
|
||
console.info(notes.innerHTML.replace(/\n\s+/g,'\n'));
|
||
}
|
||
|
||
if (nextSlideId) {
|
||
|
||
var next = document.getElementById(nextSlideId).querySelector('h2');
|
||
|
||
if (next) {
|
||
next = next.innerHTML.replace(/^\s+|<[^>]+>/g,'');
|
||
console.info('NEXT: ' + next);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Get slide hash.
|
||
* @param {Number} slideNumber slide number (sic!). Attention: starts from zero.
|
||
* @returns {String}
|
||
*/
|
||
shower.getSlideHash = function(slideNumber) {
|
||
if ( ! shower._isNumber(slideNumber)) {
|
||
throw new Error('Gimme slide number as Number, baby!');
|
||
}
|
||
|
||
slideNumber = shower._normalizeSlideNumber(slideNumber);
|
||
|
||
return '#' + shower.slideList[slideNumber].id;
|
||
};
|
||
|
||
/**
|
||
* Wheel event listener
|
||
* @param e event
|
||
*/
|
||
shower.wheel = function (e) {
|
||
var body = document.querySelector('body'),
|
||
wheelDown,
|
||
lockedWheel = body.getAttribute('data-scroll') === 'locked';
|
||
|
||
if (!lockedWheel && !shower.isListMode()) {
|
||
body.setAttribute('data-scroll', 'locked');
|
||
|
||
if (e.deltaY === undefined) {
|
||
// Chrome, Opera, Safari
|
||
wheelDown = e.wheelDeltaY < 0;
|
||
} else {
|
||
// Firefox
|
||
wheelDown = e.deltaY > 0;
|
||
}
|
||
|
||
if (wheelDown) {
|
||
shower._turnNextSlide();
|
||
} else {
|
||
shower._turnPreviousSlide();
|
||
}
|
||
|
||
setTimeout(function () {
|
||
body.setAttribute('data-scroll', 'unlocked');
|
||
}, 200);
|
||
}
|
||
}
|
||
|
||
// Event handlers
|
||
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
if (body.classList.contains('full') || shower.isSlideMode()) {
|
||
shower.go(shower.getCurrentSlideNumber());
|
||
shower.enterSlideMode();
|
||
}
|
||
}, false);
|
||
|
||
window.addEventListener('popstate', function() {
|
||
if (shower.isListMode()) {
|
||
shower.enterListMode();
|
||
} else {
|
||
shower.enterSlideMode();
|
||
}
|
||
}, false);
|
||
|
||
window.addEventListener('resize', function() {
|
||
if (shower.isSlideMode()) {
|
||
shower._applyTransform(shower._getTransform());
|
||
}
|
||
}, false);
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
var currentSlideNumber = shower.getCurrentSlideNumber(),
|
||
slide = shower.slideList[currentSlideNumber],
|
||
slideNumber;
|
||
|
||
switch (e.which) {
|
||
case 80: // P Alt Cmd
|
||
if (shower.isListMode() && e.altKey && e.metaKey) {
|
||
e.preventDefault();
|
||
|
||
slideNumber = slide.number;
|
||
|
||
shower.go(slideNumber);
|
||
shower.enterSlideMode();
|
||
shower.showPresenterNotes(slideNumber);
|
||
|
||
slide.timing && slide.initTimer(shower);
|
||
}
|
||
break;
|
||
|
||
case 116: // F5 (Shift)
|
||
e.preventDefault();
|
||
if (shower.isListMode()) {
|
||
slideNumber = e.shiftKey ? slide.number : 0;
|
||
|
||
shower.go(slideNumber);
|
||
shower.enterSlideMode();
|
||
shower.showPresenterNotes(slideNumber);
|
||
|
||
slide.timing && slide.initTimer(shower);
|
||
} else {
|
||
shower.enterListMode();
|
||
}
|
||
break;
|
||
|
||
case 13: // Enter
|
||
if (shower.isListMode() && currentSlideNumber) {
|
||
e.preventDefault();
|
||
|
||
shower.enterSlideMode();
|
||
shower.showPresenterNotes(currentSlideNumber);
|
||
|
||
slide.timing && slide.initTimer(shower);
|
||
}
|
||
break;
|
||
|
||
case 27: // Esc
|
||
if (shower.isSlideMode()) {
|
||
e.preventDefault();
|
||
shower.enterListMode();
|
||
}
|
||
break;
|
||
|
||
case 33: // PgUp
|
||
case 38: // Up
|
||
case 37: // Left
|
||
case 72: // H
|
||
case 75: // K
|
||
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
|
||
e.preventDefault();
|
||
shower._turnPreviousSlide();
|
||
break;
|
||
|
||
case 34: // PgDown
|
||
case 40: // Down
|
||
case 39: // Right
|
||
case 76: // L
|
||
case 74: // J
|
||
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
|
||
e.preventDefault();
|
||
shower._turnNextSlide();
|
||
break;
|
||
|
||
case 36: // Home
|
||
e.preventDefault();
|
||
shower.first();
|
||
break;
|
||
|
||
case 35: // End
|
||
e.preventDefault();
|
||
shower.last();
|
||
break;
|
||
|
||
case 9: // Tab (Shift)
|
||
case 32: // Space (Shift)
|
||
e.preventDefault();
|
||
shower[e.shiftKey ? '_turnPreviousSlide' : '_turnNextSlide']();
|
||
break;
|
||
|
||
default:
|
||
// Behave as usual
|
||
}
|
||
}, false);
|
||
|
||
shower.init();
|
||
|
||
document.addEventListener('click', function(e) {
|
||
var slideId = shower._getSlideIdByEl(e.target),
|
||
slideNumber,
|
||
slide;
|
||
|
||
// Click on slide in List mode
|
||
if (slideId && shower.isListMode()) {
|
||
slideNumber = shower.getSlideNumber(slideId);
|
||
// Warning: go must be before enterSlideMode.
|
||
// Otherwise there is a bug in Chrome
|
||
shower.go(slideNumber);
|
||
shower.enterSlideMode();
|
||
shower.showPresenterNotes(slideNumber);
|
||
|
||
slide = shower.slideList[slideNumber];
|
||
if (slide.timing) {
|
||
slide.initTimer(shower);
|
||
}
|
||
}
|
||
}, false);
|
||
|
||
document.addEventListener('touchstart', function(e) {
|
||
var slideId = shower._getSlideIdByEl(e.target),
|
||
slideNumber,
|
||
slide,
|
||
x;
|
||
|
||
if (slideId) {
|
||
if (shower.isSlideMode() && ! shower._checkInteractiveElement(e)) {
|
||
x = e.touches[0].pageX;
|
||
|
||
if (x > window.innerWidth / 2) {
|
||
shower._turnNextSlide();
|
||
} else {
|
||
shower._turnPreviousSlide();
|
||
}
|
||
}
|
||
|
||
if (shower.isListMode()) {
|
||
slideNumber = shower.getSlideNumber(slideId);
|
||
// Warning: go must be before enterSlideMode.
|
||
// Otherwise there is a bug in Chrome
|
||
shower.go(slideNumber);
|
||
shower.enterSlideMode();
|
||
shower.showPresenterNotes(slideNumber);
|
||
|
||
slide = shower.slideList[slideNumber];
|
||
if (slide.timing) {
|
||
slide.initTimer(shower);
|
||
}
|
||
}
|
||
}
|
||
|
||
}, false);
|
||
|
||
document.addEventListener('touchmove', function(e) {
|
||
if (shower.isSlideMode()) {
|
||
e.preventDefault();
|
||
}
|
||
}, false);
|
||
|
||
document.addEventListener('wheel', shower.wheel, false);
|
||
|
||
document.addEventListener('mousewheel', shower.wheel, false);
|
||
|
||
return shower;
|
||
|
||
})(this, this.document);
|