1//modeler 2/*DOKUWIKI:include_once vendor/bpmnio-js/bpmn-modeler.development.js*/ 3 4 5//---------------------------------------------------------------------------------------------------------------- 6//everything below will handle the viewer and modeler 7 8window.bpmn = []; 9 10jQuery(document).ready(function(){ 11 jQuery('a.media.mediafile.mf_bpmn').each(function(index) { 12 // START Insert html elements to display and edit 13 var $bpmn = jQuery(this); 14 var $canvas_view = jQuery('<div id="bpmn_canvas_'+ index +'_view" class="plugin_bpmnioeditor canvas" style="display:none" />').insertAfter($bpmn); 15 var $canvas_edit = jQuery('<div id="bpmn_canvas_'+ index +'_edit" class="plugin_bpmnioeditor canvas" style="display:none" />').insertAfter($canvas_view); 16 17 window.bpmn[index] = []; 18 window.bpmn[index]['name'] = getQuery($bpmn.attr('href'), 'media'); 19 //END Insert html elements to display and edit 20 21 //START Insert buttons to the current field 22 jQuery('<span style="float:right"> by <a href="https://peterfromearth.de">peterfromearth.de</a></span>').insertAfter($canvas_edit); 23 jQuery('<button id="bpmn_'+index+'_edit_button" class="bpmnEditButton" style="display:none" >'+LANG.plugins.bpmnioeditor.edit_bpmn+'</button>').insertAfter($canvas_edit); 24 jQuery('<button id="bpmn_'+index+'_save_button" class="bpmnSaveButton" style="margin-left:0.2%;display:none;">'+LANG.plugins.bpmnioeditor.save_bpmn+'</button>').insertAfter($canvas_edit); 25 jQuery('<button id="bpmn_'+index+'_view_button" class="bpmnViewButton" style="display:none" >'+LANG.plugins.bpmnioeditor.view_bpmn+'</button>').insertAfter($canvas_edit); 26 27 jQuery('#bpmn_'+index+'_edit_button').on('click', function(){ 28 toggleButtons(index); 29 }); 30 jQuery('#bpmn_'+index+'_view_button').on('click', function(){ 31 if(!confirm(LANG.plugins.bpmnioeditor.changes_not_saved)){ 32 return false; 33 } 34 toggleButtons(index); 35 jQuery('#bpmn_'+index+'_edit_button').show(); 36 jQuery('#bpmn_'+index+'_view').toggle(); 37 changeToView($bpmn, index); 38 }); 39 jQuery('#bpmn_'+index+'_save_button').on('click', function(){ 40 handleSaveButton($bpmn, index); 41 }); 42 //END Insert buttons to the current field 43 44 //START Check whether to display viewer 45 jQuery.ajax({ 46 url: DOKU_BASE + 'lib/exe/ajax.php', 47 method: 'POST', 48 data: { 49 call: 'bpmnio_permission', 50 name: window.bpmn[index]['name'], 51 type: 'view', 52 }, 53 success: function(data){ 54 var result = jQuery.parseJSON(data); 55 if(result.access == true){ 56 changeToView($bpmn, index); 57 } 58 } 59 }); 60 //END Check whether to display viewer 61 62 //START Check file existence 63 if($bpmn.hasClass('wikilink2')){ 64 window.bpmn[index]['type'] = 'create'; 65 } else { 66 $bpmn.hide(); 67 window.bpmn[index]['type'] = 'edit'; 68 } 69 // END Check fiile existence 70 71 //START Check whether to display edit button 72 jQuery.ajax({ 73 url: DOKU_BASE + 'lib/exe/ajax.php', 74 method: 'POST', 75 data: { 76 call: 'bpmnio_permission', 77 name: window.bpmn[index]['name'], 78 type: window.bpmn[index]['type'], 79 }, 80 success: function(data){ 81 var result = jQuery.parseJSON(data); 82 if(result.access == true){ 83 jQuery('#bpmn_'+index+'_edit_button').show(); 84 } else { 85 jQuery('#bpmn_'+index+'_edit_button').hide(); 86 } 87 } 88 }); 89 //END Check whether to display edit button 90 91 //START Handle edit button click 92 jQuery('#bpmn_'+index+'_edit_button').on('click', function(){ 93 jQuery.ajax({ 94 url: DOKU_BASE + 'lib/exe/ajax.php', 95 method: 'POST', 96 data: { 97 call: 'bpmnio_permission', 98 name: window.bpmn[index]['name'], 99 type: window.bpmn[index]['type'], 100 }, 101 success: function(data){ 102 var result = jQuery.parseJSON(data); 103 if(result.access == true){ 104 changeToEdit($bpmn, index); 105 jQuery($bpmn).unbind('click'); 106 jQuery($bpmn).on('click', function(){ 107 jQuery('#bpmn_'+index+'_edit_button').trigger('click'); 108 return false; 109 }); 110 } else { 111 jQuery('#bpmn_'+index+'_edit_button').hide(); 112 } 113 } 114 }); 115 }); 116 //END Handle edit button click 117 }); 118 119 function changeToEdit($bpmn, index){ 120 var BpmnJS = window.BpmnJS; 121 var modeler; 122 if(typeof window.bpmn[""+index]['edit'] == "undefined"){ 123 modeler = new BpmnJS({ 124 container: '#bpmn_canvas_'+index+'_edit' 125 }); 126 window.bpmn[""+index]['edit'] = modeler; 127 } else { 128 modeler = window.bpmn[""+index]['edit']; 129 } 130 131 jQuery('#bpmn_canvas_'+index+'_view').hide(); 132 133 jQuery.ajax({ 134 url:$bpmn.attr('href'), 135 dataType:'text', 136 cache: false, 137 success: function(xml) { 138 if(xml.length == 0){ 139 xml = getDefaultDataIfFileNotExisting(); 140 } 141 try { 142 modeler.importXML(xml); 143 modeler.get('canvas').zoom('fit-viewport'); 144 } catch (err) { 145 console.log(LANG.plugins.bpmnioeditor.error_loading_bpmn, err); 146 } 147 148 }, 149 error: function(){ 150 try { 151 const result = modeler.importXML(getDefaultDataIfFileNotExisting()); 152 } catch (err) { 153 console.log(LANG.plugins.bpmnioeditor.error_loading_bpmn, err); 154 } 155 } 156 }); 157 158 jQuery('#bpmn_canvas_'+index+'_edit').show(); 159 jQuery('#bpmn_'+index+'_edit_button').hide(); 160 } 161 162 function changeToView($bpmn, index){ 163 var BpmnJS = window.BpmnJS; 164 var viewer; 165 166 jQuery('#bpmn_canvas_'+index+'_view').show(); 167 168 if(typeof window.bpmn[""+index]['view'] == "undefined"){ 169 viewer = new BpmnJS.Viewer({ 170 container: '#bpmn_canvas_'+index+'_view', 171 zoomScroll: { enabled: false } 172 }); 173 window.bpmn[""+index]['view'] = viewer; 174 } else { 175 viewer = window.bpmn[""+index]['view']; 176 } 177 178 jQuery.ajax({ 179 url:$bpmn.attr('href'), 180 dataType:'text', 181 cache: false, 182 success: function(xml) { 183 if(xml.length > 0){ 184 185 try { 186 viewer.importXML(xml); 187 jQuery('#bpmn_canvas_'+index+'_view').show(); 188 viewer.get('canvas').zoom('fit-viewport'); 189 190 if($bpmn.hasClass('wikilink2')){ 191 $bpmn.hide(); 192 } 193 } catch (err) { 194 console.log(LANG.plugins.bpmnioeditor.error_loading_bpmn, err); 195 } 196 } 197 }, 198 error:function(){ 199 console.log(LANG.plugins.bpmnioeditor.error_loading_bpmn); 200 jQuery('#bpmn_canvas_'+index+'_view').hide(); 201 jQuery('#bpmn_canvas_'+index+'_view').removeClass('canvas'); 202 jQuery('#bpmn_'+index+'_edit_button').text(LANG.plugins.bpmnioeditor.create_bpmn); 203 jQuery('#bpmn_'+index+'_edit_button').show(); 204 }, 205 }); 206 jQuery('#bpmn_canvas_'+index+'_edit').hide(); 207 } 208 209 function toggleButtons(index){ 210 jQuery('#bpmn_canvas_'+index+'_edit').toggle(); 211 jQuery('#bpmn_canvas_'+index+'_view').toggle(); 212 jQuery('#bpmn_'+index+'_view_button').toggle(); 213 jQuery('#bpmn_'+index+'_save_button').toggle(); 214 jQuery('#bpmn_'+index+'_edit_button').toggle(); 215 var sidebar = jQuery('#dokuwiki__aside'); 216 if(sidebar.length !== 0){ 217 sidebar.css('position', 'relative'); 218 } 219 } 220 221 async function handleSaveButton($bpmn, index){ 222 //Reload page or simply save and reload changes. 223 var resultSave; 224 try { 225 resultSave = await window.bpmn[index]['edit'].saveXML({format: true}); 226 } catch (err) { 227 console.error(LANG.plugins.bpmnioeditor.error_saving_bpmn, err); 228 return; 229 } 230 231 //transmitt new xml to the server 232 jQuery.ajax({ 233 url: DOKU_BASE + 'lib/exe/ajax.php', 234 dataType: 'json', 235 method: 'POST', 236 data: { 237 call: 'bpmnio_editor', 238 name: window.bpmn[index]['name'], 239 newXML: resultSave.xml, 240 type: window.bpmn[index]['type'], 241 }, 242 success: function(data){ 243 console.info(LANG.plugins.bpmnioeditor.bpmn_successfully_saved); 244 const modeler = window.bpmn[""+index]['view']; 245 try { 246 const result = modeler.importXML(resultSave.xml); 247 modeler.get('canvas').zoom('fit-viewport'); 248 249 if(window.bpmn[index]['type'] == 'create'){ 250 location.reload(); 251 } 252 } catch (err) { 253 console.log(LANG.plugins.bpmnioeditor.error_loading_bpmn, err.message, err.warnings); 254 } 255 256 }, 257 error: function(data) { 258 console.error(data); 259 alert("error" + data); 260 }, 261 }); 262 263 jQuery('#bpmn_'+index+'_edit_button').text(LANG.plugins.bpmnioeditor.edit_bpmn); 264 toggleButtons(index); 265 jQuery('#bpmn_canvas_'+index+'_view').show(); 266 jQuery('#bpmn_canvas_'+index+'_edit').hide(); 267 jQuery('#bpmn_'+index+'_edit_button').show(); 268 } 269 270 function getDefaultDataIfFileNotExisting(){ 271 return ` 272<?xml version="1.0" encoding="UTF-8"?> 273<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_0h948s6" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="9.0.1"> 274 <bpmn:process id="Process_02ki0vd" isExecutable="false"> 275 <bpmn:startEvent id="StartEvent_1mnafvk" /> 276 </bpmn:process> 277 <bpmndi:BPMNDiagram id="BPMNDiagram_1"> 278 <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_02ki0vd"> 279 <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1mnafvk"> 280 <dc:Bounds x="156" y="81" width="36" height="36" /> 281 </bpmndi:BPMNShape> 282 </bpmndi:BPMNPlane> 283 </bpmndi:BPMNDiagram> 284</bpmn:definitions> 285`; 286 } 287 288 function getQuery(searchstring, q) { 289 return (searchstring.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1]; 290 } 291}); 292