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
parent
f13e02a1a9
commit
8789d983ed
@ -498,8 +498,7 @@ RED.diff = (function() {
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconPath = RED.utils.separateIconPath(icon_url);
|
||||
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, false);
|
||||
|
||||
return nodeDiv;
|
||||
}
|
||||
|
||||
@ -746,11 +746,11 @@ RED.editor = (function() {
|
||||
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
|
||||
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
|
||||
var colour = RED.utils.getNodeColor(node.type, node._def);
|
||||
var icon_url = "icons/"+moduleName+"/"+icon;
|
||||
iconDiv.data('icon',icon_url)
|
||||
var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
|
||||
iconDiv.data('icon',icon_url);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
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) {
|
||||
iconDiv.addClass("selected");
|
||||
@ -820,7 +820,7 @@ RED.editor = (function() {
|
||||
var icon_url = RED.utils.getNodeIcon(node._def,node);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
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) {
|
||||
e.preventDefault();
|
||||
@ -834,7 +834,7 @@ RED.editor = (function() {
|
||||
showIconPicker(iconRow,node,iconPath,function(newIcon) {
|
||||
$("#node-settings-icon").text(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);
|
||||
|
||||
@ -129,10 +129,9 @@ RED.palette = (function() {
|
||||
}
|
||||
|
||||
function setIcon(element,sf) {
|
||||
var iconElement = element.find(".palette_icon");
|
||||
var faIconElement = element.find("i");
|
||||
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) {
|
||||
@ -170,7 +169,7 @@ RED.palette = (function() {
|
||||
if (def.icon) {
|
||||
var icon_url = RED.utils.getNodeIcon(def);
|
||||
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);
|
||||
|
||||
@ -203,8 +203,7 @@ RED.search = (function() {
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconPath = RED.utils.separateIconPath(icon_url);
|
||||
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, true);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
|
||||
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
|
||||
if (node.z) {
|
||||
|
||||
@ -133,8 +133,7 @@ RED.typeSearch = (function() {
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconPath = RED.utils.separateIconPath(icon_url);
|
||||
RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, false);
|
||||
|
||||
if (def.inputs > 0) {
|
||||
$('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);
|
||||
|
||||
@ -892,42 +892,33 @@ RED.utils = (function() {
|
||||
return parts;
|
||||
}
|
||||
|
||||
function createIconElement(moduleName, iconName, iconContainer, isLarge) {
|
||||
if (moduleName === "font-awesome") {
|
||||
var faLarge = isLarge ? "fa-lg " : "";
|
||||
$('<i class="palette_icon_fa fa fa-fw '+faLarge+iconName+'"></i>').appendTo(iconContainer);
|
||||
} else {
|
||||
var iconUrl = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+iconName;
|
||||
$('<div/>',{class:"palette_icon",style:"background-image: url("+iconUrl+")"}).appendTo(iconContainer);
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
|
||||
function createDynamicIconElement(iconUrl, iconContainer) {
|
||||
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
|
||||
// Show either icon image or font-awesome icon
|
||||
var iconPath = separateIconPath(iconUrl);
|
||||
if (iconPath.module === "font-awesome") {
|
||||
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);
|
||||
var faLarge = isLarge ? "fa-lg " : "";
|
||||
faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
|
||||
} else {
|
||||
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
|
||||
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 {
|
||||
@ -943,8 +934,6 @@ RED.utils = (function() {
|
||||
addSpinnerOverlay: addSpinnerOverlay,
|
||||
decodeObject: decodeObject,
|
||||
parseContextKey: parseContextKey,
|
||||
createIconElement: createIconElement,
|
||||
createDynamicIconElement: createDynamicIconElement,
|
||||
changeIconElement: changeIconElement
|
||||
createIconElement: createIconElement
|
||||
}
|
||||
})();
|
||||
|
||||
@ -1869,23 +1869,36 @@ RED.view = (function() {
|
||||
resetMouseVars();
|
||||
}
|
||||
|
||||
function updateIconAttributes(iconUrl, icon, fontAwesomeIcon, d) {
|
||||
var isIconImage = true;
|
||||
function createIconAttributes(iconUrl, icon_group, d) {
|
||||
var fontAwesomeUnicode = null;
|
||||
if (iconUrl.indexOf("font-awesome/") === 0) {
|
||||
var iconName = iconUrl.substr(13);
|
||||
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
|
||||
if (fontAwesomeUnicode) {
|
||||
isIconImage = false;
|
||||
fontAwesomeIcon.text(fontAwesomeUnicode);
|
||||
} else {
|
||||
if (!fontAwesomeUnicode) {
|
||||
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) {
|
||||
// Hide font-awesome icon.
|
||||
fontAwesomeIcon.attr("xlink:href",null);
|
||||
fontAwesomeIcon.text(null);
|
||||
if (fontAwesomeUnicode) {
|
||||
// Since Node-RED workspace uses SVG, i tag cannot be used for font-awesome icon.
|
||||
// On SVG, use text tag as an alternative.
|
||||
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();
|
||||
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);});
|
||||
//}
|
||||
}
|
||||
} else {
|
||||
// Hide icon image.
|
||||
icon.attr("xlink:href",null);
|
||||
icon.style("display","none");
|
||||
|
||||
fontAwesomeIcon.attr("xlink:href",iconUrl);
|
||||
}
|
||||
|
||||
return iconUrl;
|
||||
}
|
||||
|
||||
function redraw() {
|
||||
@ -2155,22 +2160,7 @@ RED.view = (function() {
|
||||
.attr("fill-opacity","0.05")
|
||||
.attr("height",function(d){return Math.min(50,d.h-4);});
|
||||
|
||||
var icon = icon_group.append("image")
|
||||
.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");
|
||||
createIconAttributes(icon_url, icon_group, d);
|
||||
|
||||
var icon_shade_border = icon_group.append("path")
|
||||
.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);
|
||||
//}
|
||||
|
||||
updateIconAttributes(icon_url, icon, fontAwesomeIcon, d);
|
||||
|
||||
//icon.style("pointer-events","none");
|
||||
icon_group.style("pointer-events","none");
|
||||
}
|
||||
@ -2334,17 +2322,23 @@ RED.view = (function() {
|
||||
});
|
||||
|
||||
if (d._def.icon) {
|
||||
icon = thisNode.select(".node_icon");
|
||||
var icon = thisNode.select(".node_icon");
|
||||
var faIcon = thisNode.select(".fa-lg");
|
||||
var current_url;
|
||||
if (icon.attr("xlink:href")) {
|
||||
if (!icon.empty()) {
|
||||
current_url = icon.attr("xlink:href");
|
||||
} else {
|
||||
current_url = faIcon.attr("xlink:href");
|
||||
}
|
||||
var new_url = RED.utils.getNodeIcon(d._def,d);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user