xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'slidechanged' event, added Reveal.addEventListener/Reveal.removeEventListener api methods

Browse Source
This commit is contained in:
Hakim El Hattab 2012-05-04 00:01:20 -04:00
parent ebb834f4b0
commit 19b67aab13
4 changed files with 99 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -68,16 +68,27 @@ The Reveal class provides a minimal JavaScript API for controlling its navigatio
### States ### States
If you set ``data-state="someState"`` on a slide ``<section>``, "someState" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
Furthermore you can also listen to these changes in state via JavaScript: Furthermore you can also listen to these changes in state via JavaScript:
``` ```
document.addEventListener( 'someState', function() { Reveal.addEventListener( 'somestate', function() {
// TODO: Sprinkle magic // TODO: Sprinkle magic
}, false ); }, false );
``` ```
### Slide change event
An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index of the current slide.
```
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.indexh & event.indexv
} );
```
## Examples ## Examples
* http://lab.hakim.se/reveal-js/ (original) * http://lab.hakim.se/reveal-js/ (original)
@ -104,6 +115,9 @@ document.addEventListener( 'someState', function() {
#### 1.3 (master) #### 1.3 (master)
- Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff) - Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff)
- Added support for looped presentations via config - Added support for looped presentations via config
- Fixed IE9 fallback
- Added event binding methods (Reveal.addEventListener, Reveal.removeEventListener)
- Added 'slidechanged' event
#### 1.2 #### 1.2

10
index.html
View File

