1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Show icon element with either icon image or fa-icon

This commit is contained in:
nakanishi 2018-09-28 17:07:55 +09:00
parent f13e02a1a9
commit 8789d983ed
7 changed files with 69 additions and 90 deletions

View File

@ -498,8 +498,7 @@ RED.diff = (function() {
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
var iconPath = RED.utils.separateIconPath(icon_url); RED.utils.createIconElement(icon_url, iconContainer, false);
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
return nodeDiv; return nodeDiv;
} }

View File

@ -746,11 +746,11 @@ RED.editor = (function() {
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList); var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv); var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
var colour = RED.utils.getNodeColor(node.type, node._def); var colour = RED.utils.getNodeColor(node.type, node._def);
var icon_url = "icons/"+moduleName+"/"+icon; var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
iconDiv.data('icon',icon_url) iconDiv.data('icon',icon_url);
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
RED.utils.createIconElement(moduleName, icon, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true);
if (iconPath.module === moduleName && iconPath.file === icon) { if (iconPath.module === moduleName && iconPath.file === icon) {
iconDiv.addClass("selected"); iconDiv.addClass("selected");
@ -820,7 +820,7 @@ RED.editor = (function() {
var icon_url = RED.utils.getNodeIcon(node._def,node); var icon_url = RED.utils.getNodeIcon(node._def,node);
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
var iconElements = RED.utils.createDynamicIconElement(icon_url, iconContainer); RED.utils.createIconElement(icon_url, iconContainer, true);
iconButton.click(function(e) { iconButton.click(function(e) {
e.preventDefault(); e.preventDefault();
@ -834,7 +834,7 @@ RED.editor = (function() {
showIconPicker(iconRow,node,iconPath,function(newIcon) { showIconPicker(iconRow,node,iconPath,function(newIcon) {
$("#node-settings-icon").text(newIcon||""); $("#node-settings-icon").text(newIcon||"");
var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon}); var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
RED.utils.changeIconElement(icon_url, iconElements.image, iconElements.fa); RED.utils.createIconElement(icon_url, iconContainer, true);
}); });
}) })
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow); $('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);

View File

@ -129,10 +129,9 @@ RED.palette = (function() {
} }
function setIcon(element,sf) { function setIcon(element,sf) {
var iconElement = element.find(".palette_icon");
var faIconElement = element.find("i");
var icon_url = RED.utils.getNodeIcon(sf._def,sf); var icon_url = RED.utils.getNodeIcon(sf._def,sf);
RED.utils.changeIconElement(icon_url, iconElement, faIconElement); var iconContainer = element.find(".palette_icon_container");
RED.utils.createIconElement(icon_url, iconContainer, true);
} }
function escapeNodeType(nt) { function escapeNodeType(nt) {
@ -170,7 +169,7 @@ RED.palette = (function() {
if (def.icon) { if (def.icon) {
var icon_url = RED.utils.getNodeIcon(def); var icon_url = RED.utils.getNodeIcon(def);
var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d); var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
RED.utils.createDynamicIconElement(icon_url, iconContainer); RED.utils.createIconElement(icon_url, iconContainer, true);
} }
d.style.backgroundColor = RED.utils.getNodeColor(nt,def); d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

View File

@ -203,8 +203,7 @@ RED.search = (function() {
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
var iconPath = RED.utils.separateIconPath(icon_url); RED.utils.createIconElement(icon_url, iconContainer, true);
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
if (node.z) { if (node.z) {

View File

@ -133,8 +133,7 @@ RED.typeSearch = (function() {
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
var iconPath = RED.utils.separateIconPath(icon_url); RED.utils.createIconElement(icon_url, iconContainer, false);
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
if (def.inputs > 0) { if (def.inputs > 0) {
$('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv); $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

View File

@ -892,42 +892,33 @@ RED.utils = (function() {
return parts; return parts;
} }
function createIconElement(moduleName, iconName, iconContainer, isLarge) { /**
if (moduleName === "font-awesome") { * Create or update an icon element and append it to iconContainer.
* @param iconUrl - Url of icon.
* @param iconContainer - icon container element with palette_icon_container class.
* @param isLarge - whether the icon size is large.
*/
function createIconElement(iconUrl, iconContainer, isLarge) {
// Removes the previous icon when icon was changed.
var iconElement = iconContainer.find(".palette_icon");
if (iconElement.length !== 0) {
iconElement.remove();
}
var faIconElement = iconContainer.find("i");
if (faIconElement.length !== 0) {
faIconElement.remove();
}
// Show either icon image or font-awesome icon
var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") {
var faIconElement = $('<i/>').appendTo(iconContainer);
var faLarge = isLarge ? "fa-lg " : ""; var faLarge = isLarge ? "fa-lg " : "";
$('<i class="palette_icon_fa fa fa-fw '+faLarge+iconName+'"></i>').appendTo(iconContainer); faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
} else {
var iconUrl = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+iconName;
$('<div/>',{class:"palette_icon",style:"background-image: url("+iconUrl+")"}).appendTo(iconContainer);
}
}
function createDynamicIconElement(iconUrl, iconContainer) {
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
var faIconElement = $('<i/>').appendTo(iconContainer);
var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") {
faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
} else { } else {
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")"); imageIconElement.css("backgroundImage", "url("+iconUrl+")");
} }
var iconElements = {
"image": imageIconElement,
"fa": faIconElement
};
return iconElements;
}
function changeIconElement(iconUrl, imageIconElement, faIconElement) {
var iconPath = separateIconPath(iconUrl);
faIconElement.removeClass();
if (iconPath.module === "font-awesome") {
imageIconElement.hide();
faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
} else {
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
imageIconElement.show();
}
} }
return { return {
@ -943,8 +934,6 @@ RED.utils = (function() {
addSpinnerOverlay: addSpinnerOverlay, addSpinnerOverlay: addSpinnerOverlay,
decodeObject: decodeObject, decodeObject: decodeObject,
parseContextKey: parseContextKey, parseContextKey: parseContextKey,
createIconElement: createIconElement, createIconElement: createIconElement
createDynamicIconElement: createDynamicIconElement,
changeIconElement: changeIconElement
} }
})(); })();

View File

@ -1869,23 +1869,36 @@ RED.view = (function() {
resetMouseVars(); resetMouseVars();
} }
function updateIconAttributes(iconUrl, icon, fontAwesomeIcon, d) { function createIconAttributes(iconUrl, icon_group, d) {
var isIconImage = true; var fontAwesomeUnicode = null;
if (iconUrl.indexOf("font-awesome/") === 0) { if (iconUrl.indexOf("font-awesome/") === 0) {
var iconName = iconUrl.substr(13); var iconName = iconUrl.substr(13);
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName); var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
if (fontAwesomeUnicode) { if (!fontAwesomeUnicode) {
isIconImage = false;
fontAwesomeIcon.text(fontAwesomeUnicode);
} else {
var iconPath = RED.utils.getDefaultNodeIcon(d._def, d); var iconPath = RED.utils.getDefaultNodeIcon(d._def, d);
iconUrl = "icons/"+iconPath.module+"/"+iconPath.file; iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
} }
} }
if (isIconImage) { if (fontAwesomeUnicode) {
// Hide font-awesome icon. // Since Node-RED workspace uses SVG, i tag cannot be used for font-awesome icon.
fontAwesomeIcon.attr("xlink:href",null); // On SVG, use text tag as an alternative.
fontAwesomeIcon.text(null); icon_group.append("text")
.attr("xlink:href",iconUrl)
.attr("class","fa-lg")
.attr("x",15)
.attr("y",21)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome")
.text(fontAwesomeUnicode);
} else {
var icon = icon_group.append("image")
.attr("xlink:href",iconUrl)
.attr("class","node_icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
var img = new Image(); var img = new Image();
img.src = iconUrl; img.src = iconUrl;
@ -1901,15 +1914,7 @@ RED.view = (function() {
// icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);}); // icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
//} //}
} }
} else {
// Hide icon image.
icon.attr("xlink:href",null);
icon.style("display","none");
fontAwesomeIcon.attr("xlink:href",iconUrl);
} }
return iconUrl;
} }
function redraw() { function redraw() {
@ -2155,22 +2160,7 @@ RED.view = (function() {
.attr("fill-opacity","0.05") .attr("fill-opacity","0.05")
.attr("height",function(d){return Math.min(50,d.h-4);}); .attr("height",function(d){return Math.min(50,d.h-4);});
var icon = icon_group.append("image") createIconAttributes(icon_url, icon_group, d);
.attr("xlink:href",icon_url)
.attr("class","node_icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
var fontAwesomeIcon = icon_group.append("text")
.attr("xlink:href",icon_url)
.attr("class","fa-lg")
.attr("x",15)
.attr("y",21)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome");
var icon_shade_border = icon_group.append("path") var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)}) .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
@ -2196,8 +2186,6 @@ RED.view = (function() {
// icon_shade.attr("width",35); //icon.attr("x",5); // icon_shade.attr("width",35); //icon.attr("x",5);
//} //}
updateIconAttributes(icon_url, icon, fontAwesomeIcon, d);
//icon.style("pointer-events","none"); //icon.style("pointer-events","none");
icon_group.style("pointer-events","none"); icon_group.style("pointer-events","none");
} }
@ -2334,17 +2322,23 @@ RED.view = (function() {
}); });
if (d._def.icon) { if (d._def.icon) {
icon = thisNode.select(".node_icon"); var icon = thisNode.select(".node_icon");
var faIcon = thisNode.select(".fa-lg"); var faIcon = thisNode.select(".fa-lg");
var current_url; var current_url;
if (icon.attr("xlink:href")) { if (!icon.empty()) {
current_url = icon.attr("xlink:href"); current_url = icon.attr("xlink:href");
} else { } else {
current_url = faIcon.attr("xlink:href"); current_url = faIcon.attr("xlink:href");
} }
var new_url = RED.utils.getNodeIcon(d._def,d); var new_url = RED.utils.getNodeIcon(d._def,d);
if (new_url !== current_url) { if (new_url !== current_url) {
updateIconAttributes(new_url, icon, faIcon, d); if (!icon.empty()) {
icon.remove();
} else {
faIcon.remove();
}
var iconGroup = thisNode.select(".node_icon_group");
createIconAttributes(new_url, iconGroup, d);
} }
} }