rolling back changes in the stable branch
This commit is contained in:
parent
ae328760c3
commit
db000b791d
36
en.htm
36
en.htm
|
@ -27,7 +27,7 @@
|
|||
<h1>Shower Presentation Template</h1>
|
||||
<p>Vadim Makeev, Opera Software</p>
|
||||
</header>
|
||||
<div class="slide cover" data-timing="00:05" id="Cover"><div>
|
||||
<div class="slide cover" id="Cover"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Shower Presentation Template</h2>
|
||||
|
@ -35,7 +35,7 @@
|
|||
<img src="pictures/cover.jpg" alt="">
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide" data-timing="00:05"><div>
|
||||
<div class="slide" id="Header"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Header</h2>
|
||||
|
@ -44,7 +44,7 @@
|
|||
<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="TwoLinesHeader"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Two rows.<br>Mighty heading</h2>
|
||||
|
@ -52,7 +52,7 @@
|
|||
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="UnorderedList"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Unordered List</h2>
|
||||
|
@ -71,7 +71,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="OrderedList"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Ordered List</h2>
|
||||
|
@ -90,7 +90,7 @@
|
|||
</ol>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="InTheMiddle"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>In the Middle</h2>
|
||||
|
@ -116,7 +116,7 @@
|
|||
<img src="pictures/picture.jpg" alt="">
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="CodeSample"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Code Sample</h2>
|
||||
|
@ -132,7 +132,7 @@
|
|||
</pre>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="CodeNotes"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Code Notes</h2>
|
||||
|
@ -147,21 +147,21 @@
|
|||
<p class="note">Lock up your machine</p>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide shout"><div>
|
||||
<div class="slide shout" id="Shout"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Warning<br>Message</h2>
|
||||
</header>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide shout"><div>
|
||||
<div class="slide shout" id="Demo"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
|
||||
</header>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="BlockQuote"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Block Quote</h2>
|
||||
|
@ -171,20 +171,20 @@
|
|||
</blockquote>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="InnerNavigation"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Inner Navigation</h2>
|
||||
</header>
|
||||
<ol>
|
||||
<li>This tool is provided</li>
|
||||
<li class="next">Without warranty, guarantee</li>
|
||||
<li class="next">Or much in the way of explanation
|
||||
<li class="next">Erase your hard drive.</li>
|
||||
<ol class="inner">
|
||||
<li class="active">This tool is provided</li>
|
||||
<li>Without warranty, guarantee</li>
|
||||
<li>Or much in the way of explanation
|
||||
<li>Erase your hard drive.</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="ThankYou"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Shower Presentation Template</h2>
|
||||
|
|
34
ru.htm
34
ru.htm
|
@ -27,7 +27,7 @@
|
|||
<h1>Шаблон презентаций Shower</h1>
|
||||
<p>Вадим Макеев, Opera Software</p>
|
||||
</header>
|
||||
<div class="slide cover" data-timing="00:05" id="Cover"><div>
|
||||
<div class="slide cover" id="Cover"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Шаблон презентации Shower</h2>
|
||||
|
@ -35,7 +35,7 @@
|
|||
<img src="pictures/cover.jpg" alt="">
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide" data-timing="00:05"><div>
|
||||
<div class="slide" id="Header"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Заголовок</h2>
|
||||
|
@ -52,7 +52,7 @@
|
|||
<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="UnorderedList"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Неупорядоченный список</h2>
|
||||
|
@ -71,7 +71,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="OrderedList"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Упорядоченный список</h2>
|
||||
|
@ -90,7 +90,7 @@
|
|||
</ol>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="InTheMiddle"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Посередине</h2>
|
||||
|
@ -116,7 +116,7 @@
|
|||
<img src="pictures/picture.jpg" alt="">
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="CodeSample"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Пример кода</h2>
|
||||
|
@ -132,7 +132,7 @@
|
|||
</pre>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="CodeNotes"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Заметки к коду</h2>
|
||||
|
@ -147,21 +147,21 @@
|
|||
<p class="note">Заведено безостановочно</p>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide shout"><div>
|
||||
<div class="slide shout" id="Shout"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Опасносте<br>сообщение</h2>
|
||||
</header>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide shout"><div>
|
||||
<div class="slide shout" id="Demo"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2><a href="examples/index.htm" target="_blank">Демо</a></h2>
|
||||
</header>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="BlockQuote"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Цитата</h2>
|
||||
|
@ -171,20 +171,20 @@
|
|||
</blockquote>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="InnerNavigation"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Внутренняя навигация</h2>
|
||||
</header>
|
||||
<ol>
|
||||
<li>Очередь заведено создаете</li>
|
||||
<li class="next">Те про, джоэл должен написано вы всю</li>
|
||||
<li class="next">Получаете отказаться программистов</li>
|
||||
<li class="next">Ещё то этой вреде внешних.</li>
|
||||
<ol class="inner">
|
||||
<li class="active">Очередь заведено создаете</li>
|
||||
<li>Те про, джоэл должен написано вы всю</li>
|
||||
<li>Получаете отказаться программистов</li>
|
||||
<li>Ещё то этой вреде внешних.</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div></div>
|
||||
<div class="slide"><div>
|
||||
<div class="slide" id="ThankYou"><div>
|
||||
<section>
|
||||
<header>
|
||||
<h2>Шаблон презентаций Shower</h2>
|
||||
|
|
|
@ -4,20 +4,12 @@
|
|||
slides = document.querySelectorAll('div.slide'),
|
||||
progress = document.querySelector('div.progress div'),
|
||||
slideList = [],
|
||||
timer,
|
||||
l = slides.length, i;
|
||||
|
||||
for (i = 0; i < l; i++) {
|
||||
// Slide ID's are optional. In case of missing ID we set it to the
|
||||
// slide number
|
||||
if (!slides[i].id) {
|
||||
slides[i].id = i + 1;
|
||||
}
|
||||
|
||||
slideList.push({
|
||||
id: slides[i].id,
|
||||
hasInnerNavigation: null !== slides[i].querySelector('.next'),
|
||||
hasTiming: null != slides[i].dataset.timing
|
||||
hasInnerNavigation: null !== slides[i].querySelector('.inner')
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -61,10 +53,10 @@
|
|||
return -1;
|
||||
}
|
||||
|
||||
function scrollToSlide(slideNumber) {
|
||||
if (-1 === slideNumber ) { return; }
|
||||
|
||||
var currentSlide = document.getElementById(slideList[slideNumber].id);
|
||||
function scrollToCurrentSlide() {
|
||||
var currentSlide = document.getElementById(
|
||||
slideList[getCurrentSlideNumber()].id
|
||||
);
|
||||
|
||||
if (null != currentSlide) {
|
||||
window.scrollTo(0, currentSlide.offsetTop);
|
||||
|
@ -90,26 +82,6 @@
|
|||
progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
|
||||
}
|
||||
|
||||
function updateCurrentAndPassedSlides(slideNumber) {
|
||||
var i, l = slideList.length, slide;
|
||||
slideNumber = normalizeSlideNumber(slideNumber);
|
||||
|
||||
for ( i = 0; i < l; ++i ) {
|
||||
slide = document.getElementById(slideList[i].id);
|
||||
|
||||
if ( i < slideNumber ) {
|
||||
slide.classList.remove('current');
|
||||
slide.classList.add('passed');
|
||||
} else if ( i > slideNumber ) {
|
||||
slide.classList.remove('passed');
|
||||
slide.classList.remove('current');
|
||||
} else {
|
||||
slide.classList.remove('passed');
|
||||
slide.classList.add('current');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getSlideHash(slideNumber) {
|
||||
return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
|
||||
}
|
||||
|
@ -119,7 +91,6 @@
|
|||
|
||||
if (!isListMode()) {
|
||||
updateProgress(slideNumber);
|
||||
updateCurrentAndPassedSlides(slideNumber);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -148,26 +119,6 @@
|
|||
enterSlideMode();
|
||||
|
||||
updateProgress(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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -176,13 +127,13 @@
|
|||
// Shortcut for slides without inner navigation
|
||||
if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
|
||||
|
||||
var nextNodes = document.getElementById(slideList[slideNumber].id).querySelectorAll('.next:not(.active)'),
|
||||
node;
|
||||
var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
|
||||
// NOTE: we assume there is no other elements in inner navigation
|
||||
node = activeNodes[activeNodes.length - 1].nextElementSibling;
|
||||
|
||||
if (0 !== nextNodes.length) {
|
||||
node = nextNodes[0];
|
||||
if (null !== node) {
|
||||
node.classList.add('active');
|
||||
return nextNodes.length - 1;
|
||||
return activeNodes.length + 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
|
@ -199,15 +150,13 @@
|
|||
|
||||
enterSlideMode();
|
||||
updateProgress(getCurrentSlideNumber());
|
||||
updateCurrentAndPassedSlides(getCurrentSlideNumber());
|
||||
runSlideshowIfPresented(getCurrentSlideNumber())
|
||||
}
|
||||
}, false);
|
||||
|
||||
window.addEventListener('popstate', function (e) {
|
||||
if (isListMode()) {
|
||||
enterListMode();
|
||||
scrollToSlide(getCurrentSlideNumber());
|
||||
scrollToCurrentSlide();
|
||||
} else {
|
||||
enterSlideMode();
|
||||
}
|
||||
|
@ -223,21 +172,18 @@
|
|||
// Shortcut for alt, shift and meta keys
|
||||
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
|
||||
|
||||
var currentSlideNumber = getCurrentSlideNumber(),
|
||||
innerNavigationCompleted = true;
|
||||
var currentSlideNumber = getCurrentSlideNumber();
|
||||
|
||||
switch (e.which) {
|
||||
case 116: // F5
|
||||
case 13: // Enter
|
||||
if (isListMode() && -1 !== currentSlideNumber) {
|
||||
if (isListMode()) {
|
||||
e.preventDefault();
|
||||
|
||||
history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
|
||||
enterSlideMode();
|
||||
|
||||
updateProgress(currentSlideNumber);
|
||||
updateCurrentAndPassedSlides(currentSlideNumber);
|
||||
runSlideshowIfPresented(currentSlideNumber);
|
||||
}
|
||||
break;
|
||||
|
||||
|
@ -247,7 +193,7 @@
|
|||
|
||||
history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
|
||||
enterListMode();
|
||||
scrollToSlide(currentSlideNumber);
|
||||
scrollToCurrentSlide();
|
||||
}
|
||||
break;
|
||||
|
||||
|
@ -269,26 +215,14 @@
|
|||
case 74: // j
|
||||
e.preventDefault();
|
||||
|
||||
if (!isListMode() ) {
|
||||
// Inner navigation is "completed" if current slide have
|
||||
// no inner navigation or inner navigation is fully shown
|
||||
innerNavigationCompleted = !slideList[currentSlideNumber].hasInnerNavigation ||
|
||||
-1 === increaseInnerNavigation(currentSlideNumber);
|
||||
} else {
|
||||
// Also inner navigation is always "completed" if we are in
|
||||
// list mode
|
||||
innerNavigationCompleted = true;
|
||||
}
|
||||
// NOTE: First of all check if there is no current slide
|
||||
// Only go to next slide if current slide have no inner
|
||||
// navigation or inner navigation is fully shown
|
||||
if (
|
||||
-1 === currentSlideNumber || innerNavigationCompleted
|
||||
!slideList[currentSlideNumber].hasInnerNavigation ||
|
||||
-1 === increaseInnerNavigation(currentSlideNumber)
|
||||
) {
|
||||
currentSlideNumber++;
|
||||
goToSlide(currentSlideNumber);
|
||||
// We must run slideshow only in full mode
|
||||
if (!isListMode()) {
|
||||
runSlideshowIfPresented(currentSlideNumber);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
|
|
|
@ -394,10 +394,10 @@ BODY {
|
|||
}
|
||||
|
||||
/* Inner Navigation */
|
||||
.full .next {
|
||||
.full .inner > * {
|
||||
opacity:0;
|
||||
}
|
||||
.full .next.active {
|
||||
.full .inner > .active {
|
||||
opacity:1;
|
||||
-webkit-transition:opacity 0.5s linear;
|
||||
-moz-transition:opacity 0.5s linear;
|
||||
|
|
Loading…
Reference in New Issue