ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move slide methods to Slide.prototype; timer and inner nav refactoring

This commit is contained in:
miripiruni 2013-03-24 18:34:47 +04:00
parent 003dfcb6d9
commit 4de39ea307
1 changed files with 304 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
shower.js
View File

@ -9,12 +9,147 @@ window.shower = (function(window, document, undefined) {
body = document.body, body = document.body,
slides = document.querySelectorAll('.slide'), slides = document.querySelectorAll('.slide'),
progress = document.querySelector('div.progress div'), progress = document.querySelector('div.progress div'),
slideList = [],
timer, timer,
timing = 0, timing = 0,
isHistoryApiSupported = !!(window.history && history.pushState), isHistoryApiSupported = !!(window.history && history.pushState),
l = slides.length, i; l = slides.length, i;
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;
}
clearInterval(timer);
if (slide.isFinished()) {
timer = setInterval(function() {
console.log('fin');
clearInterval(timer);
if ( ! slide.isLast()) {
shower.next();
}
},
slide.timing * (slide.innerLength || 1));
} else {
timer = setInterval(function() {
if (slide.isFinished()) {
clearInterval(timer);
if ( ! slide.isLast()) {
shower.next();
}
} else {
slide.next(shower);
}
},
slide.timing);
}
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 (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()) {
if ( ! slide.isLast()) {
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.
* @private * @private
@ -26,14 +161,17 @@ 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 = [];
for (i = 0; i < l; i++) { for (i = 0; i < l; 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
// slide number // slide number
if ( ! slides[i].id) { if ( ! slides[i].id) {
slides[i].id = i + 1; slides[i].id = 'slide_' + (i + 1);
} }
timing = shower._getData(slides[i], 'timing'); timing = shower._getData(slides[i], 'timing');
if (timing && timing.indexOf(':') !== -1) { if (timing && timing.indexOf(':') !== -1) {
timing = timing.split(':'); timing = timing.split(':');
// Compute number of milliseconds from format "mm:ss" // Compute number of milliseconds from format "mm:ss"
@ -44,13 +182,14 @@ window.shower = (function(window, document, undefined) {
} }
} }
slideList.push({ shower.slideList.push(new Slide({
id : slides[i].id, id : slides[i].id,
number : i,
hasInnerNavigation : null !== slides[i].querySelector('.next'), hasInnerNavigation : null !== slides[i].querySelector('.next'),
timing : timing, timing : timing,
innerLength : slides[i].querySelectorAll('.next').length + 1, innerLength : slides[i].querySelectorAll('.next').length,
innerComplete : 0 innerComplete : 0
}); }));
} }
/** /**
@ -107,8 +246,8 @@ 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;
@ -147,11 +286,11 @@ 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 === '') {
@ -161,7 +300,7 @@ 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;
} }
@ -177,6 +316,8 @@ window.shower = (function(window, document, undefined) {
* @returns {Number} * @returns {Number}
*/ */
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!');
} }
@ -189,7 +330,10 @@ window.shower = (function(window, document, undefined) {
if (shower.isSlideMode()) { if (shower.isSlideMode()) {
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
shower.startInnerNavigation(slideNumber); slide = shower.slideList[slideNumber];
if (slide.timing) {
slide.initTimer(shower);
}
} }
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
@ -203,31 +347,54 @@ 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 shown slide number.
* @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 ||
! slideList[currentSlideNumber].hasInnerNavigation ||
! shower.increaseInnerNavigation(currentSlideNumber)
) &&
// If exist next slide
(currentSlideNumber + 2) <= slideList.length
) {
shower.go(currentSlideNumber + 1);
// Slides starts from 0. So return next slide number.
ret = currentSlideNumber + 2;
} }
shower.go(currentSlideNumber + 1);
if (typeof(callback) === 'function') {
callback();
}
return true;
};
/**
*
* @param {Function} [callback]
* @returns {boolean}
*/
shower._turnNextSlide = function(callback) {
var currentSlideNumber = shower.getCurrentSlideNumber(),
nextSlide = shower.slideList[currentSlideNumber + 1],
ret = false,
slide;
// If don't exist next slide
if (! nextSlide) {
return ret;
}
slide = shower.slideList[currentSlideNumber];
if (shower.isSlideMode()) { if (shower.isSlideMode()) {
shower.startInnerNavigation(currentSlideNumber + 1); if (slide.hasInnerNavigation && ! slide.isFinished()) {
slide.process(shower);
} else {
shower.next();
}
} else { // listMode
shower.next();
// Slides starts from 0. So return next slide number.
ret = currentSlideNumber + 2;
} }
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
@ -240,23 +407,53 @@ window.shower = (function(window, document, undefined) {
/** /**
* 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(), var currentSlideNumber = shower.getCurrentSlideNumber();
ret = false;
// Slides starts from 0
if (currentSlideNumber < 1) {
return false;
}
// slides starts from 0
if (currentSlideNumber > 0) {
ret = currentSlideNumber;
shower.go(currentSlideNumber - 1); shower.go(currentSlideNumber - 1);
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
callback(); 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;
// Slides starts from 0
if (currentSlideNumber < 1) {
return false;
} }
return ret; slide = shower.slideList[currentSlideNumber];
slide.timing && clearInterval(timer);
if (shower.isSlideMode()) {
slide.prev(shower);
} else {
shower.go(currentSlideNumber - 1);
}
if (typeof(callback) === 'function') {
callback();
}
return true;
}; };
/** /**
@ -275,13 +472,15 @@ window.shower = (function(window, document, undefined) {
/** /**
* Show last slide. * Show last slide.
* @param {Function} [callback] * @param {Function} [callback]
* @returns {Number} * @returns {Boolean}
*/ */
shower.last = function(callback) { shower.last = function(callback) {
shower.go(shower.slideList.length - 1)
if (typeof(callback) === 'function') { if (typeof(callback) === 'function') {
callback(); callback();
} }
return shower.go(slideList.length - 1); return true;
}; };
/** /**
@ -316,6 +515,8 @@ 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');
@ -326,7 +527,7 @@ window.shower = (function(window, document, undefined) {
return false; return false;
} }
var currentSlideNumber = shower.getCurrentSlideNumber(); currentSlideNumber = shower.getCurrentSlideNumber();
clearInterval(timer); clearInterval(timer);
@ -369,13 +570,13 @@ 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;
} }
} }
@ -405,8 +606,8 @@ 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 {
@ -447,7 +648,7 @@ 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;
}; };
@ -460,7 +661,7 @@ 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);
@ -469,7 +670,7 @@ 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');
@ -505,8 +706,8 @@ 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) {
@ -537,89 +738,7 @@ window.shower = (function(window, document, undefined) {
slideNumber = shower._normalizeSlideNumber(slideNumber); slideNumber = shower._normalizeSlideNumber(slideNumber);
return '#' + slideList[slideNumber].id; return '#' + shower.slideList[slideNumber].id;
};
/**
* Start inner navigation by timer or just switch slide after timer.
* time sets in HTML: .slide[data-timing=MM:SS]
* @param {Number} slideNumber
* @returns {Boolean}
*/
shower.startInnerNavigation = function(slideNumber) {
var slide;
slideNumber = shower._normalizeSlideNumber(slideNumber);
if ( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as Number, baby!');
}
slide = slideList[slideNumber];
clearInterval(timer);
if (slide && slide.timing) {
// Inner Navigation already finished
if (slide.innerLength === slide.innerComplete) {
timer = setInterval(function() {
clearInterval(timer);
// Check if last slide
if (slideList.length !== slideNumber + 1) {
shower.next();
}
},
slide.timing * slide.innerLength);
} else {
timer = setInterval(function() {
// Inner Navigation not finished
if (slide.innerLength > slide.innerComplete) {
shower.increaseInnerNavigation(slideNumber);
slide.innerComplete++;
}
// Inner Navigation already finished
if (slide.innerLength === slide.innerComplete) {
clearInterval(timer);
// Check if last slide
if (slideList.length !== slideNumber + 1) {
shower.next();
}
}
},
slide.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
@ -646,12 +765,14 @@ window.shower = (function(window, document, undefined) {
}, false); }, false);
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
var currentSlideNumber; 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; }
currentSlideNumber = shower.getCurrentSlideNumber(); currentSlideNumber = shower.getCurrentSlideNumber();
slide = shower.slideList[currentSlideNumber];
switch (e.which) { switch (e.which) {
case 116: // F5 case 116: // F5
@ -665,7 +786,7 @@ window.shower = (function(window, document, undefined) {
shower.go(slideNumber); shower.go(slideNumber);
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
shower.startInnerNavigation(slideNumber); shower.slideList[slideNumber].process(shower);
} else { } else {
shower.enterListMode(); shower.enterListMode();
} }
@ -676,7 +797,7 @@ window.shower = (function(window, document, undefined) {
e.preventDefault(); e.preventDefault();
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(currentSlideNumber); shower.showPresenterNotes(currentSlideNumber);
shower.startInnerNavigation(currentSlideNumber); //shower.innerNavigation.start(currentSlideNumber);
} }
break; break;
@ -693,7 +814,7 @@ 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
@ -702,16 +823,18 @@ 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
e.preventDefault(); e.preventDefault();
slide.timing && clearInterval(timer);
shower.first(); shower.first();
break; break;
case 35: // End case 35: // End
e.preventDefault(); e.preventDefault();
slide.timing && clearInterval(timer);
shower.last(); shower.last();
break; break;
@ -727,7 +850,8 @@ window.shower = (function(window, document, undefined) {
}, false); }, false);
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)) {
@ -736,12 +860,17 @@ window.shower = (function(window, document, undefined) {
shower.go(slideNumber); shower.go(slideNumber);
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
shower.startInnerNavigation(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)), var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target)),
slide,
x; x;
if (shower._getSlideIdByEl(e.target)) { if (shower._getSlideIdByEl(e.target)) {
@ -761,7 +890,11 @@ window.shower = (function(window, document, undefined) {
shower.go(shower.getSlideNumber(shower._getSlideIdByEl(e.target))); shower.go(shower.getSlideNumber(shower._getSlideIdByEl(e.target)));
shower.enterSlideMode(); shower.enterSlideMode();
shower.showPresenterNotes(slideNumber); shower.showPresenterNotes(slideNumber);
shower.startInnerNavigation(slideNumber);
slide = shower.slideList[slideNumber];
if (slide.timing) {
slide.initTimer(shower);
}
} }
} }