608 lines
		
	
	
		
			23 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			608 lines
		
	
	
		
			23 KiB
		
	
	
	
		
			HTML
		
	
	
	
| {{ $js := .Site.Data.lib.js }}
 | |
| {{ $css := .Site.Data.lib.css }}
 | |
| 
 | |
| {{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
 | |
| <script defer src="{{ $clipboard.RelPermalink }}"></script>
 | |
| {{ $getParents := resources.Get "js/helper/getParents.js" | resources.Minify }}
 | |
| <script defer src="{{ $getParents.RelPermalink }}"></script>
 | |
| {{ $closest := resources.Get "js/helper/closest.js" | resources.Minify }}
 | |
| <script defer src="{{ $closest.RelPermalink }}"></script>
 | |
| {{ $prev := resources.Get "js/helper/prev.js" | resources.Minify }}
 | |
| <script defer src="{{ $prev.RelPermalink }}"></script>
 | |
| {{ $prop := resources.Get "js/helper/prop.js" | resources.Minify }}
 | |
| <script defer src="{{ $prop.RelPermalink }}"></script>
 | |
| {{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
 | |
| <script defer src="{{ $fadeinout.RelPermalink }}"></script>
 | |
| 
 | |
| {{ if in .Params.Libraries "mermaid" }}
 | |
|   <script defer src="{{ $js.mermaid.url }}" integrity="{{ $js.mermaid.sri }}" crossorigin="anonymous"></script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "katex" }}
 | |
|   <link rel="stylesheet" href="{{ $css.katex.url }}" integrity="{{$css.katex.sri }}" crossorigin="anonymous">
 | |
|   <script defer src="{{ $js.katex.url }}" integrity="{{ $js.katex.sri }}" crossorigin="anonymous"></script>
 | |
|   <script defer src="{{ $js.katex_auto_render.url }}" integrity="{{ $js.katex_auto_render.sri }}" crossorigin="anonymous"></script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "flowchartjs" }}
 | |
|   <script defer src="{{ $js.raphael.url }}" integrity="{{ $js.raphael.sri }}" crossorigin="anonymous"></script>
 | |
|   <script defer src="{{ $js.flowchartjs.url }}" integrity="{{ $js.flowchartjs.sri }}" crossorigin="anonymous"></script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "mathjax" }}
 | |
|   <script type="text/javascript" async src="{{ $js.mathjax.url }}?config=TeX-AMS-MML_HTMLorMML">
 | |
|     MathJax.Hub.Config({
 | |
|       tex2jax: {
 | |
|         inlineMath: [['$', '$'], ['\\(', '\\)']],
 | |
|         displayMath: [['$$', '$$']],
 | |
|         processEscapes: true,
 | |
|         processEnvironments: true,
 | |
|         skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
 | |
|         TeX: {
 | |
|           equationNumbers: { autoNumber: "AMS" },
 | |
|           extensions: ["AMSmath.js", "AMSsymbols.js"]
 | |
|         }
 | |
|       }
 | |
|     });
 | |
|     MathJax.Hub.Queue(function () {
 | |
|       // Fix <code> tags after MathJax finishes running. This is a
 | |
|       // hack to overcome a shortcoming of Markdown. Discussion at
 | |
|       // https://github.com/mojombo/jekyll/issues/199
 | |
|       var all = MathJax.Hub.getAllJax(), i;
 | |
|       for (i = 0; i < all.length; i += 1) {
 | |
|         all[i].SourceElement().parentNode.className += ' has-jax';
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     MathJax.Hub.Config({
 | |
|       // Autonumbering by mathjax
 | |
|       TeX: { equationNumbers: { autoNumber: "AMS" } }
 | |
|     });
 | |
|   </script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "msc" }}
 | |
|   <script defer src="{{ $js.webfont.url }}"></script>
 | |
|   <script defer src="{{ $js.snap_svg.url }}"></script>
 | |
|   <script defer src="{{ $js.lodash.url }}" integrity="{{ $js.lodash.sri }}" crossorigin="anonymous"></script>
 | |
|   <script defer src="{{ $js.sequence_diagram.url }}" integrity="{{ $js.sequence_diagram.sri }}" crossorigin="anonymous"></script>
 | |
|   <link rel="stylesheet" href="{{ $css.sequence_diagram.url }}" integrity="{{ $css.sequence_diagram.sri }}" crossorigin="anonymous">
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "chart" }}
 | |
