From 8f7c51b4ece21ce777963ac1247746849ca7c546 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 22 Nov 2012 16:25:19 -0500 Subject: [PATCH] use touch start events for controls on touch devices --- js/reveal.js | 38 +++++++++++++++++++------------------- js/reveal.min.js | 4 ++-- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index 5ee5702e..bbb9643e 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -124,6 +124,9 @@ var Reveal = (function(){ return; } + // Force a layout when the whole page, incl fonts, has loaded + window.addEventListener( 'load', layout, false ); + // Copy options over to our config object extend( config, options ); @@ -367,12 +370,13 @@ var Reveal = (function(){ } if ( config.controls && dom.controls ) { - dom.controlsLeft.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateLeft ), false ); } ); - dom.controlsRight.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateRight ), false ); } ); - dom.controlsUp.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateUp ), false ); } ); - dom.controlsDown.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateDown ), false ); } ); - dom.controlsPrev.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigatePrev ), false ); } ); - dom.controlsNext.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateNext ), false ); } ); + var actionEvent = 'ontouchstart' in window ? 'touchstart' : 'click'; + dom.controlsLeft.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateLeft ), false ); } ); + dom.controlsRight.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateRight ), false ); } ); + dom.controlsUp.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateUp ), false ); } ); + dom.controlsDown.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateDown ), false ); } ); + dom.controlsPrev.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigatePrev ), false ); } ); + dom.controlsNext.forEach( function( el ) { el.addEventListener( actionEvent, preventAndForward( navigateNext ), false ); } ); } } @@ -392,12 +396,13 @@ var Reveal = (function(){ } if ( config.controls && dom.controls ) { - dom.controlsLeft.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); } ); - dom.controlsRight.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateRight ), false ); } ); - dom.controlsUp.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateUp ), false ); } ); - dom.controlsDown.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateDown ), false ); } ); - dom.controlsPrev.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigatePrev ), false ); } ); - dom.controlsNext.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateNext ), false ); } ); + var actionEvent = 'ontouchstart' in window ? 'touchstart' : 'click'; + dom.controlsLeft.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateLeft ), false ); } ); + dom.controlsRight.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateRight ), false ); } ); + dom.controlsUp.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateUp ), false ); } ); + dom.controlsDown.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateDown ), false ); } ); + dom.controlsPrev.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigatePrev ), false ); } ); + dom.controlsNext.forEach( function( el ) { el.removeEventListener( actionEvent, preventAndForward( navigateNext ), false ); } ); } } @@ -776,12 +781,6 @@ var Reveal = (function(){ indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h ); indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v ); - // No need to proceed if we're navigating to the same slide as - // we're already on, unless a fragment index is specified - if( indexh === indexhBefore && indexv === indexvBefore && !f ) { - return; - } - layout(); // Apply the new state @@ -823,8 +822,9 @@ var Reveal = (function(){ // Store references to the previous and current slides currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide; + // Show fragment, if specified - if ( typeof f !== undefined ) { + if( ( indexh !== indexhBefore || indexv !== indexvBefore ) && f ) { var fragments = currentSlide.querySelectorAll( '.fragment' ); toArray( fragments ).forEach( function( fragment, indexf ) { diff --git a/js/reveal.min.js b/js/reveal.min.js index 7a159758..12080ab4 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,8 +1,8 @@ /*! - * reveal.js 2.2 (2012-11-22, 09:09) + * reveal.js 2.2 (2012-11-22, 16:23) * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=function(){"use strict";function g(e){if(!h&&!c){document.body.setAttribute("class","no-transforms");return}N(r,e),b(),w()}function y(){l.theme=document.querySelector("#theme"),l.wrapper=document.querySelector(".reveal"),l.slides=document.querySelector(".reveal .slides");if(!l.wrapper.querySelector(".progress")&&r.progress){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="",l.wrapper.appendChild(e)}if(!l.wrapper.querySelector(".controls")&&r.controls){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='',l.wrapper.appendChild(t)}if(!l.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),l.wrapper.appendChild(n)}if(!l.wrapper.querySelector(".pause-overlay")){var i=document.createElement("div");i.classList.add("pause-overlay"),l.wrapper.appendChild(i)}l.progress=document.querySelector(".reveal .progress"),l.progressbar=document.querySelector(".reveal .progress span"),r.controls&&(l.controls=document.querySelector(".reveal .controls"),l.controlsLeft=C(document.querySelectorAll(".navigate-left")),l.controlsRight=C(document.querySelectorAll(".navigate-right")),l.controlsUp=C(document.querySelectorAll(".navigate-up")),l.controlsDown=C(document.querySelectorAll(".navigate-down")),l.controlsPrev=C(document.querySelectorAll(".navigate-prev")),l.controlsNext=C(document.querySelectorAll(".navigate-next")))}function b(){navigator.userAgent.match(/(iphone|ipod)/i)&&(document.documentElement.style.overflow="scroll",document.body.style.height="120%",window.addEventListener("load",O,!1),window.addEventListener("orientationchange",O,!1))}function w(){function o(){t.length&&head.js.apply(null,t),E()}var e=[],t=[];for(var n=0,i=r.dependencies.length;n'+i.innerHTML+"")}}}function D(){if(r.center){var t=C(document.querySelectorAll(e)),n=-l.wrapper.offsetHeight/2;for(var i=0,s=t.length;i3?"none":"block"}n[o].classList.remove("past"),n[o].classList.remove("present"),n[o].classList.remove("future"),ot&&n[o].classList.add("future"),u.querySelector("section")&&n[o].classList.add("stack")}n[t].classList.add("present");var l=n[t].getAttribute("data-state");l&&(f=f.concat(l.split(" ")));var c=n[t].getAttribute("data-autoslide");c?i=parseInt(c,10):i=r.autoSlide}else t=0;return t}function $(){if(r.progress&&l.progress){var n=C(document.querySelectorAll(t)),i=document.querySelectorAll(e+":not(.stack)").length,s=0;e:for(var o=0;o0,right:s0,down:o0||o>0)t+=s;o>0&&(t+="/"+o)}window.location.hash=t}}}function Y(e){var n=s,r=o;if(e){var i=!!e.parentNode.nodeName.match(/section/gi),u=i?e.parentNode:e,a=C(document.querySelectorAll(t));n=Math.max(a.indexOf(u),0),i&&(r=Math.max(C(e.parentNode.children).indexOf(e),0))}return{h:n,v:r}}function Z(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment:not(.visible)");if(e.length)return e[0].classList.add("visible"),M("fragmentshown",{fragment:e[0]}),!0}else{var r=document.querySelectorAll(t+".present .fragment:not(.visible)");if(r.length)return r[0].classList.add("visible"),M("fragmentshown",{fragment:r[0]}),!0}return!1}function et(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment.visible");if(e.length)return e[e.length-1].classList.remove("visible"),M("fragmenthidden",{fragment:e[e.length-1]}),!0}else{var r=document.querySelectorAll(t+".present .fragment.visible");if(r.length)return r[r.length-1].classList.remove("visible"),M("fragmenthidden",{fragment:r[r.length-1]}),!0}return!1}function tt(){clearTimeout(d),i&&(d=setTimeout(ut,i))}function nt(){(K().left&&I()||et()===!1)&&X(s-1)}function rt(){(K().right&&I()||Z()===!1)&&X(s+1)}function it(){(K().up&&I()||et()===!1)&&X(s,o-1)}function st(){(K().down&&I()||Z()===!1)&&X(s,o+1)}function ot(){if(et()===!1)if(K().up)it();else{var e=document.querySelector(t+".past:nth-child("+s+")");e&&(o=e.querySelectorAll("section").length+1||undefined,s--,X())}}function ut(){Z()===!1&&(K().down?st():rt()),tt()}function at(e){var t=document.activeElement,n=!(!document.activeElement||!document.activeElement.type&&!document.activeElement.href&&document.activeElement.contentEditable==="inherit");if(n||e.shiftKey||e.altKey||e.ctrlKey||e.metaKey)return;var r=!0;switch(e.keyCode){case 80:case 33:ot();break;case 78:case 34:ut();break;case 72:case 37:nt();break;case 76:case 39:rt();break;case 75:case 38:it();break;case 74:case 40:st();break;case 36:X(0);break;case 35:X(Number.MAX_VALUE);break;case 32:I()?j():ut();break;case 13:I()?j():r=!1;break;case 66:case 190:z();break;case 70:q();break;default:r=!1}r?e.preventDefault():e.keyCode===27&&c&&(F(),e.preventDefault()),tt()}function ft(e){m.startX=e.touches[0].clientX,m.startY=e.touches[0].clientY,m.startCount=e.touches.length,e.touches.length===2&&r.overview&&(m.startSpan=L({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:m.startX,y:m.startY}))}function lt(e){if(!m.handled){var t=e.touches[0].clientX,n=e.touches[0].clientY;if(e.touches.length===2&&m.startCount===2&&r.overview){var i=L({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:m.startX,y:m.startY});Math.abs(m.startSpan-i)>m.threshold&&(m.handled=!0,im.threshold&&Math.abs(s)>Math.abs(o)?(m.handled=!0,nt()):s<-m.threshold&&Math.abs(s)>Math.abs(o)?(m.handled=!0,rt()):o>m.threshold?(m.handled=!0,it()):o<-m.threshold&&(m.handled=!0,st()),e.preventDefault()}}else navigator.userAgent.match(/android/gi)&&e.preventDefault()}function ct(e){m.handled=!1}function ht(e){clearTimeout(p),p=setTimeout(function(){var t=e.detail||-e.wheelDelta;t>0?ut():ot()},100)}function pt(e){var n=C(document.querySelectorAll(t)).length,r=Math.floor(e.clientX/l.wrapper.offsetWidth*n);X(r)}function dt(e){Q()}function vt(e){D()}function mt(e){if(I()){e.preventDefault(),j();var t=parseInt(e.target.getAttribute("data-index-h"),10),n=parseInt(e.target.getAttribute("data-index-v"),10);X(t,n)}}var e=".reveal .slides section",t=".reveal .slides>section",n=".reveal .slides>section.present>section",r={controls:!0,progress:!0,history:!1,keyboard:!0,overview:!0,center:!0,loop:!1,rtl:!1,autoSlide:0,mouseWheel:!1,rollingLinks:!0,theme:null,transition:"default",dependencies:[]},i=r.autoSlide,s=0,o=0,u,a,f=[],l={},c="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,h="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,p=0,d=0,v=0,m={startX:0,startY:0,startSpan:0,startCount:0,handled:!1,threshold:80};return{initialize:g,slide:X,left:nt,right:rt,up:it,down:st,prev:ot,next:ut,prevFragment:et,nextFragment:Z,navigateTo:X,navigateLeft:nt,navigateRight:rt,navigateUp:it,navigateDown:st,navigatePrev:ot,navigateNext:ut,toggleOverview:F,addEventListeners:x,removeEventListeners:T,getIndices:Y,getPreviousSlide:function(){return u},getCurrentSlide:function(){return a},getQueryHash:function(){var e={};return location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(t){e[t.split("=").shift()]=t.split("=").pop()}),e},addEventListener:function(e,t,n){"addEventListener"in window&&(l.wrapper||document.querySelector(".reveal")).addEventListener(e,t,n)},removeEventListener:function(e,t,n){"addEventListener"in window&&(l.wrapper||document.querySelector(".reveal")).removeEventListener(e,t,n)}}}(); \ No newline at end of file +var Reveal=function(){"use strict";function g(e){if(!h&&!c){document.body.setAttribute("class","no-transforms");return}window.addEventListener("load",D,!1),N(r,e),b(),w()}function y(){l.theme=document.querySelector("#theme"),l.wrapper=document.querySelector(".reveal"),l.slides=document.querySelector(".reveal .slides");if(!l.wrapper.querySelector(".progress")&&r.progress){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="",l.wrapper.appendChild(e)}if(!l.wrapper.querySelector(".controls")&&r.controls){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='',l.wrapper.appendChild(t)}if(!l.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),l.wrapper.appendChild(n)}if(!l.wrapper.querySelector(".pause-overlay")){var i=document.createElement("div");i.classList.add("pause-overlay"),l.wrapper.appendChild(i)}l.progress=document.querySelector(".reveal .progress"),l.progressbar=document.querySelector(".reveal .progress span"),r.controls&&(l.controls=document.querySelector(".reveal .controls"),l.controlsLeft=C(document.querySelectorAll(".navigate-left")),l.controlsRight=C(document.querySelectorAll(".navigate-right")),l.controlsUp=C(document.querySelectorAll(".navigate-up")),l.controlsDown=C(document.querySelectorAll(".navigate-down")),l.controlsPrev=C(document.querySelectorAll(".navigate-prev")),l.controlsNext=C(document.querySelectorAll(".navigate-next")))}function b(){navigator.userAgent.match(/(iphone|ipod)/i)&&(document.documentElement.style.overflow="scroll",document.body.style.height="120%",window.addEventListener("load",O,!1),window.addEventListener("orientationchange",O,!1))}function w(){function o(){t.length&&head.js.apply(null,t),E()}var e=[],t=[];for(var n=0,i=r.dependencies.length;n'+i.innerHTML+"")}}}function D(){if(r.center){var t=C(document.querySelectorAll(e)),n=-l.wrapper.offsetHeight/2;for(var i=0,s=t.length;i3?"none":"block"}n[o].classList.remove("past"),n[o].classList.remove("present"),n[o].classList.remove("future"),ot&&n[o].classList.add("future"),u.querySelector("section")&&n[o].classList.add("stack")}n[t].classList.add("present");var l=n[t].getAttribute("data-state");l&&(f=f.concat(l.split(" ")));var c=n[t].getAttribute("data-autoslide");c?i=parseInt(c,10):i=r.autoSlide}else t=0;return t}function $(){if(r.progress&&l.progress){var n=C(document.querySelectorAll(t)),i=document.querySelectorAll(e+":not(.stack)").length,s=0;e:for(var o=0;o0,right:s0,down:o0||o>0)t+=s;o>0&&(t+="/"+o)}window.location.hash=t}}}function Y(e){var n=s,r=o;if(e){var i=!!e.parentNode.nodeName.match(/section/gi),u=i?e.parentNode:e,a=C(document.querySelectorAll(t));n=Math.max(a.indexOf(u),0),i&&(r=Math.max(C(e.parentNode.children).indexOf(e),0))}return{h:n,v:r}}function Z(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment:not(.visible)");if(e.length)return e[0].classList.add("visible"),M("fragmentshown",{fragment:e[0]}),!0}else{var r=document.querySelectorAll(t+".present .fragment:not(.visible)");if(r.length)return r[0].classList.add("visible"),M("fragmentshown",{fragment:r[0]}),!0}return!1}function et(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment.visible");if(e.length)return e[e.length-1].classList.remove("visible"),M("fragmenthidden",{fragment:e[e.length-1]}),!0}else{var r=document.querySelectorAll(t+".present .fragment.visible");if(r.length)return r[r.length-1].classList.remove("visible"),M("fragmenthidden",{fragment:r[r.length-1]}),!0}return!1}function tt(){clearTimeout(d),i&&(d=setTimeout(ut,i))}function nt(){(K().left&&I()||et()===!1)&&X(s-1)}function rt(){(K().right&&I()||Z()===!1)&&X(s+1)}function it(){(K().up&&I()||et()===!1)&&X(s,o-1)}function st(){(K().down&&I()||Z()===!1)&&X(s,o+1)}function ot(){if(et()===!1)if(K().up)it();else{var e=document.querySelector(t+".past:nth-child("+s+")");e&&(o=e.querySelectorAll("section").length+1||undefined,s--,X())}}function ut(){Z()===!1&&(K().down?st():rt()),tt()}function at(e){var t=document.activeElement,n=!(!document.activeElement||!document.activeElement.type&&!document.activeElement.href&&document.activeElement.contentEditable==="inherit");if(n||e.shiftKey||e.altKey||e.ctrlKey||e.metaKey)return;var r=!0;switch(e.keyCode){case 80:case 33:ot();break;case 78:case 34:ut();break;case 72:case 37:nt();break;case 76:case 39:rt();break;case 75:case 38:it();break;case 74:case 40:st();break;case 36:X(0);break;case 35:X(Number.MAX_VALUE);break;case 32:I()?j():ut();break;case 13:I()?j():r=!1;break;case 66:case 190:z();break;case 70:q();break;default:r=!1}r?e.preventDefault():e.keyCode===27&&c&&(F(),e.preventDefault()),tt()}function ft(e){m.startX=e.touches[0].clientX,m.startY=e.touches[0].clientY,m.startCount=e.touches.length,e.touches.length===2&&r.overview&&(m.startSpan=L({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:m.startX,y:m.startY}))}function lt(e){if(!m.handled){var t=e.touches[0].clientX,n=e.touches[0].clientY;if(e.touches.length===2&&m.startCount===2&&r.overview){var i=L({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:m.startX,y:m.startY});Math.abs(m.startSpan-i)>m.threshold&&(m.handled=!0,im.threshold&&Math.abs(s)>Math.abs(o)?(m.handled=!0,nt()):s<-m.threshold&&Math.abs(s)>Math.abs(o)?(m.handled=!0,rt()):o>m.threshold?(m.handled=!0,it()):o<-m.threshold&&(m.handled=!0,st()),e.preventDefault()}}else navigator.userAgent.match(/android/gi)&&e.preventDefault()}function ct(e){m.handled=!1}function ht(e){clearTimeout(p),p=setTimeout(function(){var t=e.detail||-e.wheelDelta;t>0?ut():ot()},100)}function pt(e){var n=C(document.querySelectorAll(t)).length,r=Math.floor(e.clientX/l.wrapper.offsetWidth*n);X(r)}function dt(e){Q()}function vt(e){D()}function mt(e){if(I()){e.preventDefault(),j();var t=parseInt(e.target.getAttribute("data-index-h"),10),n=parseInt(e.target.getAttribute("data-index-v"),10);X(t,n)}}var e=".reveal .slides section",t=".reveal .slides>section",n=".reveal .slides>section.present>section",r={controls:!0,progress:!0,history:!1,keyboard:!0,overview:!0,center:!0,loop:!1,rtl:!1,autoSlide:0,mouseWheel:!1,rollingLinks:!0,theme:null,transition:"default",dependencies:[]},i=r.autoSlide,s=0,o=0,u,a,f=[],l={},c="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,h="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,p=0,d=0,v=0,m={startX:0,startY:0,startSpan:0,startCount:0,handled:!1,threshold:80};return{initialize:g,slide:X,left:nt,right:rt,up:it,down:st,prev:ot,next:ut,prevFragment:et,nextFragment:Z,navigateTo:X,navigateLeft:nt,navigateRight:rt,navigateUp:it,navigateDown:st,navigatePrev:ot,navigateNext:ut,toggleOverview:F,addEventListeners:x,removeEventListeners:T,getIndices:Y,getPreviousSlide:function(){return u},getCurrentSlide:function(){return a},getQueryHash:function(){var e={};return location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(t){e[t.split("=").shift()]=t.split("=").pop()}),e},addEventListener:function(e,t,n){"addEventListener"in window&&(l.wrapper||document.querySelector(".reveal")).addEventListener(e,t,n)},removeEventListener:function(e,t,n){"addEventListener"in window&&(l.wrapper||document.querySelector(".reveal")).removeEventListener(e,t,n)}}}(); \ No newline at end of file