Create diagrams in a modal dialog

Author: annda

lang/de/lang.php

@@ -3,6 +3,7 @@
 $lang['missingConfig'] = 'Fehlende Konfiguration für SVG Diagramme: Bitte "svg image/svg+xml" in mime.local.conf ergänzen';
 
 $lang['js']['createButton'] = 'Erstellen';
+$lang['js']['createLink'] = 'Diagramm erstellen';
 $lang['js']['createIntro'] = 'draw.io Diagramm im aktuellen Namensraum erstellen:';
 $lang['js']['editButton'] = 'Diagramm editieren';
 $lang['js']['errorInvalidId'] = 'Name ist leer oder enthält ungültige Zeichen!';

lang/en/lang.php

@@ -3,6 +3,7 @@
 $lang['missingConfig'] = 'Missing configuration for SVG diagrams: Remeber to add "svg image/svg+xml" to mime.local.conf';
 
 $lang['js']['createButton'] = 'Create';
+$lang['js']['createLink'] = 'Create a diagram';
 $lang['js']['createIntro'] = 'Create draw.io diagram in current namespace';
 $lang['js']['editButton'] = 'Edit diagram';
 $lang['js']['errorInvalidId'] = 'Name is empty or contains invalid characters!';

script.js

@@ -44,28 +44,35 @@ jQuery( function() {
 
     /**
      * Media manager
+     * FIXME this should be moved to a separate file
      */
+
+    /* are we in media manager context? */
     const $mm_page = jQuery('#mediamanager__page');
     const $mm_popup = jQuery('#media__manager');
-    if (!$mm_page.length && !$mm_popup.length) return;
+    const isMMPage = $mm_page.length > 0;
+    const isMMPopup = $mm_popup.length > 0;
+    if (!isMMPage && !isMMPopup) return;
 
+    /* in the namespace tree add a link to create a new diagram */
     const $mm_tree = jQuery("#media__tree");
-    $mm_tree.prepend(newDiagramForm());
-
-    // update diagram NS when clicking in media tree
-    $mm_tree.find('a.idx_dir').each(function (e) {
-        const $this = jQuery( this );
-        $this.on('click', function (e) {
-            e.preventDefault();
-
-            const $nsSpan = jQuery('#drawio__current-ns');
-            $nsSpan.text(extractNs(e.target));
+    const $createLink = jQuery('<a href="#">' + LANG.plugins.drawio.createLink + '</a>').on('click', function (e) {
+        e.preventDefault();
+        newDiagramForm().dialog({
+            title: LANG.plugins.drawio.createLink,
+            width: 600,
+            appendTo: '.dokuwiki',
+            modal: true,
+            open: () => {
+                const ns = isMMPage ? jQuery('.panelHeader h3 strong').html() : jQuery('#media__ns').html();
+                jQuery('#drawio__current-ns').text(ns);
+            },
         });
     });
+    $mm_tree.prepend($createLink);
 
-    // FIXME
-    if (!$mm_page.length) return;
     // attach edit button to detail view of SVG files
+    if (!isMMPage) return;
     $mm_page.on('click', '.panel.filelist .panelContent a', function (e) {
 
         // observe div.file for mutations

script/elements.js

@@ -4,11 +4,9 @@
  * @returns {jQuery|HTMLElement}
  */
 function newDiagramForm() {
-    const currentNs = extractNs(location.href);
     const $createForm = jQuery(
-        '<form>' +
+        '<form style="padding: 0.5em;">' +
         '<div>' + LANG.plugins.drawio.createIntro + ' <strong><span id="drawio__current-ns">' +
-        currentNs +
         '</strong></span></div>' +
         '<input type="text" name="drawio-create-filename" id="drawio__create-filename" />' +
         '<button id="drawio__create">' + LANG.plugins.drawio.createButton + '</button>' +
@@ -28,16 +26,7 @@ function newDiagramForm() {
 function createDiagram(event) {
     event.preventDefault();
 
-    let href;
-    // get namespace selected in ns tree
-    const $selectedNSLink = jQuery('.idx_dir.selected');
-    if ($selectedNSLink && $selectedNSLink.length > 0) {
-        href = $selectedNSLink.attr('href');
-    } else {
-        // FIXME url rewriting?
-        href = location.href;
-    }
-    const ns = extractNs(href);
+    const ns = jQuery('#drawio__current-ns').html();
     const id = jQuery('#drawio__create-filename').val();
 
     if (!validId(id)) {

script/helpers.js

@@ -39,20 +39,6 @@ function splitFullId(fullId) {
     return {ns: ns, id: id};
 }
 
-/**
- * extract ns param from URL
- *
- * @param url
- * @returns {string}
- */
-function extractNs(url) {
-    const urlParam = function(name) {
-        const results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(url);
-        return results[1] || '';
-    };
-    return decodeURIComponent(urlParam('ns'));
-}
-
 /**
  * extract image id from media URL
  *

script/service.js

@@ -15,7 +15,7 @@ const handleServiceMessages = function( event ) {
         jQuery.get(DOKU_BASE + 'lib/exe/fetch.php?media=' + fullId, function (data) {
             drawio.postMessage(JSON.stringify({action: 'load', xml: data}), '*');
         }, 'text')
-            .fail(function () { // catch 404, file does not exist yet locally
+            .fail(function () { // catch 404, file does not yet exist locally
                 drawio.postMessage(JSON.stringify({action: 'load', xml: ''}), '*');
             });
     } else if ( msg.event === 'save' ) {
@@ -36,10 +36,8 @@ const handleServiceMessages = function( event ) {
                     jQuery( window ).off( 'message', {fullId: fullId}, handleServiceMessages );
                     jQuery( '#drawio-frame' ).remove();
                     const url = new URL(location.href);
-                    // media manager window should reflect selection in ns tree
-                    if (jQuery('#mediamanager__page').length > 0) {
-                        url.searchParams.set('ns', ns);
-                    }
+                    // media manager window should show current namespace
+                    url.searchParams.set('ns', ns);
                     setTimeout( function() {
                         location.assign(url);
                     }, 200 );