|   <script defer src="{{ $js.chart.url }}" integrity="{{ $js.chart.sri }}" crossorigin="anonymous"></script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "wavedrom" }}
 | |
| <script defer src="{{ $js.wavedrom.url }}" integrity="{{ $js.wavedrom.sri }}" crossorigin="anonymous"></script>
 | |
| <script defer src="{{ $js.wavedrom_skin.url }}" integrity="{{ $js.wavedrom_skin.sri }}" crossorigin="anonymous"></script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "viz" }}
 | |
|   <script defer src="{{ $js.viz.url }}" crossorigin="anonymous"></script>
 | |
|   <script defer src="{{ $js.viz_render.url }}" integrity="{{ $js.viz_render.sri }}" crossorigin="anonymous"></script>
 | |
| {{ end }}
 | |
| 
 | |
| <script>
 | |
|   'use strict';
 | |
| 
 | |
|   window.onload = function() {
 | |
|     var navbar = document.querySelector('.navbar');
 | |
|     var singleContentsElem = document.querySelector('.single__contents');
 | |
| 
 | |
|     // ====================== markdown code block ======================
 | |
|     function wrap(el, wrapper) {
 | |
|       el.parentNode.insertBefore(wrapper, el);
 | |
|       wrapper.appendChild(el);
 | |
|     }
 | |
| 
 | |
|     (function () {
 | |
|       singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
 | |
|         var dataLang = elem.getAttribute('data-lang');
 | |
|         if (!dataLang) {
 | |
|           var dataLangWrapper = document.createElement('div');
 | |
|           dataLangWrapper.setAttribute('data-lang', 'Code');
 | |
|           dataLangWrapper.className = 'language-code';
 | |
|           wrap(elem.parentNode, dataLangWrapper);
 | |
|         }
 | |
|       });
 | |
|     })();
 | |
| 
 | |
|     var langCodeElem = document.querySelectorAll('.language-code');
 | |
|     langCodeElem ? langCodeElem.forEach(function (elem) {
 | |
|       var newElem = document.createElement('span');
 | |
|       newElem.className = 'copy-to-clipboard';
 | |
|       newElem.setAttribute('title', 'Copy to clipboard');
 | |
|       elem.append(newElem);
 | |
|     }) : null;
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ======================= busuanzi counter ========================
 | |
|     {{ $enableBusuanzi := .Site.Params.enableBusuanzi }}
 | |
|     {{ $busuanziPagePV := .Site.Params.busuanziPagePV }}
 | |
|     var enableBusuanzi = JSON.parse({{ $enableBusuanzi | jsonify }});
 | |
|     var busuanziPagePV = JSON.parse({{ $busuanziPagePV | jsonify }});
 | |
|     
 | |
|     if (enableBusuanzi && busuanziPagePV) {
 | |
|       var pagePvElem = document.querySelector('#busuanzi_value_page_pv');
 | |
|       pagePvElem.textContent = pagePvElem.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
 | |
|     }    
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ============================== toc ==============================
 | |
|     {{ $enableToc := ($.Param "enableToc") }}
 | |
|     {{ $toc := ($.Param "toc") }}
 | |
|     {{ $hideToc := ($.Param "hideToc") }}
 | |
|     {{ $tocFolding := $.Param "tocFolding" }}
 | |
|     
 | |
|     var enableToc = JSON.parse({{ $enableToc | jsonify }});
 | |
|     var toc = JSON.parse({{ $toc | jsonify }});
 | |
|     var hideToc = JSON.parse({{ $hideToc | jsonify }});
 | |
|     var tocFlexbox = document.querySelector('.toc__flexbox');
 | |
