fhemweb.js: fix crash on page without <a> (Forum #82010)

01_FHEMWEB.pm: styleData attribute for dynamic styles, add class to text-tags


git-svn-id: https://svn.fhem.de/fhem/trunk@15753 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/FHEM/01_FHEMWEB.pm

@@ -189,6 +189,7 @@ FHEMWEB_Initialize($)
     smallscreen:unused
     smallscreenCommands:0,1
     stylesheetPrefix
+    styleData:textField-long
     title
     touchpad:unused
     viewport
@@ -213,7 +214,6 @@ FHEMWEB_Initialize($)
     $FW_fhemwebjs = join(",", map { $_ = ~m/^fhemweb_(.*).js$/; $1 }
                               grep { /fhemweb_(.*).js$/ }
                               readdir(DH));
-    @FW_fhemwebjs = ("fhemweb.js");
     closedir(DH);
   }
 
@@ -720,6 +720,9 @@ FW_answerCall($)
   $FW_tp = ($FW_sp =~ m/smallscreen|touchpad/);
   @FW_iconDirs = grep { $_ } split(":", AttrVal($FW_wname, "iconPath",
                                 "$FW_sp:default:fhemSVG:openautomation"));
+  @FW_fhemwebjs = ("fhemweb.js");
+  push(@FW_fhemwebjs, "$FW_sp.js") if(-r "$FW_dir/pgm2/$FW_sp.js");
+
   if($arg =~ m,$FW_ME/floorplan/([a-z0-9.:_]+),i) { # FLOORPLAN: special icondir
     unshift @FW_iconDirs, $1;
     FW_readIcons($1);
@@ -1052,10 +1055,21 @@ FW_answerCall($)
 sub
 FW_dataAttr()
 {
+  sub
+  addParam($$)
+  {
+    my ($p, $default) = @_;
+    my $val = AttrVal($FW_wname,$p, $default);
+    $val =~ s/&/&/g;
+    $val =~ s/'/"/g;
+    return "data-$p='$val' ";
+  }
+
   return
-    "data-confirmDelete='" .AttrVal($FW_wname,"confirmDelete", 1)."' ".
-    "data-confirmJSError='".AttrVal($FW_wname,"confirmJSError",1)."' ".
-    "data-addHtmlTitle='"  .AttrVal($FW_wname,"addHtmlTitle",  1)."' ".
+    addParam("confirmDelete", 1).
+    addParam("confirmJSError", 1).
+    addParam("addHtmlTitle", 1).
+    addParam("styleData", "").
     "data-availableJs='$FW_fhemwebjs' ".
     "data-webName='$FW_wname '";
 }
@@ -1185,7 +1199,7 @@ FW_makeTable($$$@)
   my $class = lc($title);
   $class =~ s/[^A-Za-z]/_/g;
   FW_pO "<div class='makeTable wide ".lc($title)."'>";
-  FW_pO $title;
+  FW_pO "<span class='mkTitle'>$title</span>";
   FW_pO "<table class=\"block wide $class\">";
   my $si = AttrVal("global", "showInternalValues", 0);
 
@@ -1348,7 +1362,7 @@ FW_doDetail($)
         }
 
         FW_pO "<div $style id=\"ddtable\" class='makeTable wide'>";
-        FW_pO "DeviceOverview";
+        FW_pO "<span class='mkTitle'>DeviceOverview</span>";
         FW_pO "<table class=\"block wide\">";
         FW_makeDeviceLine($d,1,\%extPage,$nameDisplay,\%usuallyAtEnd);
         FW_pO "</table></div>";
