commons_mermaidjs.html
1 <#-- Mermaid Js macro integration :
2 # - Call @importMermaidJs first
3 # - create a DIV like <div class="mermaid" >graph TD (...)</div>
4 # - Call @initMermaidJs
5 -->
6 <#macro importMermaidJs zoom=true>
7 <#if mermaidIsLoaded?? && mermaidIsLoaded>
8 <#else>
9 <script src="js/admin/lib/mermaid/mermaid.min.js"></script>
10 <#if zoom>
11 <script src="js/admin/lib/mermaid/svg-pan-zoom.js"></script>
12 <style>
13 #pane-graph .mermaid{
14 animation: mermaid-in .5s ease-in-out .5s forwards;
15 }
16
17 @keyframes mermaid-in {
18 0% {
19 filter: blur(4px);
20 opacity: 0;
21 }
22 100% {
23 filter: blur(0px);
24 opacity: 1;
25 }
26 }
27 </style>
28 </#if>
29 </#if>
30 <#assign mermaidIsLoaded = true />
31 </#macro>
32 <#macro initMermaidJs zoom=true>
33 <#if mermaidIsInitialized?? && mermaidIsInitialized>
34 <#else>
35 <style>
36 [id*="mermaid-"]:hover{
37 cursor: grab;
38 }
39 </style>
40 <script>
41 // Zoom management
42 window.onload = function() {
43 var config = {
44 startOnLoad:true,
45 securityLevel:'loose',
46 };
47 mermaid.initialize(config);
48 <#if zoom>
49 window.mermaidZoom = svgPanZoom('[id*="mermaid-"]', {
50 zoomEnabled: true,
51 controlIconsEnabled: false,
52 fit: true,
53 // center: true,
54 });
55 document.getElementById('zoom-in').addEventListener('click', function(ev){
56 ev.preventDefault()
57 mermaidZoom.zoomIn()
58 });
59
60 document.getElementById('zoom-out').addEventListener('click', function(ev){
61 ev.preventDefault()
62 mermaidZoom.zoomOut()
63 });
64
65 document.getElementById('reset').addEventListener('click', function(ev){
66 ev.preventDefault()
67 mermaidZoom.resetZoom()
68 });
69 </#if>
70 };
71
72 // This SVG data is copied from
73 // A data URL can also be generated from an existing SVG element.
74 function svgDataURL(svg) {
75 const svgAsXML = (new XMLSerializer).serializeToString(svg);
76 return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
77 }
78
79 $( function(){
80 $('.download-button').click( function(e){
81 const svg = document.querySelector('.mermaid > svg');
82 $(this).attr( "href", svgDataURL( svg ));
83 const fileName=document.querySelector('[name="name"]').value;
84 $(this).attr("download", fileName );
85 })
86 })
87 </script>
88 </#if>
89 <#assign mermaidIsInitialized = true />
90 </#macro>
91 <#macro mermaidGraph zoomControls=true zoomPos='top' zoomAlign='end' download=true>
92 <#local align='justify-content-${zoomAlign} is-justify-content-${zoomAlign}' />
93 <#if zoomPos='top'>
94 <@div class='d-flex is-flex ${align} '>
95 <#if zoomControls>
96 <@mermaidToolBar />
97 </#if>
98 <#if download>
99 <a href="" class="btn btn-info btn-sm download-button" title="Download as SVG file." download="test.svg" target="_blank">
100 <i class="fas fa-download"></i>
101 </a>
102 </#if>
103 </@div>
104 </#if>
105 <@div class='mermaid' params=' style="opacity:0"'>${mdgraph}</@div>
106 <#if zoomPos !='top'>
107 <@div class='d-flex is-flex ${align}'>
108 <#if zoomControls >
109 <@mermaidToolBar />
110 </#if>
111 <#if download>
112 <a href="" class="download-button" title="Download as SVG file." download>
113 <i class="fas fa-download"></i>
114 </a>
115 </#if>
116 </@div>
117 </#if>
118 </#macro>
119 <#macro mermaidToolBar>
120 <@button color='default' id='zoom-in' title='#i18n{mermaidjs.zoomIn}' buttonIcon='search-minus' />
121 <@button color='default' id='zoom-out' title='#i18n{mermaidjs.zoomOut}' buttonIcon='search-plus' />
122 <@button color='default' id='reset' title='#i18n{mermaidjs.reset}' buttonIcon='search' />
123 </#macro>
124 <#macro mermaidHelp zoom=true download=true>
125 <@box class='text-white bg-info'>
126 <@boxHeader title='#i18n{mermaidjs.help.title}' />
127 <@boxBody class='text-dark'>
128 <@ul>
129 #i18n{mermaidjs.help.info}
130 <#if zoom>#i18n{mermaidjs.help.zoom}</#if>
131 <#if download>#i18n{mermaidjs.help.download}</#if>
132 </@ul>
133 </@boxBody>
134 </@box>
135 </#macro>