mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Merge pull request #434 from anna2130/palette-multi-line-nodes
Node expands for multi-line node names
This commit is contained in:
commit
483c4352d3
@ -13,12 +13,12 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
|
||||
|
||||
RED.palette = (function() {
|
||||
|
||||
var exclusion = ['config','unknown','deprecated'];
|
||||
var core = ['input', 'output', 'function', 'social', 'storage', 'analysis', 'advanced'];
|
||||
|
||||
|
||||
function createCategoryContainer(category){
|
||||
var escapedCategory = category.replace(" ","_");
|
||||
$("#palette-container").append('<div class="palette-category">'+
|
||||
@ -29,71 +29,103 @@ RED.palette = (function() {
|
||||
'<div id="palette-'+category+'-function"></div>'+
|
||||
'</div>'+
|
||||
'</div>');
|
||||
|
||||
|
||||
$("#header-"+category).on('click', function(e) {
|
||||
$(this).next().slideToggle();
|
||||
$(this).children("i").toggleClass("expanded");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
core.forEach(createCategoryContainer);
|
||||
|
||||
|
||||
function addNodeType(nt,def) {
|
||||
|
||||
|
||||
var nodeTypeId = nt.replace(" ","_");
|
||||
|
||||
|
||||
if ($("#palette_node_"+nodeTypeId).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (exclusion.indexOf(def.category)===-1) {
|
||||
|
||||
|
||||
var category = def.category.replace(" ","_");
|
||||
var rootCategory = category.split("-")[0];
|
||||
|
||||
|
||||
var d = document.createElement("div");
|
||||
d.id = "palette_node_"+nodeTypeId;
|
||||
d.type = nt;
|
||||
|
||||
|
||||
// calculate width of label text
|
||||
$.fn.textWidth = function(text, font) {
|
||||
if (!$.fn.textWidth.fakeEl) {
|
||||
$.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
|
||||
}
|
||||
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
|
||||
return $.fn.textWidth.fakeEl.width();
|
||||
};
|
||||
|
||||
var label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
|
||||
|
||||
d.innerHTML = '<div class="palette_label">'+label+"</div>";
|
||||
var pixels = $.fn.textWidth(label, '13px helvetica');
|
||||
var nodeWidth = 90;
|
||||
var labelWidth = nodeWidth - 10;
|
||||
var numLines = Math.ceil(pixels / nodeWidth);
|
||||
var multiLine = numLines > 1;
|
||||
|
||||
// styles matching with style.css
|
||||
var nodeHeight = 25;
|
||||
var lineHeight = 16;
|
||||
var portHeight = 10;
|
||||
var multiLineNodeHeight = lineHeight * numLines + (nodeHeight - lineHeight);
|
||||
|
||||
d.innerHTML = '<div class="palette_label"'+
|
||||
(multiLine ? 'style="line-height: '+
|
||||
lineHeight + 'px; margin-top: 5px"' : '')+
|
||||
'>'+label+"</div>";
|
||||
d.className="palette_node";
|
||||
if (def.icon) {
|
||||
d.style.backgroundImage = "url(icons/"+def.icon+")";
|
||||
if (multiLine) {
|
||||
d.style.backgroundSize = "18px 27px";
|
||||
}
|
||||
if (def.align == "right") {
|
||||
d.style.backgroundPosition = "95% 50%";
|
||||
} else if (def.inputs > 0) {
|
||||
d.style.backgroundPosition = "10% 50%";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
d.style.backgroundColor = def.color;
|
||||
|
||||
d.style.height = multiLineNodeHeight + "px";
|
||||
|
||||
if (def.outputs > 0) {
|
||||
var portOut = document.createElement("div");
|
||||
portOut.className = "palette_port palette_port_output";
|
||||
if (multiLine) {
|
||||
portOut.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px";
|
||||
}
|
||||
d.appendChild(portOut);
|
||||
}
|
||||
|
||||
|
||||
if (def.inputs > 0) {
|
||||
var portIn = document.createElement("div");
|
||||
portIn.className = "palette_port";
|
||||
if (multiLine) {
|
||||
portIn.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px";
|
||||
}
|
||||
d.appendChild(portIn);
|
||||
}
|
||||
|
||||
|
||||
if ($("#palette-base-category-"+rootCategory).length === 0) {
|
||||
createCategoryContainer(rootCategory);
|
||||
}
|
||||
|
||||
if ($("#palette-"+category).length === 0) {
|
||||
$("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
|
||||
|
||||
if ($("#palette-"+category).length === 0) {
|
||||
$("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
|
||||
}
|
||||
|
||||
|
||||
$("#palette-"+category).append(d);
|
||||
d.onmousedown = function(e) { e.preventDefault(); }
|
||||
|
||||
d.onmousedown = function(e) { e.preventDefault(); };
|
||||
|
||||
$(d).popover({
|
||||
title:d.type,
|
||||
placement:"right",
|
||||
@ -101,7 +133,7 @@ RED.palette = (function() {
|
||||
delay: { show: 750, hide: 50 },
|
||||
html: true,
|
||||
container:'body',
|
||||
content: $(($("script[data-help-name|='"+nt+"']").html()||"<p>no information available</p>").trim())[0]
|
||||
content: $(($("script[data-help-name|='"+nt+"']").html()||"<p>no information available</p>").trim())[0]
|
||||
});
|
||||
$(d).click(function() {
|
||||
var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
|
||||
@ -115,7 +147,7 @@ RED.palette = (function() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function removeNodeType(nt) {
|
||||
var nodeTypeId = nt.replace(" ","_");
|
||||
$("#palette_node_"+nodeTypeId).remove();
|
||||
@ -124,12 +156,12 @@ RED.palette = (function() {
|
||||
var nodeTypeId = nt.replace(" ","_");
|
||||
$("#palette_node_"+nodeTypeId).hide();
|
||||
}
|
||||
|
||||
|
||||
function showNodeType(nt) {
|
||||
var nodeTypeId = nt.replace(" ","_");
|
||||
$("#palette_node_"+nodeTypeId).show();
|
||||
}
|
||||
|
||||
|
||||
function filterChange() {
|
||||
var val = $("#palette-search-input").val();
|
||||
if (val === "") {
|
||||
@ -137,7 +169,7 @@ RED.palette = (function() {
|
||||
} else {
|
||||
$("#palette-search-clear").show();
|
||||
}
|
||||
|
||||
|
||||
var re = new RegExp(val);
|
||||
$(".palette_node").each(function(i,el) {
|
||||
if (val === "" || re.test(el.id)) {
|
||||
@ -147,21 +179,21 @@ RED.palette = (function() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$("#palette-search-input").focus(function(e) {
|
||||
RED.keyboard.disable();
|
||||
});
|
||||
$("#palette-search-input").blur(function(e) {
|
||||
RED.keyboard.enable();
|
||||
});
|
||||
|
||||
|
||||
$("#palette-search-clear").on("click",function(e) {
|
||||
e.preventDefault();
|
||||
$("#palette-search-input").val("");
|
||||
filterChange();
|
||||
$("#palette-search-input").focus();
|
||||
});
|
||||
|
||||
|
||||
$("#palette-search-input").val("");
|
||||
$("#palette-search-input").on("keyup",function() {
|
||||
filterChange();
|
||||
@ -172,7 +204,7 @@ RED.palette = (function() {
|
||||
$("#palette-search-input").blur();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
add:addNodeType,
|
||||
remove:removeNodeType,
|
||||
|
Loading…
Reference in New Issue
Block a user