mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Update Link node UI to use TreeList
This commit is contained in:
Nick O'Leary
parent
6031f146aa
commit
7f5d47f39d
@ -14,164 +14,81 @@
|
||||
<div class="form-row node-input-link-row"></div>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#node-input-link-container {
|
||||
position: relative;
|
||||
}
|
||||
#node-input-link-container li {
|
||||
padding: 2px 5px;
|
||||
background: none;
|
||||
font-size: 0.8em;
|
||||
margin:0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#node-input-link-container li label {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#node-input-link-container li label input {
|
||||
vertical-align: top;
|
||||
width:15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#node-input-link-container li:hover,
|
||||
#node-input-link-container li:hover .node-input-target-node-sublabel {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.node-input-link-node-sublabel {
|
||||
position:absolute;
|
||||
right: 0px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
|
||||
function sortNodeList(nodeList,sortOn,sortOnSecond) {
|
||||
var currentSort = nodeList.data('currentSort');
|
||||
var currentSortOrder = nodeList.data('currentSortOrder');
|
||||
var treeList;
|
||||
|
||||
if (!currentSort) {
|
||||
currentSort = sortOn;
|
||||
currentSortOrder = 'a';
|
||||
} else {
|
||||
if (currentSort === sortOn) {
|
||||
currentSortOrder = (currentSortOrder === 'a'?'d':'a');
|
||||
} else {
|
||||
currentSortOrder = 'a';
|
||||
}
|
||||
currentSort = sortOn;
|
||||
}
|
||||
nodeList.data('currentSort',currentSort);
|
||||
nodeList.data('currentSortOrder',currentSortOrder);
|
||||
|
||||
$("#node-input-link-container-div .fa").hide();
|
||||
$(".node-input-link-sort-"+currentSort+"-"+currentSortOrder).show();
|
||||
|
||||
|
||||
var items = nodeList.find("li").get();
|
||||
items.sort(function(a,b) {
|
||||
var labelA = $(a).find(".node-input-link-node-"+currentSort).text().toLowerCase();
|
||||
var labelB = $(b).find(".node-input-link-node-"+currentSort).text().toLowerCase();
|
||||
if (labelA < labelB) { return currentSortOrder==='a'?-1:1; }
|
||||
if (labelA > labelB) { return currentSortOrder==='a'?1:-1; }
|
||||
|
||||
if (sortOnSecond) {
|
||||
labelA = $(a).find(".node-input-link-node-"+sortOnSecond).text().toLowerCase();
|
||||
labelB = $(b).find(".node-input-link-node-"+sortOnSecond).text().toLowerCase();
|
||||
if (labelA < labelB) { return currentSortOrder==='a'?-1:1; }
|
||||
if (labelA > labelB) { return currentSortOrder==='a'?1:-1; }
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
$.each(items, function(i, li) {
|
||||
nodeList.append(li);
|
||||
});
|
||||
}
|
||||
function onEditPrepare(node,targetType) {
|
||||
if (!node.links) {
|
||||
node.links = [];
|
||||
}
|
||||
node.oldLinks = [];
|
||||
|
||||
$('<div id="node-input-link-container-div" style="min-height: 100px;position: relative; box-sizing: border-box; border-radius: 2px; height: 180px; border: 1px solid #ccc;overflow:hidden; ">'+
|
||||
' <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">'+
|
||||
' <div style="display: inline-block;margin-left: 5px;"><a id="node-input-link-sort-label" href="#" data-i18n="[title]node-red:link.label.sortByLabel"><span data-i18n="node-red:link.label.node">name</span> <i class="node-input-link-sort-label-a fa fa-caret-down"></i><i class="node-input-link-sort-label-d fa fa-caret-up"></i></a></div>'+
|
||||
' <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-link-sort-type" href="#" data-i18n="[title]node-red:link.label.sortByFlow"><i class="node-input-link-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-link-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="node-red:link.label.type">flow</span></a></div>'+
|
||||
' </div>'+
|
||||
' <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">'+
|
||||
' <ul id="node-input-link-container" style=" list-style-type:none; margin: 0;"></ul>'+
|
||||
' </div>'+
|
||||
'</div>').appendTo('.node-input-link-row');
|
||||
var activeSubflow = RED.nodes.subflow(node.z);
|
||||
|
||||
var nodeList = $("#node-input-link-container");
|
||||
treeList = $("<div>")
|
||||
.css({width: "100%", height: "100%"})
|
||||
.appendTo(".node-input-link-row")
|
||||
.treeList({})
|
||||
.on('treelistitemmouseover',function(e,item) {
|
||||
if (item.node) {
|
||||
item.node.highlighted = true;
|
||||
item.node.dirty = true;
|
||||
RED.view.redraw();
|
||||
}
|
||||
})
|
||||
.on('treelistitemmouseout',function(e,item) {
|
||||
if (item.node) {
|
||||
item.node.highlighted = false;
|
||||
item.node.dirty = true;
|
||||
RED.view.redraw();
|
||||
}
|
||||
});
|
||||
var candidateNodes = RED.nodes.filterNodes({type:targetType});
|
||||
var inSubflow = !!RED.nodes.subflow(node.z);
|
||||
candidateNodes.forEach(function(n) {
|
||||
if (inSubflow) {
|
||||
if (n.z !== node.z) {
|
||||
return;
|
||||
}
|
||||
|
||||
var flows = [];
|
||||
var flowMap = {};
|
||||
|
||||
if (activeSubflow) {
|
||||
flowMap[activeSubflow.id] = {
|
||||
id: activeSubflow.id,
|
||||
class: 'palette-header',
|
||||
label: "Subflow : "+(activeSubflow.name || activeSubflow.id),
|
||||
expanded: true,
|
||||
children: []
|
||||
};
|
||||
flows.push(flowMap[activeSubflow.id])
|
||||
} else {
|
||||
if (!!RED.nodes.subflow(n.z)) {
|
||||
return;
|
||||
RED.nodes.eachWorkspace(function(ws) {
|
||||
flowMap[ws.id] = {
|
||||
id: ws.id,
|
||||
class: 'palette-header',
|
||||
label: (ws.label || ws.id),
|
||||
expanded: ws.id === node.z,
|
||||
children: []
|
||||
}
|
||||
flows.push(flowMap[ws.id])
|
||||
})
|
||||
}
|
||||
|
||||
candidateNodes.forEach(function(n) {
|
||||
if (flowMap[n.z]) {
|
||||
var isChecked = false;
|
||||
|
||||
isChecked = (node.links.indexOf(n.id) !== -1) || (n.links||[]).indexOf(node.id) !== -1;
|
||||
|
||||
if (isChecked) {
|
||||
node.oldLinks.push(n.id);
|
||||
}
|
||||
|
||||
var container = $('<li/>',{class:"node-input-link-node"});
|
||||
var row = $('<label/>',{for:"node-input-link-node-"+n.id}).appendTo(container);
|
||||
$('<input>',{type:"checkbox",class:"node-input-link-node-checkbox",id:"node-input-link-node-"+n.id})
|
||||
.data('node-id',n.id)
|
||||
.prop('checked', isChecked)
|
||||
.appendTo(row);
|
||||
container.on('mouseover',function(e) {
|
||||
n.highlighted = true;
|
||||
n.dirty = true;
|
||||
RED.view.redraw();
|
||||
});
|
||||
container.on('mouseout',function(e) {
|
||||
n.highlighted = false;
|
||||
n.dirty = true;
|
||||
RED.view.redraw();
|
||||
});
|
||||
var labelSpan = $('<span>');
|
||||
var label = n.name||n.id;
|
||||
var sublabel;
|
||||
var tab = RED.nodes.workspace(n.z);
|
||||
if (tab) {
|
||||
sublabel = tab.label||tab.id;
|
||||
} else {
|
||||
tab = RED.nodes.subflow(n.z);
|
||||
sublabel = "subflow : "+tab.name;
|
||||
flowMap[n.z].children.push({
|
||||
id: n.id,
|
||||
node: n,
|
||||
label: n.name||n.id,
|
||||
selected: isChecked
|
||||
})
|
||||
}
|
||||
$('<span>',{class:"node-input-link-node-label",style:"white-space:nowrap"}).text(label).appendTo(row);
|
||||
if (sublabel) {
|
||||
$('<span>',{class:"node-input-link-node-sublabel"}).text(sublabel).appendTo(row);
|
||||
}
|
||||
container.appendTo(nodeList);
|
||||
});
|
||||
|
||||
sortNodeList(nodeList,'sublabel','label');
|
||||
|
||||
$("#node-input-link-sort-label").click(function(e) {
|
||||
e.preventDefault();
|
||||
sortNodeList(nodeList,'label');
|
||||
});
|
||||
|
||||
$("#node-input-link-sort-type").click(function(e) {
|
||||
e.preventDefault();
|
||||
sortNodeList(nodeList,'sublabel');
|
||||
});
|
||||
flows = flows.filter(function(f) { return f.children.length > 0 })
|
||||
treeList.treeList('data',flows)
|
||||
}
|
||||
|
||||
function resizeNodeList() {
|
||||
@ -182,16 +99,19 @@
|
||||
}
|
||||
var editorRow = $("#dialog-form>div.node-input-link-row");
|
||||
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
|
||||
$("#node-input-link-container-div").css("height",height+"px");
|
||||
$(".node-input-link-row").css("height",height+"px");
|
||||
}
|
||||
|
||||
function onEditSave(node) {
|
||||
var flows = treeList.treeList('data');
|
||||
node.links = [];
|
||||
$(".node-input-link-node-checkbox").each(function(n) {
|
||||
if ($(this).prop("checked")) {
|
||||
node.links.push($(this).data('node-id'));
|
||||
flows.forEach(function(f) {
|
||||
f.children.forEach(function(n) {
|
||||
if (n.selected) {
|
||||
node.links.push(n.id);
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
node.oldLinks.sort();
|
||||
node.links.sort();
|
||||
var nodeMap = {};
|
||||
|
||||
@ -138,14 +138,7 @@
|
||||
},
|
||||
"link": {
|
||||
"linkIn": "link in",
|
||||
"linkOut": "link out",
|
||||
"label": {
|
||||
"event": "Event name",
|
||||
"node": "name",
|
||||
"type": "flow",
|
||||
"sortByFlow":"Sort by flow",
|
||||
"sortByLabel": "Sort by name"
|
||||
}
|
||||
"linkOut": "link out"
|
||||
},
|
||||
"tls": {
|
||||
"tls": "TLS configuration",
|
||||
|
||||
@ -138,14 +138,7 @@
|
||||
},
|
||||
"link": {
|
||||
"linkIn": "link in",
|
||||
"linkOut": "link out",
|
||||
"label": {
|
||||
"event": "イベント名",
|
||||
"node": "名前",
|
||||
"type": "フロー",
|
||||
"sortByFlow": "フロー名で並べ替え",
|
||||
"sortByLabel": "名前で並べ替え"
|
||||
}
|
||||
"linkOut": "link out"
|
||||
},
|
||||
"tls": {
|
||||
"tls": "TLS設定",
|
||||
|
||||
@ -135,14 +135,7 @@
|
||||
},
|
||||
"link": {
|
||||
"linkIn": "输入",
|
||||
"linkOut": "输出",
|
||||
"label": {
|
||||
"event": "事件名称",
|
||||
"node": "节点名称",
|
||||
"type": "流程",
|
||||
"sortByFlow":"根据流程排序",
|
||||
"sortByLabel": "根据名称排序"
|
||||
}
|
||||
"linkOut": "输出"
|
||||
},
|
||||
"tls": {
|
||||
"tls": "TLS设置",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user