cleanup for ID extraction from images

* No need to support object embeds. All our SVGs are embedded as IMG.
* Make use of src attribute to always get a fully qualified URL
* use searchParams to access media variable
* fix for rewriting detection when running from a sub directory
* simpler rewrite handling

Author: splitbrain

script.js

@@ -1,14 +1,14 @@
-jQuery( function() {
+jQuery(function () {
     /* DOKUWIKI:include script/helpers.js */
     /* DOKUWIKI:include script/service.js */
     /* DOKUWIKI:include script/elements.js */
 
     // add diagram edit button to all SVGs included in wiki pages
-    const $images = jQuery( 'img, object' ).filter( '.media, .medialeft, .mediacenter, .mediaright' );
+    const $images = jQuery('img').filter('.media, .medialeft, .mediacenter, .mediaright');
 
     // collect image IDs with file extension
     const imageIds = $images.map(function (key, image) {
-        return extractIdFromMediaUrl(image.currentSrc);
+        return extractIdFromMediaUrl(image.src);
     }).toArray();
 
     let ajaxData = {};
@@ -18,21 +18,18 @@ jQuery( function() {
     // callback to attach buttons to editable diagrams
     const attachButtons = function (result) {
         const diagrams = JSON.parse(result);
-        $images.each( function() {
-            const current = jQuery( this );
-            // FIXME what is the difference?
-            const src = this.nodeName === 'OBJECT' ? current.attr( 'data' ) : current.attr( 'src' );
-
-            const id = extractIdFromMediaUrl(src);
+        $images.each(function () {
+            const id = extractIdFromMediaUrl(this.src);
+            const $current = jQuery(this);
             if (diagrams.includes(id)) {
                 let $editButton = editDiagramButton(id);
-                if( current.parent()[0].nodeName === 'A' ) {
-                    current.parent().after( "<br>", $editButton );
+                if ($current.parent()[0].nodeName === 'A') {
+                    $current.parent().after("<br>", $editButton);
                 } else {
-                    current.after( "<br>", $editButton );
+                    $current.after("<br>", $editButton);
                 }
             }
-        } );
+        });
     };
 
     // query backend about permissions and SVG properties before attaching edit buttons
@@ -63,10 +60,10 @@ jQuery( function() {
             width: 600,
             appendTo: '.dokuwiki',
             modal: true,
-            open: () => {
+            open: function () {
                 const ns = isMMPage ? jQuery('.panelHeader h3 strong').html() : jQuery('#media__ns').html();
                 jQuery('#drawio__current-ns').text(ns);
-            },
+            }
         });
     });
     $mm_tree.prepend($createLink);
@@ -80,11 +77,11 @@ jQuery( function() {
         const targetNode = $df[0];
 
         // observe the target node descendants
-        const config = { childList: true, subtree: true };
+        const config = {childList: true, subtree: true};
 
         // add edit diagram  button to file actions
-        const addEditButton = function(mutationsList, observer) {
-            for(let mutation of mutationsList) {
+        const addEditButton = function (mutationsList, observer) {
+            for (let mutation of mutationsList) {
                 // div.file has been filled with new content (detail view)
                 if (mutation.type === 'childList') {
                     const $svgLink = jQuery('a.mf_svg');
@@ -105,4 +102,4 @@ jQuery( function() {
         const observer = new MutationObserver(addEditButton);
         observer.observe(targetNode, config);
     });
-} );
+});

script/helpers.js

@@ -8,7 +8,7 @@ const doctypeXML = '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w
  * @returns {boolean}
  */
 function validId(id) {
-    return id.length > 0 && /^[\w][\w\.\-]*$/.test( id )
+    return id.length > 0 && /^[\w][\w\.\-]*$/.test(id)
 }
 
 /**
@@ -46,46 +46,36 @@ function splitFullId(fullId) {
  * @returns {string}
  */
 function extractIdFromMediaUrl(url) {
-    // handle empty base url
-    if (url.indexOf('http') !== 0 && DOKU_BASE === '/') {
-        url = window.location.origin + url;
-    }
-
     const urlObj = new URL(url);
-    const path = urlObj.pathname;
-    const href = urlObj.href;
+    let path = urlObj.pathname;
+    if (path.indexOf(DOKU_BASE) === 0) {
+        path = path.substr(DOKU_BASE.length);
+    }
 
-    if (path.indexOf('/lib/exe/detail.php/') === 0 || path.indexOf('/lib/exe/fetch.php/') === 0) {
-        // media with internal rewriting
-        const mediaIdMatch = new RegExp(
-            '(?:\\/lib\\/exe\\/detail.php\\/|\\/lib\\/exe\\/fetch.php\\/)([^&]+)$'
-        );
-        const matches = mediaIdMatch.exec(path);
-        if (matches[1]) {
-            return normalizeId(matches[1]);
-        }
-    } else if (path.indexOf('/lib/exe/detail.php') === 0 || path.indexOf('/lib/exe/fetch.php') === 0) {
-        // media without rewriting
-        const mediaIdMatch = new RegExp('(?:media=)([^&]+)');
-        const matches = mediaIdMatch.exec(href);
-        if (matches[1]) {
-            return normalizeId(matches[1]);
-        }
-    } else if (path.indexOf('/_media/') === 0) { // media with .htaccess rewriting
-        const mediaIdMatch = /(?:_media\/)([^&\?]+)/;
-        const matches = href.match(mediaIdMatch);
-        if (matches[1]) {
-            return normalizeId(matches[1]);
-        }
-    } else if (path.indexOf('/_detail/') === 0) { // media with .htaccess rewriting
-        const mediaIdMatch = /(?:_detail\/)([^&\?]+)/;
-        const matches = href.match(mediaIdMatch);
-        if (matches[1]) {
-            return normalizeId(matches[1]);
-        }
+    if (urlObj.searchParams.get('media') !== null) {
+        // no rewriting
+        return normalizeId(urlObj.searchParams.get('media'));
+    } else if (
+        path.indexOf('lib/exe/detail.php/') === 0 ||
+        path.indexOf('lib/exe/fetch.php/') === 0
+    ) {
+        // internally rewritten URL, cut off three segments
+        return normalizeId(path.split('/').slice(3).join(':'));
+    } else if (
+        path.indexOf('_media/') === 0 ||
+        path.indexOf('_detail/') === 0
+    ) {
+        // .htaccess rewritten URL, cut off one segment
+        return normalizeId(path.split('/').slice(1).join(':'));
     }
 }
 
+/**
+ * Handles IDs with useslash enabled
+ *
+ * @param {string} id
+ * @return {string}
+ */
 function normalizeId(id) {
     return ':' + id.replace(/\//g, ":");
 }