|     var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
 | |
|     var tocFolding = JSON.parse({{ $tocFolding | jsonify }});
 | |
|     
 | |
|     if ((enableToc || toc) && document.querySelector('.toc')) {
 | |
|       var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
 | |
| 
 | |
|       if (false === tocFolding) {
 | |
| 
 | |
|       } else {
 | |
|         tableOfContentsElem.querySelectorAll('ul') ?
 | |
|           tableOfContentsElem.querySelectorAll('ul').forEach(function (rootUl) {
 | |
|             rootUl.querySelectorAll('li').forEach(function (liElem) {
 | |
|               liElem.querySelectorAll('ul').forEach(function (ulElem) {
 | |
|                 ulElem.style.display = 'none';
 | |
|               });
 | |
|             });
 | |
|           }) : null;
 | |
|       }
 | |
| 
 | |
|       if (tableOfContentsElem) {
 | |
|         if (tableOfContentsElem.querySelectorAll('a').length > 0) {
 | |
|           tableOfContentsElem.querySelectorAll('a').forEach(function (elem) {
 | |
|             elem.addEventListener('click', function () {
 | |
|               var id = elem.getAttribute('id');
 | |
|               navbar.classList.remove('navbar--show');
 | |
|               navbar.classList.remove('navbar--hide');
 | |
|               navbar.classList.add('navbar--hide');
 | |
| 
 | |
|               document.querySelector('.toc').querySelectorAll('a').forEach(function (elem) {
 | |
|                 elem.classList.remove('active');
 | |
|               });
 | |
|               elem.classList.add('active');
 | |
| 
 | |
|               var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]');
 | |
|               if (curElem && curElem.nextElementSibling) {
 | |
|                 curElem.nextElementSibling.style.display = 'block';
 | |
|               }
 | |
|               if (curElem) {
 | |
|                 getParents(curElem, 'ul') ?
 | |
|                   getParents(curElem, 'ul').forEach(function (elem) {
 | |
|                     elem.style.display = 'block';
 | |
|                   }) : null;
 | |
|               }
 | |
|             });
 | |
|           });
 | |
|         } else {
 | |
|           if (tocFlexbox) {
 | |
|             tocFlexbox.setAttribute('data-position', '');
 | |
|             if (!tocFlexbox.classList.contains('hide')) {
 | |
|               tocFlexbox.classList.add('hide');
 | |
|             }
 | |
|           }
 | |
|           if (tocFlexboxOuter) {
 | |
|             tocFlexboxOuter.setAttribute('data-position', '');
 | |
|             if (!tocFlexboxOuter.classList.contains('hide')) {
 | |
|               tocFlexboxOuter.classList.add('hide');
 | |
|             }
 | |
|           }
 | |
|         }
 | |
|       }
 | |
| 
 | |
|       // toc visibility
 | |
|       var toggleTocElem = document.getElementById("toggle-toc");
 | |
|       var visibleTocElem = document.getElementById('visible-toc');
 | |
|       var tocElem = document.querySelector('.toc');
 | |
|       var mainElem = document.querySelector('main');
 | |
|       var sideElem = document.querySelector('side');
 | |
|       var tocFlexboxElem = document.querySelector('.toc__flexbox');
 | |
| 
 | |
|       toggleTocElem ? 
 | |
|       toggleTocElem.addEventListener('change', function(e) {
 | |
|         if (e.target.checked) {
 | |
|           if (tocElem) {
 | |
|             fadeIn(tocElem, 200);
 | |
|           }
 | |
|           if (tocFlexboxElem) {
 | |
|             tocFlexboxElem.setAttribute('data-position', 'fixed');
 | |
|           }
 | |
| 
 | |
|           if (mainElem) {
 | |
|             mainElem.classList.remove('main-main');
 | |
|             mainElem.classList.remove('main');
 | |
|             mainElem.classList.add('main-main');
 | |
|           }
 | |
|           if (sideElem) {
 | |
|             sideElem.classList.remove('main-side');
 | |
|           }
 | |
|         } else {
 | |
|           if (tocElem) {
 | |
|             fadeOut(tocElem, 200);
 | |
|           }
 | |
|           if (tocFlexboxElem) {
 | |
|             tocFlexboxElem.setAttribute('data-position', 'absolute');
 | |
|           }
 | |
| 
 | |
|           if (mainElem) {
 | |
|             mainElem.classList.remove('main-main');
 | |
|             mainElem.classList.remove('main');
 | |
|             mainElem.classList.add('main');
 | |
|           }
 | |
|           if (sideElem) {
 | |
|             sideElem.classList.remove('main-side');
 | |
|           }
 | |
|         }
 | |
|       }) : null;
 | |
