progress bar

This commit is contained in:
Vadim Makeev 2010-11-15 16:45:40 +03:00
parent 4602d63167
commit 994f984452
3 changed files with 34 additions and 8 deletions

View File

@ -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>

View File

@ -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() {
@ -60,6 +61,10 @@
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);
}, false);

View File

@ -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);
@ -314,3 +313,24 @@ 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;
}