123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289 |
- var Slideshow = (function(){
-
- var indexh = 0,
- indexv = 0;
-
-
- function initialize() {
- document.addEventListener('keydown', onDocumentKeyDown, false);
- document.addEventListener('touchstart', onDocumentTouchStart, false);
- window.addEventListener('hashchange', onWindowHashChange, false);
-
-
- readURL();
- }
-
-
- function onDocumentKeyDown( event ) {
-
- if( event.keyCode >= 37 && event.keyCode <= 40 ) {
-
- switch( event.keyCode ) {
- case 37: navigateLeft(); break;
- case 39: navigateRight(); break;
- case 38: navigateUp(); break;
- case 40: navigateDown(); break;
- }
-
- slide();
-
- event.preventDefault();
-
- }
- }
-
-
- function onDocumentTouchStart( event ) {
-
- if (event.touches.length === 1) {
-
- if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) {
- return;
- }
-
- event.preventDefault();
-
- var point = {
- x: event.touches[0].clientX,
- y: event.touches[0].clientY
- };
-
-
-
- var wt = window.innerWidth * 0.3;
- var ht = window.innerHeight * 0.3;
-
- if( point.x < wt ) {
- navigateLeft();
- }
- else if( point.x > window.innerWidth - wt ) {
- navigateRight();
- }
- else if( point.y < ht ) {
- navigateUp();
- }
- else if( point.y > window.innerHeight - ht ) {
- navigateDown();
- }
-
- slide();
-
- }
- }
-
-
-
- function onWindowHashChange( event ) {
- readURL();
- }
-
-
- function updateSlides( selector, index ) {
-
-
-
- var slides = Array.prototype.slice.call( document.querySelectorAll( selector ) );
-
- if( slides.length ) {
-
- index = Math.max(Math.min(index, slides.length - 1), 0);
-
- slides[index].setAttribute('class', 'present');
-
-
- slides.slice(0, index).map(function(element){
- element.setAttribute('class', 'past');
- });
-
-
- slides.slice(index + 1).map(function(element){
- element.setAttribute('class', 'future');
- });
- }
- else {
-
-
- index = 0;
- }
-
- return index;
-
- }
-
-
- function slide() {
- indexh = updateSlides( '#main>section', indexh );
- indexv = updateSlides( 'section.present>section', indexv );
-
- writeURL();
- }
-
-
- function readURL() {
-
- var bits = window.location.hash.slice(2).split('/');
-
-
- indexh = bits[0] ? parseInt( bits[0] ) : 0;
- indexv = bits[1] ? parseInt( bits[1] ) : 0;
-
- navigateTo( indexh, indexv );
- }
-
-
- function writeURL() {
- var url = '/';
-
-
-
- if( indexh > 0 || indexv > 0 ) url += indexh
- if( indexv > 0 ) url += '/' + indexv
-
- window.location.hash = url;
- }
-
-
- function navigateTo( h, v ) {
- indexh = h === undefined ? indexh : h;
- indexv = v === undefined ? indexv : v;
-
- slide();
- }
-
- function navigateLeft() {
- indexh --;
- indexv = 0;
- slide();
- }
- function navigateRight() {
- indexh ++;
- indexv = 0;
- slide();
- }
- function navigateUp() {
- indexv --;
- slide();
- }
- function navigateDown() {
- indexv ++;
- slide();
- }
-
-
-
-
- initialize();
-
-
- return {
- navigateTo: navigateTo,
- navigateLeft: navigateLeft,
- navigateRight: navigateRight,
- navigateUp: navigateUp,
- navigateDown: navigateDown
- };
-
- })();
|