xref: /plugin/diagrams/script.js (revision f6c13e98e60c64eeb9fd781b0fcaa025a579cddf) 
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     * Full-page media manager
47     */
48    const $mm_page = jQuery('#mediamanager__page');
49    if (!$mm_page.length) return;
50
51    const $mm_tree = jQuery("#media__tree");
52    $mm_tree.prepend(newDiagramForm());
53
54    // update diagram NS when clicking in media tree
55    $mm_tree.find('a.idx_dir').each(function (e) {
56        const $this = jQuery( this );
57        $this.on('click', function (e) {
58            e.preventDefault();
59
60            const $nsSpan = jQuery('#drawio__current-ns');
61            $nsSpan.text(extractNs(e.target));
62        });
63    });
64
65    // attach edit button to detail view of SVG files
66    $mm_page.on('click', '.panel.filelist .panelContent a', function (e) {
67
68        // observe div.file for mutations
69        const $df = jQuery('div.file');
70        const targetNode = $df[0];
71
72        // observe the target node descendants
73        const config = { childList: true, subtree: true };
74
75        // add edit diagram  button to file actions
76        const addEditButton = function(mutationsList, observer) {
77            for(let mutation of mutationsList) {
78                // div.file has been filled with new content (detail view)
79                if (mutation.type === 'childList') {
80                    const $svgLink = jQuery('a.mf_svg');
81                    // only add buttons to SVG files
82                    if ($svgLink.length !== 0) {
83                        const $actionsList = jQuery('ul.actions');
84                        // disconnect now so we don't observe the mutation we are about to trigger
85                        observer.disconnect();
86                        // FIXME why do they multiply when non-svg link is clicked before?!!!
87                        if ($actionsList.find('button.drawio-btn').length === 0) {
88                            $actionsList.append(editDiagramButton($svgLink.html()));
89                        }
90                    }
91                }
92            }
93        };
94
95        const observer = new MutationObserver(addEditButton);
96        observer.observe(targetNode, config);
97    });
98
99    // TODO pop-up media manager
100} );
101