f18.js: implement dragging / dashboard (Forum #82351)

git-svn-id: https://svn.fhem.de/fhem/trunk@16075 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.
+  - feature: f18: implement dragging / dashboard
   - change:  93_DbLog: V3.8.3, configCheck improved, execute cache only every
                        syncInterval/2 if cacheLimit reached, error-handling 
                        improved

fhem/FHEM/01_FHEMWEB.pm

@@ -2171,7 +2171,7 @@ FW_style($$)
       "Own modules and helper files:\$MW_dir:^(.*sh|[0-9][0-9].*Util.*pm|".
                         ".*cfg|.*\.holiday|myUtilsTemplate.pm|.*layout)\$\n".
       "Gplot files:\$FW_gplotdir:^.*gplot\$\n".
-      "Styles:\$FW_cssdir:^.*(css|svg)\$");
+      "Style files:\$FW_cssdir:^.*(css|svg)\$");
     foreach my $l (split(/[\r\n]/, $efl)) {
       my ($t, $v, $re) = split(":", $l, 3);
       $v = eval $v;

fhem/FHEM/98_SVG.pm

@@ -175,20 +175,6 @@ SVG_Rename($$)
   SVG_Set($hash, $new, "copyGplotFile");   # Forum #59786
 }
 
-##################
-sub
-SVG_FwDetail($@)
-{
-  my ($d, $text, $nobr)= @_;
-  return "" if(AttrVal($d, "group", ""));
-  my $alias= AttrVal($d, "alias", $d);
-
-  my $ret = ($nobr ? "" : "<br>");
-  $ret .= "$text " if($text);
-  $ret .= FW_pH("detail=$d", $alias,0, "SVGlabel SVG_$d", 1,0) if(!$FW_subdir);
-  $ret .= "<br>";
-  return $ret;
-}
 
 
 sub
@@ -246,10 +232,12 @@ SVG_FwFn($$$$)
   if((!$pageHash || !$pageHash->{buttons}) &&
      AttrVal($d, "fixedrange", "x") !~ m/^[ 0-9:-]*$/) {
 
+    $ret .= '<div class="SVGlabel" data-name="svgZoomControl">';
     $ret .= SVG_zoomLink("zoom=-1", "Zoom-in", "zoom in");
     $ret .= SVG_zoomLink("zoom=1",  "Zoom-out","zoom out");
     $ret .= SVG_zoomLink("off=-1",  "Prev",    "prev");
     $ret .= SVG_zoomLink("off=1",   "Next",    "next");
+    $ret .= '</div>';
     $pageHash->{buttons} = 1 if($pageHash);
     $ret .= "<br>";
   }
@@ -321,8 +309,13 @@ SVG_FwFn($$$$)
     }
 
   } else {
-    $ret .= SVG_FwDetail($d, "", 1) if(!$FW_hiddenroom{detail});
+    if(!AttrVal($d, "group", "") && !$FW_subdir) {
-
+      my $alias = AttrVal($d, "alias", $d);
+      my $clAdd = "\" data-name=\"$d";
+      $clAdd .= "\" style=\"display:none;" if($FW_hiddenroom{detail});
+      $ret .= FW_pH("detail=$d", $alias, 0, "SVGlabel SVG_$d $clAdd", 1, 0);
+      $ret .= "<br>";
+    }
   }
 
   return $ret;

fhem/www/pgm2/f18.js

@@ -1,8 +1,8 @@
 "use strict";
 FW_version["f18.js"] = "$Id$";
 
-// TODO: rewrite menu, dashboard, floorplan
+// TODO: rewrite menu, floorplan
-var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_move=false;
+var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_hasPos;
 var f18_small = (screen.width < 480 || screen.height < 480);
 
 $(window).resize(f18_resize);
@@ -103,9 +103,20 @@ f18_tables()
       var ntr = $(el).closest("tr").next("tr");
       isFixed ? $(ntr).show() : $(ntr).hide();
     });
-    f18_addMove(el, function(){ log("Hello") });
+    if(f18_attr.showDragger)
+      f18_addDragger(el);
+    f18_setPos(el);
   });
 
+  $("div.SVGlabel").each(function(){
+    if(f18_attr.showDragger)
+      f18_addDragger(this);
+    f18_setPos(this);
+  });
+
+  if(f18_hasPos || f18_attr.showDragger)
+    $("div.pinHeader:not(.menu) div.pin").hide();
+
   if(FW_urlParams.detail) {
     $("div.makeTable > span").each(function(){
       var el = this, grp = $(el).text();
@@ -132,15 +143,14 @@ f18_tables()
                 "</tr>");
     };
 
-    var addHider = function(name, desc, fn, lVarName)
+    var addHider = function(name, desc, fn)
     {
       addRow(name, desc, "<input type='checkbox'>");
       $("table.f18colors tr.ar_"+name+" input")
-        .prop("checked", lVarName ? window[lVarName] : f18_attr[name])
+        .prop("checked", f18_attr[name])
         .click(function(){
           var c = $(this).is(":checked");
-          if(!lVarName)
+          f18_setAttr(name, c);
-            f18_setAttr(name, c);
           fn(c);
         });
     };
@@ -230,13 +240,14 @@ f18_tables()
         $("body").toggleClass("rightMenu");
       });
       addHider("savePinChanges", "Save pin changes", function(){});
