diff --git a/README.md b/README.md
index 9cca024..b764988 100644
--- a/README.md
+++ b/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
+
+```
+
+Also import the following stylesheet if you plan to use the hand drawn theme:
```html
```
@@ -63,7 +68,7 @@ The plugin searches for all HTML objects with class `sequence-diagram`. Then it
**Example:**
```html
-
+
```
The `data-config-*` attributes overrides the config from the reveal.js initialization options. But they are not required.
diff --git a/dark.css b/dark.css
new file mode 100644
index 0000000..330a8d4
--- /dev/null
+++ b/dark.css
@@ -0,0 +1,16 @@
+line {
+ stroke: white;
+}
+
+marker {
+ stroke:white;
+ fill: white;
+}
+
+.signal text {
+ fill: white;
+}
+
+.signal text:hover {
+ fill: white;
+}
diff --git a/default.css b/default.css
new file mode 100644
index 0000000..330a8d4
--- /dev/null
+++ b/default.css
@@ -0,0 +1,16 @@
+line {
+ stroke: white;
+}
+
+marker {
+ stroke:white;
+ fill: white;
+}
+
+.signal text {
+ fill: white;
+}
+
+.signal text:hover {
+ fill: white;
+}
diff --git a/package.json b/package.json
index cbab992..e28d0b1 100644
--- a/package.json
+++ b/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"
diff --git a/sequence-diagrams-plugin.js b/sequence-diagrams-plugin.js
index 5b9e2a6..45b4e41 100644
--- a/sequence-diagrams-plugin.js
+++ b/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);
-
-})();
-
+})