From c1470dbb293fd1c43662b59fc72b31bd5b665e4f Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Sun, 7 Oct 2018 16:45:18 +0000
Subject: [PATCH] commandref.html: retest all files for smallscreen and normal
 loading (Forum #91848)

git-svn-id: https://svn.fhem.de/fhem/trunk@17478 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/docs/commandref_frame.html        | 13 +++++--------
 fhem/docs/commandref_frame_DE.html     | 13 +++++--------
 fhem/docs/fhem.html                    |  7 ++-----
 fhem/docs/fhem_DE.html                 |  7 ++-----
 fhem/www/pgm2/darksmallscreenstyle.css | 15 +++++++++++++++
 fhem/www/pgm2/darkstyle.css            |  2 ++
 fhem/www/pgm2/f18.js                   | 25 ++++++++++++++++++-------
 fhem/www/pgm2/f18style.css             | 23 ++++++++++++++++++++++-
 fhem/www/pgm2/fhemweb.js               |  5 ++---
 fhem/www/pgm2/smallscreenstyle.css     | 16 ++++++++++++++++
 10 files changed, 89 insertions(+), 37 deletions(-)
diff --git a/fhem/docs/commandref_frame.html b/fhem/docs/commandref_frame.html
index 2bfdb0aa6..c7decb95b 100644
--- a/fhem/docs/commandref_frame.html
+++ b/fhem/docs/commandref_frame.html
@@ -4,24 +4,22 @@
 
 <head>
   <title>FHEM reference</title>
-  <script type="text/javascript" src="fhemdoc.js"></script>
-  <noscript>
-    <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
-  </noscript>
+  <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="initial-scale=1.0,user-scalable=1">
   <link rel="shortcut icon" href="/fhem/icons/favicon.ico"/>
 </head>
 
 
-<body style="word-wrap: break-word;">
+<body style="word-wrap: break-word;" class="commandref">
   <div id="menuScrollArea">
     <div id="logo"></div>
     <div id="menu">
       <h3>fhem.pl reference</h3>
       <br><br>
-      <a href="#doctop">Scroll to top</a>
+      <a href="#">Scroll to top</a>
       <br><br>
-      <a style="display:none" href="#" name="loadAll">Load complete doc</a>
+      <a style="display:none" href="#" name="loadAll">Load everything</a>
       <br><br>
       <a id="otherLang" style="display:none" href="#" name="otherLang">
         Load <span style="display:none" lang="DE">german</span> 
@@ -32,7 +30,6 @@
   </div>
 
   <div id="right">
-<a name="doctop"></a>
 <h3>Contents</h3>
 <ul>
   <a href="#intro">Introduction</a><br>
diff --git a/fhem/docs/commandref_frame_DE.html b/fhem/docs/commandref_frame_DE.html
index 553a962fa..f908269ce 100644
--- a/fhem/docs/commandref_frame_DE.html
+++ b/fhem/docs/commandref_frame_DE.html
@@ -4,24 +4,22 @@
 
 <head>
   <title>FHEM Referenz</title>
-  <script type="text/javascript" src="fhemdoc.js"></script>
-  <noscript>
-    <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
-  </noscript>
+  <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="initial-scale=1.0,user-scalable=1">
   <link rel="shortcut icon" href="/fhem/icons/favicon.ico"/>
 </head>
 
 
-<body style="word-wrap: break-word;">
+<body style="word-wrap: break-word;" class="commandref">
   <div id="menuScrollArea">
     <div id="logo"></div>
     <div id="menu">
       <h3>fhem.pl Referenz</h3>
       <br><br>
-      <a href="#doctop">Zum Anfang</a>
+      <a href="#">Zum Anfang</a>
       <br><br>
-      <a style="display:none" href="#" name="loadAll">Komplette Doku laden</a>
+      <a style="display:none" href="#" name="loadAll">Alles laden</a>
       <br><br>
       <a id="otherLang" style="display:none" href="#" name="otherLang">
         <span style="display:none" lang="DE">Deutsche</span> 
@@ -32,7 +30,6 @@
   </div>
 
   <div id="right">
-<a name="doctop"></a>
 
 <h3>Inhalt</h3>
 <ul>
diff --git a/fhem/docs/fhem.html b/fhem/docs/fhem.html
index 8a8cc600e..6036a6899 100644
--- a/fhem/docs/fhem.html
+++ b/fhem/docs/fhem.html
@@ -4,11 +4,8 @@
 
 <head>
 <title>Home of FHEM</title>
-  <script type="text/javascript" src="fhemdoc.js"></script>
-  <noscript>
-    <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
-  </noscript>
-
+  <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
+  <meta name="viewport" content="initial-scale=1.0,user-scalable=1">
   <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1"/>
   <link rel="shortcut icon" href="favicon.ico"/>
 </head>
diff --git a/fhem/docs/fhem_DE.html b/fhem/docs/fhem_DE.html
index e38ad69e7..882bb6cba 100644
--- a/fhem/docs/fhem_DE.html
+++ b/fhem/docs/fhem_DE.html
@@ -4,11 +4,8 @@
 
 <head>
 <title>FHEMs Einstiegsseite</title>
-  <script type="text/javascript" src="fhemdoc.js"></script>
-  <noscript>
-    <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
-  </noscript>
-
+  <link rel="stylesheet" type="text/css" href="../www/pgm2/style.css" />
+  <meta name="viewport" content="initial-scale=1.0,user-scalable=1">
   <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1"/>
   <link rel="shortcut icon" href="favicon.ico"/>
 </head>
diff --git a/fhem/www/pgm2/darksmallscreenstyle.css b/fhem/www/pgm2/darksmallscreenstyle.css
index 9ae103475..d54de4841 100644
--- a/fhem/www/pgm2/darksmallscreenstyle.css
+++ b/fhem/www/pgm2/darksmallscreenstyle.css
@@ -115,3 +115,18 @@ div.tiny { font-size:10px; }
   table.block slider { float: none; }
   table.block select { text-align: center; }
 }
