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