progress bar

index.htm

@@ -142,6 +142,7 @@
 				<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
 			</article>
 		</section>
+		<div class="progress"><div></div></div>
 	</div>
 	<script src="scripts/script.js"></script>
 </body>

scripts/script.js

@@ -1,10 +1,11 @@
-(function () {
+(function() {
 	var url = document.location,
 		linkScreen = document.querySelector('link[title=screen]'),
 		linkProjection = document.querySelector('link[title=projection]'),
 		shower = document.querySelector('div.shower'),
 		slides = document.querySelectorAll('section.slide'),
 		slideList = [], hashList = {},
+		progress = document.querySelector('div.progress div'),
 		fullscreen = false;
 
 	for(var i = 0, slidesLength = slides.length; i < slidesLength; i++) {
@@ -20,6 +21,7 @@
 			screen.width == window.outerWidth && screen.height == window.outerHeight
 		);
 		updateView();
+		updateProgress();
 	}
 
 	function turnSlide(e) {
@@ -43,8 +45,6 @@
 				case 32 : // Space
 					current += e.shiftKey ? -1 : 1;
 					break;
-				default:
-					return;
 			}
 			target = slideList[current];
 			e.preventDefault();
@@ -52,6 +52,7 @@
 			target = slideList[+e || 0];
 		}
 		if(target) url.hash = target;
+		updateProgress();
 	}
 
 	function updateView() {
@@ -59,6 +60,10 @@
 		linkProjection.disabled = !fullscreen;
 		if(!hashList[url.hash]) turnSlide(0);
 	}
+	
+	function updateProgress() {
+		progress.style.width = (100/(slideList.length-1) * hashList[url.hash]).toFixed(2) + '%';
+	}
 
 	slides[0].addEventListener('click', function(){
 		toggleFull(true);

styles/projection.css

@@ -41,7 +41,7 @@ A {
 	top:-1em;
 	bottom:-1em;
 	right:-1em;
-	z-index:10;
+	z-index:3;
 	width:1.5em;
 	border:1em solid #000;
 	border-left-width:0;
@@ -240,7 +240,6 @@ A {
 	position:absolute;
 	top:0;
 	right:3em;
-	z-index:2;
 	width:1em;
 	height:100%;
 	background:#000;
@@ -256,13 +255,13 @@ A {
 	background:#000;
 	}
 	.slide.back ARTICLE {
-		z-index:2;
+		z-index:3;
 		}
 	.slide.back IMG {
 		position:absolute;
 		top:0;
 		left:50%;
-		z-index:1;
+		z-index:2;
 		height:100%;
 		-webkit-transform-origin:50% 0;
 		-webkit-transform:translate(-50%, 0);
@@ -313,4 +312,25 @@ A {
 	}
 .slide.shout:after {
 	content:'';
-	}
+	}
+
+/* Progress
+---------------------------------------- */
+.progress {
+	position:absolute;
+	right:3em;
+	bottom:0;
+	left:3em;
+	z-index:1;
+	float:left;
+	height:0.2em;
+	background:#CCC;
+	}
+	.progress DIV {
+		width:0;
+		height:100%;
+		background:#0174A7;
+		-webkit-transition:width 0.2s linear;
+		-moz-transition:width 0.2s linear;
+		-o-transition:width 0.2s linear;
+		}