xref: /plugin/diagrams/script.js (revision 7c8e3cfcf9e4ac195796cf008b9e3dd048acd4bd) 
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 diagram SVGs included in wiki pages
7    const $images = jQuery('object').filter('.diagrams-svg');
8
9    // collect image IDs with file extension
10    const imageIds = $images.map(function (key, image) {
11        return extractIdFromMediaUrl(image.data);
12    }).toArray();
13
14    let ajaxData = {};
15    ajaxData['call'] = 'plugin_diagrams';
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.data);
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.diagrams.createLink + '</a>')
57        .on('click', function (e) {
58            e.preventDefault();
59            e.stopPropagation();
60            newDiagramForm().dialog({
61                title: LANG.plugins.diagrams.createLink,
62                width: 600,
63                appendTo: '.dokuwiki',
64                modal: true,
65                open: function () {
66                    const nsText = isMMPage ? jQuery('.panelHeader h3 strong').text() : jQuery('#media__ns').text();
67                    const ns = cleanNs(nsText);
68                    jQuery('#diagrams__current-ns').text(ns);
69                },
70                close: function () {
71                    // do not reuse the dialog
72                    // https://stackoverflow.com/a/2864783
73                    jQuery(this).dialog('destroy').remove();
74                }
75            });
76        });
77    $mm_tree.prepend($createLink);
78
79    // attach edit button to detail view of SVG files
80    if (!isMMPage) return;
81    $mm_page.on('click', '.panel.filelist .panelContent a', function (e) {
82
83        // observe div.file for mutations
84        const $df = jQuery('div.file');
85        const targetNode = $df[0];
86
87        // observe the target node descendants
88        const config = {childList: true, subtree: true};
89
90        // add edit diagram  button to file actions
91        const addEditButton = function (mutationsList, observer) {
92            for (let mutation of mutationsList) {
93                // div.file has been filled with new content (detail view)
94                if (mutation.type === 'childList') {
95                    const $svgLink = jQuery('a.mf_svg');
96                    // only add buttons to SVG files
97                    if ($svgLink.length !== 0) {
98                        const $actionsList = jQuery('ul.actions');
99                        // disconnect now so we don't observe the mutation we are about to trigger
100                        observer.disconnect();
101                        // FIXME why do they multiply when non-svg link is clicked before?!!!
102                        if ($actionsList.find('button.diagrams-btn').length === 0) {
103                            $actionsList.append(editDiagramButton($svgLink.html()));
104                        }
105                    }
106                }
107            }
108        };
109
110        const observer = new MutationObserver(addEditButton);
111        observer.observe(targetNode, config);
112    });
113});
114
115// open links in diagrams in the browser window instead of SVG frame
116// TODO this will not work with DokuWiki master as of February 2021 (contentDocument is null)
117jQuery(window).on('load', function() {
118    jQuery('object.diagrams-svg').each( function() {
119        jQuery(this.contentDocument).find('svg').find('a').attr('target', '_parent');
120    });
121});
122