chore(env): setup reveal-md environment

assets/plugin/chart/chart.js

@@ -0,0 +1,198 @@
+/*****************************************************************
+** Author: Asvin Goel, [email protected]
+** Fixed for Reveal4: [email protected]
+**
+** A plugin for reveal.js allowing to integrate Chart.js
+**
+** Version: 1.3.1
+**
+** License: MIT license (see LICENSE.md)
+**
+******************************************************************/
+
+/**
+ * Reveal Plugin
+ * https://revealjs.com/creating-plugins/
+ */
+window.RevealChart = window.RevealChart || {
+  id: 'RevealChart',
+  init: function(deck) {
+      initChart(deck);
+  },
+  update: function(canvas, idx, data) { update(canvas, idx, data); },
+};
+
+const initChart = function(Reveal){
+function parseJSON(str) {
+    var json;
+    try {
+        json = JSON.parse(str);
+    } catch (e) {
+        return null;
+      }
+          return json;
+}
+
+/*
+* Recursively merge properties of two objects
+*/
+function mergeRecursive(obj1, obj2) {
+
+  for (var p in obj2) {
+    try {
+      // Property in destination object set; update its value.
+      if ( obj1[p] !== null && typeof obj1[p] === 'object' && typeof obj2[p] === 'object' ) {
+        obj1[p] = mergeRecursive(obj1[p], obj2[p]);
+      }
+      else {
+        obj1[p] = obj2[p];
+      }
+    } catch(e) {
+      // Property in destination object not set; create it and set its value.
+      obj1[p] = obj2[p];
+    }
+  }
+
+  return obj1;
+}
+
+
+function createChart(canvas, CSV, comments) {
+  canvas.chart = null;
+  var ctx = canvas.getContext("2d");
+  var chartOptions = { responsive: true, maintainAspectRatio: false };
+  var chartData = { labels: null, datasets: []};
+  if ( comments !== null ) for (var j = 0; j < comments.length; j++ ){
+    comments[j] = comments[j].replace(/<!--/,'');
+    comments[j] = comments[j].replace(/-->/,'');
+    var config = parseJSON(comments[j]);
+    if ( config ) {
+      if ( config.data ) {
+        mergeRecursive( chartData, config.data);
+      }
+      if ( config.options ) {
+        mergeRecursive( chartOptions, config.options);
+      }
+    }
+  }
+
+  var lines = CSV.split('\n').filter(function(v){return v!==''});
+  // if labels are not defined, get them from first line
+  if ( chartData.labels === null && lines.length > 0 ) {
+    chartData.labels = lines[0].split(',');
+    chartData.labels.shift();
+    lines.shift();
+  }
+  // get data values
+  for (var j = 0; j < lines.length; j++ ){
+    if (chartData.datasets.length <= j) chartData.datasets[j] = {};
+    chartData.datasets[j].data =  lines[j].split(','); //.filter(function(v){return v!==''});
+    chartData.datasets[j].label = chartData.datasets[j].data[0];
+    chartData.datasets[j].data.shift();
+    for (var k = 0; k < chartData.datasets[j].data.length; k++ ){
+      chartData.datasets[j].data[k] = Number(chartData.datasets[j].data[k]);
+    }
+  }
+
+  // add chart options
+  var config = chartConfig[canvas.getAttribute("data-chart")];
+  if ( config ) {
+    for (var j = 0; j < chartData.datasets.length; j++ ){
+      for (var attrname in config) {
+        if ( !chartData.datasets[j][attrname]  ) {
+          chartData.datasets[j][attrname] = config[attrname][j%config[attrname].length];
+        }
+      }
+    }
+  }
+
+  canvas.chart = new Chart(ctx, { type: canvas.getAttribute("data-chart"), data: chartData, options: chartOptions });
+
+}
+
+function updateChart(canvas, idx, data) {
+  canvas.chart.data.datasets[idx].data = data;
+  recreateChart( canvas );
+}
+
+var initializeCharts = function(){
+  // Get all canvases
+  var canvases = document.querySelectorAll("canvas");
+  for (var i = 0; i < canvases.length; i++ ){
+    // check if canvas has data-chart attribute
+    if ( canvases[i].hasAttribute("data-chart") ){
+      var CSV = canvases[i].innerHTML.trim();
+      var comments = CSV.match(/<!--[\s\S]*?-->/g);
+      CSV = CSV.replace(/<!--[\s\S]*?-->/g,'').replace(/^\s*\n/gm, "")
+      if ( ! canvases[i].hasAttribute("data-chart-src") ) {
+        createChart(canvases[i], CSV, comments);
+      }
+      else {
+        var canvas = canvases[i];
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function() {
+          if (xhr.readyState === 4) {
+            createChart(canvas, xhr.responseText, comments);
+          }
+          else {
+            console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
+          }
+        };
+
+        xhr.open( 'GET', canvas.getAttribute("data-chart-src"), false );
+        try {
+          xhr.send();
+        }
+        catch ( error ) {
+          console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
+        }
+      }
+
+    }
+  }
+}
+
+function recreateChart(canvas) {
+  // clear data to redraw animation
+  var data = canvas.chart.data.datasets;
+  canvas.chart.data.datasets = [];
+  canvas.chart.update();
+  canvas.style.visibility = "hidden";
+  setTimeout( function(canvas, data) {
+    canvas.chart.data.datasets = data;
+    canvas.style.visibility = "visible";
+    canvas.chart.update();
+  }, 500, canvas, data); // wait for slide transition to re-add data and animation
+/*
+  var config = canvas.chart.config;
+  canvas.chart.destroy();
+  setTimeout( function() { canvas.chart = new Chart(canvas, config);}, 500); // wait for slide transition
+*/
+}
+
+// check if chart option is given or not
+var chartConfig = Reveal.getConfig().chart || {};
+
+// set global chart options
+var config = chartConfig.defaults;
+if ( config ) {
+  mergeRecursive(Chart.defaults, config);
+}
+
+Reveal.addEventListener('ready', function(){
+  initializeCharts();
+  Reveal.addEventListener('slidechanged', function(){
+    var canvases = Reveal.getCurrentSlide().querySelectorAll("canvas[data-chart]");
+    for (var i = 0; i < canvases.length; i++ ){
+      if ( canvases[i].chart  && canvases[i].chart.config.options.animation !== false ) {
+        recreateChart( canvases[i] );
+      }
+    }
+
+  });
+});
+
+this.update = updateChart;
+
+return this;
+};

