FHEMWEB: new CssFiles attribute (Forum #26350)

fhemweb_slider: no page-reload on changes (Forum #26313)


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

fhem/CHANGED

@@ -1,5 +1,6 @@
 # Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
 # Do not insert empty lines here, update check depends on it.
+  - FHEMWEB: JavaScripts and CssFiles attributes added
   - change:  avoid updating weather information on get (59_Weather.pm)
   - change:  removed noshutdown=0 for HTTP connections made in 57_Calendar.pm
 	     and 59_Weather.pm to address issues when FHEM is behind 

fhem/FHEM/01_FHEMWEB.pm

@@ -127,6 +127,7 @@ FHEMWEB_Initialize($)
   my @attrList = qw(
     CORS:0,1
     HTTPS:1,0
+    CssFiles
     JavaScripts
     SVGcache:1,0
     addStateEvent
@@ -642,7 +643,10 @@ FW_answerCall($)
     FW_pO "<meta http-equiv=\"refresh\" content=\"$rf\">" if($rf);
   }
 
-  FW_pO "<link href=\"$FW_ME/pgm2/style.css\" rel=\"stylesheet\"/>";
+  my $cssTemplate = "<link href=\"$FW_ME/%s\" rel=\"stylesheet\"/>";
+  FW_pO sprintf($cssTemplate, "pgm2/style.css");
+  my @cssFiles = split(" ", AttrVal($FW_wname, "CssFiles", ""));
+  map { FW_pO sprintf($cssTemplate, $_); } @cssFiles;
 
   ########################
   # FW Extensions
@@ -3076,6 +3080,15 @@ FW_widgetOverride($$)
         FHEM-Server, and iPad/iPhone as Web-client.
         </li><br>
 
+     <a name="CssFiles"></a>
+     <li>CssFiles<br>
+        Space separated list of .css files to be included. The filenames
+        are relative to the www directory. Example:
+        <ul><code>
+          attr WEB CssFiles pgm2/mystyle.css
+        </code></ul>
+        </li><br>
+
      <a name="JavaScripts"></a>
      <li>JavaScripts<br>
         Space separated list of JavaScript files to be included. The filenames
@@ -3619,6 +3632,15 @@ FW_widgetOverride($$)
         beheben.
         </li><br>
 
+     <a name="CssFiles"></a>
+     <li>CssFiles<br>
+        Leerzeichen getrennte Liste von .css Dateien, die geladen werden.
+        Die Dateinamen sind relativ zum www Verzeichnis anzugeben. Beispiel:
+        <ul><code>
+          attr WEB CssFiles pgm2/mystyle.css
+        </code></ul>
+        </li><br>
+
      <a name="JavaScripts"></a>
      <li>JavaScripts<br>
         Leerzeichen getrennte Liste von JavaScript Dateien, die geladen werden.

fhem/www/pgm2/fhemweb.js

@@ -17,11 +17,9 @@ log(txt)
 function
 addcsrf(arg)
 {
-var oarg=arg;
   var csrf = document.body.getAttribute('fwcsrf');
   if(csrf && arg.indexOf('fwcsrf') < 0)
     arg += '&fwcsrf='+csrf;
-log(oarg+" -> "+arg);
   return arg;
 }
 
@@ -88,9 +86,8 @@ FW_doUpdate()
       if(el.nodeName.toLowerCase() == "select") {
         // dropdown: set the selected index to the current value
         for(var j=0;j<el.options.length;j++)
-            if(el.options[j].value == d[2]) {
+          if(el.options[j].value == d[2])
             el.selectedIndex = j;
-            }
 
       } else {
         el.innerHTML=d[2];
@@ -100,11 +97,9 @@ FW_doUpdate()
       }
     }
 
-    for(var w in FW_widgets) {
-      if(FW_widgets[w].updateLine) {
+    for(var w in FW_widgets)
+      if(FW_widgets[w].updateLine)
         FW_widgets[w].updateLine(d);
-      }
-    }
 
     if(d[0].indexOf("-") == -1) // Wont contain -
       devs.push(d[0]);

fhem/www/pgm2/fhemweb_slider.js

@@ -93,10 +93,9 @@ FW_sliderCreate(slider, curr)
       document.onmousemove = oldFn1; document.onmouseup  = oldFn2;
       document.ontouchmove = oldFn3; document.ontouchend = oldFn4;
       if(cmd) {
-        if(cmd.substring(0,3) != "js:") {
+        if(cmd.substring(0,3) != "js:")
           if(typeof val != "undefined")
-            document.location = cmd.replace('%',val);
-        }
+            FW_cmd(cmd.replace('%',val)+"&XHR=1");
       } else {
         if(typeof val != "undefined")
           slider.nextSibling.setAttribute('value', val);