new ?full parameter and list mode events
This commit is contained in:
parent
79a17c2327
commit
1bbce711e6
|
@ -1,29 +1,23 @@
|
||||||
(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'),
|
||||||
slideList = [], hashList = {},
|
|
||||||
progress = document.querySelector('div.progress div'),
|
progress = document.querySelector('div.progress div'),
|
||||||
fullscreen = false;
|
slideList = [];
|
||||||
|
|
||||||
for(var i = 0, slidesLength = slides.length; i < slidesLength; i++) {
|
for(var i = 0, slidesLength = slides.length; i < slidesLength; i++) {
|
||||||
var id = slides[i].id;
|
slides[i].addEventListener('click', enterFull, false);
|
||||||
slideList[i] = '#' + id;
|
slideList[i] = slides[i].id;
|
||||||
hashList['#' + id] = i;
|
|
||||||
slides[i].addEventListener('click', function(){
|
|
||||||
enterSingle();
|
|
||||||
turnSlide(hashList['#' + this.id]);
|
|
||||||
}, false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function resizeBody(p) {
|
function resizeFull(p) {
|
||||||
if(typeof p == 'boolean' && p) {
|
if(p) {
|
||||||
var transform = 'none';
|
|
||||||
} else {
|
|
||||||
var sx = body.clientWidth / window.innerWidth,
|
var sx = body.clientWidth / window.innerWidth,
|
||||||
sy = body.clientHeight / window.innerHeight,
|
sy = body.clientHeight / window.innerHeight,
|
||||||
transform = 'scale(' + (1/Math.max(sx, sy)) + ')';
|
transform = 'scale(' + (1/Math.max(sx, sy)) + ')';
|
||||||
|
} else {
|
||||||
|
var transform = 'none';
|
||||||
}
|
}
|
||||||
body.style.MozTransform = transform;
|
body.style.MozTransform = transform;
|
||||||
body.style.WebkitTransform = transform;
|
body.style.WebkitTransform = transform;
|
||||||
|
@ -33,78 +27,75 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function turnSlide(e) {
|
function turnSlide(e) {
|
||||||
var current = hashList[url.hash],
|
var current = slideList.indexOf(url.hash.substr(1));
|
||||||
target;
|
if(e) {
|
||||||
if(e.type == 'keyup') { // Key-Based
|
if(e.type == 'keydown') {
|
||||||
switch(e.which) {
|
switch(e.which) {
|
||||||
case 33 : // PgUp
|
case 33 : // PgUp
|
||||||
case 38 : // Up
|
case 38 : // Up
|
||||||
case 37 : // Left
|
case 37 : // Left
|
||||||
case 72 : // h
|
case 75 : // k
|
||||||
case 75 : // k
|
current--;
|
||||||
current--;
|
e.preventDefault();
|
||||||
break;
|
break;
|
||||||
case 34 : // PgDown
|
case 34 : // PgDown
|
||||||
case 40 : // Down
|
case 40 : // Down
|
||||||
case 39 : // Right
|
case 39 : // Right
|
||||||
case 76 : // l
|
case 74 : // j
|
||||||
case 74 : // j
|
current++;
|
||||||
current++;
|
e.preventDefault();
|
||||||
break;
|
break;
|
||||||
case 36 : // Home
|
case 36 : // Home
|
||||||
current = 0;
|
current = 0;
|
||||||
break;
|
e.preventDefault();
|
||||||
case 35 : // End
|
break;
|
||||||
current = slideList.length-1;
|
case 35 : // End
|
||||||
break;
|
current = slideList.length-1;
|
||||||
case 32 : // Space
|
e.preventDefault();
|
||||||
current += e.shiftKey ? -1 : 1;
|
break;
|
||||||
break;
|
case 32 : // Space
|
||||||
|
current += e.shiftKey ? -1 : 1;
|
||||||
|
e.preventDefault();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(e.type == 'click') {
|
||||||
|
current = slideList.indexOf(e.target.parentNode.id);
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
|
||||||
} else {
|
} else {
|
||||||
current = e || 0;
|
current = (current+1) ? current : 0;
|
||||||
}
|
}
|
||||||
target = slideList[current];
|
target = slideList[current];
|
||||||
if(target) url.hash = target;
|
if(target) url.hash = target;
|
||||||
updateProgress();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function enterSingle() {
|
function enterFull(e) {
|
||||||
body.className = 'full';
|
body.className = 'full';
|
||||||
resizeBody();
|
resizeFull(1);
|
||||||
updateProgress();
|
turnSlide(e);
|
||||||
window.addEventListener('resize', resizeBody, false);
|
if(!isFull()) history.pushState(null, null, url.pathname + '?full' + url.hash);
|
||||||
document.addEventListener('keyup', turnSlide, false);
|
document.addEventListener('keyup', exitFullEsc, false);
|
||||||
document.addEventListener('keyup', exitSingleEsc, false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function exitSingle() {
|
function exitFull() {
|
||||||
body.className = 'list';
|
body.className = 'list';
|
||||||
resizeBody(true);
|
resizeFull(0);
|
||||||
window.removeEventListener('resize', resizeBody, false);
|
history.pushState(null, null, url.href.replace('?full', ''));
|
||||||
window.removeEventListener('keyup', turnSlide, false);
|
document.removeEventListener('keyup', exitFullEsc, false);
|
||||||
document.removeEventListener('keyup', exitSingleEsc, false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function exitSingleEsc(e) {
|
function exitFullEsc(e) {
|
||||||
if(e.which != 27) return;
|
if(e.which != 27) return;
|
||||||
exitSingle();
|
exitFull();
|
||||||
url.hash = '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkHash() {
|
function isFull() {
|
||||||
// if(!window.location.search.length) history.pushState(null, null, window.location.href + '?list');
|
return url.search.substr(1) == 'full';
|
||||||
if(typeof hashList[url.hash] != 'undefined') {
|
|
||||||
enterSingle();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateProgress() {
|
window.addEventListener('DOMContentLoaded', function() {
|
||||||
if(!progress) return;
|
if(isFull()) enterFull();
|
||||||
progress.style.width = (100/(slideList.length-1) * hashList[url.hash]).toFixed(2) + '%';
|
}, false);
|
||||||
}
|
document.addEventListener('keydown', turnSlide, false);
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', checkHash, false);
|
|
||||||
|
|
||||||
})();
|
})();
|
Loading…
Reference in New Issue