586 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			586 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			HTML
		
	
	
	
| {{ $js := .Site.Data.lib.js }}
 | |
| {{ $css := .Site.Data.lib.css }}
 | |
| 
 | |
| {{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
 | |
| <script defer src="{{ $jquery.RelPermalink }}"></script>
 | |
| {{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
 | |
| <script defer src="{{ $clipboard.RelPermalink }}"></script>
 | |
| {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 | |
| <script defer src="{{ $enquire.RelPermalink }}"></script>
 | |
| {{ $prism := resources.Get "js/prism.min.js" | resources.Minify | resources.Fingerprint }}
 | |
| <script defer src="{{ $prism.RelPermalink }}"></script>
 | |
| {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
 | |
| <script defer src="{{ $zzo.RelPermalink }}"></script>
 | |
| 
 | |
| {{ if $.Param "enablePhotoSwipe" }}
 | |
|   {{ $fancyboxjs := resources.Get "js/jquery.fancybox.min.js" | resources.Fingerprint }}
 | |
|   <script defer src="{{ $fancyboxjs.RelPermalink }}"></script>
 | |
|   {{ $fancyboxcss := resources.Get "css/jquery.fancybox.min.css" | resources.Fingerprint }}
 | |
|   <link rel="stylesheet" href="{{ $fancyboxcss.RelPermalink }}">
 | |
| {{ end }}
 | |
| 
 | |
| {{ if $.Param "enableToc" }}
 | |
|   {{ $toc := resources.Get "js/jquery.toc.min.js" | resources.Fingerprint }}
 | |
|   <script defer src="{{ $toc.RelPermalink }}"></script>
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "mermaid" }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mermaid\"></script>" $js.mermaid.url $js.mermaid.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "katex" }}
 | |
|   {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" $css.katex.url $css.katex.sri | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"katex\"></script>" $js.katex.url $js.katex.sri | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"katex\"></script>" $js.katex_auto_render.url $js.katex_auto_render.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "flowchartjs" }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"raphael\"></script>" $js.raphael.url $js.raphael.sri | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"flowchartjs\"></script>" $js.flowchartjs.url $js.flowchartjs.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "mathjax" }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mathjax\"></script>" $js.mathjax.url $js.mathjax.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "msc" }}
 | |
|   {{ printf "<script defer src=\"%s\" crossorigin=\"anonymous\" title=\"webfont\"></script>" $js.webfont.url | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" crossorigin=\"anonymous\" title=\"snap_svg\"></script>" $js.snap_svg.url | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"lodash\"></script>" $js.lodash.url $js.lodash.sri | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"sequence_diagram\"></script>" $js.sequence_diagram.url $js.sequence_diagram.sri | safeHTML }}
 | |
|   {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" $css.sequence_diagram.url $css.sequence_diagram.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "chart" }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"chart\"></script>" $js.chart.url $js.chart.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "wavedrom" }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"wavedrom\"></script>" $js.wavedrom.url $js.wavedrom.sri | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"wavedrom_skin\"></script>" $js.wavedrom_skin.url $js.wavedrom_skin.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| {{ if in .Params.Libraries "viz" }}
 | |
|   {{ printf "<script defer src=\"%s\" crossorigin=\"anonymous\" title=\"viz\"></script>" $js.viz.url | safeHTML }}
 | |
|   {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"viz_render\"></script>" $js.viz_render.url $js.viz_render.sri | safeHTML }}
 | |
| {{ end }}
 | |
| 
 | |
| 
 | |
| <script>
 | |
