Slider for the dimmer

git-svn-id: https://fhem.svn.sourceforge.net/svnroot/fhem/trunk/fhem@1472 2b470e98-0d58-463d-a4d8-8e2adae1ed80

webfrontend/pgm2/fhemweb.js

@@ -48,7 +48,49 @@ FW_delayedStart()
 {
   setTimeout("FW_longpoll()", 1000);
 }
+/*************** LONGPOLL END **************/
 
+/*************** SLIDER **************/
+function
+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'];
+
+    if(offX == -1) {
+      minX = offX = slider.offsetLeft;
+      maxX = minX+slider.offsetWidth-sh.offsetWidth;
+    }
+    lastX = e.clientX;
+
+    document['onmousemove'] = function(e) {
+      var diff = e.clientX-lastX; lastX = e.clientX;
+      offX += diff;
+      if(offX < minX) offX = minX;
+      if(offX > maxX) offX = maxX;
+      val = min+((offX-minX)/(maxX-minX) * (max-min));
+      val = Math.floor(Math.floor(val/stp)*stp);
+      sh.innerHTML = val;
+      sh.setAttribute('style', 'left:'+offX+'px;');
+    }
+
+    document.onmouseup = function(e) {
+      document['onmousemove'] = oldMoveFn;
+      document['onmouseup'] = oldUpFn;
+      slider.nextSibling.setAttribute('value', val);
+    };
+  };
+
+}
+
+
+/*************** Select **************/
+/** Change attr/set argument type to input:text or select **/
 function
 FW_selChange(sel, list, elName)
 {
@@ -62,17 +104,34 @@ FW_selChange(sel, list, elName)
   }
 
   var el = document.getElementsByName(elName)[0];
+  var name = el.getAttribute('name');
+
   if(value==undefined) {
     newEl = document.createElement('input');
     newEl.type='text'; newEl.size=30; 
+
   } else {
-    newEl = document.createElement('select');
-    var vArr = value.split(",");
-    for(var j=0; j < vArr.length; j++) {
-      newEl.options[j] = new Option(vArr[j], vArr[j]);
+    var vArr = value.split(","); 
+    if(vArr.length == 4 && vArr[0] == "slider") {
+      var min=parseFloat(vArr[1]),
+          stp=parseFloat(vArr[2]),
+          max=parseFloat(vArr[3]);
+      newEl = document.createElement('div');
+      newEl.innerHTML=
+        '<div class="slider"><div class="handle">'+min+'</div></div>'+
+        '<input type="hidden" name="'+name+'" value="'+min+'">';
+      Slider(newEl.firstChild, min, stp, max);
+
+    } else {
+      newEl = document.createElement('select');
+      for(var j=0; j < vArr.length; j++) {
+        newEl.options[j] = new Option(vArr[j], vArr[j]);
+      }
     }
   }
-  newEl.class=el.class; newEl.name=el.name;
+
+  newEl.setAttribute('class', el.getAttribute('class')); //changed from el.class
+  newEl.setAttribute('name', el.getAttribute('name'));
   el.parentNode.replaceChild(newEl, el);
+
 }
-/*************** LONGPOLL END **************/