commit adds 'edit_button' configuration option that disables default …

…"edit by click" behaviour and replaces it with edit button

implements lejmr#41

conf/default.php

@@ -7,4 +7,4 @@
 $conf['zIndex']    = 999;
 $conf['url']       = 'https://embed.diagrams.net/';
 $conf['toolbar_possible_extension'] ='png';
-
+$conf['edit_button'] = false;

conf/metadata.php

@@ -7,3 +7,4 @@
 $meta['zIndex']    = array('string');
 $meta['url']       = array('string');
 $meta['toolbar_possible_extension']       = array('string');
+$meta['edit_button'] = array('onoff');

lang/en/settings.php

@@ -7,4 +7,4 @@
 $lang['zIndex']   = 'Set zIndex for DrawIO iFrame (defaults to 999)';
 $lang['url']      = 'Set URL to draw.io instance (defaults to https://www.draw.io)';
 $lang['toolbar_possible_extension'] = "toolbar possible extension (comma-separated list)";
-
+$lang['edit_button']   = 'Show edit button at the bottom of each graph (disables edit by click).';

script.js

@@ -6,6 +6,13 @@ var initial = null;
 var name = null;
 var imagePointer = null;
 
+function edit_button(editButton)
+{
+    var imageId = editButton.getAttribute('data-image-id');
+    var image = document.getElementById(imageId);
+    edit(image);
+}
+
 function edit(image)
 {   
     // check auth

syntax.php

@@ -67,6 +67,8 @@ public function handle($match, $state, $pos, Doku_Handler $handler)
      */
     public function render($mode, Doku_Renderer $renderer, $data)
     {
+        global $lang;
+
         if ($mode !== 'xhtml') {
             return false;
         }
@@ -99,17 +101,32 @@ public function render($mode, Doku_Renderer $renderer, $data)
             $svg->addAttribute("class", "mediacenter");
             $svg->addAttribute("id", $media_id);
             $style = "width:".$width.";height:".$heigth.";";
-            $style .= "cursor:pointer";
+            if(!$this->getConf('edit_button')) {
+                $style .= "cursor:pointer;";
+                $svg->addAttribute("onclick", "edit(this);");
+            }
             $svg->addAttribute("style", $style);
-            $svg->addAttribute("onclick", "edit(this);");
             // we need parent div here to correctly replace the svg after edit
             $renderer->doc .= "<div>".$svg->asXML()."</div>";
         } else {
+            $style = "max-width:100%;";
+            $onclick = "";
+            if(!$this->getConf('edit_button')) {
+                $style .= "cursor:pointer;";
+                $onclick = "onclick='edit(this);";
+            }
             $renderer->doc .= "<img class='mediacenter' id='".$media_id."' 
-                        style='max-width:100%;cursor:pointer;' onclick='edit(this);'
+                        style='".$style."' ".$onclick."'
                         src='".DOKU_BASE."lib/exe/fetch.php?media=".$media_id."' 
                         alt='".$media_id."' />";
         }
+
+        if($this->getConf('edit_button')) {
+            $renderer->doc .= "<button type='submit' style='display:block;font-size:75%;margin:0.5em auto 0;'
+                            data-image-id='" . $media_id . "' onclick='edit_button(this)'>
+                            ".$lang['btn_secedit']." (draw.io)
+                            </button>";
+        }
         return true;
     }
 }