feat/persistDefaultFields

.eslintrc.json

@@ -5,7 +5,8 @@
     "node": true,
     "es6": true
   },
-  "extends": ["eslint:recommended"],
+  "extends": ["eslint:recommended", "prettier"],
+  "plugins": ["prettier"],
   "globals": {
     "jQuery": true,
     "$": true
@@ -28,7 +29,6 @@
         "destructuring": "any",
         "ignoreReadBeforeAssign": false
       }
-    ],
-    "space-before-function-paren": ["error", "never"]
+    ]
   }
 }

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "semi": false,
+  "arrowParens": "avoid",
+  "spaceAfterFunction": false
+}

docs/formBuilder/options/persistDefaultFields.md

@@ -0,0 +1,25 @@
+# persistDefaultFields
+
+When `persistDefaultFields` is enabled, `defaultFields` defined in the formBuilder options will not be removed when clearing all fields.
+
+## Usage
+
+```javascript
+var options = {
+  defaultFields: [
+    {
+      className: 'form-control',
+      label: 'Default Field',
+      placeholder: 'Enter your default field value',
+      name: 'default-field-1',
+      type: 'text',
+    },
+  ],
+  persistDefaultFields: true,
+}
+$(container).formBuilder(options)
+```
+
+## See it in Action
+
+<p data-height="494" data-theme-id="22927" data-embed-version="2" data-slug-hash="WNpZZVg" data-default-tab="result" data-user="kevinchappell" class="codepen"></p>

mkdocs.yml

@@ -71,6 +71,7 @@ nav:
   - onCloseFieldEdit: formBuilder/options/onCloseFieldEdit.md
   - onOpenFieldEdit: formBuilder/options/onOpenFieldEdit.md
   - onSave: formBuilder/options/onSave.md
+  - persistDefaultFields: formBuilder/options/persistDefaultFields.md
   - replaceFields: formBuilder/options/replaceFields.md
   - roles: formBuilder/options/roles.md
   - scrollToFieldOnAdd: formBuilder/options/scrollToFieldOnAdd.md

package.json

@@ -122,7 +122,9 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.1",
     "eslint": "^7.7.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-loader": "^4.0.2",
+    "eslint-plugin-prettier": "^3.4.0",
     "formbuilder-languages": "latest",
     "fs-extra": "^9.0.1",
     "html-webpack-harddisk-plugin": "^1.0.2",
@@ -146,14 +148,6 @@
     "webpack-dev-server": "^3.11.0",
     "wrapper-webpack-plugin": "^2.1.0"
   },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "all",
-    "printWidth": 120,
-    "semi": false,
-    "arrowParens": "avoid",
-    "spaceAfterFunction": false
-  },
   "engines": {},
   "release": {
     "branch": "master",

src/demo/js/demo.js

@@ -31,7 +31,7 @@ const toggleBootStrap = ({ target }) => {
 
 document.getElementById('toggleBootstrap').addEventListener('click', toggleBootStrap, false)
 
-jQuery(function($) {
+jQuery(function ($) {
   const fields = [
     {
       type: 'autocomplete',
@@ -61,11 +61,8 @@ jQuery(function($) {
       subtype: 'custom-group',
       label: 'Custom Checkbox Group w/Sub Type',
       required: true,
-      values: [
-        { label: 'Option 1' },
-        { label: 'Option 2' }
-      ]
-    }
+      values: [{ label: 'Option 1' }, { label: 'Option 2' }],
+    },
   ]
 
   const replaceFields = [
@@ -95,7 +92,7 @@ jQuery(function($) {
   ]
 
   const templates = {
-    starRating: function(fieldData) {
+    starRating: function (fieldData) {
       return {
         field: '<span id="' + fieldData.name + '">',
         onRender: () => {
@@ -201,8 +198,8 @@ jQuery(function($) {
         customInput: {
           label: 'Custom Text Field',
           value: 'This field is added only to checkbox with specific subtype',
-          type: 'text'
-        }
+          type: 'text',
+        },
       },
     },
   }
@@ -211,6 +208,16 @@ jQuery(function($) {
   const disabledAttrs = ['placeholder', 'name']
 
   const fbOptions = {
+    defaultFields: [
+      {
+        className: 'form-control',
+        label: 'Default Field',
+        placeholder: 'Enter your default field value',
+        name: 'default-field-1',
+        type: 'text',
+      },
+    ],
+    persistDefaultFields: true,
     disabledSubtypes: {
       text: ['password'],
     },
@@ -220,13 +227,13 @@ jQuery(function($) {
     dataType,
     subtypes: {
       text: ['datetime-local'],
-      'checkbox-group': ['custom-group']
+      'checkbox-group': ['custom-group'],
     },
     onSave: toggleEdit,
     onAddField: fieldId => {
       setCurrentFieldIdValues(fieldId)
     },
-    onAddOption: (optionTemplate, {index}) => {
+    onAddOption: (optionTemplate, { index }) => {
       optionTemplate.label = optionTemplate.label || `Option ${index + 1}`
       optionTemplate.value = optionTemplate.value || `option-${index + 1}`
 
@@ -290,7 +297,7 @@ jQuery(function($) {
 
   const fbPromise = formBuilder.promise
 
-  fbPromise.then(function(fb) {
+  fbPromise.then(function (fb) {
     document.querySelectorAll('.editForm').forEach(element => element.addEventListener('click', toggleEdit), false)
     const langSelect = document.getElementById('setLanguage')
     const savedLocale = window.sessionStorage.getItem(localeSessionKey) || defaultLocale

src/js/config.js

@@ -62,6 +62,7 @@ export const defaultOptions = {
    * @param {Object} formData
    */
   onSave: noop,
+  persistDefaultFields: false,
   prepend: false,
   replaceFields: [],
   roles: {

src/js/form-builder.js

@@ -180,7 +180,7 @@ const FormBuilder = function(opts, element, $) {
   }
 
   // builds the standard formbuilder datastructure for a field definition
-  const prepFieldVars = function($field, isNew = false) {
+  const prepFieldVars = ($field, isNew = false) => {
     let field = {}
     if ($field instanceof jQuery) {
       // get the default type etc & label for this field
@@ -244,16 +244,16 @@ const FormBuilder = function(opts, element, $) {
     d.stage.classList.remove('empty')
   }
 
+  formBuilder.prepFieldVars = prepFieldVars
+
   // Parse saved XML template data
   const loadFields = function(formData) {
     formData = h.getData(formData)
     if (formData && formData.length) {
       formData.forEach(fieldData => prepFieldVars(trimObj(fieldData)))
       d.stage.classList.remove('empty')
     } else if (opts.defaultFields && opts.defaultFields.length) {
-      // Load default fields if none are set
-      opts.defaultFields.forEach(field => prepFieldVars(field))
-      d.stage.classList.remove('empty')
+      h.addDefaultFields()
     } else if (!opts.prepend && !opts.append) {
       d.stage.classList.add('empty')
       d.stage.dataset.content = mi18n.get('getStarted')
@@ -526,7 +526,7 @@ const FormBuilder = function(opts, element, $) {
   }
 
   /**
-   * 
+   *
    * @param {Object} values    field attributes
    * @param {String} subType   subType
    * @return {Boolean}         indicates whether or not the field has a subtype

src/js/helpers.js

@@ -194,7 +194,7 @@ export default class Helpers {
 
     if (form.childNodes.length !== 0) {
       // build data object
-      forEach(form.childNodes, function(index, field) {
+      forEach(form.childNodes, function (index, field) {
         const $field = $(field)
 
         if (!$field.hasClass('disabled-field')) {
@@ -358,13 +358,13 @@ export default class Helpers {
 
     const fieldType = $field.attr('type')
     const $prevHolder = $('.prev-holder', field)
-    let previewData = Object.assign({}, _this.getAttrVals(field, previewData), { type: fieldType })
+    let previewData = Object.assign({}, _this.getAttrVals(field), { type: fieldType })
 
     if (fieldType.match(d.optionFieldsRegEx)) {
       previewData.values = []
       previewData.multiple = $('[name="multiple"]', field).is(':checked')
 
-      $('.sortable-options li', field).each(function(i, $option) {
+      $('.sortable-options li', field).each(function (i, $option) {
         const option = {
           selected: $('.option-selected', $option).is(':checked'),
           value: $('.option-value', $option).val(),
@@ -453,9 +453,7 @@ export default class Helpers {
       classes.push(primaryType)
     }
 
-    const trimmedClassName = unique(classes)
-      .join(' ')
-      .trim()
+    const trimmedClassName = unique(classes).join(' ').trim()
 
     className.value = trimmedClassName
 
@@ -553,11 +551,11 @@ export default class Helpers {
       className: 'no btn btn-danger btn-sm',
     })
 
-    no.onclick = function() {
+    no.onclick = function () {
       _this.closeConfirm(overlay)
     }
 
-    yes.onclick = function() {
+    yes.onclick = function () {
       yesAction()
       _this.closeConfirm(overlay)
     }
@@ -659,6 +657,12 @@ export default class Helpers {
     }
   }
 
+  addDefaultFields() {
+    // Load default fields if none are set
+    config.opts.defaultFields.forEach(field => this.formBuilder.prepFieldVars(field))
+    this.d.stage.classList.remove('empty')
+  }
+
   /**
    * Removes all fields from the form
    * @param {Object} stage to remove fields form
@@ -683,7 +687,7 @@ export default class Helpers {
       markEmptyArray.push(true)
     }
 
-    if (!markEmptyArray.some(elem => elem === true)) {
+    if (!markEmptyArray.some(Boolean)) {
       stage.classList.add('empty')
       stage.dataset.content = i18n.getStarted
     }
@@ -693,14 +697,20 @@ export default class Helpers {
       let outerHeight = 0
       forEach(fields, index => (outerHeight += fields[index].offsetHeight + 3))
       fields[0].style.marginTop = `${-outerHeight}px`
-      const animateTimeout = setTimeout(() => {
-        empty(stage).classList.remove('removing')
-        this.save()
-        clearTimeout(animateTimeout)
-      }, 400)
-    } else {
-      empty(stage)
-      this.save()
+    }
+
+    const animationTimeout = animate ? 400 : 0
+    const animateTimeout = setTimeout(() => {
+      this.emptyStage(stage)
+      clearTimeout(animateTimeout)
+    }, animationTimeout)
+  }
+
+  emptyStage(stage) {
+    empty(stage).classList.remove('removing')
+    this.save()
+    if (config.opts.persistDefaultFields) {
+      this.addDefaultFields()
     }
   }
 
@@ -806,7 +816,7 @@ export default class Helpers {
     const cbPosition = controls.getBoundingClientRect()
     const { top: stageTop } = stage.getBoundingClientRect()
 
-    $(window).scroll(function(evt) {
+    $(window).scroll(function (evt) {
       const scrollTop = $(evt.target).scrollTop()
       const offsetDefaults = {
         top: 5,
@@ -901,7 +911,7 @@ export default class Helpers {
       return false
     }
 
-    $field.slideUp(animationSpeed, function() {
+    $field.slideUp(animationSpeed, function () {
       $field.removeClass('deleting')
       $field.remove()
       fieldRemoved = true