|   window.onload = function() {
 | |
|     // highlight  
 | |
|     $("pre[class*='language-']").each(function () {
 | |
|       $(this).removeAttr('style');
 | |
|       var langName = $(this).attr('class').replace('chroma language-', '').toUpperCase();
 | |
|       $(this).closest('table').attr('data-content', langName);
 | |
|     });
 | |
| 
 | |
|     $('.lntable').each(function () {
 | |
|       if (!$(this).attr('data-content')) {
 | |
|         $(this).attr('data-content', 'Code');
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     // search
 | |
|     {{ $searchLanguages := .Site.Params.searchLanguages }}
 | |
|     var searchLanguages = JSON.parse({{ $searchLanguages | jsonify }});
 | |
|     {{ if .Site.IsMultiLingual }}
 | |
|         var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
 | |
|     {{ else }}
 | |
|         var baseurl = "{{.Site.BaseURL}}";
 | |
|     {{ end }}
 | |
| 
 | |
|     if (!searchLanguages) {
 | |
|       searchLanguages = ['en'];
 | |
|     }
 | |
| 
 | |
|     var lunrIndex = null;
 | |
|     var pagesIndex = null;
 | |
|     var searchResults = null;
 | |
|     var searchMenu = null;
 | |
| 
 | |
|     function endsWith(str, suffix) {
 | |
|       return str.indexOf(suffix, str.length - suffix.length) !== -1;
 | |
|     }
 | |
| 
 | |
|     function initLunr() {
 | |
|       if (!endsWith(baseurl, "/")) {
 | |
|         baseurl = baseurl + '/';
 | |
|       };
 | |
|       
 | |
|       $.getJSON(baseurl + "index.json")
 | |
|         .done(function (index) {
 | |
|           pagesIndex = index;
 | |
|           lunrIndex = lunr(function () {
 | |
|             this.use(lunr.multiLanguage(...searchLanguages));
 | |
|             this.ref('uri');
 | |
|             this.field('title');
 | |
|             this.field('description');
 | |
|             this.field('content');
 | |
|             //this.field('tags');
 | |
|             //this.field('series');
 | |
|             //this.field('categories');
 | |
| 
 | |
|             var that = this;
 | |
|             index.forEach(function (page) {
 | |
|               that.add(page);
 | |
|             });
 | |
|           });
 | |
|         })
 | |
|         .fail(function (jqxhr, textStatus, error) {
 | |
|           var err = textStatus + ", " + error;
 | |
|           console.error("Error getting Hugo index file:", err);
 | |
|         });
 | |
|     }
 | |
| 
 | |
|     function search(query) {
 | |
|       return lunrIndex.search(query).map(function (result) {
 | |
|         return pagesIndex.filter(function (page) {
 | |
|           return page.uri === result.ref;
 | |
|         })[0];
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     function renderSearchResults(results) {
 | |
|       searchResults = document.getElementById('search-results');
 | |
|       searchMenu = document.getElementById('search-menu');
 | |
|       searchResults.setAttribute('class', 'dropdown is-active');
 | |
| 
 | |
|       var content = document.createElement('div');
 | |
|       content.setAttribute('class', 'dropdown-content search-content');
 | |
| 
 | |
|       if (results.length > 0) {
 | |
|         results.forEach(function (result) {
 | |
|           var item = document.createElement('a');
 | |
|           item.setAttribute('href', result.uri);
 | |
|           item.setAttribute('class', 'dropdown-item');
 | |
|           item.innerHTML = `<div class="menu-item"><div class="menu-item__title">» ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
 | |
|           content.appendChild(item);
 | |
|         });
 | |
|       } else {
 | |
|         var item = document.createElement('span');
 | |
|         item.setAttribute('class', 'dropdown-item');
 | |
|         item.innerText = 'No results found';
 | |
|         content.appendChild(item);
 | |
|       }
 | |
| 
 | |
|       while (searchMenu.hasChildNodes()) {
 | |
|         searchMenu.removeChild(
 | |
|           searchMenu.lastChild
 | |
|         );
 | |
|       }
 | |
|       searchMenu.appendChild(content);
 | |
|     }
 | |
| 
 | |
|     function renderSearchResultsMobile(results) {
 | |
|       searchResults = document.getElementById('search-mobile-results');
 | |
| 
 | |
|       var content = document.createElement('div');
 | |
|       content.setAttribute('class', 'mobile-search__content');
 | |
| 
 | |
|       if (results.length > 0) {
 | |
|         results.forEach(function (result) {
 | |
|           var item = document.createElement('a');
 | |
|           item.setAttribute('href', result.uri);
 | |
|           item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">» ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
 | |
|           content.appendChild(item);
 | |
|         });
 | |
|       } else {
 | |
|         var item = document.createElement('span');
 | |
|         content.appendChild(item);
 | |
|       }
 | |
| 
 | |
|       $('#search-mobile-results').empty();
 | |
|       searchResults.appendChild(content);
 | |
|     }
 | |
| 
 | |
|     initLunr();
 | |
| 
 | |
|     $("#search").on('input', function (e) {
 | |
|       if (!e.target.value) {
 | |
|         $('#search-results').attr('class', 'dropdown');
 | |
|         return null;
 | |
|       }
 | |
| 
 | |
|       if ($(window).width() < 770) {
 | |
|         return null;
 | |
|       } 
 | |
| 
 | |
|       var results = search(e.target.value);
 | |
|       renderSearchResults(results);
 | |
|     });
 | |
| 
 | |
|     $('#search').on('blur', function () {
 | |
|       if ($(window).width() < 770) {
 | |
|         return null;
 | |
|       }
 | |
|       setTimeout(function () {
 | |
|         $('#search-results').attr('class', 'dropdown');
 | |
|       }, 100);
 | |
|     });
 | |
| 
 | |
|     $('#search').on('click', function (e) {
 | |
|       if ($(window).width() < 770) {
 | |
|         return null;
 | |
|       }
 | |
|       if (!e.target.value) {
 | |
|         $('#search-results').attr('class', 'dropdown');
 | |
|         return null;
 | |
|       }
 | |
|       var results = search(e.target.value);
 | |
|       renderSearchResults(results);
 | |
|     });
 | |
| 
 | |
|     $('#search').on('keydown', function (e) {
 | |
|       if ($(window).width() < 770) {
 | |
|         return null;
 | |
|       }
 | |
|       var items = $('#search-menu .dropdown-item');
 | |
|       var activeIndex = $('#search-menu .dropdown-item.is-active').index();
 | |
| 
 | |
|       items.removeClass('is-active');
 | |
|       if (e.key === 'ArrowDown') {
 | |
|         items.eq(activeIndex + 1).addClass('is-active');
 | |
|       } else if (e.key === 'ArrowUp') {
 | |
|         items.eq(activeIndex - 1).addClass('is-active');
 | |
|       } else if (e.key === 'Enter') {
 | |
|         var currentItemLink = items.eq(activeIndex).attr('href');
 | |
|         if (currentItemLink) {
 | |
|           location.href = currentItemLink;
 | |
|         }
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     $("#search-mobile").on('input', function(e) {
 | |
|       if (!e.target.value) {
 | |
|         $('#search-mobile-results').empty();
 | |
|         return null;
 | |
|       }
 | |
| 
 | |
|       var results = search(e.target.value);
 | |
|       renderSearchResultsMobile(results);
 | |
|     });
 | |
| 
 | |
|     var navbar = $('.navbar');
 | |
| 
 | |
|     // toc
 | |
|     {{ $enableToc := ($.Param "enableToc") }}
 | |
|     var enableToc = JSON.parse({{ $enableToc | jsonify }});
 | |
|     
 | |
|     if (enableToc) {
 | |
|       $("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" });
 | |
|       $('#toc > li').each(function () {
 | |
|         $(this).find('ul').css('display', 'none');
 | |
|       });
 | |
|       $('#toc a').each(function () {
 | |
|         $(this).click(function () {
 | |
|           navbar.removeClass('navbar--show');
 | |
|           navbar.removeClass('navbar--hide');
 | |
|           navbar.addClass('navbar--hide');
 | |
| 
 | |
|           $(".single__contents :header").each(function () {
 | |
|             $('.toc a').removeClass('active');
 | |
|           });
 | |
|           $(this).addClass('active');
 | |
| 
 | |
|           $('#toc > li').each(function () {
 | |
|             $(this).find('ul').css('display', 'none');
 | |
|           });
 | |
|           $(this).next().css('display', 'block');
 | |
|           $(this).parents('ul').css('display', 'block');
 | |
|         });
 | |
|       });
 | |
| 
 | |
|       // toc visibility
 | |
|       $("#toggle-toc").change(function () {
 | |
|         if (this.checked) {
 | |
|           $('.toc').fadeIn(200);
 | |
|         } else {
 | |
|           $('.toc').fadeOut(200);
 | |
|         }
 | |
|       });
 | |
|     }    
 | |
| 
 | |
|     // Add link button for every
 | |
|     var text, clip = new ClipboardJS('.anchor');
 | |
|     var headers = $('.single__contents :header').not('h6').not('h5');
 | |
|     headers.append(function (index, html) {
 | |
|       var element = $(this);
 | |
|       var url = encodeURI(document.location.origin + document.location.pathname);
 | |
|       var link = url + "#" + element[0].id;
 | |
|       return " <span class='anchor hide' data-clipboard-text='" + link + "' style='position: relative;'>" +
 | |
|         "<span style='font-size: 1rem; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%)'>🔗</span>" +
 | |
|         "</span>"
 | |
|         ;
 | |
|     });
 | |
|     headers.on('mouseenter', function () {
 | |
|       $(this).find('.anchor').attr('class', 'anchor');
 | |
|     });
 | |
|     headers.on('mouseleave', function () {
 | |
|       $(this).find('.anchor').attr('class', 'anchor hide');
 | |
|     });
 | |
| 
 | |
|     $(".anchor").on('mouseleave', function (e) {
 | |
|       $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
 | |
|     });
 | |
| 
 | |
|     clip.on('success', function (e) {
 | |
|       e.clearSelection();
 | |
|       $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
 | |
|     });
 | |
| 
 | |
|     // clipboard
 | |
|     var clipInit = false;
 | |
|     $('code').each(function () {
 | |
|       var code = $(this),
 | |
|         text = code.text();
 | |
| 
 | |
|       if (text.length > 30) {
 | |
|         if (!clipInit) {
 | |
|           var text, clip = new ClipboardJS('.copy-to-clipboard', {
 | |
|             text: function (trigger) {
 | |
|               text = $(trigger).prev('code').text();
 | |
|               return text.replace(/^\$\s/gm, '');
 | |
|             }
 | |
|           });
 | |
| 
 | |
|           var inPre;
 | |
|           clip.on('success', function (e) {
 | |
|             e.clearSelection();
 | |
|             inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
 | |
|             $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
 | |
|           });
 | |
| 
 | |
|           clip.on('error', function (e) {
 | |
|             inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
 | |
|             $(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
 | |
|             $(document).one('copy', function () {
 | |
|               $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
 | |
|             });
 | |
|           });
 | |
| 
 | |
|           clipInit = true;
 | |
|         }
 | |
| 
 | |
|         code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
 | |
|         code.next('.copy-to-clipboard').on('mouseleave', function () {
 | |
|           $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
 | |
|         });
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     // fancybox
 | |
|     {{ $enablePhotoSwipe := ($.Param "enablePhotoSwipe") }}
 | |
|     var enablePhotoSwipe = JSON.parse({{ $enablePhotoSwipe | jsonify }});
 | |
|     
 | |
|     if (enablePhotoSwipe) {
 | |
|       $('[data-fancybox="gallery"]').fancybox({
 | |
|         loop: true,
 | |
|         keyboard: true,
 | |
|         clickContent: true,
 | |
|         buttons: [
 | |
|           "zoom",
 | |
|           "slideShow",
 | |
|           "fullScreen",
 | |
|           "download",
 | |
|           "thumbs",
 | |
|           "close",
 | |
|         ],
 | |
|         caption: function (instance, item) {
 | |
|           return $(this).data('alt') || '';
 | |
|         }
 | |
|       });
 | |
| 
 | |
|       var imgElements = $('.single__contents:not(".single__contents--gallery")').find('img');
 | |
|       imgElements.each(function (i, v) {
 | |
|         $(this).css('cursor', 'pointer');
 | |
|         $(this).wrap(`<a data-fancybox="gallery" href="${$(this).attr('src')}" data-alt="${$(this).attr('alt')}" data-caption="${$(this).attr('alt')}"></a>`);
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // 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' });
 | |
|       }   
 | |
|       
 | |
|       // mermaid Fix Mermaid.js clash with Highlight.js.  
 | |
|       $('code.language-mermaid:odd').each(function() {
 | |
|         $(this).unwrap('pre');
 | |
|         $(this).replaceWith(function () {
 | |
|           return $("<div />").append($(this).contents()).addClass('mermaid').css('padding', '30px 8px 8px');
 | |
|         });
 | |
|       });
 | |
| 
 | |
|       $('code.language-mermaid').each(function (index, node) {
 | |
|         $(this).css('display', 'none');
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // katex
 | |
|     if (lib && lib.includes('katex')) {
 | |
|       var mathElements = document.getElementsByClassName('math');
 | |
|       var options = [
 | |
|         { left: "$$", right: "$$", display: true },
 | |
|         { left: "\\(", right: "\\)", display: false },
 | |
|         { left: "\\[", right: "\\]", display: true }
 | |
|       ];
 | |
| 
 | |
|       renderMathInElement(document.getElementsByClassName('single__contents')[0], options);
 | |
|     }
 | |
| 
 | |
|     // flowchart.js
 | |
|     if (lib && lib.includes('flowchartjs')) {
 | |
|       {{ $flowchartjs := .Site.Data.flowchartjs }}
 | |
|       var options = JSON.parse({{ $flowchartjs | jsonify }});
 | |
| 
 | |
|       $('code.language-flowchart:odd').each(function (index, node) {
 | |
|         var diagramContent = $(this).contents();
 | |
|         $(this).closest('table').attr('data-content', 'FLOWCHART');
 | |
|         $(this).unwrap('pre');
 | |
|         $(this).replaceWith(function () {
 | |
|           return $("<div id='diagram' data-content='flowchart'></div>").append(diagramContent.text()).addClass('diagram').css('padding', '30px 8px 8px').css('margin-top', '40px');
 | |
|         });      
 | |
| 
 | |
|         var diagram = flowchart.parse(diagramContent.text());      
 | |
|         $('#diagram').empty();
 | |
|         diagram.drawSVG('diagram', options);      
 | |
|       });    
 | |
| 
 | |
|       $('code.language-flowchart').each(function (index, node) {      
 | |
|         $(this).unwrap('pre');
 | |
|         $(this).replaceWith(function () {
 | |
|           return $("<div></div>");
 | |
|         });      
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // mathjax
 | |
|     if (lib && lib.includes('mathjax')) {
 | |
|       window.MathJax = {
 | |
|         tex: {
 | |
|           inlineMath: [['$', '$'], ['\\(', '\\)']],
 | |
|           displayMath: [['$$', '$$'], ['\\[', '\\]']],
 | |
|           processEscapes: false,
 | |
|           packages: { '[+]': ['noerrors'] }
 | |
|         },
 | |
|         loader: {
 | |
|           load: ['[tex]/noerrors']
 | |
|         },
 | |
|       };
 | |
|     }
 | |
| 
 | |
|     // js-sequence-diagram
 | |
|     if (lib && lib.includes('msc')) {
 | |
|       {{ $msc := .Site.Data.msc }}
 | |
|       var options = JSON.parse({{ $msc | jsonify }});    
 | |
| 
 | |
|       $('code.language-msc:odd').each(function() {
 | |
|         $(this).unwrap('pre');
 | |
|         $(this).replaceWith(function () {
 | |
|           return $("<div />").append($(this).contents()).addClass('diagram').css('padding', '30px 8px 8px').css('margin-top', '40px');
 | |
|         });
 | |
|       });
 | |
|       $(".diagram").sequenceDiagram(options);
 | |
| 
 | |
|       $('code.language-msc').each(function (index, node) {
 | |
|         $(this).css('display', 'none');
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // 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;
 | |
| 
 | |
|       $('code.language-chart:odd').each(function (index, node) {
 | |
|         $(this).unwrap('pre');
 | |
| 
 | |
|         node0 = document.createElement('canvas');
 | |
|         node0.height = 200;
 | |
|         node0.style.height = 200;
 | |
|         node0.id = 'myChart' + index;
 | |
|         source = JSON.parse(node.innerText);
 | |
|         node.parentNode.insertBefore(node0, node);
 | |
|         var ctx = document.getElementById('myChart' + index).getContext('2d');
 | |
|         var myChart = new Chart(ctx, source);
 | |
| 
 | |
|         $(this).closest('td').css('padding', '40px 8px 8px');
 | |
|         $(this).hide();
 | |
|       });
 | |
| 
 | |
|       $('code.language-chart:even').each(function (index, node) {
 | |
|         $(this).css('display', 'none');
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // wavedrom
 | |
|     if (lib && lib.includes('wavedrom')) {
 | |
|       $('code.language-wave:odd').each(function (index, node) {
 | |
|         $(this).unwrap('pre');
 | |
| 
 | |
|         node0 = document.createElement('div');
 | |
|         node0.id = 'WaveDrom_Display_' + index;
 | |
|         source = JSON.parse(node.innerText);
 | |
|         node.parentNode.insertBefore(node0, node);
 | |
| 
 | |
|         WaveDrom.RenderWaveForm(index, source, "WaveDrom_Display_");
 | |
| 
 | |
|         $(this).closest('td').css('padding', '40px 12px 12px 0');
 | |
|         $(this).hide();
 | |
|       });
 | |
| 
 | |
|       $('code.language-wave').each(function (index, node) {
 | |
|         $(this).css('display', 'none');
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // viz diagram
 | |
|     if (lib && lib.includes('viz')) {
 | |
|       var vizPrefix = "language-viz-";
 | |
|       $('pre[class*="language-viz-"]:odd').each(function (index, node) {
 | |
|         $(this).unwrap('pre');
 | |
| 
 | |
|         var engine;
 | |
|         node.getAttribute("class").split(" ").forEach(function (cls) {
 | |
|           if (cls.startsWith(vizPrefix)) {
 | |
|             engine = cls.substr(vizPrefix.length);
 | |
|           }
 | |
|         });
 | |
|         var viz = new Viz();
 | |
|         viz.renderSVGElement(node.innerText, { engine: engine })
 | |
|           .then(function (element) {
 | |
|             element.style.width = "100%";
 | |
|             node.parentNode.insertBefore(element, node);
 | |
|           });
 | |
|         $(this).closest('td').css('padding', '40px 0 16px 0');
 | |
|         $(this).hide();
 | |
|       });
 | |
|       $('code[class*="language-viz-"]:even').each(function (index, node) {
 | |
|         $(this).hide();
 | |
|       });
 | |
|     }
 | |
|   }
 | |
| </script>
 |