mirrors/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red synced 2024-11-23 00:52:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2881 from bartbutenaers/editableList-buttons

Browse Source 
EditableList custom buttons
This commit is contained in:
Nick O'Leary 2021-02-25 15:58:23 +00:00 committed by GitHub
commit 5809a3af0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -857,7 +857,8 @@
}
},
"editableList": {
"add": "add"
"add": "add",
"addTitle": "add an item"
},
"search": {
"empty": "No matches found",

39
packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js vendored
View File

@ -18,6 +18,7 @@
/**
* options:
* - addButton : boolean|string - text for add label, default 'add'
* - buttons : array - list of custom buttons (objects with fields 'label', 'icon', 'title', 'click')
* - height : number|'auto'
* - resize : function - called when list as a whole is resized
* - resizeItem : function(item) - called to resize individual item
@ -67,24 +68,52 @@
this.topContainer.addClass(this.options.class);
}
var buttons = this.options.buttons || [];
if (this.options.addButton !== false) {
var addLabel;
var addLabel, addTittle;
if (typeof this.options.addButton === 'string') {
addLabel = this.options.addButton
} else {
if (RED && RED._) {
addLabel = RED._("editableList.add");
addTitle = RED._("editableList.addTitle");
} else {
addLabel = 'add';
addTitle = 'add new item';
}
}
$('<a href="#" class="red-ui-button red-ui-button-small red-ui-editableList-addButton" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
.appendTo(this.topContainer)
.on("click", function(evt) {
evt.preventDefault();
buttons.unshift({
label: addLabel,
icon: "fa fa-plus",
click: function(evt) {
that.addItem({});
},
title: addTitle
});
}
buttons.forEach(function(button) {
var element = $('<a href="#" class="red-ui-button red-ui-button-small red-ui-editableList-addButton" style="margin-top: 4px; margin-right: 5px;"></a>')
.appendTo(that.topContainer)
.on("click", function(evt) {
evt.preventDefault();
if (button.click !== undefined) {
button.click(evt);
}
});
if (button.title) {
element.attr("title", button.title);
}
if (button.icon) {
element.append($("<i></i>").attr("class", button.icon));
}
if (button.label) {
element.append($("<span></span>").text(" " + button.label));
}
});
if (this.element.css("position") === "absolute") {
["top","left","bottom","right"].forEach(function(s) {
var v = that.element.css(s);