assets/plugin/mermaid-theme.js

@@ -0,0 +1,35 @@
+ // Mermaid theme and functions
+ const pink = '#E6007A';
+ const purple = '#442299';
+ const lightPurple = '#6D3AEE';
+ const white = '#FFFFFF';
+
+ Reveal.addEventListener('ready', event => asyncMermaidRender(event));
+
+ async function asyncMermaidRender(event) {
+     var graphs = document.querySelectorAll(".mermaid");
+     graphs.forEach((item, index) => {
+         let graphCode = item.textContent.trim(); //trim() becase of gantt, class and git diagram
+         let mermaidDiv = document.createElement('div');
+         mermaidDiv.classList.add('mermaid');
+         mermaidDiv.setAttribute("data-processed", "true");
+
+         try {
+             // item.innerText ignores html elements added by revealjs highlight plugin.
+             mermaid.mermaidAPI.render('theGraph' + index, graphCode, function(svgCode) {
+                 mermaidDiv.innerHTML = svgCode;
+             });
+
+             let parentDiv = document.createElement('div');
+             parentDiv.appendChild(mermaidDiv);
+             parentDiv.style.width = '100%';
+             parentDiv.style.height = '100%';
+             item.parentNode.parentNode.insertBefore(parentDiv, item.parentNode);
+             item.parentNode.remove();
+         }
+         catch(err) {
+             console.log("Cannot render mermaid diagram " + index + "\n" + graphCode);
+             console.log(err.message);
+         }
+     })
+ }