-
+      addHider("showDragger", "Dragging active", function(c){
-      /*
+        if(c) {
-      addHider("hideMove", "Drag group", function(c){
+          $("div.fileList").each(function(){ f18_addDragger(this) });
-        $("div.pinHeader div.move").css("display", c ? "block":"none");
+          $("div.pinHeader:not(.menu) div.pin").hide();
-        f18_move = c;
+        } else {
-      }, "f18_move");
+          $("div.pinHeader div.dragger").remove();
-      */
+        }
+      });
 
     };
     loadScript("pgm2/fhemweb_colorpicker.js", addColors);
@@ -251,8 +262,12 @@ f18_tables()
         var ntr = $(el).next("table");
         isFixed ? $(ntr).show() : $(ntr).hide();
       });
-      f18_addMove(el, function(){ log("Hello") });
+      if(f18_attr.showDragger)
+        f18_addDragger(el);
+      f18_setPos(el);
     });
+    if(f18_hasPos || f18_attr.showDragger)
+      $("div.pinHeader:not(.menu) div.pin").hide();
   }
 }
 
@@ -278,7 +293,10 @@ f18_addPin(el, name, defVal, fn, hidePin)
     .appendTo(el)
     .css("background-image", "url('"+
                               (init ? f18_icon.pinIn : f18_icon.pinOut)+"')");
-  $(el).addClass("col_header pinHeader "+name.replace(/[^A-Z0-9]/ig,'_'));
+  var f18_name = name.replace(/[^A-Z0-9]/ig,'_');
+  $(el)
+    .addClass("col_header pinHeader "+f18_name)
+    .attr("data-name", f18_name);
   el = $(el).find("div.pin");
   $(el)
     .addClass(init ? "pinIn" : "")
@@ -296,16 +314,61 @@ f18_addPin(el, name, defVal, fn, hidePin)
 }
 
 function
-f18_addMove(el, fn)
+f18_addDragger(el)
 {
-  $("<div class='move'></div>")
+  if(f18_small)
+    return;
+  var comp = $(el).hasClass("fileList") ?  $(el).next("table") : 
+             $(el).hasClass("SVGlabel") ?  $(el).prev(".SVGplot") :
+             $(el).closest("tr").next().find(">td>table").first();
+
+  $("<div class='dragger dragMove'></div>")
     .appendTo(el)
-    .css("background-image", "url('"+f18_icon.arrows+"')")
+    .css({"cursor":"pointer",
-    .css("display", f18_move ? "block":"none");
+         "background-image":"url('"+f18_icon.arrows+"')"})
-  el = $(el).find("div.move");
+  $(el).draggable({
-  $(el)
+    drag:function(evt,ui){
-    .css("cursor", "pointer")
+      $(comp).css({ left:ui.position.left, top:ui.position.top});
-    .click(fn);
+    },
+    start:function(evt,ui){
+      $(comp).css({ position:"relative",
+                    left:0, top:0, right:"auto", bottom:"auto" });
+    },
+    stop:function(evt,ui){
+      f18_setAttr("Pos."+$(el).attr("data-name"), ui.position);
+    },
+  });
+
+  $("<div class='dragger dragReset'></div>")
+    .appendTo(el)
+    .css({"cursor":"pointer",
+         "background-image":"url('"+f18_icon.ban+"')"})
+    .click(function(){
+      $(el)  .css({ left:0, top:0 });
+      $(comp).css({ left:0, top:0 });
+      delete(f18_attr["Pos."+$(el).attr("data-name")]);
+      f18_setAttr();
+    });
+}
+
+function
+f18_setPos(el)
+{
+  if(f18_small)
+    return;
+  var name = $(el).attr("data-name");
+  var pos = f18_attr["Pos."+name];
+  if(!pos)
+    return;
+
+  f18_hasPos = true;
+  var comp = $(el).hasClass("fileList") ?  $(el).next("table") : 
+             $(el).hasClass("SVGlabel") ?  $(el).prev(".SVGplot") :
+             $(el).closest("tr").next().find(">td>table").first();
+  $(el).css({ position:"relative",
+              left:pos.left, top:pos.top, right:"auto", bottom:"auto" });
+  $(comp).css({ position:"relative",
+              left:pos.left, top:pos.top, right:"auto", bottom:"auto" });
 }
 
 function
@@ -448,3 +511,18 @@ f18_icon.pinIn=f18_svgPrefix+'d="M896 1088q66 0 128-15v655q0 26-19 45t-45 19h-12
 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.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>';
+
+
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011-2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  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);

fhem/www/pgm2/f18style.css

@@ -45,7 +45,7 @@ div.dist { padding-top:0.3em; }
 button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
 select,input[type=submit] { cursor:pointer; }
 
-div.pin, div.move { float:right; width:1em; height:1em; margin-left:0.5em; }
+div.pin, div.dragger { float:right; width:1em; height:1em; margin-left:0.5em; }
 div.pinHeader { height:1em; padding:2px; }
 
 body.touch a { font-size: 20px; }
@@ -63,3 +63,5 @@ body.pinnedMenu #logo { left:10px; }
 body.small.rightMenu #menuBtn { right:10px; left:auto; }
 body.small.rightMenu #logo { right:52px; left:auto; }
 body.small.rightMenu #hdr { left:10px; right:auto; }
+
+div.SVGlabel { display:inline-block; }

fhem/www/pgm2/fhemweb.js

@@ -457,7 +457,10 @@ FW_csrfRefresh(callback)
 function
 FW_cmd(arg, callback)
 {
-  log("FW_cmd:"+arg);
+  if(arg.length < 120)
+    log("FW_cmd:"+arg);
+  else
+    log("FW_cmd:"+arg.substr(0,120)+"...");
   $.ajax({
     url:addcsrf(arg)+'&fw_id='+$("body").attr('fw_id'),
     method:'POST',