From 7eaa3bab8eb85fa5aef7134a62cdc54712b41542 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Sun, 28 Feb 2016 15:27:50 +0000
Subject: [PATCH] fhemweb.js: add dialog in smallscreen mode for webCmd if
 hiddenroom=detail (Forum #49930)

git-svn-id: https://svn.fhem.de/fhem/trunk@10956 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/www/pgm2/fhemweb.js           | 42 +++++++++++++++++++++++++++++-
 fhem/www/pgm2/smallscreenstyle.css |  8 +++---
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/fhem/www/pgm2/fhemweb.js b/fhem/www/pgm2/fhemweb.js
index 7925e17c4..dbf66964a 100644
--- a/fhem/www/pgm2/fhemweb.js
+++ b/fhem/www/pgm2/fhemweb.js
@@ -196,9 +196,45 @@ FW_jqueryReadyFn()
     });
   });
 
+  FW_smallScreenCommands();
 
 }
 
+// Show the webCmd list in a dialog if: smallScreen & hiddenroom=detail & room
+function
+FW_smallScreenCommands()
+{
+  if($("div#menu select").length == 0 ||           // not SmallScreen
+     $("div#content").attr("room") == undefined || // not room Overview
+     $("div#content div.col1 a").length > 0)       // no hiddenroom=detail
+    return;
+
+  $("div#content div.col1").each(function(){
+    var tr = $(this).closest("tr");
+    if($(tr).find("> td").length <= 2)
+      return;
+    $(this).html("<a href='#'>"+$(this).html()+"</a>");
+    $(this).find("a").click(function(){
+      var t = $("<table></table>"), row=0;
+      $(tr).find("> td").each(function(){
+        $(t).append("<tr></tr>");
+        if(row++ == 0) {
+          $(t).find("tr:last").append($(this).find("a").html());
+        } else {
+          $(this).attr("data-orig", 1);
+          this.orig=$(this).parent();
+          $(t).find("tr:last").append($(this).detach());
+        }
+      });
+      FW_okDialog(t, this, function(){
+        $("#FW_okDialog [data-orig]").each(function(){
+          $(this).detach().appendTo(this.orig);
+        });
+      });
+    });
+  });
+}
+
 
 if(window.jQuery) {
   $(document).ready(FW_jqueryReadyFn);
@@ -282,16 +318,19 @@ FW_errmsg(txt, timeout)
 }
 
 function
-FW_okDialog(txt, parent)
+FW_okDialog(txt, parent, removeFn)
 {
   var div = $("<div id='FW_okDialog'>");
   $(div).html(txt);
   $("body").append(div);
+  var oldPos = $("body").scrollTop();
   $(div).dialog({
     dialogClass:"no-close", modal:true, width:"auto", closeOnEscape:true, 
     maxWidth:$(window).width()*0.9, maxHeight:$(window).height()*0.9,
     buttons: [{text:"OK", click:function(){
       $(this).dialog("close");
+      if(removeFn)
+        removeFn();
       $(div).remove();
     }}]
   });
@@ -304,6 +343,7 @@ FW_okDialog(txt, parent)
       my: "left top", at: "right bottom",
       of: parent, collision: "flipfit"
     });
+  setTimeout(function(){$("body").scrollTop(oldPos);}, 1); // Not ideal.
 }
 
 function
diff --git a/fhem/www/pgm2/smallscreenstyle.css b/fhem/www/pgm2/smallscreenstyle.css
index c03c17186..054ad42a5 100644
--- a/fhem/www/pgm2/smallscreenstyle.css
+++ b/fhem/www/pgm2/smallscreenstyle.css
@@ -61,14 +61,14 @@ button.dist { margin:5px; }
 
 /* Landscape mode */
 @media all and (orientation:landscape) {
-  div.col1 { width: 282px; }
-  div.col2 { width: 108px; }
-  div.col3 { width: 108px; height: 30px; }
+  div.col1 { width:282px; }
+  div.col2 { width:108px; }
+  div.col3 { width:100%; min-width:108px; height:30px; }
 
   table.block input { text-align: center; }
   table.block tr td:nth-child(3) { text-align: center; }
 
-  table.block div.slider { width: 108px; text-align: center; }
+  table.block div.slider { min-width: 108px; text-align: center; }
   table.block slider { float: none; }
   table.block select { text-align: center; }
 }