From 60c8a2c5989e0655dab5d08415d943ca7d67a4c7 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sun, 21 Feb 2021 22:55:19 +0100
Subject: [PATCH] Custom buttons

---
 .../src/js/ui/common/editableList.js          | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
index 4089a29af..f0d4b6085 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js
@@ -67,24 +67,53 @@
                 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)
+                buttons.unshift({
+                    label: addLabel,
+                    icon: "fa fa-plus",
+                    click: function(evt) {
+                        that.addItem({});
+                    },
+                    title: addTitle
+                });
+            }
+
+            buttons.forEach(function(button) {
+                var innerHtml = "";
+                var titleAttribute="";
+                if (button.icon) {
+                    innerHtml = '<i class="'+button.icon+'"></i> ';
+                }
+                if (button.label) {
+                    innerHtml += button.label;
+                }
+                if (button.title) {
+                    titleAttribute = 'title="'+button.title+'"';
+                }
+                $('<a href="#" class="red-ui-button red-ui-button-small red-ui-editableList-addButton" style="margin-top: 4px; margin-right: 5px;" '+titleAttribute+'>'+innerHtml+'</a>')
+                    .appendTo(that.topContainer)
                     .on("click", function(evt) {
                         evt.preventDefault();
-                        that.addItem({});
+                        if (button.click !== undefined) {
+                            button.click();
+                        }
                     });
-            }
+            });
+ 
             if (this.element.css("position") === "absolute") {
                 ["top","left","bottom","right"].forEach(function(s) {
                     var v = that.element.css(s);