Slider adapted to touchpad

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

fhem/webfrontend/pgm2/fhemweb.js

@@ -57,10 +57,21 @@ Slider(slider, min, stp, max)
   var sh = slider.firstChild;
   var lastX=-1, offX=-1, minX, maxX, val=-1;
 
-  sh.onselectstart = function() { return false; }
-  sh.onmousedown = function(e) {
-    var oldMoveFn = document['onmousemove'];
-    var oldUpFn = document['onmouseup'];
+  function
+  touchFn(e, fn)
+  {
+    e.preventDefault(); // Prevents Safari from scrolling!
+    if(e.touches == null || e.touches.length == 0)
+      return;
+    e.clientX = e.touches[0].clientX;
+    fn(e);
+  }
+
+  function
+  mouseDown(e)
+  {
+    var oldFn1 = document.onmousemove, oldFn2 = document.onmouseup,
+        oldFn3 = document.ontouchmove, oldFn4 = document.ontouchend;
 
     if(offX == -1) {
       minX = offX = slider.offsetLeft;
@@ -68,7 +79,9 @@ Slider(slider, min, stp, max)
     }
     lastX = e.clientX;
 
-    document['onmousemove'] = function(e) {
+    function
+    mouseMove(e)
+    {
       var diff = e.clientX-lastX; lastX = e.clientX;
       offX += diff;
       if(offX < minX) offX = minX;
@@ -78,14 +91,21 @@ Slider(slider, min, stp, max)
       sh.innerHTML = val;
       sh.setAttribute('style', 'left:'+offX+'px;');
     }
+    document.onmousemove = mouseMove;
+    document.ontouchmove = function(e) { touchFn(e, mouseMove); }
 
-    document.onmouseup = function(e) {
-      document['onmousemove'] = oldMoveFn;
-      document['onmouseup'] = oldUpFn;
+    document.onmouseup = document.ontouchend = function(e)
+    {
+      document.onmousemove = oldFn1; document.onmouseup  = oldFn2;
+      document.ontouchmove = oldFn3; document.ontouchend = oldFn4;
       slider.nextSibling.setAttribute('value', val);
     };
   };
 
+  sh.onselectstart = function() { return false; }
+  sh.onmousedown = mouseDown;
+  sh.ontouchstart = function(e) { touchFn(e, mouseDown); }
+
 }
 
 

fhem/webfrontend/pgm2/touchpadstyle.css

@@ -26,7 +26,8 @@ table#room tr.sel { background: #A0FFFF; }
 
 .set,.attr { margin-bottom:5px; float:left; }
 .slider { float:right; width:250px; height:26px; background:#F0F0D8;
-          margin-left:10px; -moz-border-radius:8px; border-radius:8px; }
-.handle { position:absolute; cursor:pointer; width:50px; height:20px; line-height:20px;
-          border:3px solid; color:#278727; text-align:center; } 
-.downText { margin-top:2px; }
+          margin-top:3px; margin-left:10px;
+          -moz-border-radius:8px; border-radius:8px; }
+.handle { position:absolute; cursor:pointer; width:50px; height:20px;
+        line-height:20px; border:3px solid; color:#278727; text-align:center; } 
+.downText { margin-top:6px; }