rolling back changes in the stable branch

db000b79 · Vadim Makeev · ae328760 · db000b79 · db000b79 · db000b79
Commit db000b79 authored Mar 01, 2012 by Vadim Makeev
Show whitespace changes
Inline Side-by-side

Showing with 57 additions and 123 deletions

en.htm en.htm +18 -18

ru.htm ru.htm +17 -17

script.js scripts/script.js +19 -85

style.css themes/ribbon/styles/style.css +3 -3

No files found.
--- a/en.htm
+++ b/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>&lt;tool&gt;</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>
+			<ol class="inner">
-				<li>This tool is provided</li>
+				<li class="active">This tool is provided</li>
-				<li class="next">Without warranty, guarantee</li>
+				<li>Without warranty, guarantee</li>
-				<li class="next">Or much in the way of explanation
+				<li>Or much in the way of explanation
-				<li class="next">Erase your hard drive.</li>
+				<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>

--- a/ru.htm
+++ b/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>
+			<ol class="inner">
-				<li>Очередь заведено создаете</li>
+				<li class="active">Очередь заведено создаете</li>
-				<li class="next">Те про, джоэл должен написано вы всю</li>
+				<li>Те про, джоэл должен написано вы всю</li>
-				<li class="next">Получаете отказаться программистов</li>
+				<li>Получаете отказаться программистов</li>
-				<li class="next">Ещё то этой вреде внешних.</li>
+				<li>Ещё то этой вреде внешних.</li>
 			</ol>
 		</section>
 	</div></div>
-	<div class="slide"><div>
+	<div class="slide" id="ThankYou"><div>
 		<section>
 			<header>
 				<h2>Шаблон презентаций Shower</h2>

--- a/scripts/script.js
+++ b/scripts/script.js
@@ -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'),
+			hasInnerNavigation: null !== slides[i].querySelector('.inner')
-			hasTiming: null != slides[i].dataset.timing
 		});
 	}
@@ -61,10 +53,10 @@
 		return -1;
 	}
-	function scrollToSlide(slideNumber) {
+	function scrollToCurrentSlide() {
-		if (-1 === slideNumber ) { return; }
+		var currentSlide = document.getElementById(
+			slideList[getCurrentSlideNumber()].id
-		var currentSlide = document.getElementById(slideList[slideNumber].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)'),
+		var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
-			node;
+			// NOTE: we assume there is no other elements in inner navigation
+			node = activeNodes[activeNodes.length - 1].nextElementSibling;
-		if (0 !== nextNodes.length) {
+		if (null !== node) {
-			node = nextNodes[0];
 			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(),
+		var currentSlideNumber = getCurrentSlideNumber();
-			innerNavigationCompleted = true;
 		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() ) {
+				// Only go to next slide if current slide have no inner
-					// Inner navigation is "completed" if current slide have
+				// navigation or inner navigation is fully shown
-					// 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
 				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;

--- a/themes/ribbon/styles/style.css
+++ b/themes/ribbon/styles/style.css
@@ -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;