xref: /plugin/diagrams/script.js (revision c8141226372283dd4b9935ce562ddabc9d4bc9ec)
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').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.src);
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 id = extractIdFromMediaUrl(this.src);
23            const $current = jQuery(this);
24            if (diagrams.includes(id)) {
25                let $editButton = editDiagramButton(id);
26                if ($current.parent()[0].nodeName === 'A') {
27                    $current.parent().after("<br>", $editButton);
28                } else {
29                    $current.after("<br>", $editButton);
30                }
31            }
32        });
33    };
34
35    // query backend about permissions and SVG properties before attaching edit buttons
36    jQuery.get(
37        DOKU_BASE + 'lib/exe/ajax.php',
38        ajaxData,
39        attachButtons
40    );
41
42    /**
43     * Media manager
44     * FIXME this should be moved to a separate file
45     */
46
47    /* are we in media manager context? */
48    const $mm_page = jQuery('#mediamanager__page');
49    const $mm_popup = jQuery('#media__manager');
50    const isMMPage = $mm_page.length > 0;
51    const isMMPopup = $mm_popup.length > 0;
52    if (!isMMPage && !isMMPopup) return;
53
54    /* in the namespace tree add a link to create a new diagram */
55    const $mm_tree = jQuery("#media__tree");
56    const $createLink = jQuery('<a href="#">' + LANG.plugins.drawio.createLink + '</a>').on('click', function (e) {
57        e.preventDefault();
58        newDiagramForm().dialog({
59            title: LANG.plugins.drawio.createLink,
60            width: 600,
61            appendTo: '.dokuwiki',
62            modal: true,
63            open: function () {
64                const ns = isMMPage ? jQuery('.panelHeader h3 strong').html() : jQuery('#media__ns').html();
65                jQuery('#drawio__current-ns').text(ns);
66            }
67        });
68    });
69    $mm_tree.prepend($createLink);
70
71    // attach edit button to detail view of SVG files
72    if (!isMMPage) return;
73    $mm_page.on('click', '.panel.filelist .panelContent a', function (e) {
74
75        // observe div.file for mutations
76        const $df = jQuery('div.file');
77        const targetNode = $df[0];
78
79        // observe the target node descendants
80        const config = {childList: true, subtree: true};
81
82        // add edit diagram  button to file actions
83        const addEditButton = function (mutationsList, observer) {
84            for (let mutation of mutationsList) {
85                // div.file has been filled with new content (detail view)
86                if (mutation.type === 'childList') {
87                    const $svgLink = jQuery('a.mf_svg');
88                    // only add buttons to SVG files
89                    if ($svgLink.length !== 0) {
90                        const $actionsList = jQuery('ul.actions');
91                        // disconnect now so we don't observe the mutation we are about to trigger
92                        observer.disconnect();
93                        // FIXME why do they multiply when non-svg link is clicked before?!!!
94                        if ($actionsList.find('button.drawio-btn').length === 0) {
95                            $actionsList.append(editDiagramButton($svgLink.html()));
96                        }
97                    }
98                }
99            }
100        };
101
102        const observer = new MutationObserver(addEditButton);
103        observer.observe(targetNode, config);
104    });
105});
106