Skip to content

S
shower-presentation
Commit c1c5b350 authored by Oleg Roschupkin's avatar Oleg Roschupkin
Browse files
Options

Initial refactoring.

parent 35f79490
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 95 deletions
scripts/script.js
View file @ c1c5b350
(function() { (function () {
var url = window.location, var url = window.location,
body = document.body, body = document.body,
slides = document.querySelectorAll('div.slide'), slides = document.querySelectorAll('div.slide'),
progress = document.querySelector('div.progress div'), progress = document.querySelector('div.progress div'),
slideList = []; slideList = [],
l = slides.length,
i;
for(var i = 0, slidesLength = slides.length; i < slidesLength; i++) { for (i = 0; i < l; i++) {
slides[i].firstChild.addEventListener('click', enterFull, false); slideList.push(slides[i].id);
slideList[i] = slides[i].id;
} }
function resizeFull(p) { function getTransform() {
if(typeof p == 'boolean' && !p) { var denominator = Math.max(
var transform = 'none'; body.clientWidth / window.innerWidth,
} else { body.clientHeight / window.innerHeight
var sx = body.clientWidth / window.innerWidth, );
sy = body.clientHeight / window.innerHeight,
transform = 'scale(' + (1/Math.max(sx, sy)) + ')'; return 'scale(' + (1 / denominator) + ')';
} }
function applyTransform(transform) {
body.style.MozTransform = transform; body.style.MozTransform = transform;
body.style.WebkitTransform = transform; body.style.WebkitTransform = transform;
body.style.OTransform = transform; body.style.OTransform = transform;
...@@ -26,102 +28,175 @@ ...@@ -26,102 +28,175 @@
body.style.transform = transform; body.style.transform = transform;
} }
function turnSlide(e) { function enterSingleSlideMode() {
var current = currentSlide(), target; body.className = 'full';
if(e) { applyTransform(getTransform());
if(e.type == 'keydown') {
var prevent = true;
switch(e.which) {
case 33 : // PgUp
case 38 : // Up
case 37 : // Left
case 75 : // k
current--;
break;
case 34 : // PgDown
case 40 : // Down
case 39 : // Right
case 74 : // j
current++;
break;
case 36 : // Home
current = 0;
break;
case 35 : // End
current = slideList.length-1;
break;
case 32 : // Space
current += e.shiftKey ? -1 : 1;
break;
default:
prevent = false;
}
if(prevent) e.preventDefault();
}
if(e.type == 'click') {
current = slideList.indexOf(e.target.parentNode.parentNode.id);
}
} else {
current = (current+1) ? current : 0;
}
target = slideList[current];
if(target) url.hash = target;
updateProgress();
} }
function enterFull(e) { function enterSlideListMode() {
body.className = 'full'; body.className = 'list';
resizeFull(true); applyTransform('none');
turnSlide(e);
updateProgress();
if(!isFull()) history.pushState(null, null, url.pathname + '?full' + url.hash);
window.addEventListener('resize', resizeFull, false);
document.addEventListener('keyup', exitFullKey, false);
document.removeEventListener('keydown', enterFullKey, false);
} }
function enterFullKey(e) { function getCurrentSlideNumber() {
if(e.which != 13) return; return slideList.indexOf(url.hash.substr(1));
enterFull();
} }
function exitFull() { function scrollToCurrentSlide() {
body.className = 'list'; var current_slide = document.getElementById(slideList[getCurrentSlideNumber()]);
resizeFull(false);
var hash = url.hash; if (null != current_slide) {
history.pushState(null, null, url.pathname.replace('?full', '')); window.scrollTo(0, current_slide.offsetTop);
url.hash = hash; }
window.removeEventListener('resize', resizeFull, false);
document.removeEventListener('keyup', exitFullKey, false);
document.addEventListener('keydown', enterFullKey, false);
} }
function exitFullKey(e) { function isSlideListMode() {
if(e.which != 27) return; return 'full' !== url.search.substr(1);
exitFull();
} }
function isFull() { function normalizeSlideNumber(slide_number) {
return url.search.substr(1) == 'full'; if (0 > slide_number) {
return slideList.length - 1;
} else if (slideList.length <= slide_number) {
return 0;
} else {
return slide_number;
}
} }
function currentSlide() { function updateProgress(slide_number) {
return slideList.indexOf(url.hash.substr(1)); progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slide_number)).toFixed(2) + '%';
} }
function updateProgress() { function getSlideHashByNumber(slide_number) {
if(!progress) return; return '#' + slideList[normalizeSlideNumber(slide_number)];
progress.style.width = (100/(slideList.length-1) * currentSlide()).toFixed(2) + '%';
} }
window.addEventListener('DOMContentLoaded', function() { function goToSlide(slide_number) {
if(isFull()) enterFull(); url.hash = getSlideHashByNumber(slide_number);
if (!isSlideListMode()) {
updateProgress(slide_number);
}
}
window.addEventListener('DOMContentLoaded', function () {
if (!isSlideListMode()) {
updateProgress(getCurrentSlideNumber());
enterSingleSlideMode();
}
}, false);
window.addEventListener('popstate', function (e) {
if (isSlideListMode()) {
enterSlideListMode();
scrollToCurrentSlide();
} else {
enterSingleSlideMode();
}
}, false);
window.addEventListener('resize', function (e) {
if (!isSlideListMode()) {
applyTransform(getTransform());
}
}, false); }, false);
window.addEventListener('popstate', function() {
if(-1 === currentSlide()) exitFull(); document.addEventListener('keydown', function (e) {
var current_slide_number = getCurrentSlideNumber();
switch (e.which) {
case 9: // Tab = +1; Shift + Tab = -1
if (isSlideListMode()) {
e.preventDefault();
current_slide_number += e.shiftKey ? -1 : 1;
url.hash = getSlideHashByNumber(current_slide_number);
}
break;
case 13: // Enter
if (isSlideListMode()) {
e.preventDefault();
history.pushState(null, null, url.pathname + '?full' + getSlideHashByNumber(current_slide_number));
enterSingleSlideMode();
updateProgress(current_slide_number);
}
break;
case 27: // Esc
if (!isSlideListMode()) {
e.preventDefault();
history.pushState(null, null, url.pathname + getSlideHashByNumber(current_slide_number));
enterSlideListMode();
scrollToCurrentSlide();
}
break;
case 33: // PgUp
case 38: // Up
case 37: // Left
case 75: // k
e.preventDefault();
current_slide_number--;
goToSlide(current_slide_number);
break;
case 34: // PgDown
case 40: // Down
case 39: // Right
case 74: // j
e.preventDefault();
current_slide_number++;
goToSlide(current_slide_number);
break;
case 36: // Home
e.preventDefault();
current_slide_number = 0;
goToSlide(current_slide_number);
break;
case 35: // End
e.preventDefault();
current_slide_number = slideList.length - 1;
goToSlide(current_slide_number);
break;
case 32: // Space = +1; Shift + Space = -1
e.preventDefault();
current_slide_number += e.shiftKey ? -1 : 1;
goToSlide(current_slide_number);
break;
default:
// Behave as usual
}
}, false); }, false);
document.addEventListener('keydown', turnSlide, false); document.addEventListener('click', function (e) {
document.addEventListener('keydown', enterFullKey, false); if (
'SECTION' === e.target.nodeName &&
-1 !== e.target.parentNode.parentNode.className.indexOf('slide') &&
isSlideListMode()
) {
e.preventDefault();
// NOTE: we should update hash to get things work properly
url.hash = '#' + e.target.parentNode.parentNode.id;
history.replaceState(null, null, url.pathname + '?full#' + e.target.parentNode.parentNode.id);
enterSingleSlideMode();
updateProgress(getCurrentSlideNumber());
}
}, false);
})(); }());
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment