updates reveal api calls

Author: davidovich

exampleSite/content/home/configuration.md

@@ -142,15 +142,15 @@ In `home/reveal-hugo/body.html`:
 
 ```html
 <script type="text/javascript">
-Reveal.addEventListener('slidechanged', function(event) {
+Reveal.on('slidechanged', function(event) {
   console.log("🎞️ Slide is now " + event.indexh);
 });
 </script>
 ```
 
 ---
 
-### Extending the layout 
+### Extending the layout
 #### (alternative)
 
 You can declare a custom CSS or javascript in your configuration.
@@ -163,7 +163,7 @@ custom_js = "js/custom.js"
 
 <small>
 
-These files can be located in `static/css`, `static/js` folder 
+These files can be located in `static/css`, `static/js` folder
 
 💡 See the [extending layout example](/extending-layout-example/#) for more details.
 

exampleSite/layouts/partials/home/reveal-hugo/body.html

@@ -3,7 +3,7 @@
 <!-- The Reveal.js JavaScript API is located at https://github.com/hakimel/reveal.js/#api -->
 <script type="text/javascript">
 // Log the current slide to the console when it changes
-Reveal.addEventListener('slidechanged', function(event) {
+Reveal.on('slidechanged', function(event) {
   console.log("🎞️ Slide is now " + event.indexh);
 });
 </script>

exampleSite/static/plugin/gallery/gallery.plugin.js

@@ -1,6 +1,8 @@
 (function(Gallery) {
 	var galleryTimer, galleryMode;
 
+	Gallery.id = 'gallery';
+
 	Gallery.step = function (items, iterations) {
 		var length = items.length,
 			ptr = 0,
@@ -31,7 +33,7 @@
 			// FIXME remove dependency on Reveal, have a callback? function
 			// that will get a root node to move full screen slides to (ie. slidesNode)
 
-			// for full screen mode we need to: 
+			// for full screen mode we need to:
 			// - take the gallery out of the flow and insert it before "slides"
 			// - hide slides
 			// - make it full screen
@@ -94,15 +96,15 @@
 })(window.Gallery = window.Gallery || {});(function() {
 	if( typeof window.addEventListener === 'function' ) {
 		var slidesNode = document.querySelector(".slides");
-		Reveal.addEventListener("slidechanged", function (event) {
+		Reveal.on("slidechanged", function (event) {
 	    console.log(event)
-			var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
+			var galleryNode = event.previousSlide?.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
 			if (galleryNode) {
 				Gallery.stop(galleryNode, slidesNode);
 			}
 
 			galleryNode = event.currentSlide.querySelector('.gallery');
-			if (galleryNode) {				
+			if (galleryNode) {
 				Gallery.start(galleryNode, slidesNode);
 			}
 
@@ -116,4 +118,4 @@
 			}
 		}
 	}
-})();
+})();

layouts/partials/layout/javascript.html

@@ -84,8 +84,8 @@
     // support current page reload with possible mermaid element
     render({currentSlide: Reveal.getCurrentSlide()});
 
-    Reveal.addEventListener('slidechanged', render);
-    Reveal.addEventListener('ready', render);
+    Reveal.on('slidechanged', render);
+    Reveal.on('ready', render);
   </script>
 {{ end }}