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