FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-01-31 06:39:11 +00:00
Code Issues Releases Wiki Activity

fhemweb.js: add tree structure to the left menu Block (Forum #63530)

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@15732 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2017-12-30 23:07:27 +00:00
parent f90c0ed02d
commit 34ef93d76c
2 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
fhem/FHEM/01_FHEMWEB.pm
View File

@ -1594,9 +1594,10 @@ FW_roomOverview($)
$target = 'target="_blank"' if($l2 =~ s/^$FW_ME\/\+/$FW_ME\//);
$target = 'target="_blank"' if($l2 =~ m/commandref|fhem.de.fhem.html/);
if($l2 =~ m/.html$/ || $l2 =~ m/^(http|javascript)/ || length($target)){
FW_pO "<td><div><a href=\"$l2\" $target >$icon$l1</a></div></td>";
FW_pO "<td><div><a href='$l2' $target>$icon<span>$l1</span></a>".
"</div></td>";
} else {
FW_pH $l2, "$icon$l1", 1, $class;
FW_pH $l2, "$icon<span>$l1</span>", 1, $class;
}
FW_pO "</tr>";

87
fhem/www/pgm2/fhemweb.js
View File

@ -271,6 +271,7 @@ FW_jqueryReadyFn()
FW_smallScreenCommands();
FW_inlineModify();
FW_rawDef();
FW_treeMenu();
}
function
@ -806,6 +807,92 @@ FW_rawDef()
});
}
function
FW_treeMenu()
{
var col = getComputedStyle($("a").get(0),null).getPropertyValue('color');
var arrowRight='data:image/svg+xml;utf8,<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="gray" d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>'
.replace('gray', col);
var arrowDown=arrowRight.replace('/>',' transform="rotate(90,896,896)"/>');
var fnd;
$("div#menu table.room").each(function(){ // one loop per Block
var t = this, ma = {};
$(t).find("td > div > a > span").each(function(e){
var span = this, spanTxt = $(span).html();
var ta = spanTxt.split("--");
if(ta.length <= 1)
return;
fnd = true;
var nxt="", lst="", tr=$(span).closest("tr");
for(var i1=0; i1<ta.length-1; i1++) {
nxt += "--"+ta[i1];
if(!ma[nxt]) {
$(tr).before("<tr class='menuTree closed level"+i1+"' "+
"data-mTree='"+lst+"' data-nxt='"+nxt+"'>"+
"<td><div><a href='#'>"+ta[i1]+"</a><div></div></div></td></tr>");
}
ma[nxt] = true;
lst = nxt;
}
$(span).html(ta[ta.length-1]);
$(tr).attr("data-mTree", nxt)
.addClass("menuTree level"+(ta.length-1));
});
});
if(fnd) {
$("head").append(`
<style>
tr.menuTree { cursor:pointer; }
tr.menuTree.level1 > td > div { margin-left:10px; }
tr.menuTree.level2 > td > div { margin-left:20px; }
tr.menuTree.level3 > td > div { margin-left:30px; }
tr.menuTree.open { font-weight: bold; }
tr.menuTree > td > div > div {
display:inline-block; width:1em; height:1em; float:right;
background-size: contain;
}
</style>`);
var t = $("div#menu table.room");
$(t).find("tr[data-mTree]").not(".level0").hide();
$(t).find("tr.menuTree").click(function(){treeClick(this)});
$(t).find("tr.menuTree > td > div > div")
.css("background-image", "url('"+arrowRight+"')");
var selRoom = $("div#content").attr("room");
if(selRoom) {
var ta = selRoom.split("--"), nxt="";
for(var i1=0; i1<ta.length-1; i1++) {
nxt += "--"+FW_escapeSelector(ta[i1]);
treeClick($(t).find("tr.menuTree[data-nxt="+nxt+"]"));
}
}
}
function
treeClick(el)
{
var tgt = FW_escapeSelector($(el).attr("data-nxt"));
if($(el).hasClass("closed")) {
$(el).closest("table").find("tr[data-mTree="+tgt+"]").show();
$(el).find("div>div").css("background-image", "url('"+arrowDown+"')");
} else {
$(el).closest("table").find("tr[data-mTree="+tgt+"]").hide();
$(el).find("div>div").css("background-image", "url('"+arrowRight+"')");
}
$(el).toggleClass("closed");
$(el).toggleClass("open");
};
}
function
FW_escapeSelector(s)
{
if(typeof s != 'string')
return s;
return s.replace(/[ .#\[\]]/g, function(r) { return '\\'+r });
}
/*************** LONGPOLL START **************/
var FW_pollConn;
var FW_longpollOffset = 0;