frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues 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": { "editableList": {
"add": "add" "add": "add",
"addTitle": "add an item"
}, },
"search": { "search": {
"empty": "No matches found", "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: * options:
* - addButton : boolean|string - text for add label, default 'add' * - 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' * - height : number|'auto'
* - resize : function - called when list as a whole is resized * - resize : function - called when list as a whole is resized
* - resizeItem : function(item) - called to resize individual item * - resizeItem : function(item) - called to resize individual item
@ -67,24 +68,52 @@
this.topContainer.addClass(this.options.class); this.topContainer.addClass(this.options.class);
} }
var buttons = this.options.buttons || [];
if (this.options.addButton !== false) { if (this.options.addButton !== false) {
var addLabel; var addLabel, addTittle;
if (typeof this.options.addButton === 'string') { if (typeof this.options.addButton === 'string') {
addLabel = this.options.addButton addLabel = this.options.addButton
} else { } else {
if (RED && RED._) { if (RED && RED._) {
addLabel = RED._("editableList.add"); addLabel = RED._("editableList.add");
addTitle = RED._("editableList.addTitle");
} else { } else {
addLabel = 'add'; 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>') buttons.unshift({
.appendTo(this.topContainer) label: addLabel,
.on("click", function(evt) { icon: "fa fa-plus",
evt.preventDefault(); click: function(evt) {
that.addItem({}); 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") { if (this.element.css("position") === "absolute") {
["top","left","bottom","right"].forEach(function(s) { ["top","left","bottom","right"].forEach(function(s) {
var v = that.element.css(s); var v = that.element.css(s);