Add slideshow (via data-timing).

Closes issue #17.
This commit is contained in:
Oleg Roschupkin 2012-03-01 17:41:23 +09:00
parent e143625e6e
commit 50972bb76a
2 changed files with 29 additions and 3 deletions

4
en.htm
View File

@ -27,7 +27,7 @@
<h1>Shower Presentation Template</h1> <h1>Shower Presentation Template</h1>
<p>Vadim Makeev, Opera Software</p> <p>Vadim Makeev, Opera Software</p>
</header> </header>
<div class="slide cover"><div> <div class="slide cover" data-timing="00:05"><div>
<section> <section>
<header> <header>
<h2>Shower Presentation Template</h2> <h2>Shower Presentation Template</h2>
@ -35,7 +35,7 @@
<img src="pictures/cover.jpg" alt=""> <img src="pictures/cover.jpg" alt="">
</section> </section>
</div></div> </div></div>
<div class="slide"><div> <div class="slide" data-timing="00:05"><div>
<section> <section>
<header> <header>
<h2>Header</h2> <h2>Header</h2>

View File

@ -4,6 +4,7 @@
slides = document.querySelectorAll('div.slide'), slides = document.querySelectorAll('div.slide'),
progress = document.querySelector('div.progress div'), progress = document.querySelector('div.progress div'),
slideList = [], slideList = [],
timer,
l = slides.length, i; l = slides.length, i;
for (i = 0; i < l; i++) { for (i = 0; i < l; i++) {
@ -15,7 +16,8 @@
slideList.push({ slideList.push({
id: slides[i].id, id: slides[i].id,
hasInnerNavigation: null !== slides[i].querySelector('.next') hasInnerNavigation: null !== slides[i].querySelector('.next'),
hasTiming: null != slides[i].dataset.timing
}); });
} }
@ -147,6 +149,25 @@
updateProgress(getCurrentSlideNumber()); updateProgress(getCurrentSlideNumber());
updateCurrentAndPassedSlides(getCurrentSlideNumber()); updateCurrentAndPassedSlides(getCurrentSlideNumber());
runSlideshowIfPresented(getCurrentSlideNumber());
}
}
function runSlideshowIfPresented(slideNumber) {
slideNumber = 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 = document.getElementById(slideList[slideNumber].id).dataset.timing.split(':');
timing = parseInt(timing[0]) * 60 * 1000 + parseInt(timing[1]) * 1000;
timer = setTimeout( function () {
goToSlide(slideNumber + 1);
runSlideshowIfPresented(slideNumber + 1);
}, timing );
} }
} }
@ -179,6 +200,7 @@
enterSlideMode(); enterSlideMode();
updateProgress(getCurrentSlideNumber()); updateProgress(getCurrentSlideNumber());
updateCurrentAndPassedSlides(getCurrentSlideNumber()); updateCurrentAndPassedSlides(getCurrentSlideNumber());
runSlideshowIfPresented(getCurrentSlideNumber())
} }
}, false); }, false);
@ -214,6 +236,7 @@
updateProgress(currentSlideNumber); updateProgress(currentSlideNumber);
updateCurrentAndPassedSlides(currentSlideNumber); updateCurrentAndPassedSlides(currentSlideNumber);
runSlideshowIfPresented(currentSlideNumber);
} }
break; break;
@ -255,6 +278,9 @@
) { ) {
currentSlideNumber++; currentSlideNumber++;
goToSlide(currentSlideNumber); goToSlide(currentSlideNumber);
if (!isListMode()) {
runSlideshowIfPresented(currentSlideNumber);
}
} }
break; break;