| 
 | |
|       visibleTocElem ?
 | |
|       visibleTocElem.addEventListener('change', function(e) {
 | |
|         if (e.target.checked) {
 | |
|           if (tocElem) {
 | |
|             fadeIn(tocElem, 200);
 | |
|           }
 | |
|         } else {
 | |
|           if (tocElem) {
 | |
|             fadeOut(tocElem, 200);
 | |
|           }
 | |
|         }
 | |
|       }) : null;
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ======================== markdown table =========================
 | |
|     var tables = document.querySelectorAll('.single__contents > table');
 | |
|     for (let i = 0; i < tables.length; i++) {
 | |
|       var table = tables[i];
 | |
|       var wrapper = document.createElement('div');
 | |
|       wrapper.className = 'table-wrapper';
 | |
|       table.parentElement.replaceChild(wrapper, table);
 | |
|       wrapper.appendChild(table);
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ==================== add links in all titles ====================
 | |
|     var text, clip = new ClipboardJS('.anchor');
 | |
|     var headers = singleContentsElem.querySelectorAll("h1, h2, h3, h4");
 | |
| 
 | |
|     {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
 | |
|     var languagedir = JSON.parse({{ $languagedir | jsonify }});
 | |
| 
 | |
|     headers ? 
 | |
|     headers.forEach(function (elem) {
 | |
|       var url = encodeURI(document.location.origin + document.location.pathname);
 | |
|       var link = url + "#" + elem.getAttribute('id');
 | |
|       var newElemOuter = document.createElement('span');
 | |
|       newElemOuter.classList.add('anchor');
 | |
|       newElemOuter.classList.add('hide');
 | |
|       newElemOuter.setAttribute('data-clipboard-text', link);
 | |
|       newElemOuter.style.position = 'relative';
 | |
| 
 | |
|       var newElemInner = document.createElement('span');
 | |
|       newElemInner.style.fontSize = '1rem';
 | |
|       newElemInner.style.position = 'absolute';
 | |
|       newElemInner.style.top = '50%';
 | |
|       newElemInner.style.transform = 'translateY(-50%)';
 | |
|       newElemInner.innerText = "🔗";
 | |
| 
 | |
|       if (languagedir === "rtl") {
 | |
|         newElemInner.style.left = '-2rem';
 | |
|       } else {
 | |
|         newElemInner.style.right = '-2rem';
 | |
|       }
 | |
| 
 | |
|       newElemOuter.append(newElemInner);
 | |
|       elem.append(newElemOuter);
 | |
| 
 | |
|       elem.addEventListener('mouseenter', function() {
 | |
|         this.querySelector('.anchor').classList.remove('hide');
 | |
|       });
 | |
|       elem.addEventListener('mouseleave', function () {
 | |
|         this.querySelector('.anchor').classList.add('hide');
 | |
|       });
 | |
|     }) : null;
 | |
| 
 | |
|     document.querySelectorAll('.anchor').forEach(function(elem) {
 | |
|       elem.addEventListener('mouseleave', function() {
 | |
|         elem.setAttribute('aria-label', null);
 | |
|         elem.classList.remove('tooltipped');
 | |
|         elem.classList.remove('tooltipped-s');
 | |
|         elem.classList.remove('tooltipped-w');
 | |
|       });
 | |
|     });
 | |
| 
 | |
|     clip.on('success', function (e) {
 | |
|       e.clearSelection();
 | |
|       e.trigger.setAttribute('aria-label', 'Link copied to clipboard!');
 | |
|       e.trigger.classList.add('tooltipped');
 | |
|       e.trigger.classList.add('tooltipped-s');
 | |
|     });
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // =========================== clipboard ===========================
 | |
|     var clipInit = false;
 | |
|     var preChromaElem = document.querySelectorAll('pre.chroma');
 | |
|     var langCodeElem = document.querySelectorAll('.language-code');
 | |
|     var makeClipboard = function(elem) {
 | |
|       var code = elem,
 | |
|         text = elem.textContent;
 | |
|         
 | |
|       if (text.length > 15) {
 | |
|         if (!clipInit) {
 | |
|           var text, clip = new ClipboardJS('.copy-to-clipboard', {
 | |
|             text: function (trigger) {
 | |
|               var codeElem = prev(trigger).querySelectorAll('code');
 | |
|               if (codeElem.length > 1) {
 | |
|                 text = prev(trigger).querySelector('code[class^="language-"]').textContent;
 | |
|               } else {
 | |
|                 text = prev(trigger).querySelector('code').textContent;
 | |
|               }
 | |
| 
 | |
|               return text.replace(/^\$\s/gm, '');
 | |
|             }
 | |
|           });
 | |
| 
 | |
|           var inPre;
 | |
|           clip.on('success', function (e) {
 | |
|             e.clearSelection();
 | |
|             inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
 | |
|             e.trigger.setAttribute('aria-label', 'Copied to clipboard!');
 | |
|             e.trigger.classList.add('tooltipped');
 | |
|             e.trigger.classList.add('tooltipped-w');
 | |
|           });
 | |
| 
 | |
|           clip.on('error', function (e) {
 | |
|             inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
 | |
|             e.trigger.setAttribute('aria-label', e.action.toString());
 | |
|             e.trigger.classList.add('tooltipped');
 | |
|             e.trigger.classList.add('tooltipped-w');
 | |
|           });
 | |
| 
 | |
|           clipInit = true;
 | |
|         }
 | |
| 
 | |
|         var notAllowedClass = ['language-mermaid', 'language-viz', 'language-wave', 'language-chart', 'language-msc', 'language-flowchart'];
 | |
|         var isNotAllowedIncluded = false;
 | |
|         var curClassName = code.getAttribute('class');
 | |
| 
 | |
|         for (var i = 0; i < notAllowedClass.length; i++) {
 | |
|           if (curClassName && curClassName.startsWith(notAllowedClass[i])) {
 | |
|             isNotAllowedIncluded = true;
 | |
|             break;
 | |
|           }
 | |
|         }
 | |
| 
 | |
|         if (!isNotAllowedIncluded) {
 | |
|           if (curClassName) {
 | |
|             var newClipboardElem = document.createElement('span');
 | |
|             newClipboardElem.setAttribute('class', 'copy-to-clipboard');
 | |
|             newClipboardElem.setAttribute('title', 'Copy to clipboard');
 | |
|             closest(code, 'div.chroma').append(newClipboardElem);
 | |
|           }
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     preChromaElem ? 
 | |
|     preChromaElem.forEach(function(elem) {
 | |
|       elem.querySelectorAll('code').forEach(function(codeElem) {
 | |
|         makeClipboard(codeElem);
 | |
|       });
 | |
|     }) : null;
 | |
|     
 | |
|     langCodeElem ? 
 | |
|     langCodeElem.forEach(function(elem) {
 | |
|       elem.querySelectorAll('code').forEach(function (codeElem) {
 | |
|         makeClipboard(codeElem);
 | |
|       });
 | |
|     }) : null;
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ============================ mermaid ============================
 | |
|     {{ $lib := .Params.libraries }}
 | |
|     var lib = JSON.parse({{ $lib | jsonify }});
 | |
| 
 | |
|     if (lib && lib.includes('mermaid')) {
 | |
|       {{ $themeVariant := (index .Site.Params.themeOptions 0) }}
 | |
|       var themeVariant = localStorage.getItem('theme') || JSON.parse({{ $themeVariant | jsonify }});
 | |
| 
 | |
|       if (themeVariant === "dark" || themeVariant === "hacker") {
 | |
|         mermaid.initialize({ theme: 'dark' });
 | |
|       } else {
 | |
|         mermaid.initialize({ theme: 'default' });
 | |
|       }
 | |
|       
 | |
|       var mermaids = [];
 | |
|       [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
 | |
|       mermaids.forEach(function(elem) {
 | |
|         var elemParentNode = elem.parentNode;
 | |
| 
 | |
|         if (elemParentNode !== document.body) {
 | |
|           elemParentNode.parentNode.insertBefore(elem, elemParentNode);
 | |
|           elemParentNode.parentNode.removeChild(elemParentNode);
 | |
|         }
 | |
| 
 | |
|         var newElemWrapper = document.createElement('div');
 | |
|         newElemWrapper.classList.add('mermaid');
 | |
|         newElemWrapper.style.padding = '34px 4px 6px';
 | |
|         newElemWrapper.innerHTML = elem.innerHTML;
 | |
|         elem.replaceWith(newElemWrapper);
 | |
|       });
 | |
|     }
 | |
|     // =================================================================
 | |
|     
 | |
| 
 | |
|     // ============================= katex =============================
 | |
|     if (lib && lib.includes('katex')) {
 | |
|       var mathElements = document.getElementsByClassName('math');
 | |
|       var options = {
 | |
|         delimiters: [
 | |
|           { left: "$$", right: "$$", display: true },
 | |
|           { left: "\\[", right: "\\]", display: true },
 | |
|           { left: "$", right: "$", display: false },
 | |
|           { left: "\\(", right: "\\)", display: false }
 | |
|         ],
 | |
|       };
 | |
| 
 | |
|       renderMathInElement(document.querySelector('.single__contents'), options);
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ========================= flowchart.js ==========================
 | |
|     if (lib && lib.includes('flowchartjs')) {
 | |
|       {{ $flowchartjs := .Site.Data.flowchartjs }}
 | |
|       var options = JSON.parse({{ $flowchartjs | jsonify }});
 | |
|       var jsonContent = null;
 | |
| 
 | |
|       var flowchartPrefix = "language-flowchart";
 | |
|       var index = 0;
 | |
|       Array.prototype.forEach.call(document.querySelectorAll("[class^=" + flowchartPrefix + "]"), function(x){
 | |
|           x.style.display = 'none'
 | |
|           x.parentNode.style.backgroundColor = "transparent"
 | |
|           jsonContent = x.innerText;
 | |
| 
 | |
|           var node0 = document.createElement('div');
 | |
|           node0.id = 'flowchart' + index;
 | |
|           x.parentNode.insertBefore(node0, x);
 | |
| 
 | |
|           var diagram = flowchart.parse(jsonContent);
 | |
|           diagram.drawSVG("flowchart"+index, options);
 | |
| 
 | |
|           index +=1;
 | |
|       });      
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ============================ mathjax ============================
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ====================== js-sequence-diagram ======================
 | |
|     if (lib && lib.includes('msc')) {
 | |
|       {{ $msc := .Site.Data.msc }}
 | |
|       var options = JSON.parse({{ $msc | jsonify }});
 | |
|       var jsonContent = null;
 | |
| 
 | |
|       var index = 0;
 | |
|       var chartPrefix = "language-msc";
 | |
|       Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
 | |
|         x.style.display = 'none'
 | |
|         x.parentNode.style.backgroundColor = "transparent"
 | |
|         jsonContent = x.innerText;
 | |
|         var node0 = document.createElement('div');
 | |
|         node0.id = 'msc' + index;
 | |
|         x.parentNode.insertBefore(node0, x);
 | |
|         var diagram = Diagram.parse(jsonContent);
 | |
|         diagram.drawSVG("msc" + index, options);
 | |
|         index += 1;
 | |
|       });
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // =========================== chart.js ============================
 | |
|     if (lib && lib.includes('chart')) {
 | |
|       var borderColor = "#666";
 | |
|       var bgColor = "#ddd";
 | |
|       var borderWidth = 2;
 | |
| 
 | |
|       Chart.defaults.global.elements.rectangle.borderWidth = borderWidth;
 | |
|       Chart.defaults.global.elements.rectangle.borderColor = borderColor;
 | |
|       Chart.defaults.global.elements.rectangle.backgroundColor = bgColor;
 | |
| 
 | |
|       Chart.defaults.global.elements.line.borderWidth = borderWidth;
 | |
|       Chart.defaults.global.elements.line.borderColor = borderColor;
 | |
|       Chart.defaults.global.elements.line.backgroundColor = bgColor;
 | |
| 
 | |
|       Chart.defaults.global.elements.point.borderWidth = borderWidth;
 | |
|       Chart.defaults.global.elements.point.borderColor = borderColor;
 | |
|       Chart.defaults.global.elements.point.backgroundColor = bgColor;
 | |
| 
 | |
|       var chartPrefix = "language-chart";
 | |
|       var index = 0;
 | |
|       var jsonContent = null;
 | |
| 
 | |
|       Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
 | |
|         x.style.display = 'none'
 | |
|         x.parentNode.style.backgroundColor = "transparent"
 | |
|         jsonContent = x.innerText;
 | |
|         var node0 = document.createElement('canvas');
 | |
|         var source = null;
 | |
|         node0.height = 200;
 | |
|         node0.style.height = 200;
 | |
|         node0.id = 'myChart' + index;
 | |
|         source = JSON.parse(jsonContent);
 | |
|         x.parentNode.insertBefore(node0, x);
 | |
|         var ctx = document.getElementById('myChart' + index).getContext('2d');
 | |
|         var myChart = new Chart(ctx, source);
 | |
|         index += 1;
 | |
|       });            
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // =========================== wavedrom ============================
 | |
|     if (lib && lib.includes('wavedrom')) {
 | |
|       var wavePrefix = "language-wave";
 | |
|       var index = 0;
 | |
|       var jsonContent = null;
 | |
|       
 | |
|       Array.prototype.forEach.call(document.querySelectorAll("[class^=" + wavePrefix + "]"), function (x) {
 | |
|         x.style.display = 'none'
 | |
|         x.parentNode.style.backgroundColor = "transparent"
 | |
|         jsonContent = x.innerText;
 | |
|         var node0 = document.createElement('div');
 | |
|         var source = null;
 | |
|         node0.id = 'WaveDrom_Display_' + index;
 | |
|         source = JSON.parse(jsonContent);
 | |
|         x.parentNode.insertBefore(node0, x);
 | |
|         WaveDrom.RenderWaveForm(index, source, "WaveDrom_Display_");
 | |
|         index += 1;
 | |
|       });
 | |
|     }
 | |
|     // =================================================================
 | |
| 
 | |
| 
 | |
|     // ========================== viz diagram ==========================
 | |
|     if (lib && lib.includes('viz')) {
 | |
|       var vizPrefix = "language-viz-";
 | |
|       Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function (x) {
 | |
|         x.style.display = 'none'
 | |
|         x.parentNode.style.backgroundColor = "transparent"
 | |
|         var engine;
 | |
|         x.getAttribute("class").split(" ").forEach(function (cls) {
 | |
|           if (cls.startsWith(vizPrefix)) {
 | |
|             engine = cls.substr(vizPrefix.length);
 | |
|           }
 | |
|         });
 | |
|         var viz = new Viz();
 | |
|         viz.renderSVGElement(x.innerText, { engine: engine })
 | |
|           .then(function (element) {
 | |
|             element.style.width = "100%";
 | |
|             x.parentNode.insertBefore(element, x);
 | |
|           })
 | |
|       });
 | |
|     }
 | |
|     // =================================================================
 | |
|     
 | |
|   }
 | |
| </script>
 |