talos

1
{{with .Site.Params.drawio}}
2
{{if .enable }}
3
(function () {
4
  var shade;
5
  var iframe;
6

7
  var insertFrame = function () {
8
    shade = document.createElement('div');
9
    shade.classList.add('drawioframe');
10
    iframe = document.createElement('iframe');
11
    shade.appendChild(iframe);
12
    document.body.appendChild(shade);
13
  }
14

15
  var closeFrame = function () {
16
    if (shade) {
17
      document.body.removeChild(shade);
18
      shade = undefined;
19
      iframe = undefined;
20
    }
21
  }
22

23
  var imghandler = function (img, imgdata) {
24
    var url = {{ .drawio_server | default "https://embed.diagrams.net/" | jsonify }};
25
    url += '?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json&saveAndEdit=1&noSaveBtn=1';
26

27
    var wrapper = document.createElement('div');
28
    wrapper.classList.add('drawio');
29
    img.parentNode.insertBefore(wrapper, img);
30
    wrapper.appendChild(img);
31

32
    var btn = document.createElement('button');
33
    btn.classList.add('drawiobtn');
34
    btn.insertAdjacentHTML('beforeend', '<i class="fas fa-edit"></i>');
35
    wrapper.appendChild(btn);
36

37
    btn.addEventListener('click', function (evt) {
38
      if (iframe) return;
39
      insertFrame();
40
      var handler = function (evt) {
41
        var wind = iframe.contentWindow;
42
        if (evt.data.length > 0 && evt.source == wind) {
43
          var msg = JSON.parse(evt.data);
44

45
          if (msg.event == 'init') {
46
            wind.postMessage(JSON.stringify({action: 'load', xml: imgdata}), '*');
47

48
          } else if (msg.event == 'save') {
49
            var fmt = imgdata.indexOf('data:image/png') == 0 ? 'xmlpng' : 'xmlsvg';
50
            wind.postMessage(JSON.stringify({action: 'export', format: fmt}), '*');
51

52
          } else if (msg.event == 'export') {
53
            const fn = img.src.replace(/^.*?([^/]+)$/, '$1');
54
            const dl = document.createElement('a');
55
            dl.setAttribute('href', msg.data);
56
            dl.setAttribute('download', fn);
57
            document.body.appendChild(dl);
58
            dl.click();
59
            dl.parentNode.removeChild(dl);
60
          }
61

62
          if (msg.event == 'exit' || msg.event == 'export') {
63
            window.removeEventListener('message', handler);
64
            closeFrame();
65
          }
66
        }
67
      };
68

69
      window.addEventListener('message', handler);
70
      iframe.setAttribute('src', url);
71
    });
72
  };
73

74

75
document.addEventListener('DOMContentLoaded', function () {
76
  // find all the png and svg images that may have embedded xml diagrams
77
  for (const el of document.getElementsByTagName('img')) {
78
    const img = el;
79
    const src = img.getAttribute('src');
80
    if (!src.endsWith('.svg') && !src.endsWith('.png')) {
81
      continue;
82
    }
83

84
    const xhr = new XMLHttpRequest();
85
    xhr.responseType = 'blob';
86
    xhr.open("GET", src);
87
    xhr.addEventListener("load", function () {
88
      const fr = new FileReader();
89
      fr.addEventListener('load', function () {
90
        if (fr.result.indexOf('mxfile') != -1) {
91
          const fr = new FileReader();
92
          fr.addEventListener('load', function () {
93
            const imgdata = fr.result;
94
            imghandler(img, imgdata);
95
          });
96
          fr.readAsDataURL(xhr.response);
97
        }
98
      });
99
      fr.readAsBinaryString(xhr.response);
100
    });
101
    xhr.send();
102
  };
103
});
104
}());
105
{{end}}
106
{{end}}
107