1jQuery( function() { 2 /* DOKUWIKI:include script/helpers.js */ 3 /* DOKUWIKI:include script/service.js */ 4 /* DOKUWIKI:include script/elements.js */ 5 6 // add diagram edit button to all SVGs included in wiki pages 7 const $images = jQuery( 'img, object' ).filter( '.media, .medialeft, .mediacenter, .mediaright' ); 8 9 // collect image IDs with file extension 10 const imageIds = $images.map(function (key, image) { 11 return extractIdFromMediaUrl(image.currentSrc); 12 }).toArray(); 13 14 let ajaxData = {}; 15 ajaxData['call'] = 'plugin_drawio'; 16 ajaxData['images'] = imageIds; 17 18 // callback to attach buttons to editable diagrams 19 const attachButtons = function (result) { 20 const diagrams = JSON.parse(result); 21 $images.each( function() { 22 const current = jQuery( this ); 23 // FIXME what is the difference? 24 const src = this.nodeName === 'OBJECT' ? current.attr( 'data' ) : current.attr( 'src' ); 25 26 const id = extractIdFromMediaUrl(src); 27 if (diagrams.includes(id)) { 28 let $editButton = editDiagramButton(id); 29 if( current.parent()[0].nodeName === 'A' ) { 30 current.parent().after( "<br>", $editButton ); 31 } else { 32 current.after( "<br>", $editButton ); 33 } 34 } 35 } ); 36 }; 37 38 // query backend about permissions and SVG properties before attaching edit buttons 39 jQuery.get( 40 DOKU_BASE + 'lib/exe/ajax.php', 41 ajaxData, 42 attachButtons 43 ); 44 45 /** 46 * Media manager 47 */ 48 const $mm_page = jQuery('#mediamanager__page'); 49 const $mm_popup = jQuery('#media__manager'); 50 if (!$mm_page.length && !$mm_popup.length) return; 51 52 const $mm_tree = jQuery("#media__tree"); 53 $mm_tree.prepend(newDiagramForm()); 54 55 // update diagram NS when clicking in media tree 56 $mm_tree.find('a.idx_dir').each(function (e) { 57 const $this = jQuery( this ); 58 $this.on('click', function (e) { 59 e.preventDefault(); 60 61 const $nsSpan = jQuery('#drawio__current-ns'); 62 $nsSpan.text(extractNs(e.target)); 63 }); 64 }); 65 66 // FIXME 67 if (!$mm_page.length) return; 68 // attach edit button to detail view of SVG files 69 $mm_page.on('click', '.panel.filelist .panelContent a', function (e) { 70 71 // observe div.file for mutations 72 const $df = jQuery('div.file'); 73 const targetNode = $df[0]; 74 75 // observe the target node descendants 76 const config = { childList: true, subtree: true }; 77 78 // add edit diagram button to file actions 79 const addEditButton = function(mutationsList, observer) { 80 for(let mutation of mutationsList) { 81 // div.file has been filled with new content (detail view) 82 if (mutation.type === 'childList') { 83 const $svgLink = jQuery('a.mf_svg'); 84 // only add buttons to SVG files 85 if ($svgLink.length !== 0) { 86 const $actionsList = jQuery('ul.actions'); 87 // disconnect now so we don't observe the mutation we are about to trigger 88 observer.disconnect(); 89 // FIXME why do they multiply when non-svg link is clicked before?!!! 90 if ($actionsList.find('button.drawio-btn').length === 0) { 91 $actionsList.append(editDiagramButton($svgLink.html())); 92 } 93 } 94 } 95 } 96 }; 97 98 const observer = new MutationObserver(addEditButton); 99 observer.observe(targetNode, config); 100 }); 101} ); 102