Commit b364f028 authored by Vadim Makeev's avatar Vadim Makeev

Merge pull request #123 from miripiruni/master

Fix for #99: Inner navigation should be also controlled by slide timing
parents 416f4094 1c0df234
...@@ -9,9 +9,164 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -9,9 +9,164 @@ window.shower = window.shower || (function(window, document, undefined) {
body = document.body, body = document.body,
slides = [], slides = [],
progress = [], progress = [],
slideList = [],
timer, timer,
isHistoryApiSupported = !!(window.history && history.pushState); 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. * Get value at named data store for the DOM element.
...@@ -24,19 +179,23 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -24,19 +179,23 @@ window.shower = window.shower || (function(window, document, undefined) {
return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name); return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name);
}; };
shower.slideList = [];
/** /**
* Init * Shower initialization
* @param {String} slideSelector * @param {String} [slideSelector]
* @param {String} progressBarSelector * @param {String} [progressSelector]
* @returns {Object} shower * @returns {Object} shower
*/ */
shower.init = function(slideSelector, progressSelector) { shower.init = function(slideSelector, progressSelector) {
var timing;
slideSelector = slideSelector || '.slide'; slideSelector = slideSelector || '.slide';
progressSelector = progressSelector || 'div.progress div'; progressSelector = progressSelector || 'div.progress div';
slides = document.querySelectorAll(slideSelector); slides = document.querySelectorAll(slideSelector);
progress = document.querySelector(progressSelector); progress = document.querySelector(progressSelector);
slideList = [];
for (var i = 0; i < slides.length; i++) { for (var i = 0; i < slides.length; i++) {
// Slide IDs are optional. In case of missing ID we set it to the // Slide IDs are optional. In case of missing ID we set it to the
...@@ -45,16 +204,31 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -45,16 +204,31 @@ window.shower = window.shower || (function(window, document, undefined) {
slides[i].id = i + 1; slides[i].id = i + 1;
} }
slideList.push({ timing = shower._getData(slides[i], 'timing');
id: slides[i].id,
hasInnerNavigation: null !== slides[i].querySelector('.next'), if (timing && timing.indexOf(':') !== -1) {
hasTiming: (shower._getData(slides[i], 'timing') && shower._getData(slides[i], 'timing').indexOf(':') !== -1) timing = timing.split(':');
}); // Compute number of milliseconds from format "mm:ss"
timing = (parseInt(timing[0], 10) * 60 + parseInt(timing[1], 10)) * 1000;
if (slides[i].querySelector('.next')) {
timing = timing / (slides[i].querySelectorAll('.next').length + 1);
}
}
shower.slideList.push(new Slide({
id : slides[i].id,
number : i,
hasInnerNavigation : null !== slides[i].querySelector('.next'),
timing : parseInt(timing, 10) || undefined,
innerLength : slides[i].querySelectorAll('.next').length,
innerComplete : 0
}));
} }
return shower; return shower;
}; };
/** /**
* Get slide scale value. * Get slide scale value.
* @private * @private
...@@ -75,11 +249,15 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -75,11 +249,15 @@ window.shower = window.shower || (function(window, document, undefined) {
* @returns {Boolean} * @returns {Boolean}
*/ */
shower._applyTransform = function(transform) { shower._applyTransform = function(transform) {
body.style.WebkitTransform = transform; [
body.style.MozTransform = transform; 'WebkitTransform',
body.style.msTransform = transform; 'MozTransform',
body.style.OTransform = transform; 'msTransform',
body.style.transform = transform; 'OTransform',
'transform'
].forEach(function(prop) {
body.style[prop] = transform;
});
return true; return true;
}; };
...@@ -109,8 +287,8 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -109,8 +287,8 @@ window.shower = window.shower || (function(window, document, undefined) {
slideNumber = 0; slideNumber = 0;
} }
if (slideNumber >= slideList.length) { if (slideNumber >= shower.slideList.length) {
slideNumber = slideList.length - 1; slideNumber = shower.slideList.length - 1;
} }
return slideNumber; return slideNumber;
...@@ -119,7 +297,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -119,7 +297,7 @@ window.shower = window.shower || (function(window, document, undefined) {
/** /**
* Get slide id from HTML element. * Get slide id from HTML element.
* @private * @private
* @param {HTMLElement} el * @param {Node} el
* @returns {String} * @returns {String}
*/ */
shower._getSlideIdByEl = function(el) { shower._getSlideIdByEl = function(el) {
...@@ -137,7 +315,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -137,7 +315,7 @@ window.shower = window.shower || (function(window, document, undefined) {
/** /**
* For touch devices: check if link is clicked. * For touch devices: check if link is clicked.
* *
* @TODO: add support for textareas/inputs/etc. * @TODO: add support for textarea/input/etc.
* *
* @private * @private
* @param {HTMLElement} e * @param {HTMLElement} e
...@@ -148,12 +326,12 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -148,12 +326,12 @@ window.shower = window.shower || (function(window, document, undefined) {
}; };
/** /**
* Get slide number by slideId. * Get slide number by slideId.
* @param {String} slideId (HTML id or position in slideList) * @param {String} slideId
* @returns {Number} * @returns {Number}
*/ */
shower.getSlideNumber = function(slideId) { shower.getSlideNumber = function(slideId) {
var i = slideList.length - 1, var i = shower.slideList.length - 1,
slideNumber; slideNumber;
if (slideId === '') { if (slideId === '') {
...@@ -163,7 +341,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -163,7 +341,7 @@ window.shower = window.shower || (function(window, document, undefined) {
// As fast as you can ;-) // As fast as you can ;-)
// http://jsperf.com/for-vs-foreach/46 // http://jsperf.com/for-vs-foreach/46
for (; i >= 0; --i) { for (; i >= 0; --i) {
if (slideId === slideList[i].id) { if (slideId === shower.slideList[i].id) {
slideNumber = i; slideNumber = i;
break; break;
} }
...@@ -176,13 +354,19 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -176,13 +354,19 @@ window.shower = window.shower || (function(window, document, undefined) {
* Go to slide number. * Go to slide number.
* @param {Number} slideNumber slide number (sic!). Attention: starts from zero. * @param {Number} slideNumber slide number (sic!). Attention: starts from zero.
* @param {Function} [callback] runs only if you not in List mode. * @param {Function} [callback] runs only if you not in List mode.
* @returns {Number} * @returns {Number|Boolean}
*/ */
shower.go = function(slideNumber, callback) { shower.go = function(slideNumber, callback) {
var slide;
if ( ! shower._isNumber(slideNumber)) { if ( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as Number, baby!'); throw new Error('Gimme slide number as Number, baby!');
} }
if ( ! shower.slideList[slideNumber]) {
return false;
}
// Also triggers popstate and invoke shower.enter__Mode() // Also triggers popstate and invoke shower.enter__Mode()
url.hash = shower.getSlideHash(slideNumber); url.hash = shower.getSlideHash(slideNumber);
...@@ -191,7 +375,10 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -191,7 +375,10 @@ window.shower = window.shower || (function(window, document, undefined) {
if (shower.isSlideMode()) { if (shower.isSlideMode()) {
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
shower.runInnerNavigation(slideNumber); slide = shower.slideList[slideNumber];
if (slide.timing) {
slide.initTimer(shower);
}
} }
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
...@@ -203,87 +390,125 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -203,87 +390,125 @@ window.shower = window.shower || (function(window, document, undefined) {
/** /**
* Show next slide or show next Inner navigation item. * Show next slide or show next Inner navigation item.
* Returns false on a last slide, otherwise returns shown slide number. * Returns false on a last slide, otherwise returns shower.
* @param {Function} [callback] runs only if shower.next() is successfully completed. * @param {Function} [callback] runs only if shower.next() is successfully completed.
* @returns {Number|Boolean} * @returns {Boolean}
*/ */
shower.next = function(callback) { shower.next = function(callback) {
var currentSlideNumber = shower.getCurrentSlideNumber(), var currentSlideNumber = shower.getCurrentSlideNumber(),
ret = false; nextSlide = shower.slideList[currentSlideNumber + 1];
// Only go to next slide if current slide have no inner // If don't exist next slide
// navigation or inner navigation is fully shown if (! nextSlide) {
// NOTE: But first of all check if there is no current slide return false;
if ( }
(
-1 === currentSlideNumber || shower.go(currentSlideNumber + 1);
! slideList[currentSlideNumber].hasInnerNavigation ||
! shower.increaseInnerNavigation(currentSlideNumber) if (typeof(callback) === 'function') {
) && callback();
// If exist next slide
(currentSlideNumber + 2) <= slideList.length
) {
shower.go(currentSlideNumber + 1);
// Slides starts from 0. So return next slide number.
ret = currentSlideNumber + 2;
} }
return this;
};
/**
*
* @param {Function} [callback]
*/
shower._turnNextSlide = function(callback) {
var currentSlideNumber = shower.getCurrentSlideNumber(),
slide = shower.slideList[currentSlideNumber];
if (shower.isSlideMode()) { if (shower.isSlideMode()) {
shower.runInnerNavigation(currentSlideNumber + 1); slide.stopTimer();
slide.next(shower);
} else {
shower.go(currentSlideNumber + 1);
} }
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
callback(); callback();
} }
return ret; return;
}; };
/** /**
* Show previous slide. Returns false on a first slide, otherwise returns shown slide number. * 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. * @param {Function} [callback] runs only if shower.previous() is successfully completed.
* @returns {Number|Boolean} * @returns {Boolean}
*/ */
shower.previous = function(callback) { 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(), var currentSlideNumber = shower.getCurrentSlideNumber(),
ret = false; slide = shower.slideList[currentSlideNumber];
// slides starts from 0 slide.stopTimer();
if (currentSlideNumber > 0) {
ret = currentSlideNumber; if (shower.isSlideMode()) {
slide.prev(shower);
} else {
shower.go(currentSlideNumber - 1); shower.go(currentSlideNumber - 1);
}
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
callback(); callback();
}
} }
return ret; return true;
}; };
/** /**
* Show first slide. * Show first slide.
* @param {Function} [callback] * @param {Function} [callback]
* @returns {Number}
*/ */
shower.first = function(callback) { shower.first = function(callback) {
var slide = shower.slideList[shower.getCurrentSlideNumber()];
slide.timing && slide.stopTimer();
shower.go(0);
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
callback(); callback();
} }
return shower.go(0);
}; };
/** /**
* Show last slide. * Show last slide.
* @param {Function} [callback] * @param {Function} [callback]
* @returns {Number}
*/ */
shower.last = 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') { if (typeof(callback) === 'function') {
callback(); callback();
} }
return shower.go(slideList.length - 1);
}; };
/** /**
...@@ -318,6 +543,8 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -318,6 +543,8 @@ window.shower = window.shower || (function(window, document, undefined) {
* @returns {Boolean} * @returns {Boolean}
*/ */
shower.enterListMode = function(callback) { shower.enterListMode = function(callback) {
var currentSlideNumber;
// Anyway: change body class (@TODO: refactoring) // Anyway: change body class (@TODO: refactoring)
body.classList.remove('full'); body.classList.remove('full');
body.classList.add('list'); body.classList.add('list');
...@@ -328,9 +555,9 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -328,9 +555,9 @@ window.shower = window.shower || (function(window, document, undefined) {
return false; return false;
} }
var currentSlideNumber = shower.getCurrentSlideNumber(); currentSlideNumber = shower.getCurrentSlideNumber();
clearTimeout(timer); shower.slideList[currentSlideNumber].stopTimer();
if (shower.isSlideMode() && isHistoryApiSupported) { if (shower.isSlideMode() && isHistoryApiSupported) {
history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber)); history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber));
...@@ -371,13 +598,13 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -371,13 +598,13 @@ window.shower = window.shower || (function(window, document, undefined) {
* @returns {Number} * @returns {Number}
*/ */
shower.getCurrentSlideNumber = function() { shower.getCurrentSlideNumber = function() {
var i = slideList.length - 1, var i = shower.slideList.length - 1,
currentSlideId = url.hash.substr(1); currentSlideId = url.hash.substr(1);
// As fast as you can ;-) // As fast as you can ;-)
// http://jsperf.com/for-vs-foreach/46 // http://jsperf.com/for-vs-foreach/46
for (; i >= 0; --i) { for (; i >= 0; --i) {
if (currentSlideId === slideList[i].id) { if (currentSlideId === shower.slideList[i].id) {
return i; return i;
} }
} }
...@@ -407,8 +634,8 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -407,8 +634,8 @@ window.shower = window.shower || (function(window, document, undefined) {
return ret; return ret;
} }
if (slideList[slideNumber]) { if (shower.slideList[slideNumber]) {
currentSlide = document.getElementById(slideList[slideNumber].id); currentSlide = document.getElementById(shower.slideList[slideNumber].id);
window.scrollTo(0, currentSlide.offsetTop); window.scrollTo(0, currentSlide.offsetTop);
ret = true; ret = true;
} else { } else {
...@@ -449,7 +676,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -449,7 +676,7 @@ window.shower = window.shower || (function(window, document, undefined) {
throw new Error('Gimme slide number as Number, baby!'); throw new Error('Gimme slide number as Number, baby!');
} }
progress.style.width = (100 / (slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%'; progress.style.width = (100 / (shower.slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
return true; return true;
}; };
...@@ -462,7 +689,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -462,7 +689,7 @@ window.shower = window.shower || (function(window, document, undefined) {
shower.updateActiveAndVisitedSlides = function(slideNumber) { shower.updateActiveAndVisitedSlides = function(slideNumber) {
var i, var i,
slide, slide,
l = slideList.length; l = shower.slideList.length;
slideNumber = shower._normalizeSlideNumber(slideNumber); slideNumber = shower._normalizeSlideNumber(slideNumber);
...@@ -471,7 +698,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -471,7 +698,7 @@ window.shower = window.shower || (function(window, document, undefined) {
} }
for (i = 0; i < l; ++i) { for (i = 0; i < l; ++i) {
slide = document.getElementById(slideList[i].id); slide = document.getElementById(shower.slideList[i].id);
if (i < slideNumber) { if (i < slideNumber) {
slide.classList.remove('active'); slide.classList.remove('active');
...@@ -507,8 +734,8 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -507,8 +734,8 @@ window.shower = window.shower || (function(window, document, undefined) {
if (window.console) { if (window.console) {
slideNumber = shower._normalizeSlideNumber(slideNumber); slideNumber = shower._normalizeSlideNumber(slideNumber);
var slideId = slideList[slideNumber].id, var slideId = shower.slideList[slideNumber].id,
nextSlideId = slideList[slideNumber + 1] ? slideList[slideNumber + 1].id : null, nextSlideId = shower.slideList[slideNumber + 1] ? shower.slideList[slideNumber + 1].id : null,
notes = document.getElementById(slideId).querySelector('footer'); notes = document.getElementById(slideId).querySelector('footer');
if (notes && notes.innerHTML) { if (notes && notes.innerHTML) {
...@@ -539,63 +766,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -539,63 +766,7 @@ window.shower = window.shower || (function(window, document, undefined) {
slideNumber = shower._normalizeSlideNumber(slideNumber); slideNumber = shower._normalizeSlideNumber(slideNumber);
return '#' + slideList[slideNumber].id; return '#' + shower.slideList[slideNumber].id;
};
/**
* Run slide show if presented.
* @param {Number} slideNumber
* @returns {Boolean}
*/
shower.runInnerNavigation = function(slideNumber) {
if ( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as Number, baby!');
}
slideNumber = shower._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 = 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.next();
},
timing);
}
return true;
};
/**
* Increases inner navigation by adding 'active' class to next inactive inner navigation item
* @param {Number} slideNumber
* @returns {Boolean}
*/
shower.increaseInnerNavigation = function(slideNumber) {
var nextNodes,
node;
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');
return true;
}
}
return false;
}; };
// Event handlers // Event handlers
...@@ -622,24 +793,31 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -622,24 +793,31 @@ window.shower = window.shower || (function(window, document, undefined) {
}, false); }, false);
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
var currentSlideNumber,
slide;
// Shortcut for alt, ctrl and meta keys // Shortcut for alt, ctrl and meta keys
if (e.altKey || e.ctrlKey || e.metaKey) { return; } if (e.altKey || e.ctrlKey || e.metaKey) { return; }
var currentSlideNumber = shower.getCurrentSlideNumber(), currentSlideNumber = shower.getCurrentSlideNumber();
isInnerNavCompleted = true; slide = shower.slideList[currentSlideNumber];
switch (e.which) { switch (e.which) {
case 116: // F5 case 116: // F5
e.preventDefault(); e.preventDefault();
if (shower.isListMode()) { if (shower.isListMode()) {
var slideNumber = e.shiftKey ? currentSlideNumber : 0; var slideNumber = e.shiftKey ? currentSlideNumber : 0,
slide;
// Warning: go must be before enterSlideMode. // Warning: go must be before enterSlideMode.
// Otherwise there is a bug in Chrome // Otherwise there is a bug in Chrome
shower.go(slideNumber); shower.go(slideNumber);
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
slide = shower.slideList[currentSlideNumber];
slide.timing && slide.initTimer(shower);
} else { } else {
shower.enterListMode(); shower.enterListMode();
} }
...@@ -650,7 +828,10 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -650,7 +828,10 @@ window.shower = window.shower || (function(window, document, undefined) {
e.preventDefault(); e.preventDefault();
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(currentSlideNumber); shower.showPresenterNotes(currentSlideNumber);
shower.runInnerNavigation(currentSlideNumber);
if (slide.timing) {
slide.initTimer(shower);
}
} }
break; break;
...@@ -667,7 +848,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -667,7 +848,7 @@ window.shower = window.shower || (function(window, document, undefined) {
case 72: // H case 72: // H
case 75: // K case 75: // K
e.preventDefault(); e.preventDefault();
shower.previous(); shower._turnPreviousSlide();
break; break;
case 34: // PgDown case 34: // PgDown
...@@ -676,7 +857,7 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -676,7 +857,7 @@ window.shower = window.shower || (function(window, document, undefined) {
case 76: // L case 76: // L
case 74: // J case 74: // J
e.preventDefault(); e.preventDefault();
shower.next(); shower._turnNextSlide();
break; break;
case 36: // Home case 36: // Home
...@@ -686,13 +867,14 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -686,13 +867,14 @@ window.shower = window.shower || (function(window, document, undefined) {
case 35: // End case 35: // End
e.preventDefault(); e.preventDefault();
shower.last(); shower.last();
break; break;
case 9: // Tab = +1; Shift + Tab = -1 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();
shower[e.shiftKey ? 'previous' : 'next'](); shower[e.shiftKey ? '_turnPreviousSlide' : '_turnNextSlide']();
break; break;
default: default:
...@@ -703,7 +885,8 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -703,7 +885,8 @@ window.shower = window.shower || (function(window, document, undefined) {
shower.init(); shower.init();
document.addEventListener('click', function(e) { document.addEventListener('click', function(e) {
var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target)); var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target)),
slide;
// Click on slide in List mode // Click on slide in List mode
if (shower.isListMode() && shower._getSlideIdByEl(e.target)) { if (shower.isListMode() && shower._getSlideIdByEl(e.target)) {
...@@ -712,24 +895,41 @@ window.shower = window.shower || (function(window, document, undefined) { ...@@ -712,24 +895,41 @@ window.shower = window.shower || (function(window, document, undefined) {
shower.go(slideNumber); shower.go(slideNumber);
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
slide = shower.slideList[slideNumber];
if (slide.timing) {
slide.initTimer(shower);
}
} }
}, false); }, false);
document.addEventListener('touchstart', function(e) { document.addEventListener('touchstart', function(e) {
var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target)),
slide,
x;
if (shower._getSlideIdByEl(e.target)) { if (shower._getSlideIdByEl(e.target)) {
if (shower.isSlideMode() && ! shower._checkInteractiveElement(e)) { if (shower.isSlideMode() && ! shower._checkInteractiveElement(e)) {
var x = e.touches[0].pageX; x = e.touches[0].pageX;
if (x > window.innerWidth / 2) { if (x > window.innerWidth / 2) {
shower.next(); shower._turnNextSlide();
} else { } else {
shower.previous(); shower._turnPreviousSlide();
} }
} }
if (shower.isListMode()) { if (shower.isListMode()) {
// Warning: go must be before enterSlideMode.
// Otherwise there is a bug in Chrome
shower.go(shower.getSlideNumber(shower._getSlideIdByEl(e.target))); shower.go(shower.getSlideNumber(shower._getSlideIdByEl(e.target)));
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(slideNumber);
slide = shower.slideList[slideNumber];
if (slide.timing) {
slide.initTimer(shower);
}
} }
} }
......
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
* @copyright 2010–2013 Vadim Makeev, pepelsbey.net * @copyright 2010–2013 Vadim Makeev, pepelsbey.net
* @license MIT license: github.com/shower/shower/wiki/MIT-License * @license MIT license: github.com/shower/shower/wiki/MIT-License
*/ */
window.shower=window.shower||function(e,t,r){var i={},n=e.location,s=t.body,o=[],a=[],l=[],u,d=!!(e.history&&history.pushState);i._getData=function(e,t){return e.dataset?e.dataset[t]:e.getAttribute("data-"+t)};i.init=function(e,r){e=e||".slide";r=r||"div.progress div";o=t.querySelectorAll(e);a=t.querySelector(r);l=[];for(var n=0;n<o.length;n++){if(!o[n].id){o[n].id=n+1}l.push({id:o[n].id,hasInnerNavigation:null!==o[n].querySelector(".next"),hasTiming:i._getData(o[n],"timing")&&i._getData(o[n],"timing").indexOf(":")!==-1})}return i};i._getTransform=function(){var t=Math.max(s.clientWidth/e.innerWidth,s.clientHeight/e.innerHeight);return"scale("+1/t+")"};i._applyTransform=function(e){s.style.WebkitTransform=e;s.style.MozTransform=e;s.style.msTransform=e;s.style.OTransform=e;s.style.transform=e;return true};i._isNumber=function(e){return!isNaN(parseFloat(e))&&isFinite(e)};i._normalizeSlideNumber=function(e){if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}if(e<0){e=0}if(e>=l.length){e=l.length-1}return e};i._getSlideIdByEl=function(e){while("BODY"!==e.nodeName&&"HTML"!==e.nodeName){if(e.classList.contains("slide")){return e.id}else{e=e.parentNode}}return""};i._checkInteractiveElement=function(e){return"A"===e.target.nodeName};i.getSlideNumber=function(e){var t=l.length-1,r;if(e===""){r=0}for(;t>=0;--t){if(e===l[t].id){r=t;break}}return r};i.go=function(e,t){if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}n.hash=i.getSlideHash(e);i.updateProgress(e);i.updateActiveAndVisitedSlides(e);if(i.isSlideMode()){i.showPresenterNotes(e);i.runInnerNavigation(e)}if(typeof t==="function"){t()}return e};i.next=function(e){var t=i.getCurrentSlideNumber(),r=false;if((-1===t||!l[t].hasInnerNavigation||!i.increaseInnerNavigation(t))&&t+2<=l.length){i.go(t+1);r=t+2}if(i.isSlideMode()){i.runInnerNavigation(t+1)}if(typeof e==="function"){e()}return r};i.previous=function(e){var t=i.getCurrentSlideNumber(),r=false;if(t>0){r=t;i.go(t-1);if(typeof e==="function"){e()}}return r};i.first=function(e){if(typeof e==="function"){e()}return i.go(0)};i.last=function(e){if(typeof e==="function"){e()}return i.go(l.length-1)};i.enterSlideMode=function(e){var t=i.getCurrentSlideNumber();s.classList.remove("list");s.classList.add("full");if(i.isListMode()&&d){history.pushState(null,null,n.pathname+"?full"+i.getSlideHash(t))}i._applyTransform(i._getTransform());if(typeof e==="function"){e()}return true};i.enterListMode=function(e){s.classList.remove("full");s.classList.add("list");i.clearPresenterNotes();if(i.isListMode()){return false}var t=i.getCurrentSlideNumber();clearTimeout(u);if(i.isSlideMode()&&d){history.pushState(null,null,n.pathname+i.getSlideHash(t))}i.scrollToSlide(t);i._applyTransform("none");if(typeof e==="function"){e()}return true};i.toggleMode=function(e){if(i.isListMode()){i.enterSlideMode()}else{i.enterListMode()}if(typeof e==="function"){e()}return true};i.getCurrentSlideNumber=function(){var e=l.length-1,t=n.hash.substr(1);for(;e>=0;--e){if(t===l[e].id){return e}}return-1};i.scrollToSlide=function(r){var n,s=false;if(!i._isNumber(r)){throw new Error("Gimme slide number as Number, baby!")}if(i.isSlideMode()){throw new Error("You can't scroll to because you in slide mode. Please, switch to list mode.")}if(-1===r){return s}if(l[r]){n=t.getElementById(l[r].id);e.scrollTo(0,n.offsetTop);s=true}else{throw new Error("There is no slide with number "+r)}return s};i.isListMode=function(){return d?!/^full.*/.test(n.search.substr(1)):s.classList.contains("list")};i.isSlideMode=function(){return d?/^full.*/.test(n.search.substr(1)):s.classList.contains("full")};i.updateProgress=function(e){if(null===a){return false}if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}a.style.width=(100/(l.length-1)*i._normalizeSlideNumber(e)).toFixed(2)+"%";return true};i.updateActiveAndVisitedSlides=function(e){var r,n,s=l.length;e=i._normalizeSlideNumber(e);if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}for(r=0;r<s;++r){n=t.getElementById(l[r].id);if(r<e){n.classList.remove("active");n.classList.add("visited")}else if(r>e){n.classList.remove("visited");n.classList.remove("active")}else{n.classList.remove("visited");n.classList.add("active")}}return true};i.clearPresenterNotes=function(){if(e.console&&e.console.clear){console.clear()}};i.showPresenterNotes=function(r){i.clearPresenterNotes();if(e.console){r=i._normalizeSlideNumber(r);var n=l[r].id,s=l[r+1]?l[r+1].id:null,o=t.getElementById(n).querySelector("footer");if(o&&o.innerHTML){console.info(o.innerHTML.replace(/\n\s+/g,"\n"))}if(s){var a=t.getElementById(s).querySelector("h2");if(a){a=a.innerHTML.replace(/^\s+|<[^>]+>/g,"");console.info("NEXT: "+a)}}}};i.getSlideHash=function(e){if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}e=i._normalizeSlideNumber(e);return"#"+l[e].id};i.runInnerNavigation=function(e){if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}e=i._normalizeSlideNumber(e);clearTimeout(u);if(l[e].hasTiming){var r=i._getData(t.getElementById(l[e].id),"timing").split(":");r=parseInt(r[0],10)*60*1e3+parseInt(r[1],10)*1e3;u=setTimeout(function(){i.next()},r)}return true};i.increaseInnerNavigation=function(e){var r,n;if(!i._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}if(l[e].hasInnerNavigation){r=t.getElementById(l[e].id).querySelectorAll(".next:not(.active)");if(0!==r.length){n=r[0];n.classList.add("active");return true}}return false};e.addEventListener("DOMContentLoaded",function(){if(s.classList.contains("full")||i.isSlideMode()){i.go(i.getCurrentSlideNumber());i.enterSlideMode()}},false);e.addEventListener("popstate",function(){if(i.isListMode()){i.enterListMode()}else{i.enterSlideMode()}},false);e.addEventListener("resize",function(){if(i.isSlideMode()){i._applyTransform(i._getTransform())}},false);t.addEventListener("keydown",function(e){if(e.altKey||e.ctrlKey||e.metaKey){return}var t=i.getCurrentSlideNumber(),r=true;switch(e.which){case 116:e.preventDefault();if(i.isListMode()){var n=e.shiftKey?t:0;i.go(n);i.enterSlideMode();i.showPresenterNotes(n)}else{i.enterListMode()}break;case 13:if(i.isListMode()&&-1!==t){e.preventDefault();i.enterSlideMode();i.showPresenterNotes(t);i.runInnerNavigation(t)}break;case 27:if(i.isSlideMode()){e.preventDefault();i.enterListMode()}break;case 33:case 38:case 37:case 72:case 75:e.preventDefault();i.previous();break;case 34:case 40:case 39:case 76:case 74:e.preventDefault();i.next();break;case 36:e.preventDefault();i.first();break;case 35:e.preventDefault();i.last();break;case 9:case 32:e.preventDefault();i[e.shiftKey?"previous":"next"]();break;default:}},false);i.init();t.addEventListener("click",function(e){var t=i.getSlideNumber(i._getSlideIdByEl(e.target));if(i.isListMode()&&i._getSlideIdByEl(e.target)){i.go(t);i.enterSlideMode();i.showPresenterNotes(t)}},false);t.addEventListener("touchstart",function(t){if(i._getSlideIdByEl(t.target)){if(i.isSlideMode()&&!i._checkInteractiveElement(t)){var r=t.touches[0].pageX;if(r>e.innerWidth/2){i.next()}else{i.previous()}}if(i.isListMode()){i.go(i.getSlideNumber(i._getSlideIdByEl(t.target)));i.enterSlideMode()}}},false);t.addEventListener("touchmove",function(e){if(i.isSlideMode()){e.preventDefault()}},false);return i}(this,this.document); window.shower=window.shower||function(e,t,i){var r={},n=e.location,s=t.body,l=[],o=[],a,u=!!(e.history&&e.history.pushState);function d(e){for(var t in e){if(e.hasOwnProperty(t)){this[t]=e[t]}}}d.prototype={getSlideNumber:function(){return this.number},isLast:function(){return r.slideList.length===this.number+1},isFinished:function(){return this.innerComplete>=this.innerLength},process:function(e){if(this.timing){this.initTimer(e);return this}this.next(e);return this},initTimer:function(e){var t=this;if(!t.timing){return false}t.stopTimer();if(t.isFinished()){a=setInterval(function(){t.stopTimer();e.next()},t.timing*(t.innerLength||1))}else{a=setInterval(function(){if(t.isFinished()){t.stopTimer();e.next()}else{t.next(e)}},t.timing)}return this},stopTimer:function(){if(a){clearInterval(a);a=false}return this},prev:function(e){var i,r=this;if(!r.hasInnerNavigation||r.isFinished()||r.innerComplete===0){e.prev();return false}i=t.getElementById(r.id).querySelectorAll(".next.active");if(!i||i.length<1){return false}if(r.innerComplete>0){r.innerComplete--;i[i.length-1].classList.remove("active")}else{e.prev()}return this},next:function(e){var i,r=this;if(!r.hasInnerNavigation||r.isFinished()){e.next();return false}if(!r.isFinished()){i=t.getElementById(r.id).querySelectorAll(".next:not(.active)");i[0].classList.add("active");r.innerComplete++}return this}};r._getData=function(e,t){return e.dataset?e.dataset[t]:e.getAttribute("data-"+t)};r.slideList=[];r.init=function(e,n){var s;e=e||".slide";n=n||"div.progress div";l=t.querySelectorAll(e);o=t.querySelector(n);for(var a=0;a<l.length;a++){if(!l[a].id){l[a].id=a+1}s=r._getData(l[a],"timing");if(s&&s.indexOf(":")!==-1){s=s.split(":");s=(parseInt(s[0],10)*60+parseInt(s[1],10))*1e3;if(l[a].querySelector(".next")){s=s/(l[a].querySelectorAll(".next").length+1)}}r.slideList.push(new d({id:l[a].id,number:a,hasInnerNavigation:null!==l[a].querySelector(".next"),timing:parseInt(s,10)||i,innerLength:l[a].querySelectorAll(".next").length,innerComplete:0}))}return r};r._getTransform=function(){var t=Math.max(s.clientWidth/e.innerWidth,s.clientHeight/e.innerHeight);return"scale("+1/t+")"};r._applyTransform=function(e){["WebkitTransform","MozTransform","msTransform","OTransform","transform"].forEach(function(t){s.style[t]=e});return true};r._isNumber=function(e){return!isNaN(parseFloat(e))&&isFinite(e)};r._normalizeSlideNumber=function(e){if(!r._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}if(e<0){e=0}if(e>=r.slideList.length){e=r.slideList.length-1}return e};r._getSlideIdByEl=function(e){while("BODY"!==e.nodeName&&"HTML"!==e.nodeName){if(e.classList.contains("slide")){return e.id}else{e=e.parentNode}}return""};r._checkInteractiveElement=function(e){return"A"===e.target.nodeName};r.getSlideNumber=function(e){var t=r.slideList.length-1,i;if(e===""){i=0}for(;t>=0;--t){if(e===r.slideList[t].id){i=t;break}}return i};r.go=function(e,t){var i;if(!r._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}if(!r.slideList[e]){return false}n.hash=r.getSlideHash(e);r.updateProgress(e);r.updateActiveAndVisitedSlides(e);if(r.isSlideMode()){r.showPresenterNotes(e);i=r.slideList[e];if(i.timing){i.initTimer(r)}}if(typeof t==="function"){t()}return e};r.next=function(e){var t=r.getCurrentSlideNumber(),i=r.slideList[t+1];if(!i){return false}r.go(t+1);if(typeof e==="function"){e()}return this};r._turnNextSlide=function(e){var t=r.getCurrentSlideNumber(),i=r.slideList[t];if(r.isSlideMode()){i.stopTimer();i.next(r)}else{r.go(t+1)}if(typeof e==="function"){e()}return};r.prev=r.previous=function(e){var t=r.getCurrentSlideNumber();if(t<1){return false}r.go(t-1);if(typeof e==="function"){e()}return true};r._turnPreviousSlide=function(e){var t=r.getCurrentSlideNumber(),i=r.slideList[t];i.stopTimer();if(r.isSlideMode()){i.prev(r)}else{r.go(t-1)}if(typeof e==="function"){e()}return true};r.first=function(e){var t=r.slideList[r.getCurrentSlideNumber()];t.timing&&t.stopTimer();r.go(0);if(typeof e==="function"){e()}};r.last=function(e){var t=r.slideList[r.getCurrentSlideNumber()];t.timing&&t.stopTimer();r.go(r.slideList.length-1);if(typeof e==="function"){e()}};r.enterSlideMode=function(e){var t=r.getCurrentSlideNumber();s.classList.remove("list");s.classList.add("full");if(r.isListMode()&&u){history.pushState(null,null,n.pathname+"?full"+r.getSlideHash(t))}r._applyTransform(r._getTransform());if(typeof e==="function"){e()}return true};r.enterListMode=function(e){var t;s.classList.remove("full");s.classList.add("list");r.clearPresenterNotes();if(r.isListMode()){return false}t=r.getCurrentSlideNumber();r.slideList[t].stopTimer();if(r.isSlideMode()&&u){history.pushState(null,null,n.pathname+r.getSlideHash(t))}r.scrollToSlide(t);r._applyTransform("none");if(typeof e==="function"){e()}return true};r.toggleMode=function(e){if(r.isListMode()){r.enterSlideMode()}else{r.enterListMode()}if(typeof e==="function"){e()}return true};r.getCurrentSlideNumber=function(){var e=r.slideList.length-1,t=n.hash.substr(1);for(;e>=0;--e){if(t===r.slideList[e].id){return e}}return-1};r.scrollToSlide=function(i){var n,s=false;if(!r._isNumber(i)){throw new Error("Gimme slide number as Number, baby!")}if(r.isSlideMode()){throw new Error("You can't scroll to because you in slide mode. Please, switch to list mode.")}if(-1===i){return s}if(r.slideList[i]){n=t.getElementById(r.slideList[i].id);e.scrollTo(0,n.offsetTop);s=true}else{throw new Error("There is no slide with number "+i)}return s};r.isListMode=function(){return u?!/^full.*/.test(n.search.substr(1)):s.classList.contains("list")};r.isSlideMode=function(){return u?/^full.*/.test(n.search.substr(1)):s.classList.contains("full")};r.updateProgress=function(e){if(null===o){return false}if(!r._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}o.style.width=(100/(r.slideList.length-1)*r._normalizeSlideNumber(e)).toFixed(2)+"%";return true};r.updateActiveAndVisitedSlides=function(e){var i,n,s=r.slideList.length;e=r._normalizeSlideNumber(e);if(!r._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}for(i=0;i<s;++i){n=t.getElementById(r.slideList[i].id);if(i<e){n.classList.remove("active");n.classList.add("visited")}else if(i>e){n.classList.remove("visited");n.classList.remove("active")}else{n.classList.remove("visited");n.classList.add("active")}}return true};r.clearPresenterNotes=function(){if(e.console&&e.console.clear){console.clear()}};r.showPresenterNotes=function(i){r.clearPresenterNotes();if(e.console){i=r._normalizeSlideNumber(i);var n=r.slideList[i].id,s=r.slideList[i+1]?r.slideList[i+1].id:null,l=t.getElementById(n).querySelector("footer");if(l&&l.innerHTML){console.info(l.innerHTML.replace(/\n\s+/g,"\n"))}if(s){var o=t.getElementById(s).querySelector("h2");if(o){o=o.innerHTML.replace(/^\s+|<[^>]+>/g,"");console.info("NEXT: "+o)}}}};r.getSlideHash=function(e){if(!r._isNumber(e)){throw new Error("Gimme slide number as Number, baby!")}e=r._normalizeSlideNumber(e);return"#"+r.slideList[e].id};e.addEventListener("DOMContentLoaded",function(){if(s.classList.contains("full")||r.isSlideMode()){r.go(r.getCurrentSlideNumber());r.enterSlideMode()}},false);e.addEventListener("popstate",function(){if(r.isListMode()){r.enterListMode()}else{r.enterSlideMode()}},false);e.addEventListener("resize",function(){if(r.isSlideMode()){r._applyTransform(r._getTransform())}},false);t.addEventListener("keydown",function(e){var t,i;if(e.altKey||e.ctrlKey||e.metaKey){return}t=r.getCurrentSlideNumber();i=r.slideList[t];switch(e.which){case 116:e.preventDefault();if(r.isListMode()){var n=e.shiftKey?t:0,i;r.go(n);r.enterSlideMode();r.showPresenterNotes(n);i=r.slideList[t];i.timing&&i.initTimer(r)}else{r.enterListMode()}break;case 13:if(r.isListMode()&&-1!==t){e.preventDefault();r.enterSlideMode();r.showPresenterNotes(t);if(i.timing){i.initTimer(r)}}break;case 27:if(r.isSlideMode()){e.preventDefault();r.enterListMode()}break;case 33:case 38:case 37:case 72:case 75:e.preventDefault();r._turnPreviousSlide();break;case 34:case 40:case 39:case 76:case 74:e.preventDefault();r._turnNextSlide();break;case 36:e.preventDefault();r.first();break;case 35:e.preventDefault();r.last();break;case 9:case 32:e.preventDefault();r[e.shiftKey?"_turnPreviousSlide":"_turnNextSlide"]();break;default:}},false);r.init();t.addEventListener("click",function(e){var t=r.getSlideNumber(r._getSlideIdByEl(e.target)),i;if(r.isListMode()&&r._getSlideIdByEl(e.target)){r.go(t);r.enterSlideMode();r.showPresenterNotes(t);i=r.slideList[t];if(i.timing){i.initTimer(r)}}},false);t.addEventListener("touchstart",function(t){var i=r.getSlideNumber(r._getSlideIdByEl(t.target)),n,s;if(r._getSlideIdByEl(t.target)){if(r.isSlideMode()&&!r._checkInteractiveElement(t)){s=t.touches[0].pageX;if(s>e.innerWidth/2){r._turnNextSlide()}else{r._turnPreviousSlide()}}if(r.isListMode()){r.go(r.getSlideNumber(r._getSlideIdByEl(t.target)));r.enterSlideMode();r.showPresenterNotes(i);n=r.slideList[i];if(n.timing){n.initTimer(r)}}}},false);t.addEventListener("touchmove",function(e){if(r.isSlideMode()){e.preventDefault()}},false);return r}(this,this.document);
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment