Add support for disabling form action buttons (copy, edit, remove) (#550

)

In my case there is a need for static fields that users are not allowed to remove or edit. Therefore I added support this by allowing developers to specify in the field values, through a disableFieldButtons array containing one or more of ['copy', 'edit', 'remove'].

Whenever disabling the edit field button, the dblclick event on the field will also be ignored.

src/js/form-builder.js

@@ -1007,24 +1007,38 @@ const FormBuilder = function(opts, element) {
   let appendNewField = function(values, isNew = true) {
     let type = values.type || 'text';
     let label = values.label || i18n[type] || i18n.label;
-    let delBtn = m('a', i18n.remove, {
+    let fieldButtons = [
+      m('a', i18n.remove, {
+        type: 'remove',
         id: 'del_' + data.lastID,
         className: 'del-button btn delete-confirm',
         title: i18n.removeMessage
+      }),
+      m('a', null, {
+        type: 'edit',
+        id: data.lastID + '-edit',
+        className: 'toggle-form btn icon-pencil',
+        title: i18n.hide
+      }),
+      m('a', null, {
+        type: 'copy',
+        id: data.lastID + '-copy',
+        className: 'copy-button btn icon-copy',
+        title: i18n.copyButtonTooltip
+      })
+    ];
+
+    let disabledFieldButtons = values.disabledFieldButtons;
+    if (disabledFieldButtons && Array.isArray(disabledFieldButtons)) {
+      fieldButtons = fieldButtons.map(btnData => {
+        if (btnData && disabledFieldButtons.indexOf(btnData.type) === -1) {
+          return btnData;
+        }
       });
-    let toggleBtn = m('a', null, {
-      id: data.lastID + '-edit',
-      className: 'toggle-form btn icon-pencil',
-      title: i18n.hide
-    });
-    let copyBtn = m('a', null, {
-      id: data.lastID + '-copy',
-      className: 'copy-button btn icon-copy',
-      title: i18n.copyButtonTooltip
-    });
+    }
 
     let liContents = m(
-      'div', [toggleBtn, copyBtn, delBtn], {className: 'field-actions'}
+      'div', fieldButtons, {className: 'field-actions'}
     ).outerHTML;
 
     liContents += m('label', utils.parsedHtml(label), {

src/js/helpers.js

@@ -782,6 +782,7 @@ export default class Helpers {
   toggleEdit(fieldId, animate = true) {
     const field = document.getElementById(fieldId);
     const toggleBtn = $('.toggle-form', field);
+    if (!toggleBtn.length) return;
     const editPanel = $('.frm-holder', field);
     field.classList.toggle('editing');
     toggleBtn.toggleClass('open');