+
+/* commandref */
+body.commandref ul { -webkit-padding-start:0; }
+body.commandref div#menuScrollArea div#menu a { margin-left:10px; }
+body.commandref table.class_device { word-break:break-all; }
+
+body.commandref div#right { top:48px; left:5px; right:5px; }
+body.commandref div#menuScrollArea {
+  top:0px; left:10px; right:10px; height:48px; 
+  position:fixed; z-index:30; background-color:inherit;
+}
+body.commandref div#menu { top:15px; left:40px; }
+body.commandref div#menu a { margin-left:20px; }
+body.commandref div#menu br { display:none; }
+body.commandref div#menu h3 { display:none; }
diff --git a/fhem/www/pgm2/darkstyle.css b/fhem/www/pgm2/darkstyle.css
index 25f063eae..9df111825 100644
--- a/fhem/www/pgm2/darkstyle.css
+++ b/fhem/www/pgm2/darkstyle.css
@@ -140,3 +140,5 @@ div#svgmarker {
   color:white; background:black;
   border:2px solid white; border-radius:4px;
 }
+
+body.commandref div#menuScrollArea { position:fixed; }
diff --git a/fhem/www/pgm2/f18.js b/fhem/www/pgm2/f18.js
index 9d9f35dc9..030502865 100644
--- a/fhem/www/pgm2/f18.js
+++ b/fhem/www/pgm2/f18.js
@@ -8,7 +8,6 @@ var f18_small = (screen.width < 480 || screen.height < 480);
 
 $(window).resize(f18_resize);
 $(document).ready(function(){
-
   f18_room  = $("div#content").attr("room");
   f18_sd = $("body").attr("data-styleData");
   if(f18_sd) {
@@ -48,6 +47,8 @@ $(document).ready(function(){
   }
 
   var f18_aCol = getComputedStyle($("a").get(0),null).getPropertyValue('color');
+  f18_loadIcons();
+  f18_loadTouch();
   for(var i in f18_icon)
     f18_icon[i] = f18_icon[i].replace('gray', f18_aCol);
   f18_icon.pinOut = f18_icon.pinIn
@@ -813,17 +814,26 @@ f18_svgSetCols(svg)
   $(stA[1]).attr("style", "stop-color:#"+addCol(col("bg"),-10)+so);
 }
 
-// font-awesome
-var f18_svgPrefix='data:image/svg+xml;utf8,<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="gray" ';
-f18_icon.pinIn=f18_svgPrefix+'d="M896 1088q66 0 128-15v655q0 26-19 45t-45 19h-128q-26 0-45-19t-19-45v-655q62 15 128 15zm0-1088q212 0 362 150t150 362-150 362-362 150-362-150-150-362 150-362 362-150zm0 224q14 0 23-9t9-23-9-23-23-9q-146 0-249 103t-103 249q0 14 9 23t23 9 23-9 9-23q0-119 84.5-203.5t203.5-84.5z"/></svg>';
+function
+f18_loadIcons()
+{
+  // font-awesome
+  var f18_svgPrefix='data:image/svg+xml;utf8,<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="gray" ';
+  f18_icon.pinIn=f18_svgPrefix+'d="M896 1088q66 0 128-15v655q0 26-19 45t-45 19h-128q-26 0-45-19t-19-45v-655q62 15 128 15zm0-1088q212 0 362 150t150 362-150 362-362 150-362-150-150-362 150-362 362-150zm0 224q14 0 23-9t9-23-9-23-23-9q-146 0-249 103t-103 249q0 14 9 23t23 9 23-9 9-23q0-119 84.5-203.5t203.5-84.5z"/></svg>';
 
-f18_icon.bars=f18_svgPrefix+'d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>';
+  f18_icon.bars=f18_svgPrefix+'d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>';
 
-f18_icon.arrows=f18_svgPrefix+'d="M1792 896q0 26-19 45l-256 256q-19 19-45 19t-45-19-19-45v-128h-384v384h128q26 0 45 19t19 45-19 45l-256 256q-19 19-45 19t-45-19l-256-256q-19-19-19-45t19-45 45-19h128v-384h-384v128q0 26-19 45t-45 19-45-19l-256-256q-19-19-19-45t19-45l256-256q19-19 45-19t45 19 19 45v128h384v-384h-128q-26 0-45-19t-19-45 19-45l256-256q19-19 45-19t45 19l256 256q19 19 19 45t-19 45-45 19h-128v384h384v-128q0-26 19-45t45-19 45 19l256 256q19 19 19 45z"/></svg>';
+  f18_icon.arrows=f18_svgPrefix+'d="M1792 896q0 26-19 45l-256 256q-19 19-45 19t-45-19-19-45v-128h-384v384h128q26 0 45 19t19 45-19 45l-256 256q-19 19-45 19t-45-19l-256-256q-19-19-19-45t19-45 45-19h128v-384h-384v128q0 26-19 45t-45 19-45-19l-256-256q-19-19-19-45t19-45l256-256q19-19 45-19t45 19 19 45v128h384v-384h-128q-26 0-45-19t-19-45 19-45l256-256q19-19 45-19t45 19l256 256q19 19 19 45t-19 45-45 19h-128v384h384v-128q0-26 19-45t45-19 45 19l256 256q19 19 19 45z"/></svg>';
 
-f18_icon.ban=f18_svgPrefix+'d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z"/></svg>';
+  f18_icon.ban=f18_svgPrefix+'d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z"/></svg>';
+}
 
 
+
+function
+f18_loadTouch()
+{
+
 /*!
  * jQuery UI Touch Punch 0.2.3
  *
@@ -835,3 +845,4 @@ f18_icon.ban=f18_svgPrefix+'d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111
  *  jquery.ui.mouse.js
  */
 !function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
+}
diff --git a/fhem/www/pgm2/f18style.css b/fhem/www/pgm2/f18style.css
index b16d47759..e96d8db8d 100644
--- a/fhem/www/pgm2/f18style.css
+++ b/fhem/www/pgm2/f18style.css
@@ -191,7 +191,6 @@ table.room,table.block.wide,table.fileList {
 }
 table.block.wide td > div, #menu td td { padding:2px 4px; }
 
-#menuScrollArea { display:none; } /* commandref */
 body[fw_id] #menuScrollArea { display:block; } /* not commandref */
 
 input[type=submit] { border:none; background:none; }
@@ -258,6 +257,16 @@ body.fixedInput #hdr {
 
   .wrapcolumns tr td:nth-child(1) { flex-grow: 1; }
   .wrapcolumns tr td:nth-child(2) { width: auto!important; }
+
+  body.commandref div#menuScrollArea div#menu a { margin-left:10px; }
+  body.commandref table.class_device { word-break:break-all; }
+}
+
+@media screen and (max-width: 480px) {
+  body.commandref ul { -webkit-padding-start:0; }
+}
+@media screen and (max-height: 480px) {
+  body.commandref ul { -webkit-padding-start:0; }
 }
 
 body.pinnedMenu #menuBtn { display:none; }
@@ -266,3 +275,15 @@ body.pinnedMenu #logo { left:10px; }
 body { background-repeat: no-repeat; background-size:cover; }
 
 div.SVGlabel { display:inline-block; }
+
+/* commandref */
+body.commandref { background-color:#FFFFE7; }
+body.commandref div#right { top:48px; }
+body.commandref div#menuScrollArea { 
+  top:0px; left:10px; right:10px; height:48px; 
+  position:fixed; z-index:30; background-color:inherit;
+}
+body.commandref div#menu { top:15px; left:40px; }
+body.commandref div#menu a { margin-left:20px; }
+body.commandref div#menu br { display:none; }
+body.commandref div#menu h3 { display:none; }
diff --git a/fhem/www/pgm2/fhemweb.js b/fhem/www/pgm2/fhemweb.js
index 24199cf9d..704e6437b 100644
--- a/fhem/www/pgm2/fhemweb.js
+++ b/fhem/www/pgm2/fhemweb.js
@@ -80,8 +80,7 @@ FW_jqueryReadyFn()
     return;
   FW_docReady = true;
   FW_serverGenerated = $("body").attr("generated");
-  if(!FW_serverGenerated)       // called from commandref.html
-    return;
+
   FW_longpollType = $("body").attr("longpoll");
   var ajs = $("body").attr("data-availableJs");
   if(ajs) {
@@ -887,7 +886,7 @@ FW_rawDef()
   });
 }
 
-var FW_arrowDown, FW_arrowRight;
+var FW_arrowDown="", FW_arrowRight="";
 function
 FW_treeMenu()
 {
diff --git a/fhem/www/pgm2/smallscreenstyle.css b/fhem/www/pgm2/smallscreenstyle.css
index 0c5b7ba0d..65f2dabad 100644
--- a/fhem/www/pgm2/smallscreenstyle.css
+++ b/fhem/www/pgm2/smallscreenstyle.css
@@ -73,3 +73,19 @@ button.dist { margin:5px; }
   table.block slider { float: none; }
   table.block select { text-align: center; }
 }
+
+
+body.commandref ul { -webkit-padding-start:0; }
+body.commandref div#menuScrollArea div#menu a { margin-left:10px; }
+body.commandref table.class_device { word-break:break-all; }
+
+body.commandref div#right { top:48px; }
+body.commandref div#logo { display:none; }
+body.commandref div#menu {
+  position:fixed; z-index:30; background-color:#FFFFE7;
+  top:0px; left:0px; right:10px; height:48px; 
+}
+body.commandref div#menu a { margin:20px; }
+body.commandref div#menu br { display:none; }
+body.commandref div#menu h3 { display:none; }
+body.commandref div#right { left:5px; right:5px }
