From cf35eecd606d7290224bc6848578b03f38531847 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <rudolfkoenig@2b470e98-0d58-463d-a4d8-8e2adae1ed80>
Date: Tue, 23 Feb 2021 21:04:49 +0000
Subject: [PATCH] fhemweb.js: allow id-based anchor (Forum #118915)

git-svn-id: https://svn.fhem.de/fhem/trunk@23811 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/FHEM/00_MQTT2_CLIENT.pm      | 44 +++++++++++++++----------------
 fhem/FHEM/00_MQTT2_SERVER.pm      | 26 +++++++++---------
 fhem/FHEM/10_MQTT2_DEVICE.pm      | 35 ++++++++++++------------
 fhem/contrib/commandref_static.pl |  2 ++
 fhem/contrib/pre-commit           |  1 +
 fhem/www/pgm2/fhemweb.js          | 25 ++++++++++++------
 6 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/fhem/FHEM/00_MQTT2_CLIENT.pm b/fhem/FHEM/00_MQTT2_CLIENT.pm
index 811371542..c986829b4 100644
--- a/fhem/FHEM/00_MQTT2_CLIENT.pm
+++ b/fhem/FHEM/00_MQTT2_CLIENT.pm
@@ -653,7 +653,7 @@ MQTT2_CLIENT_getStr($$)
 =item summary_DE Verbindung zu einem externen MQTT Server
 =begin html
 
-<a name="MQTT2_CLIENT"></a>
+<a id="MQTT2_CLIENT"></a>
 <h3>MQTT2_CLIENT</h3>
 <ul>
   MQTT2_CLIENT is a cleanroom implementation of an MQTT client (which connects
@@ -661,7 +661,7 @@ MQTT2_CLIENT_getStr($$)
   an IODev to MQTT2_DEVICES.
   <br> <br>
 
-  <a name="MQTT2_CLIENTdefine"></a>
+  <a id="MQTT2_CLIENT-define"></a>
   <b>Define</b>
   <ul>
     <code>define &lt;name&gt; MQTT2_CLIENT &lt;host&gt;:&lt;port&gt;</code>
@@ -676,7 +676,7 @@ MQTT2_CLIENT_getStr($$)
   </ul>
   <br>
 
-  <a name="MQTT2_CLIENTset"></a>
+  <a id="MQTT2_CLIENT-set"></a>
   <b>Set</b>
   <ul>
     <li>publish -r topic value<br>
@@ -694,15 +694,15 @@ MQTT2_CLIENT_getStr($$)
   </ul>
   <br>
 
-  <a name="MQTT2_CLIENTget"></a>
+  <a id="MQTT2_CLIENT-get"></a>
   <b>Get</b>
   <ul>N/A</ul><br>
 
-  <a name="MQTT2_CLIENTattr"></a>
+  <a id="MQTT2_CLIENT-attr"></a>
   <b>Attributes</b>
   <ul>
 
-    <a name="MQTT_CLIENTautocreate"></a>
+    <a id="MQTT2_CLIENT-autocreate"></a>
     <li>autocreate [no|simple|complex]<br>
       if set to simple/complex, at least one MQTT2_DEVICE will be created, and
       its readingsList will be expanded upon reception of published messages.
@@ -720,13 +720,13 @@ MQTT2_CLIENT_getStr($$)
       attribute it is not really useful.
       </li></br>
 
-    <a name="MQTT_CLIENTclientId"></a>
+    <a id="MQTT2_CLIENT-attr-clientId"></a>
     <li>clientId &lt;name&gt;<br>
       set the MQTT clientId. If not set, the name of the MQTT2_CLIENT instance
       is used, after deleting everything outside 0-9a-zA-Z
       </li></br>
 
-    <a name="MQTT2_CLIENTclientOrder"></a>
+    <a id="MQTT2_CLIENT-attr-clientOrder"></a>
     <li>clientOrder [MQTT2_DEVICE] [MQTT_GENERIC_BRIDGE]<br>
       set the notification order for client modules. This is 
       relevant when autocreate is active, and the default order
@@ -739,52 +739,52 @@ MQTT2_CLIENT_getStr($$)
       disable dispatching of messages.
       </li><br>
 
-    <a name="MQTT2_CLIENTdisconnectAfter"></a>
+    <a id="MQTT2_CLIENTdisconnectAfter"></a>
     <li>disconnectAfter &lt;seconds&gt;<br>
       if set, the connection will be closed after &lt;seconds&gt; of
       inactivity, and will be automatically reopened when sending a command.
       </li>
 
-    <a name="MQTT2_CLIENTignoreRegexp"></a>
+    <a id="MQTT2_CLIENTignoreRegexp"></a>
     <li>ignoreRegexp<br>
       if $topic:$message matches ignoreRegexp, then it will be silently ignored.
       </li>
 
-    <a name="MQTT_CLIENTlwt"></a>
+    <a id="MQTT2_CLIENT-attr-lwt"></a>
     <li>lwt &lt;topic&gt; &lt;message&gt; <br>
       set the LWT (last will and testament) topic and message, default is empty.
       </li></br>
 
-    <a name="MQTT_CLIENTkeepaliveTimeout"></a>
+    <a id="MQTT2_CLIENT-attr-keepaliveTimeout"></a>
     <li>keepaliveTimeout &lt;seconds;&gt;<br>
       number of seconds for sending keepalive messages, 0 disables it.
       The broker will disconnect, if there were no messages for
       1.5 * keepaliveTimeout seconds.
       </li></br>
 
-    <a name="MQTT_CLIENTlwtRetain"></a>
+    <a id="MQTT2_CLIENT-attr-lwtRetain"></a>
     <li>lwtRetain<br>
       if set, the lwt retain flag is set
       </li></br>
 
-    <a name="MQTT_CLIENTmqttVersion"></a>
+    <a id="MQTT2_CLIENT-attr-mqttVersion"></a>
     <li>mqttVersion 3.1,3.1.1<br>
       set the MQTT protocol version in the CONNECT header, default is 3.1
       </li></br>
 
-    <a name="MQTT_CLIENTmsgAfterConnect"></a>
+    <a id="MQTT2_CLIENT-attr-msgAfterConnect"></a>
     <li>msgAfterConnect [-r] topic message<br>
       publish the topic after each connect or reconnect.<br>
       If the optional -r is specified, then the publish sets the retain flag.
       </li></br>
 
-    <a name="MQTT_CLIENTmsgBeforeDisconnect"></a>
+    <a id="MQTT2_CLIENT-attr-msgBeforeDisconnect"></a>
     <li>msgBeforeDisconnect [-r] topic message<br>
       publish the topic bofore each disconnect.<br>
       If the optional -r is specified, then the publish sets the retain flag.
       </li></br>
 
-    <a name="MQTT_CLIENTqosMaxQueueLength"></a>
+    <a id="MQTT2_CLIENT-attr-qosMaxQueueLength"></a>
     <li>qosMaxQueueLength &lt;number&gt;<br>
       if set to a nonzero value, messages are published with QoS=1, and are
       kept in a memory-only buffer until acknowledged by the server.
@@ -792,31 +792,31 @@ MQTT2_CLIENT_getStr($$)
       are queued, and resent when the connection is esablished.
       </li></br>
       
-    <a name="MQTT_CLIENTrawEvents"></a>
+    <a id="MQTT2_CLIENT-attr-rawEvents"></a>
     <li>rawEvents &lt;topic-regexp&gt;<br>
       send all messages as events attributed to this MQTT2_CLIENT instance.
       Should only be used, if there is no MQTT2_DEVICE to process the topic.
       </li><br>
 
-    <a name="MQTT_CLIENTsubscriptions"></a>
+    <a id="MQTT2_CLIENT-attr-subscriptions"></a>
     <li>subscriptions &lt;subscriptions&gt;<br>
       space separated list of MQTT subscriptions, default is #<br>
       Note: if the value is the literal setByTheProgram, then the value sent by
       the client (e.g. MQTT_GENERIC_BRIDGE) is used.
       </li><br>
 
-    <a name="MQTT_CLIENTSSL"></a>
+    <a id="MQTT2_CLIENT-attr-SSL"></a>
     <li>SSL<br>
       Enable SSL (i.e. TLS)
       </li><br>
 
-    <a name="MQTT_CLIENTsslargs"></a>
+    <a id="MQTT2_CLIENT-attr-sslargs"></a>
     <li>sslargs<br>
       a list of space separated tuples of key:value, where key is one of the
       possible options documented in perldoc IO::Socket::SSL
       </li><br>
 
-    <a name="MQTT_CLIENTusername"></a>
+    <a id="MQTT2_CLIENT-attr-username"></a>
     <li>username &lt;username&gt;<br>
       set the username. The password is set via the set command, and is stored
       separately, see above.
diff --git a/fhem/FHEM/00_MQTT2_SERVER.pm b/fhem/FHEM/00_MQTT2_SERVER.pm
index 0716b57c0..cf5f72eb2 100644
--- a/fhem/FHEM/00_MQTT2_SERVER.pm
+++ b/fhem/FHEM/00_MQTT2_SERVER.pm
@@ -613,7 +613,7 @@ MQTT2_SERVER_ReadDebug($$)
 =item summary_DE Standalone MQTT message broker
 =begin html
 
-<a name="MQTT2_SERVER"></a>
+<a id="MQTT2_SERVER"></a>
 <h3>MQTT2_SERVER</h3>
 <ul>
   MQTT2_SERVER is a builtin/cleanroom implementation of an MQTT server using no
@@ -622,7 +622,7 @@ MQTT2_SERVER_ReadDebug($$)
   and performance). It is intended to simplify connecting MQTT devices to FHEM.
   <br> <br>
 
-  <a name="MQTT2_SERVERdefine"></a>
+  <a id="MQTT2_SERVER-define"></a>
   <b>Define</b>
   <ul>
     <code>define &lt;name&gt; MQTT2_SERVER &lt;tcp-portnr&gt; [global|IP]</code>
@@ -643,7 +643,7 @@ MQTT2_SERVER_ReadDebug($$)
   </ul>
   <br>
 
-  <a name="MQTT2_SERVERset"></a>
+  <a id="MQTT2_SERVER-set"></a>
   <b>Set</b>
   <ul>
     <li>publish -r topic value<br>
@@ -652,15 +652,15 @@ MQTT2_SERVER_ReadDebug($$)
   </ul>
   <br>
 
-  <a name="MQTT2_SERVERget"></a>
+  <a id="MQTT2_SERVER-get"></a>
   <b>Get</b>
   <ul>N/A</ul><br>
 
-  <a name="MQTT2_SERVERattr"></a>
+  <a id="MQTT2_SERVER-attr"></a>
   <b>Attributes</b>
   <ul>
 
-    <a name="MQTT2_SERVERclientId"></a>
+    <a id="MQTT2_SERVER-attr-clientId"></a>
     <li>clientId &lt;name&gt;<br>
       set the MQTT clientId for all connections, for setups with clients
       creating a different MQTT-ID for each connection. The autocreate
@@ -669,7 +669,7 @@ MQTT2_SERVER_ReadDebug($$)
       attributes.
       </li></br>
 
-    <a name="MQTT2_SERVERclientOrder"></a>
+    <a id="MQTT2_SERVER-attr-clientOrder"></a>
     <li>clientOrder [MQTT2_DEVICE] [MQTT_GENERIC_BRIDGE]<br>
       set the notification order for client modules. This is 
       relevant when autocreate is active, and the default order
@@ -683,12 +683,12 @@ MQTT2_SERVER_ReadDebug($$)
       messages, but not forward them.
       </li><br>
 
-    <a name="MQTT2_SERVERignoreRegexp"></a>
+    <a id="MQTT2_SERVER-attr-ignoreRegexp"></a>
     <li>ignoreRegexp<br>
       if $topic:$message matches ignoreRegexp, then it will be silently ignored.
       </li>
 
-    <a name="MQTT2_SERVERkeepaliveFactor"></a>
+    <a id="MQTT2_SERVER-attr-keepaliveFactor"></a>
     <li>keepaliveFactor<br>
       the oasis spec requires a disconnect, if after 1.5 times the client
       supplied keepalive no data or PINGREQ is sent. With this attribute you
@@ -700,13 +700,13 @@ MQTT2_SERVER_ReadDebug($$)
       </ul>
       </li>
     
-    <a name="MQTT2_SERVERrawEvents"></a>
+    <a id="MQTT2_SERVER-attr-rawEvents"></a>
     <li>rawEvents &lt;topic-regexp&gt;<br>
       Send all messages as events attributed to this MQTT2_SERVER instance.
       Should only be used, if there is no MQTT2_DEVICE to process the topic.
       </li><br>
 
-    <a name="MQTT2_SERVERrePublish"></a>
+    <a id="MQTT2_SERVER-attr-rePublish"></a>
     <li>rePublish<br>
       if a topic is published from a source inside of FHEM (e.g. MQTT2_DEVICE),
       it is only sent to real MQTT clients, and it will not internally
@@ -714,7 +714,7 @@ MQTT2_SERVER_ReadDebug($$)
       to the FHEM internal clients.
       </li><br>
 
-    <a name="MQTT2_SERVERSSL"></a>
+    <a id="MQTT2_SERVER-attr-SSL"></a>
     <li>SSL<br>
       Enable SSL (i.e. TLS).
       </li><br>
@@ -728,7 +728,7 @@ MQTT2_SERVER_ReadDebug($$)
        also the SSL attribute.
        </li><br>
 
-    <a name="MQTT2_SERVERautocreate"></a>
+    <a id="MQTT2_SERVER-attr-autocreate"></a>
     <li>autocreate [no|simple|complex]<br>
       MQTT2_DEVICES will be automatically created upon receiving an
       unknown message. Set this value to no to disable autocreating, the
diff --git a/fhem/FHEM/10_MQTT2_DEVICE.pm b/fhem/FHEM/10_MQTT2_DEVICE.pm
index e4ffd5517..0f6ac92a2 100644
--- a/fhem/FHEM/10_MQTT2_DEVICE.pm
+++ b/fhem/FHEM/10_MQTT2_DEVICE.pm
@@ -885,7 +885,7 @@ zigbee2mqtt_devStateIcon255($;$$)
 =item summary_DE &uuml;ber den MQTT2_SERVER oder MQTT2_CLIENT kommunizierende Ger&auml;te
 =begin html
 
-<a name="MQTT2_DEVICE"></a>
+<a id="MQTT2_DEVICE"></a>
 <h3>MQTT2_DEVICE</h3>
 <ul>
   MQTT2_DEVICE is used to represent single devices connected to the
@@ -893,7 +893,7 @@ zigbee2mqtt_devStateIcon255($;$$)
   connecting MQTT devices to FHEM.
   <br> <br>
 
-  <a name="MQTT2_DEVICEdefine"></a>
+  <a id="MQTT2_DEVICE-define"></a>
   <b>Define</b>
   <ul>
     <code>define &lt;name&gt; MQTT2_DEVICE</code>
@@ -903,32 +903,32 @@ zigbee2mqtt_devStateIcon255($;$$)
   </ul>
   <br>
 
-  <a name="MQTT2_DEVICEset"></a>
+  <a id="MQTT2_DEVICE-set"></a>
   <b>Set</b>
   <ul>
     see the setList attribute documentation below.
   </ul>
   <br>
 
-  <a name="MQTT2_DEVICEget"></a>
+  <a id="MQTT2_DEVICE-get"></a>
   <b>Get</b>
   <ul>
     see the getList attribute documentation below.
   </ul>
   <br>
 
-  <a name="MQTT2_DEVICEattr"></a>
+  <a id="MQTT2_DEVICE-attr"></a>
   <b>Attributes</b>
   <ul>
 
-    <a name="autocreate"></a>
+    <a id="MQTT2_DEVICE-attr-autocreate"></a>
     <li>autocreate {0|1}<br>
       if set to 0, disables extending the readingList, when the IODev
       autocreate is also set. Default is 1, i.e. new topics will be
       automatically added to the readingList. 
       </li>
 
-    <a name="bridgeRegexp"></a>
+    <a id="MQTT2_DEVICE-attr-bridgeRegexp"></a>
     <li>bridgeRegexp &lt;regexp&gt; newClientId ...<br>
       Used to automatically redirect some types of topics to different
       MQTT2_DEVICE instances. The regexp is checked against the
@@ -958,14 +958,14 @@ zigbee2mqtt_devStateIcon255($;$$)
       </ul>
       </li><br>
 
-    <a name="devicetopic"></a>
+    <a id="MQTT2_DEVICE-attr-devicetopic"></a>
     <li>devicetopic value<br>
       replace $DEVICETOPIC in the topic part of readingList, setList and
       getList with value. if not set, $DEVICETOPIC will be replaced with the
       name of the device.
       </li><br>
 
-    <a name="devPos"></a>
+    <a id="MQTT2_DEVICE-attr-devPos"></a>
     <li>devPos value<br>
       used internally by the "Show neighbor map" visualizer in FHEMWEB.
       This function is active if the graphviz and devices readings are set,
@@ -975,7 +975,7 @@ zigbee2mqtt_devStateIcon255($;$$)
     <li><a href="#disable">disable</a><br>
         <a href="#disabledForIntervals">disabledForIntervals</a></li><br>
 
-    <a name="getList"></a>
+    <a id="MQTT2_DEVICE-attr-getList"></a>
     <li>getList cmd reading [topic|perl-Expression] ...<br>
       When the FHEM command cmd is issued, publish the topic (and optional
       message, which is separated by space from the topic), wait for the answer
@@ -1006,13 +1006,13 @@ zigbee2mqtt_devStateIcon255($;$$)
       </li><br>
 
 
-    <a name="imageLink"></a>
+    <a id="MQTT2_DEVICE-attr-imageLink"></a>
     <li>imageLink href<br>
       sets the image to be shown. The "Show neighbor map" function initializes
       the value automatically.
       </li><br>
 
-    <a name="jsonMap"></a>
+    <a id="MQTT2_DEVICE-attr-jsonMap"></a>
     <li>jsonMap oldReading1:newReading1 oldReading2:newReading2...<br>
       space or newline separated list of oldReading:newReading pairs.<br>
       Used in the automatically generated readingList json2nameValue function
@@ -1025,7 +1025,7 @@ zigbee2mqtt_devStateIcon255($;$$)
       oldReading.
       </li><br>
 
-    <a name="periodicCmd"></a>
+    <a id="MQTT2_DEVICE-attr-periodicCmd"></a>
     <li>periodicCmd &lt;cmd1&gt;:&lt;period1&gt; &lt;cmd2&gt;:&lt;period2&gt;...
       <br>
       periodically execute the get or set command. The command will not take
@@ -1033,7 +1033,7 @@ zigbee2mqtt_devStateIcon255($;$$)
       period is measured in minutes, and it must be an integer.
       </li><br>
 
-    <a name="readingList"></a>
+    <a id="MQTT2_DEVICE-attr-readingList"></a>
     <li>readingList &lt;regexp&gt; [readingName|perl-Expression] ...
       <br>
       If the regexp matches topic:message or cid:topic:message either set
@@ -1070,11 +1070,12 @@ zigbee2mqtt_devStateIcon255($;$$)
       </ul>
       </li><br>
 
-    <li><a name="setExtensionsEvent">setExtensionsEvent</a><br>
+    <a id="MQTT2_DEVICE-attr-setExtensionsEvent"></a>
+    <li>setExtensionsEvent<br>
       If set, the event will contain the command implemented by SetExtensions
       (e.g. on-for-timer 10), else the executed command (e.g. on).</li><br>
 
-    <a name="setList"></a>
+    <a id="MQTT2_DEVICE-attr-setList"></a>
     <li>setList cmd [topic|perl-Expression] ...<br>
       When the FHEM command cmd is issued, publish the topic.
       Multiple tuples can be specified, each of them separated by newline, the
@@ -1102,7 +1103,7 @@ zigbee2mqtt_devStateIcon255($;$$)
       </ul>
       </li><br>
 
-    <a name="setStateList"></a>
+    <a id="MQTT2_DEVICE-attr-setStateList"></a>
     <li>setStateList command command ...<br>
       This attribute is used to get more detailed feedback when switching
       devices.  I.e. when the command on is contained in the list, state will
diff --git a/fhem/contrib/commandref_static.pl b/fhem/contrib/commandref_static.pl
index 4b6762c2f..c2d93423a 100755
--- a/fhem/contrib/commandref_static.pl
+++ b/fhem/contrib/commandref_static.pl
@@ -98,6 +98,8 @@ for my $lang (@lang) {
         $modData{$mName}{$1}  =$2 if($l =~ m/^=item\s+(summary[^ ]*)\s(.*)$/);
         $modData{$mName}{modLinks}{$1} = 1
                  if($l =~ m/<a\s+name=['"]([^ '"]+)['"]>/);
+        $modData{$mName}{modLinks}{$1} = 1
+                 if($l =~ m/<a\s+id=['"]([^ '"]+)['"]>/);
       }
       $modData{$mName}{modLangs} = join(",", @lang);
       close(FH);
diff --git a/fhem/contrib/pre-commit b/fhem/contrib/pre-commit
index 1a19f5250..f6fe8354a 100755
--- a/fhem/contrib/pre-commit
+++ b/fhem/contrib/pre-commit
@@ -137,6 +137,7 @@ foreach my $row (split("\n", $fList)) {
       } elsif(!$skip) {
         $docCount++;
         $hasLink = ($l =~ m/<a name="$modName"/) if(!$hasLink);
+        $hasLink = ($l =~ m/<a id="$modName"/) if(!$hasLink);
         foreach $tag (TAGS) {
           my $ot = ($tagcount{$tag} ? $tagcount{$tag} : 0);
           if($l =~ m/<$tag ([^>]+)>/i) {
diff --git a/fhem/www/pgm2/fhemweb.js b/fhem/www/pgm2/fhemweb.js
index e83ed1afb..98f4613ac 100644
--- a/fhem/www/pgm2/fhemweb.js
+++ b/fhem/www/pgm2/fhemweb.js
@@ -307,26 +307,35 @@ FW_jqueryReadyFn()
     if(!m)
       return;
     $("#devSpecHelp").remove();
-    var sel = this;
-    FW_getHelp(m[2], function(data) { // show either the next or the outer li
+    var sel=this, devName=m[2], selType=m[1];
+    FW_getHelp(devName, function(data) { // show either the next or the outer li
       $("#content")
         .append("<div id='workbench' style='display:none'></div>");
       $("#content > #workbench").html(data);
-      var mtype = $("#content > #workbench a[name]").attr("name"), aTag;
-      if(mtype) {
-        var mv = (""+mtype+val).replace(/[^a-z0-9_]/ig,'_');
-        aTag = $("#content > #workbench").find("a[name="+mv+"]");
+
+      var mtype = $("#content > #workbench a[id]").attr("id"), aTag;
+      if(!mtype)
+        mtype = $("#content > #workbench a[name]").attr("name"), aTag;
+
+      if(mtype) {           // old style #1 syntax: MODULETYPEattrname
+        var mv = (""+mtype+"-"+selType+"-"+val).replace(/[^a-z0-9_-]/ig,'_');
+        aTag = $("#content > #workbench").find("a[id="+mv+"]");
+        if(!$(aTag).length) {
+          mv = (""+mtype+val).replace(/[^a-z0-9_]/ig,'_');
+          aTag = $("#content > #workbench").find("a[name="+mv+"]");
+        }
       }
-      if(!$(aTag).length) { // old style syntax without type
+      if(!$(aTag).length) { // old style #2 syntax without type
         var v = (val).replace(/[^a-z0-9_]/ig,'_');
         aTag = $("#content > #workbench").find("a[name="+v+"]");
       }
+
       if($(aTag).length) {
         var liTag = $(aTag).next("li");
         if(!$(liTag).length)
           liTag = $(aTag).parent("li");
         if($(liTag).length) {
-          $(sel).closest("div[cmd='"+m[1]+"']")
+          $(sel).closest("div[cmd='"+selType+"']")
              .after('<div class="makeTable" id="devSpecHelp"></div>')
           $("#devSpecHelp").html($(liTag).html());
         }