xref: /plugin/diagrams/script.js (revision d4a126523781a6e055b4073f42be916a567589d4) 
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_images';
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 id="plugin__diagrams-new" 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                    const $intro = jQuery('#diagrams__current-ns');
69                    $intro.text(ns);
70
71                    // check ACLs before displaying the form
72                    let ajaxData = {};
73                    ajaxData['call'] = 'plugin_diagrams_acl';
74                    ajaxData['ns'] = ns;
75                    jQuery.get(
76                        DOKU_BASE + 'lib/exe/ajax.php',
77                        ajaxData,
78                        function (result) {
79                            if (JSON.parse(result) !== true) {
80                                $intro.after('<br>' + LANG.plugins.diagrams.createForbidden);
81                                jQuery('#diagrams__create-filename').remove();
82                                jQuery('#diagrams__create').remove();
83                            }
84                        }
85                    );
86                },
87                close: function () {
88                    // do not reuse the dialog
89                    // https://stackoverflow.com/a/2864783
90                    jQuery(this).dialog('destroy').remove();
91                }
92            });
93        });
94    $mm_tree.prepend($createLink);
95
96    // attach edit button to detail view of SVG files
97    if (!isMMPage) return;
98    $mm_page.on('click', '.filelist .panelContent a', function (e) {
99
100        // observe div.file for mutations
101        const $df = jQuery('div.file');
102        const targetNode = $df[0];
103
104        // observe the target node descendants
105        const config = {childList: true, subtree: true};
106
107        // add edit diagram  button to file actions
108        const addEditButton = function (mutationsList, observer) {
109            for (let mutation of mutationsList) {
110                // div.file has been filled with new content (detail view)
111                if (mutation.type === 'childList') {
112                    const $svgLink = jQuery('a.mf_svg');
113                    // only add buttons to SVG files
114                    if ($svgLink.length !== 0) {
115                        const $actionsList = jQuery('ul.actions');
116                        // disconnect now so we don't observe the mutation we are about to trigger
117                        observer.disconnect();
118                        // FIXME why do they multiply when non-svg link is clicked before?!!!
119                        if ($actionsList.find('button.diagrams-btn').length === 0) {
120                            $actionsList.append(editDiagramButton($svgLink.html()));
121                        }
122                    }
123                }
124            }
125        };
126
127        const observer = new MutationObserver(addEditButton);
128        observer.observe(targetNode, config);
129    });
130});
131
132// open links in diagrams in the browser window instead of SVG frame
133// TODO this will not work with DokuWiki master as of February 2021 (contentDocument is null)
134jQuery(window).on('load', function() {
135    jQuery('object.diagrams-svg').each( function() {
136        jQuery(this.contentDocument).find('svg').find('a').attr('target', '_parent');
137    });
138});
139