@@ -1409,7 +1423,7 @@ FW_makeTableFromArray($$@) {
   if (@obj>0) {
     my $row=1;
     FW_pO "<div class='makeTable wide'>";
-    FW_pO "$txt";
+    FW_pO "<span class='mkTitle'>$txt</span>";
     FW_pO "<table class=\"block wide $class\">";
     foreach (sort @obj) {
       FW_pF "<tr class=\"%s\"><td>", (($row++)&1)?"odd":"even";
@@ -1811,7 +1825,7 @@ FW_showRoom()
 
       #################
       # Check if there is a device of this type in the room
-      FW_pO "\n<tr><td><div class=\"devType\">$g</div></td></tr>";
+      FW_pO "<tr class='devTypeTr'><td><div class='devType'>$g</div></td></tr>";
       FW_pO "<tr><td>";
       FW_pO "<table class=\"block wide\" id=\"TYPE_$g\">";
 
@@ -2080,7 +2094,7 @@ FW_displayFileList($@)
   my $hid = lc($heading);
   $hid =~ s/[^A-Za-z]/_/g;
   FW_pO "<div class=\"fileList $hid\">$heading</div>";
-  FW_pO "<table class=\"block fileList\">";
+  FW_pO "<table class=\"block wide fileList\">";
   my $cfgDB = "";
   my $row = 0;
   foreach my $f (@files) {
@@ -2166,7 +2180,8 @@ FW_style($$)
     my @fl = grep { $_ !~ m/(floorplan|dashboard)/ }
                         FW_fileList("$FW_cssdir/.*style.css");
     FW_addContent($start);
-    FW_pO "<table class=\"block fileList\">";
+    FW_pO "<div class='fileList styles'>Styles</div>";
+    FW_pO "<table class='block wide fileList'>";
     my $row = 0;
     foreach my $file (@fl) {
       next if($file =~ m/svg_/);
@@ -3788,6 +3803,11 @@ FW_widgetOverride($$)
        See the global attribute sslVersion.
        </li><br>
 
+    <a name="styleData"></a>
+    <li>styleData<br>
+      data-storage used by dynamic styles like f18
+      </li><br>
+
     <a name="stylesheetPrefix"></a>
     <li>stylesheetPrefix<br>
       prefix for the files style.css, svg_style.css and svg_defs.svg. If the
@@ -4459,15 +4479,20 @@ FW_widgetOverride($$)
           attr WEB sortRooms DG OG EG Keller
         </li><br>
 
-     <a name="smallscreenCommands"></a>
-     <li>smallscreenCommands<br>
-        Falls auf 1 gesetzt werden Kommandos, Slider und Dropdown Men&uuml;s im
-        Smallscreen Landscape Modus angezeigt.
-        </li><br>
+    <a name="smallscreenCommands"></a>
+    <li>smallscreenCommands<br>
+      Falls auf 1 gesetzt werden Kommandos, Slider und Dropdown Men&uuml;s im
+      Smallscreen Landscape Modus angezeigt.
+      </li><br>
 
-     <li>sslVersion<br>
-        Siehe das global Attribut sslVersion.
-        </li><br>
+    <li>sslVersion<br>
+      Siehe das global Attribut sslVersion.
+      </li><br>
+
+    <a name="styleData"></a>
+    <li>styleData<br>
+      wird von dynamischen styles wie f18 werwendet
+      </li><br>
 
     <a name="stylesheetPrefix"></a>
     <li>stylesheetPrefix<br>

fhem/www/pgm2/fhemweb.js

@@ -11,6 +11,7 @@ var FW_scripts = {}, FW_links = {};
 var FW_docReady = false, FW_longpollType, FW_csrfToken, FW_csrfOk=true;
 var FW_root = "/fhem";  // root
 var FW_availableJs=[];
+var FW_urlParams={};
 var embedLoadRetry = 100;
 
 // createFn returns an HTML Element, which may contain 
@@ -268,6 +269,12 @@ FW_jqueryReadyFn()
     });
   });
 
+  var sa = location.search.substring(1).split("&");
+  for(var i = 0; i < sa.length; i++) {
+    var kv = sa[i].split("=");
+    FW_urlParams[kv[0]] = kv[1];
+  }
+
   FW_smallScreenCommands();
   FW_inlineModify();
   FW_rawDef();
@@ -810,7 +817,10 @@ FW_rawDef()
 function
 FW_treeMenu()
 {
-  var col = getComputedStyle($("a").get(0),null).getPropertyValue('color'); 
+  var col = 'rgb(39, 135, 38)';
+  var a = $("a").get(0);
+  if(window.getComputedStyle && a)
+    col = getComputedStyle(a,null).getPropertyValue('color'); 
   var arrowRight='data:image/svg+xml;utf8,<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="gray" d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>'
         .replace('gray', col);
   var arrowDown=arrowRight.replace('/>',' transform="rotate(90,896,896)"/>');
@@ -1057,13 +1067,8 @@ FW_longpoll()
   }
 
   if(filter == "") {
-    var sa = location.search.substring(1).split("&");
-    for(var i = 0; i < sa.length; i++) {
-      if(sa[i].substring(0,5) == "room=")
-        filter=sa[i];
-      if(sa[i].substring(0,7) == "detail=")
-        filter=sa[i].substring(7);
-    }
+    if(FW_urlParams.room)   filter="room="+FW_urlParams.room;
+    if(FW_urlParams.detail) filter=FW_urlParams.detail;
   }
 
   if($("#floorplan").length>0) //floorplan special