@ -148,7 +148,7 @@
<p> <p>
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
</p> </p>
<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">document.addEventListener( 'customevent', function() { <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
alert( '"customevent" has fired' ); alert( '"customevent" has fired' );
} ); } );
</code></pre> </code></pre>
@ -261,10 +261,16 @@ linkify( 'a' );
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop(); query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} ); } );
document.addEventListener( 'customevent', function() { // Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
alert( '"customevent" has fired' ); alert( '"customevent" has fired' );
} ); } );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.indexh & event.indexv
} );
Reveal.initialize({ Reveal.initialize({
// Display controls in the bottom right corner // Display controls in the bottom right corner
controls: true, controls: true,

33
js/reveal.js
View File

@ -504,10 +504,8 @@ var Reveal = (function(){
document.documentElement.classList.add( state[i] ); document.documentElement.classList.add( state[i] );
// Dispatch custom event // Dispatch custom event matching the state's name
var event = document.createEvent( "HTMLEvents" ); dispatchEvent( state[i] );
event.initEvent( state[i], true, true );
document.dispatchEvent( event );
} }
// Clean up the remaints of the previous state // Clean up the remaints of the previous state
@ -529,6 +527,12 @@ var Reveal = (function(){
clearTimeout( writeURLTimeout ); clearTimeout( writeURLTimeout );
writeURLTimeout = setTimeout( writeURL, 1500 ); writeURLTimeout = setTimeout( writeURL, 1500 );
// Dispatch an event notifying observers of the change in slide
dispatchEvent( 'slidechanged', {
'indexh': indexh,
'indexv': indexv
} );
} }
/** /**
@ -596,6 +600,17 @@ var Reveal = (function(){
} }
} }
/**
* Dispatches an event of the specified type from the
* #reveal DOM element.
*/
function dispatchEvent( type, properties ) {
var event = document.createEvent( "HTMLEvents", 1, 2 );
event.initEvent( type, true, true );
extend( event, properties );
dom.wrapper.dispatchEvent( event );
}
/** /**
* Navigate to the next slide fragment. * Navigate to the next slide fragment.
* *
@ -736,7 +751,15 @@ var Reveal = (function(){
navigateLeft: navigateLeft, navigateLeft: navigateLeft,
navigateRight: navigateRight, navigateRight: navigateRight,
navigateUp: navigateUp, navigateUp: navigateUp,
navigateDown: navigateDown navigateDown: navigateDown,
// Forward event binding to the reveal DOM element
addEventListener: function( type, listener, useCapture ) {
( dom.wrapper || document.querySelector( '#reveal' ) ).addEventListener( type, listener, useCapture );
},
removeEventListener: function( type, listener, useCapture ) {
( dom.wrapper || document.querySelector( '#reveal' ) ).removeEventListener( type, listener, useCapture );
}
}; };
})(); })();

80
js/reveal.min.js vendored
View File

@ -5,45 +5,45 @@
* *
* Copyright (C) 2012 Hakim El Hattab, http://hakim.se * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
*/ */
var Reveal=(function(){var i="#reveal .slides>section",a="#reveal .slides>section.present>section",j=0,c=0,E={controls:false,progress:false,history:false,loop:false,mouseWheel:true,rollingLinks:true,transition:"default",theme:"default"},K=[],d={},F=document.body.style.perspectiveProperty!==undefined||document.body.style.WebkitPerspective!==undefined||document.body.style.MozPerspective!==undefined||document.body.style.msPerspective!==undefined||document.body.style.OPerspective!==undefined,k=document.body.style.transformProperty!==undefined||document.body.style.WebkitTransform!==undefined||document.body.style.MozTransform!==undefined||document.body.style.msTransform!==undefined||document.body.style.OTransform!==undefined,t=0,w=0; var Reveal=(function(){var i="#reveal .slides>section",a="#reveal .slides>section.present>section",j=0,c=0,F={controls:false,progress:false,history:false,loop:false,mouseWheel:true,rollingLinks:true,transition:"default",theme:"default"},L=[],d={},G=document.body.style.perspectiveProperty!==undefined||document.body.style.WebkitPerspective!==undefined||document.body.style.MozPerspective!==undefined||document.body.style.msPerspective!==undefined||document.body.style.OPerspective!==undefined,k=document.body.style.transformProperty!==undefined||document.body.style.WebkitTransform!==undefined||document.body.style.MozTransform!==undefined||document.body.style.msTransform!==undefined||document.body.style.OTransform!==undefined,u=0,x=0;
function g(M){if(!k&&!F){document.body.setAttribute("class","no-transforms");return;}d.wrapper=document.querySelector("#reveal");d.progress=document.querySelector("#reveal .progress"); function g(N){if(!k&&!G){document.body.setAttribute("class","no-transforms");return;}d.wrapper=document.querySelector("#reveal");d.progress=document.querySelector("#reveal .progress");
d.progressbar=document.querySelector("#reveal .progress span");d.controls=document.querySelector("#reveal .controls");d.controlsLeft=document.querySelector("#reveal .controls .left"); d.progressbar=document.querySelector("#reveal .progress span");d.controls=document.querySelector("#reveal .controls");d.controlsLeft=document.querySelector("#reveal .controls .left");
d.controlsRight=document.querySelector("#reveal .controls .right");d.controlsUp=document.querySelector("#reveal .controls .up");d.controlsDown=document.querySelector("#reveal .controls .down"); d.controlsRight=document.querySelector("#reveal .controls .right");d.controlsUp=document.querySelector("#reveal .controls .up");d.controlsDown=document.querySelector("#reveal .controls .down");
document.addEventListener("keydown",J,false);document.addEventListener("touchstart",u,false);window.addEventListener("hashchange",r,false);d.controlsLeft.addEventListener("click",m(v),false); document.addEventListener("keydown",K,false);document.addEventListener("touchstart",v,false);window.addEventListener("hashchange",s,false);d.controlsLeft.addEventListener("click",m(w),false);
d.controlsRight.addEventListener("click",m(h),false);d.controlsUp.addEventListener("click",m(p),false);d.controlsDown.addEventListener("click",m(y),false); d.controlsRight.addEventListener("click",m(h),false);d.controlsUp.addEventListener("click",m(q),false);d.controlsDown.addEventListener("click",m(z),false);
o(E,M);if(F===false){E.transition="linear";}if(E.controls){d.controls.style.display="block";}if(E.progress){d.progress.style.display="block";}if(E.transition!=="default"){d.wrapper.classList.add(E.transition); p(F,N);if(G===false){F.transition="linear";}if(F.controls){d.controls.style.display="block";}if(F.progress){d.progress.style.display="block";}if(F.transition!=="default"){d.wrapper.classList.add(F.transition);
}if(E.theme!=="default"){d.wrapper.classList.add(E.theme);}if(E.mouseWheel){document.addEventListener("DOMMouseScroll",l,false);document.addEventListener("mousewheel",l,false); }if(F.theme!=="default"){d.wrapper.classList.add(F.theme);}if(F.mouseWheel){document.addEventListener("DOMMouseScroll",l,false);document.addEventListener("mousewheel",l,false);
}if(E.rollingLinks){B();}A();}function o(N,M){for(var O in M){N[O]=M[O];}}function m(M){return function(N){N.preventDefault();M.call();};}function J(N){if(N.target.contentEditable!="inherit"||N.shiftKey||N.altKey||N.ctrlKey||N.metaKey){return; }if(F.rollingLinks){C();}B();}function p(O,N){for(var P in N){O[P]=N[P];}}function m(N){return function(O){O.preventDefault();N.call();};}function K(O){if(O.target.contentEditable!="inherit"||O.shiftKey||O.altKey||O.ctrlKey||O.metaKey){return;
}var M=false;switch(N.keyCode){case 80:case 33:G();M=true;break;case 78:case 32:case 34:s();M=true;break;case 72:case 37:v();M=true;break;case 76:case 39:h(); }var N=false;switch(O.keyCode){case 80:case 33:H();N=true;break;case 78:case 32:case 34:t();N=true;break;case 72:case 37:w();N=true;break;case 76:case 39:h();
M=true;break;case 75:case 38:p();M=true;break;case 74:case 40:y();M=true;break;}if(M){N.preventDefault();}else{if(N.keyCode===27&&F){if(H()){I();}else{z(); N=true;break;case 75:case 38:q();N=true;break;case 74:case 40:z();N=true;break;}if(N){O.preventDefault();}else{if(O.keyCode===27&&G){if(I()){J();}else{A();
}N.preventDefault();}}}function u(P){if(P.touches.length===1){if(P.target.tagName.toLowerCase()==="a"||P.target.tagName.toLowerCase()==="img"){return;}P.preventDefault(); }O.preventDefault();}}}function v(Q){if(Q.touches.length===1){if(Q.target.tagName.toLowerCase()==="a"||Q.target.tagName.toLowerCase()==="img"){return;}Q.preventDefault();
var N={x:P.touches[0].clientX,y:P.touches[0].clientY};var M=window.innerWidth*0.3;var O=window.innerHeight*0.3;if(N.x<M){v();}else{if(N.x>window.innerWidth-M){h(); var O={x:Q.touches[0].clientX,y:Q.touches[0].clientY};var N=window.innerWidth*0.3;var P=window.innerHeight*0.3;if(O.x<N){w();}else{if(O.x>window.innerWidth-N){h();
}else{if(N.y<O){p();}else{if(N.y>window.innerHeight-O){y();}}}}b();}}function l(M){clearTimeout(t);t=setTimeout(function(){var N=M.detail||-M.wheelDelta; }else{if(O.y<P){q();}else{if(O.y>window.innerHeight-P){z();}}}}b();}}function l(N){clearTimeout(u);u=setTimeout(function(){var O=N.detail||-N.wheelDelta;
if(N>0){s();}else{G();}},100);}function r(M){A();}function B(){if(F){var N=document.querySelectorAll("#reveal .slides section a:not(.image)");for(var O=0,M=N.length; if(O>0){t();}else{H();}},100);}function s(N){B();}function C(){if(G){var O=document.querySelectorAll("#reveal .slides section a:not(.image)");for(var P=0,N=O.length;
O<M;O++){var P=N[O];if(P.textContent&&!P.querySelector("img")&&(!P.className||!P.classList.contains(P,"roll"))){P.classList.add("roll");P.innerHTML='<span data-title="'+P.text+'">'+P.innerHTML+"</span>"; P<N;P++){var Q=O[P];if(Q.textContent&&!Q.querySelector("img")&&(!Q.className||!Q.classList.contains(Q,"roll"))){Q.classList.add("roll");Q.innerHTML='<span data-title="'+Q.text+'">'+Q.innerHTML+"</span>";
}}}}function z(){d.wrapper.classList.add("overview");var M=Array.prototype.slice.call(document.querySelectorAll(i));for(var R=0,P=M.length;R<P;R++){var O=M[R],V="translateZ(-2500px) translate("+((R-j)*105)+"%, 0%)"; }}}}function A(){d.wrapper.classList.add("overview");var N=Array.prototype.slice.call(document.querySelectorAll(i));for(var S=0,Q=N.length;S<Q;S++){var P=N[S],W="translateZ(-2500px) translate("+((S-j)*105)+"%, 0%)";
O.setAttribute("data-index-h",R);O.style.display="block";O.style.WebkitTransform=V;O.style.MozTransform=V;O.style.msTransform=V;O.style.OTransform=V;O.style.transform=V; P.setAttribute("data-index-h",S);P.style.display="block";P.style.WebkitTransform=W;P.style.MozTransform=W;P.style.msTransform=W;P.style.OTransform=W;P.style.transform=W;
if(!O.classList.contains("stack")){O.addEventListener("click",x,true);}var U=Array.prototype.slice.call(O.querySelectorAll("section"));for(var Q=0,N=U.length; if(!P.classList.contains("stack")){P.addEventListener("click",y,true);}var V=Array.prototype.slice.call(P.querySelectorAll("section"));for(var R=0,O=V.length;
Q<N;Q++){var T=U[Q],S="translate(0%, "+((Q-c)*105)+"%)";T.setAttribute("data-index-h",R);T.setAttribute("data-index-v",Q);T.style.display="block";T.style.WebkitTransform=S; R<O;R++){var U=V[R],T="translate(0%, "+((R-c)*105)+"%)";U.setAttribute("data-index-h",S);U.setAttribute("data-index-v",R);U.style.display="block";U.style.WebkitTransform=T;
T.style.MozTransform=S;T.style.msTransform=S;T.style.OTransform=S;T.style.transform=S;T.addEventListener("click",x,true);}}}function I(){d.wrapper.classList.remove("overview"); U.style.MozTransform=T;U.style.msTransform=T;U.style.OTransform=T;U.style.transform=T;U.addEventListener("click",y,true);}}}function J(){d.wrapper.classList.remove("overview");
var P=Array.prototype.slice.call(document.querySelectorAll("#reveal .slides section"));for(var O=0,M=P.length;O<M;O++){var N=P[O];N.style.WebkitTransform=""; var Q=Array.prototype.slice.call(document.querySelectorAll("#reveal .slides section"));for(var P=0,N=Q.length;P<N;P++){var O=Q[P];O.style.WebkitTransform="";
N.style.MozTransform="";N.style.msTransform="";N.style.OTransform="";N.style.transform="";N.removeEventListener("click",x);}b();}function H(){return d.wrapper.classList.contains("overview"); O.style.MozTransform="";O.style.msTransform="";O.style.OTransform="";O.style.transform="";O.removeEventListener("click",y);}b();}function I(){return d.wrapper.classList.contains("overview");
}function x(M){if(H()){M.preventDefault();I();j=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");b();}}function L(N,P){var R=Array.prototype.slice.call(document.querySelectorAll(N)),S=R.length; }function y(N){if(I()){N.preventDefault();J();j=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");b();}}function M(O,Q){var S=Array.prototype.slice.call(document.querySelectorAll(O)),T=S.length;
if(S){if(E.loop){P%=S;if(P<0){P=S+P;}}P=Math.max(Math.min(P,S-1),0);for(var Q=0;Q<S;Q++){var M=R[Q];if(H()===false){var T=Math.abs((P-Q)%(S-3))||0;M.style.display=T>3?"none":"block"; if(T){if(F.loop){Q%=T;if(Q<0){Q=T+Q;}}Q=Math.max(Math.min(Q,T-1),0);for(var R=0;R<T;R++){var N=S[R];if(I()===false){var U=Math.abs((Q-R)%(T-3))||0;N.style.display=U>3?"none":"block";
}R[Q].classList.remove("past");R[Q].classList.remove("present");R[Q].classList.remove("future");if(Q<P){R[Q].classList.add("past");}else{if(Q>P){R[Q].classList.add("future"); }S[R].classList.remove("past");S[R].classList.remove("present");S[R].classList.remove("future");if(R<Q){S[R].classList.add("past");}else{if(R>Q){S[R].classList.add("future");
}}if(M.querySelector("section")){R[Q].classList.add("stack");}}R[P].classList.add("present");var O=R[P].getAttribute("data-state");if(O){K=K.concat(O.split(" ")); }}if(N.querySelector("section")){S[R].classList.add("stack");}}S[Q].classList.add("present");var P=S[Q].getAttribute("data-state");if(P){L=L.concat(P.split(" "));
}}else{P=0;}return P;}function b(){var Q=K.concat();K.length=0;j=L(i,j);c=L(a,c);stateLoop:for(var O=0,M=K.length;O<M;O++){for(var N=0;N<Q.length;N++){if(Q[N]===K[O]){Q.splice(N,1); }}else{Q=0;}return Q;}function b(){var Q=L.concat();L.length=0;j=M(i,j);c=M(a,c);stateLoop:for(var P=0,N=L.length;P<N;P++){for(var O=0;O<Q.length;O++){if(Q[O]===L[P]){Q.splice(O,1);
continue stateLoop;}}document.documentElement.classList.add(K[O]);var P=document.createEvent("HTMLEvents");P.initEvent(K[O],true,true);document.dispatchEvent(P); continue stateLoop;}}document.documentElement.classList.add(L[P]);n(L[P]);}while(Q.length){document.documentElement.classList.remove(Q.pop());}if(F.progress){d.progressbar.style.width=(j/(document.querySelectorAll(i).length-1))*window.innerWidth+"px";
}while(Q.length){document.documentElement.classList.remove(Q.pop());}if(E.progress){d.progressbar.style.width=(j/(document.querySelectorAll(i).length-1))*window.innerWidth+"px"; }if(I()){A();}o();clearTimeout(x);x=setTimeout(f,1500);n("slidechanged",{indexh:j,indexv:c});}function o(){var N=e();[d.controlsLeft,d.controlsRight,d.controlsUp,d.controlsDown].forEach(function(O){O.classList.remove("enabled");
}if(H()){z();}n();clearTimeout(w);w=setTimeout(f,1500);}function n(){var M=e();[d.controlsLeft,d.controlsRight,d.controlsUp,d.controlsDown].forEach(function(N){N.classList.remove("enabled"); });if(N.left){d.controlsLeft.classList.add("enabled");}if(N.right){d.controlsRight.classList.add("enabled");}if(N.up){d.controlsUp.classList.add("enabled");
});if(M.left){d.controlsLeft.classList.add("enabled");}if(M.right){d.controlsRight.classList.add("enabled");}if(M.up){d.controlsUp.classList.add("enabled"); }if(N.down){d.controlsDown.classList.add("enabled");}}function e(){var N=document.querySelectorAll(i);var O=document.querySelectorAll(a);return{left:j>0,right:j<N.length-1,up:c>0,down:c<O.length-1};
}if(M.down){d.controlsDown.classList.add("enabled");}}function e(){var M=document.querySelectorAll(i);var N=document.querySelectorAll(a);return{left:j>0,right:j<M.length-1,up:c>0,down:c<N.length-1}; }function B(){var N=window.location.hash.slice(2).split("/");j=parseInt(N[0])||0;c=parseInt(N[1])||0;D(j,c);}function f(){if(F.history){var N="/";if(j>0||c>0){N+=j;
}function A(){var M=window.location.hash.slice(2).split("/");j=parseInt(M[0])||0;c=parseInt(M[1])||0;C(j,c);}function f(){if(E.history){var M="/";if(j>0||c>0){M+=j; }if(c>0){N+="/"+c;}window.location.hash=N;}}function n(O,N){var P=document.createEvent("HTMLEvents",1,2);P.initEvent(O,true,true);p(P,N);d.wrapper.dispatchEvent(P);
}if(c>0){M+="/"+c;}window.location.hash=M;}}function q(){if(document.querySelector(a+".present")){var N=document.querySelectorAll(a+".present .fragment:not(.visible)"); }function r(){if(document.querySelector(a+".present")){var O=document.querySelectorAll(a+".present .fragment:not(.visible)");if(O.length){O[0].classList.add("visible");
if(N.length){N[0].classList.add("visible");return true;}}else{var M=document.querySelectorAll(i+".present .fragment:not(.visible)");if(M.length){M[0].classList.add("visible"); return true;}}else{var N=document.querySelectorAll(i+".present .fragment:not(.visible)");if(N.length){N[0].classList.add("visible");return true;}}return false;
return true;}}return false;}function D(){if(document.querySelector(a+".present")){var N=document.querySelectorAll(a+".present .fragment.visible");if(N.length){N[N.length-1].classList.remove("visible"); }function E(){if(document.querySelector(a+".present")){var O=document.querySelectorAll(a+".present .fragment.visible");if(O.length){O[O.length-1].classList.remove("visible");
return true;}}else{var M=document.querySelectorAll(i+".present .fragment.visible");if(M.length){M[M.length-1].classList.remove("visible");return true;}}return false; return true;}}else{var N=document.querySelectorAll(i+".present .fragment.visible");if(N.length){N[N.length-1].classList.remove("visible");return true;}}return false;
}function C(N,M){j=N===undefined?j:N;c=M===undefined?c:M;b();}function v(){if(H()||D()===false){j--;c=0;b();}}function h(){if(H()||q()===false){j++;c=0; }function D(O,N){j=O===undefined?j:O;c=N===undefined?c:N;b();}function w(){if(I()||E()===false){j--;c=0;b();}}function h(){if(I()||r()===false){j++;c=0;
b();}}function p(){if(H()||D()===false){c--;b();}}function y(){if(H()||q()===false){c++;b();}}function G(){if(D()===false){if(e().up){p();}else{var M=document.querySelector("#reveal .slides>section.past:nth-child("+j+")"); b();}}function q(){if(I()||E()===false){c--;b();}}function z(){if(I()||r()===false){c++;b();}}function H(){if(E()===false){if(e().up){q();}else{var N=document.querySelector("#reveal .slides>section.past:nth-child("+j+")");
if(M){c=(M.querySelectorAll("section").length+1)||0;j--;b();}}}}function s(){if(q()===false){e().down?y():h();}}return{initialize:g,navigateTo:C,navigateLeft:v,navigateRight:h,navigateUp:p,navigateDown:y}; if(N){c=(N.querySelectorAll("section").length+1)||0;j--;b();}}}}function t(){if(r()===false){e().down?z():h();}}return{initialize:g,navigateTo:D,navigateLeft:w,navigateRight:h,navigateUp:q,navigateDown:z,addEventListener:function(O,P,N){(d.wrapper||document.querySelector("#reveal")).addEventListener(O,P,N);
})(); },removeEventListener:function(O,P,N){(d.wrapper||document.querySelector("#reveal")).removeEventListener(O,P,N);}};})();