@farberg/reveal-template 1.0.57 → 1.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farberg/reveal-template",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "homepage": "https://github.com/pfisterer/reveal-template",
   "description": "Reveal.js template for Dennis' lectures",
   "main": "index.js",

package/plugins/reveal-plugin-asciinema.js

@@ -1,36 +1,60 @@
+function initSlide(slide) {
+	let players = []
+
+	let asciinemaElements = slide.getElementsByTagName("asciinema")
+
+	for (let el of asciinemaElements) {
+		console.log("Found asciinema element: ", el)
+
+		//Make element invisible
+		el.style.display = "none"
+
+		//Create player
+		const source = el.getAttribute('src')
+		const conf = el.getAttribute('data-conf')
+		const div = document.createElement('div')
+
+		div.setAttribute('data-farberg-asciinema', 'true')
+
+		console.log("Playing", source, "with options", conf)
+		players.push(AsciinemaPlayer.create(source, div, JSON.parse(conf)))
+
+		el.parentNode.insertBefore(div, el.nextSibling)
+	}
+
+	return players
+}
+
+function destroyPlayer(slide, players) {
+	//remove elements from dom with attribute data-farberg-asciinema
+	let elementsToRemove = slide.querySelectorAll('[data-farberg-asciinema]')
+	console.log("Removing", elementsToRemove.length, "elements with attribute data-farberg-asciinema")
+
+	for (let el of elementsToRemove)
+		el.parentNode.removeChild(el)
+
+	//destroy players
+	console.log("Destroying", players.length, "players")
+	players.forEach(player => player.dispose())
+}
 
 export default () => {
 
 	return {
 		id: 'asciinema',
 		init: (deck) => {
-
 			deck.on('ready', () => {
+				let currentPlayers = undefined
 
-				deck.addEventListener('slidechanged', function (event) {
-
-					// Workaround to get elements into an array before they are replaced
-					const els = []
-					for (let el of deck.getRevealElement().getElementsByTagName("asciinema")) {
-						els.push(el)
-					}
+				currentPlayers = initSlide(deck.getCurrentSlide())
 
-					for (let el of els) {
-						console.log("Looking @", el)
-						const source = el.getAttribute('src')
-						const conf = el.getAttribute('data-conf')
-						const div = document.createElement('div')
-
-						el.parentElement.replaceChild(div, el)
+				deck.addEventListener('slidechanged', function (event) {
+					if (event.previousSlide)
+						destroyPlayer(event.previousSlide, currentPlayers)
 
-						console.log("Playing", source, "with options", conf)
-						console.log(AsciinemaPlayer.create(source, div, JSON.parse(conf)));
-					}
+					currentPlayers = initSlide(event.currentSlide)
 				})
-
-
 			})
-
 		}
 	}
 }