1// Embeded editor
2////var editor = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
3var editor= JSINFO['plugin_drawio']['url'] + '?embed=1&ui=atlas&spin=1&proto=json';
4var toolbarPossibleExtension=JSINFO['plugin_drawio']['toolbar_possible_extension'];
5var initial = null;
6var name = null;
7var imagePointer = null;
8
9function edit(image)
10{
11    // check auth
12    var imgPointer = image;
13    jQuery.post(
14        DOKU_BASE + 'lib/exe/ajax.php',
15        {
16            call: 'plugin_drawio',
17            imageName: imgPointer.getAttribute('id'),
18            action: 'get_auth'
19        },
20		function(data) {
21			if (data != 'true') return;
22			edit_cb(imgPointer);
23		}
24	);
25}
26
27function edit_cb(image)
28{
29    var zIndex = 999;
30    if(JSINFO && JSINFO['plugin_drawio']){
31        zIndex = JSINFO['plugin_drawio']['zIndex'];
32    }
33
34    imagePointer = image;
35    imageFormat = imagePointer.getAttribute('id').split('.');
36    if (imageFormat.length>2) {
37        alert('File name format or extension error: should be filename.extension (available extension :' + toolbarPossibleExtension + ')');
38        return;
39    } else if (imageFormat.length == 1) {
40        console.info('use default exention png');
41        imageFormat = "png";
42    } else {
43        imageFormat=imageFormat.pop();
44    }
45
46    var iframe = document.createElement('iframe');
47    iframe.setAttribute('frameborder', '0');
48    iframe.setAttribute('class', 'drawio');
49    iframe.setAttribute('style', 'z-index: ' + zIndex + ';');
50
51    var close = function()
52    {
53        window.removeEventListener('message', receive);
54        document.body.removeChild(iframe);
55    };
56
57    var draft = localStorage.getItem('.draft-' + name);
58
59    // Prefer the draft from browser cache
60    if(draft == null){
61        // Try to find on-disk stored draft file
62        jQuery.post(
63            DOKU_BASE + 'lib/exe/ajax.php',
64            {
65                call: 'plugin_drawio',
66                imageName: imagePointer.getAttribute('id'),
67                action: 'draft_get'
68            },
69            function(data) {
70                if (data.content != 'NaN') {
71
72                    // Set draft from received data
73                    draft = data;
74
75                    // Handle the discard - remove on disk
76                    if (!confirm("A version of this diagram from " + new Date(data.lastModified) + " is available. Would you like to continue editing?"))
77                    {
78                        // clean draft variable
79                        draft = null;
80
81                         // Remove all draft files
82                        jQuery.post(
83                            DOKU_BASE + 'lib/exe/ajax.php',
84                            {
85                                call: 'plugin_drawio',
86                                imageName: imagePointer.getAttribute('id'),
87                                action: 'draft_rm'
88                            }
89                        );
90                    }
91                }
92            }
93        );
94    }
95    else
96    {
97
98        draft = JSON.parse(draft);
99
100        if (!confirm("A version of this diagram from " + new Date(draft.lastModified) + " is available. Would you like to continue editing?"))
101        {
102            draft = null;
103        }
104    }
105
106    var receive = function(evt)
107    {
108        if (evt.data.length > 0)
109        {
110            var msg = JSON.parse(evt.data);
111			// wait for init msg
112            if (msg.event == 'init')
113            {
114                if (draft != null) // send draft
115                {
116                    iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
117                        autosave: 1, xml: draft.xml}), '*');
118                    iframe.contentWindow.postMessage(JSON.stringify({action: 'status',
119                        modified: true}), '*');
120                }
121                else // get local image
122                {
123                    if (imageFormat == 'png')
124                    {
125                        jQuery.post(
126                            DOKU_BASE + 'lib/exe/ajax.php',
127                            {
128                                call: 'plugin_drawio',
129                                imageName: imagePointer.getAttribute('id'),
130                                action: 'get_png'
131                            },
132                            function(data){
133                                iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
134                                    autosave: 1, xmlpng: data.content}), '*');
135                            }
136                        );
137                    }
138                    else if (imageFormat == 'svg')
139                    {
140                        jQuery.post(
141                            DOKU_BASE + 'lib/exe/ajax.php',
142                            {
143                                call: 'plugin_drawio',
144                                imageName: imagePointer.getAttribute('id'),
145                                action: 'get_svg'
146                            },
147                            function(data){
148                                //var svg = new XMLSerializer().serializeToString(data.content.firstChild);
149                                iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
150                                    autosave: 1, xml: data.content}), '*');
151                            }
152                        );
153                    }
154					else {
155                        console.log('error extension not compatible');
156                    }
157                }
158            }
159            else if (msg.event == 'export')
160            {
161                imgData=null;
162                if(msg.format == 'xmlpng')
163                {
164                    imgData = msg.data ;
165                    image.setAttribute('src', imgData);
166                    imgSrc=image.getAttribute('src');
167                    imgSrc=imgSrc.replace('plugins/drawio/blank-image.png','exe/fetch.php?media=');
168                }
169                else if (msg.format == 'svg')
170                {
171                    // Extracts SVG DOM from data URI to enable links
172                    imgData = atob(msg.data.substring(msg.data.indexOf(',') + 1));
173                    var tdElement = document.getElementById(image.id);
174                    var trElement=  tdElement.parentNode;
175                    var svgImg= document.createElement('svg');
176                    svgImg.setAttribute("class","mediacenter");
177                    svgImg.setAttribute("style","max-width:100%;cursor:pointer;");
178                    svgImg.setAttribute('onclick','edit(this);');
179                    svgImg.id=image.id;
180                    svgImg.innerHTML=imgData;
181                    trElement.replaceChild(svgImg,tdElement);
182                    trElement.style.textAlign = "center" ;
183                }
184
185                localStorage.setItem(name, JSON.stringify({lastModified: new Date(), data: imgData}));
186                localStorage.removeItem('.draft-' + name);
187                draft = null;
188				close();
189
190                // Save into dokuwiki
191                jQuery.post(
192                    DOKU_BASE + 'lib/exe/ajax.php',
193                    {
194                        call: 'plugin_drawio',
195                        imageName: imagePointer.getAttribute('id'),
196                        content: msg.data,
197                        action: 'save'
198                    }
199                );
200
201                // Remove all draft files
202                jQuery.post(
203                    DOKU_BASE + 'lib/exe/ajax.php',
204                    {
205                        call: 'plugin_drawio',
206                        imageName: imagePointer.getAttribute('id'),
207                        action: 'draft_rm'
208                    }
209                );
210
211                // Clean cache of this page
212                var url = new URL(window.location.href);
213                url.searchParams.set('purge', 'true');
214                jQuery.get(url);
215
216            }
217            else if (msg.event == 'autosave')
218            {
219                dr = JSON.stringify({lastModified: new Date(), xml: msg.xml});
220                localStorage.setItem('.draft-' + name, dr);
221
222                // Save on-disk
223                jQuery.post(
224                    DOKU_BASE + 'lib/exe/ajax.php',
225                    {
226                        call: 'plugin_drawio',
227                        imageName: imagePointer.getAttribute('id'),
228                        content: dr,
229                        action: 'draft_save'
230                    }
231                );
232            }
233            else if (msg.event == 'save')
234            {
235
236                if (imageFormat === 'png')
237                {
238                    iframe.contentWindow.postMessage(JSON.stringify({action: 'export',
239                    format: 'xmlpng', xml: msg.xml, spin: 'Updating page'}), '*');
240                    dr = JSON.stringify({lastModified: new Date(), xml: msg.xml});
241                    localStorage.setItem('.draft-' + name, dr);
242                }
243                else if (imageFormat ==='svg')
244                {
245                    iframe.contentWindow.postMessage(JSON.stringify({action: 'export',
246                    format: 'xmlsvg', xml: msg.xml, spin: 'Updating page'}), '*');
247                    dr = JSON.stringify({lastModified: new Date(), xml: msg.xml});
248                    localStorage.setItem('.draft-' + name, dr);
249                }
250                // Save on-disk
251                jQuery.post(
252                    DOKU_BASE + 'lib/exe/ajax.php',
253                    {
254                        call: 'plugin_drawio',
255                        imageName: imagePointer.getAttribute('id'),
256                        content: dr,
257                        action: 'draft_save'
258                    }
259                );
260            }
261            else if (msg.event == 'exit')
262            {
263                localStorage.removeItem('.draft-' + name);
264                draft = null;
265
266                // Remove all draft files
267                jQuery.post(
268                    DOKU_BASE + 'lib/exe/ajax.php',
269                    {
270                        call: 'plugin_drawio',
271                        imageName: imagePointer.getAttribute('id'),
272                        action: 'draft_rm'
273                    }
274                );
275
276                // Final close (dont know why though)
277                close();
278            }
279        }
280    };
281    window.addEventListener('message', receive);
282    iframe.setAttribute('src', editor);
283    document.body.appendChild(iframe);
284};
285
286
287// Toolbar menu items
288function getImageName(){
289    seq = JSINFO.id.split(":");
290    seq = seq.slice(0,seq.length-1);
291    seq.push("diagram1");
292    return seq.join(":");
293};
294
295 function generateToolBar(){
296     var listExt= [];
297     for (extension in toolbarPossibleExtension) {
298         listExt[extension] = {
299             type   : "format",
300             title  : "",
301             icon   : "../../plugins/drawio/icon_" + toolbarPossibleExtension[extension] + ".png" ,
302             open   : "{{drawio>" + getImageName() + "." + toolbarPossibleExtension[extension] + "}}",
303             close  : ""
304            }
305     }
306     return listExt;
307 };
308
309
310if (typeof window.toolbar !== 'undefined') {
311    // toobar definition in case of multi extension defined in conf
312    if (toolbarPossibleExtension.length >1 ) {
313        toolbar[toolbar.length] = {
314            type: "picker",
315            title: "",
316            icon: "../../plugins/drawio/icon.png",
317            key: "",
318            class  : "pk_hl",
319            block  : true,
320            list: generateToolBar(),
321            close: ""
322    };
323
324    } else if (toolbarPossibleExtension.length = 1) {
325        // toobar definition in case of only one extension defined
326        if (toolbarPossibleExtension[0] == ""){
327            toolbar[toolbar.length] = {
328                type: "format",
329                title: "",
330                icon: "../../plugins/drawio/icon.png",
331                key: "",
332                open: "{{drawio>" + getImageName() + "}}",
333                close: ""
334            };
335        } else {
336            // toobar definition in case of none extension defined
337            toolbar[toolbar.length] = {
338                type: "format",
339                title: "",
340                icon: "../../plugins/drawio/icon.png",
341                key: "",
342                open: "{{drawio>" + getImageName() + "." + toolbarPossibleExtension[0] + "}}",
343                close: ""
344            };
345        }
346
347    }
348};
349