From aaf9da450f51ad3196681cd48e7921c73532ea4d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 31 May 2012 21:31:28 -0400 Subject: [PATCH] dispatch events when visible fragment changes ('fragmentshown', 'fragmenthidden') closes #44 --- README.md | 14 ++++++++++++++ js/reveal.js | 12 ++++++++++++ js/reveal.min.js | 11 ++++++----- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ac57153d..2c629b12 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,19 @@ Reveal.addEventListener( 'slidechanged', function( event ) { } ); ``` +### Fragment events + +When a slide fragment is either shown or hidden reveal.js will dispatch an event. + +``` +Reveal.addEventListener( 'fragmentshown', function( event ) { + // event.fragment = the fragment DOM element +} ); +Reveal.addEventListener( 'fragmenthidden', function( event ) { + // event.fragment = the fragment DOM element +} ); +``` + ## Examples @@ -126,6 +139,7 @@ Reveal.addEventListener( 'slidechanged', function( event ) { - Added print styles. Thanks [skypanther](https://github.com/skypanther) - The address bar now hides automatically on mobile browsers - Space and return keys can be used to exit the overview mode +- Events for fragment states ('fragmentshown'/'fragmenthidden') #### 1.2 diff --git a/js/reveal.js b/js/reveal.js index 729f2f9c..d6c5b5bf 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -654,6 +654,9 @@ var Reveal = (function(){ var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( verticalFragments.length ) { verticalFragments[0].classList.add( 'visible' ); + + // Notify subscribers of the change + dispatchEvent( 'fragmentshown', { fragment: verticalFragments[0] } ); return true; } } @@ -662,6 +665,9 @@ var Reveal = (function(){ var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( horizontalFragments.length ) { horizontalFragments[0].classList.add( 'visible' ); + + // Notify subscribers of the change + dispatchEvent( 'fragmentshown', { fragment: horizontalFragments[0] } ); return true; } } @@ -681,6 +687,9 @@ var Reveal = (function(){ var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( verticalFragments.length ) { verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' ); + + // Notify subscribers of the change + dispatchEvent( 'fragmenthidden', { fragment: verticalFragments[0] } ); return true; } } @@ -689,6 +698,9 @@ var Reveal = (function(){ var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( horizontalFragments.length ) { horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' ); + + // Notify subscribers of the change + dispatchEvent( 'fragmenthidden', { fragment: horizontalFragments[0] } ); return true; } } diff --git a/js/reveal.min.js b/js/reveal.min.js index 675ddd58..08b8a972 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -42,10 +42,11 @@ continue stateLoop;}}document.documentElement.classList.add(N[R]);o(N[R]);}while }function C(){var P=window.location.hash.slice(2).split("/");k=parseInt(P[0])||0;c=parseInt(P[1])||0;E(k,c);}function g(){if(G.history){var P="/";if(k>0||c>0){P+=k; }if(c>0){P+="/"+c;}window.location.hash=P;}}function o(Q,P){var R=document.createEvent("HTMLEvents",1,2);R.initEvent(Q,true,true);q(R,P);d.wrapper.dispatchEvent(R); }function s(){if(document.querySelector(a+".present")){var Q=document.querySelectorAll(a+".present .fragment:not(.visible)");if(Q.length){Q[0].classList.add("visible"); -return true;}}else{var P=document.querySelectorAll(j+".present .fragment:not(.visible)");if(P.length){P[0].classList.add("visible");return true;}}return false; -}function F(){if(document.querySelector(a+".present")){var Q=document.querySelectorAll(a+".present .fragment.visible");if(Q.length){Q[Q.length-1].classList.remove("visible"); -return true;}}else{var P=document.querySelectorAll(j+".present .fragment.visible");if(P.length){P[P.length-1].classList.remove("visible");return true;}}return false; -}function E(Q,P){k=Q===undefined?k:Q;c=P===undefined?c:P;b();}function x(){if(J()||F()===false){k--;c=0;b();}}function i(){if(J()||s()===false){k++;c=0; -b();}}function r(){if(J()||F()===false){c--;b();}}function A(){if(J()||s()===false){c++;b();}}function I(){if(F()===false){if(f().up){r();}else{var P=document.querySelector("#reveal .slides>section.past:nth-child("+k+")"); +o("fragmentshown",{fragment:Q[0]});return true;}}else{var P=document.querySelectorAll(j+".present .fragment:not(.visible)");if(P.length){P[0].classList.add("visible"); +o("fragmentshown",{fragment:P[0]});return true;}}return false;}function F(){if(document.querySelector(a+".present")){var Q=document.querySelectorAll(a+".present .fragment.visible"); +if(Q.length){Q[Q.length-1].classList.remove("visible");o("fragmenthidden",{fragment:Q[0]});return true;}}else{var P=document.querySelectorAll(j+".present .fragment.visible"); +if(P.length){P[P.length-1].classList.remove("visible");o("fragmenthidden",{fragment:P[0]});return true;}}return false;}function E(Q,P){k=Q===undefined?k:Q; +c=P===undefined?c:P;b();}function x(){if(J()||F()===false){k--;c=0;b();}}function i(){if(J()||s()===false){k++;c=0;b();}}function r(){if(J()||F()===false){c--; +b();}}function A(){if(J()||s()===false){c++;b();}}function I(){if(F()===false){if(f().up){r();}else{var P=document.querySelector("#reveal .slides>section.past:nth-child("+k+")"); if(P){c=(P.querySelectorAll("section").length+1)||0;k--;b();}}}}function u(){if(s()===false){f().down?A():i();}}return{initialize:h,navigateTo:E,navigateLeft:x,navigateRight:i,navigateUp:r,navigateDown:A,addEventListener:function(Q,R,P){(d.wrapper||document.querySelector("#reveal")).addEventListener(Q,R,P); },removeEventListener:function(Q,R,P){(d.wrapper||document.querySelector("#reveal")).removeEventListener(Q,R,P);}};})(); \ No newline at end of file