xref: /plugin/diagrams/script.js (revision 2187ba2d67d973b796b1d75d36702d4eec520c34)
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    if( JSINFO['iseditor'] ) {
8        jQuery( 'img, object' ).filter( '.media, .medialeft, .mediacenter, .mediaright' ).each( function() {
9            const current = jQuery( this );
10            const src = this.nodeName === 'OBJECT' ? current.attr( 'data' ) : current.attr( 'src' );
11            const extension = src.split( '.' ).pop().toLowerCase();
12            if( extension === 'svg' ) {
13                let $editButton = editDiagramButton(src.split('media=')[1].split('&')[0]);
14                if( current.parent()[0].nodeName === 'A' ) {
15                    current.parent().after( "<br>", $editButton );
16                } else {
17                    current.after( "<br>", $editButton );
18                }
19            }
20        } );
21    }
22
23    /**
24     * Full-page media manager
25     */
26    const $mm_page = jQuery('#mediamanager__page');
27    if (!$mm_page.length) return;
28
29    const $mm_tree = jQuery("#media__tree");
30    $mm_tree.prepend(newDiagramForm());
31
32    // update diagram NS when clicking in media tree
33    $mm_tree.find('a.idx_dir').each(function (e) {
34        const $this = jQuery( this );
35        $this.on('click', function (e) {
36            e.preventDefault();
37
38            const $nsSpan = jQuery('#drawio__current-ns');
39            $nsSpan.text(extractNs(e.target));
40        });
41    });
42
43    // attach edit button to detail view of SVG files
44    $mm_page.on('click', '.panel.filelist .panelContent a', function (e) {
45
46        // observe div.file for mutations
47        const $df = jQuery('div.file');
48        const targetNode = $df[0];
49
50        // observe the target node descendants
51        const config = { childList: true, subtree: true };
52
53        // add edit diagram  button to file actions
54        const addEditButton = function(mutationsList, observer) {
55            for(let mutation of mutationsList) {
56                // div.file has been filled with new content (detail view)
57                if (mutation.type === 'childList') {
58                    const $svgLink = jQuery('a.mf_svg');
59                    // only add buttons to SVG files
60                    if ($svgLink.length !== 0) {
61                        const $actionsList = jQuery('ul.actions');
62                        // disconnect now so we don't observe the mutation we are about to trigger
63                        observer.disconnect();
64                        // FIXME why do they multiply when non-svg link is clicked before?!!!
65                        if ($actionsList.find('button.drawio-btn').length === 0) {
66                            $actionsList.append(editDiagramButton($svgLink.html()));
67                        }
68                    }
69                }
70            }
71        };
72
73        const observer = new MutationObserver(addEditButton);
74        observer.observe(targetNode, config);
75    });
76
77    // TODO pop-up media manager
78} );
79