Update to current version of Reveal.js and several other changes

README.md

@@ -31,7 +31,12 @@ Reveal.initialize({
 });
 ```
 
-Also import the CSS if you plan to use the hand drawn theme:
+If you use dark mode, import dark.css:
+```html
+<link href="plugin/sequence-diagrams/dark.css" rel="stylesheet" />
+```
+
+Also import the following stylesheet if you plan to use the hand drawn theme:
 ```html
 <link href="plugin/sequence-diagrams/sequence-diagram-min.css" rel="stylesheet" />
 ```
@@ -63,7 +68,7 @@ The plugin searches for all HTML objects with class `sequence-diagram`. Then it
 
 **Example:**
 ```html
-<script class="sequence-diagram" type="text/template" data-config-useFragments="true" data-config-theme="simple">
+<div class="sequence-diagram" type="text/template" data-config-useFragments="true" data-config-theme="simple">
 	Title: Here is a title
 	A->B: Normal line
 	B-->C: Dashed line
@@ -72,7 +77,7 @@ The plugin searches for all HTML objects with class `sequence-diagram`. Then it
 	D-->>A: Dashed open arrow
 	Note left of D: He thinks \n about it
 	A->A: Self
-</script>	
+</div>	
 ```
 
 The `data-config-*` attributes overrides the config from the reveal.js initialization options. But they are not required.

dark.css

@@ -0,0 +1,16 @@
+line {
+	stroke: white;
+}
+
+marker {
+	stroke:white;
+	fill: white;
+}	
+
+.signal text {
+	fill: white;
+}
+
+.signal text:hover {
+	fill: white;
+}

default.css

@@ -0,0 +1,16 @@
+line {
+	stroke: white;
+}
+
+marker {
+	stroke:white;
+	fill: white;
+}	
+
+.signal text {
+	fill: white;
+}
+
+.signal text:hover {
+	fill: white;
+}

package.json

@@ -7,7 +7,8 @@
     "copyLibToDist": "copyfiles -f ./bower_components/js-sequence-diagrams/dist/sequence-diagram-min.css ./bower_components/js-sequence-diagrams/dist/sequence-diagram-min.js ./dist/",
     "copyLibFontsToDist": "copyfiles -f ./bower_components/js-sequence-diagrams/dist/*woff* ./dist/",
     "copySelfToDist": "copyfiles -f ./sequence-diagrams-plugin.js ./dist/",
-    "build": "bower install && npm run copySelfToDist && npm run copyLibToDist && npm run copyLibFontsToDist && npm run copyLibDependenciesToDist"
+    "copyCSSToDist": "copyfiles -f ./*.css ./dist/",
+    "build": "bower install && npm run copySelfToDist && npm run copyLibToDist && npm run copyLibFontsToDist && npm run copyLibDependenciesToDist && npm run copyCSSToDist"
   },
   "keywords": [
     "reveal.js"

sequence-diagrams-plugin.js

@@ -1,94 +1,105 @@
-var RevealSequenceDiagram = window.RevealSequenceDiagram || (function(){
-
-	var className = "sequence-diagram";
-	var classNameBuilt = "sequence-diagram-built";
-	var config = Reveal.getConfig().sequencediagrams;
-
-	function onRevealJsReady(event){
-		var elements = document.getElementsByClassName(className);
-		for (var i = 0; i < elements.length; i++ ){
-			var diagramBlueprintElement = elements[i];
-
-			removeCreatedDiagram(diagramBlueprintElement);
-			var diagramContainer = document.createElement("div");
-			insertNodeBefore(diagramBlueprintElement, diagramContainer);
-			var diagramSyntax = diagramBlueprintElement.innerText;
-			var options = getOptions(diagramBlueprintElement);
-			createDiagram(diagramContainer, options, diagramSyntax);
-		}
+var RevealSequenceDiagram = () => ({
+	id: "sequence-diagram",
+	init: (Reveal) => {
+    	var config = Reveal.getConfig().sequencediagrams;
+        var className = "sequence-diagram";
+
+    	function renderDiagrams(event){
+    		var elements = Reveal.getCurrentSlide().getElementsByClassName(className);
+    		for (var i = 0; i < elements.length; i++ ){
+    			var diagramBlueprintElement = elements[i];
+
+    			if (wasBuilt(diagramBlueprintElement)) {
+        			continue
+    			}
+    			var diagramSyntax = diagramBlueprintElement.textContent;
+    			diagramBlueprintElement.innerHTML = "";
+    			var options = getOptions(diagramBlueprintElement);
+    			createDiagram(diagramBlueprintElement, options, diagramSyntax);
+    		}
+    	}
+
+    	function wasBuilt(node) {
+    		return node.firstChild.tagName == 'svg'
+    	}
+
+    	function insertNodeBefore(referenceNode, newNode) {
+    		referenceNode.parentNode.insertBefore(newNode, referenceNode);
+    	}
+
+    	function createViewbox(svg) {
+    		svg.setAttribute('viewBox', '0 0 ' + parseInt(svg.getAttribute('width'), 10) + ' ' + parseInt(svg.getAttribute('height'),10));
+    		svg.setAttribute('preserveAspectRatio', 'xMidYMid');
+    		svg.style.width = "100%"
+    		svg.style.height = "100%"
+    	}
+
+    	function createDiagram(diagramContainer, options, diagramSyntax) {
+    		var diagram = Diagram.parse(diagramSyntax);
+    		listenToDiagramIsRendered(diagramContainer, options, onRendered);
+    		diagram.drawSVG(diagramContainer, { theme: options.theme });
+    	}
+
+    	function onRendered(diagramContainer, options) {
+        	makeFragmentsIfRequired(diagramContainer, options)
+        	createViewbox(diagramContainer.firstChild)
+    	}
+
+    	function listenToDiagramIsRendered(diagramContainer, options, callback){
+    		var observer = new MutationObserver(function (e) {
+
+    			Reveal.sync();
+    			callback(diagramContainer, options)
+
+    			if(config && config.initialize){
+    				config.initialize(diagramContainer);
+    			}
+
+    			this.disconnect();
+    		});
+
+    		observer.observe(diagramContainer, { childList: true });
+    	}
+
+    	function makeFragmentsIfRequired(diagramContainer, options){
+    		if (options.useFragments && diagramContainer) {
+    			var svg =  diagramContainer;
+    			var signalElements = svg.querySelectorAll('.signal, .note');
+    			for(var signalElementKey in signalElements){
+    				var signalElement = signalElements[signalElementKey];
+    				if(signalElement.classList){
+    					signalElement.classList.add('fragment');
+    				}
+    			}
+    		}
+    	}
+
+    	function getOptions(element){
+
+    		var useFragments = getOption(element, "useFragments", false);
+    		if(typeof useFragments == "string"){
+    			useFragments = useFragments.toLowerCase() == "true";
+    		}
+
+    		return {
+    			theme : getOption(element, "theme", "simple"),
+    			useFragments : useFragments,
+    		};
+    	}
+
+    	function getOption(element, key, defaultOption){
+    		if(element.hasAttribute("data-config-"+key)){
+    			return element.attributes["data-config-"+key].value;
+    		}
+
+    		if(config && config.hasOwnProperty(key)){
+    			return config[key];
+    		}
+
+    		return defaultOption;
+    	}
+
+    	Reveal.addEventListener('ready',renderDiagrams);
+    	Reveal.addEventListener('slidechanged',renderDiagrams);
 	}
-
-	function removeCreatedDiagram(node) {
-		if(node.previousSibling && node.previousSibling.className === classNameBuilt){
-			node.parentNode.removeChild(node.previousSibling);
-		}
-	}
-
-	function insertNodeBefore(referenceNode, newNode) {
-		referenceNode.parentNode.insertBefore(newNode, referenceNode);
-	}	
-
-	function createDiagram(diagramContainer, options, diagramSyntax) { 
-		var diagram = Diagram.parse(diagramSyntax);      
-		listenToDiagramIsRendered(diagramContainer, options, makeFragmentsIfRequired);
-		diagram.drawSVG(diagramContainer, { theme: options.theme }); 
-	}	
-
-	function listenToDiagramIsRendered(diagramContainer, options, callback){
-		var observer = new MutationObserver(function (e) {  
-
-			Reveal.sync(); 
-			callback(diagramContainer, options)
-
-			if(config && config.initialize){
-				config.initialize(diagramContainer);
-			}
-
-			this.disconnect();
-		});
-
-		observer.observe(diagramContainer, { childList: true }); 
-	}
-
-	function makeFragmentsIfRequired(diagramContainer, options){
-		if (options.useFragments && diagramContainer) { 
-			var svg =  diagramContainer; 
-			var signalElements = svg.querySelectorAll('.signal, .note');
-			for(var signalElementKey in signalElements){ 
-				var signalElement = signalElements[signalElementKey]; 
-				if(signalElement.classList){
-					signalElement.classList.add('fragment'); 
-				} 
-			}
-		} 
-	}
-
-	function getOptions(element){ 
-
-		var useFragments = getOption(element, "useFragments", false);
-		if(typeof useFragments == "string"){
-			useFragments = useFragments.toLowerCase() == "true";
-		}
-
-		return {
-			theme : getOption(element, "theme", "simple"),
-			useFragments : useFragments,
-		};
-	}
-
-	function getOption(element, key, defaultOption){
-		if(element.hasAttribute("data-config-"+key)){
-			return element.attributes["data-config-"+key].value;
-		}
-
-		if(config && config.hasOwnProperty(key)){
-			return config[key];
-		}
-
-		return defaultOption;
-	}
-
-	Reveal.addEventListener('ready',onRevealJsReady);
-
-})();
-
+})