Hotfix: preload values to exisitng field types, fix fieldOrder (#501)

demo/assets/js/demo.js

@@ -1,5 +1,21 @@
 jQuery(function($) {
   var fields = [
+    {
+      type: 'autocomplete',
+      label: 'Custom Autocomplete',
+      required: true,
+      values: [
+        {label: 'SQL'},
+        {label: 'C#'},
+        {label: 'JavaScript'},
+        {label: 'Java'},
+        {label: 'Python'},
+        {label: 'C++'},
+        {label: 'PHP'},
+        {label: 'Swift'},
+        {label: 'Ruby'}
+      ]
+    },
     {
       label: 'Star Rating',
       attrs: {

src/js/control/custom.js

@@ -57,7 +57,7 @@ export default class controlCustom extends control {
         }
 
         // generate a random key & map the settings against it
-        lookup = type + Math.floor((Math.random() * 100000));
+        lookup = `${type}-${Math.floor((Math.random() * 9000) + 1000)}`;
         controlCustom.customRegister[lookup] = $.extend(field, {
           type: type,
           class: controlClass
@@ -138,4 +138,4 @@ export default class controlCustom extends control {
     };
   }
 }
-controlCustom.customRegister = {};
+controlCustom.customRegister = {};

src/js/form-builder.js

@@ -64,12 +64,7 @@ const FormBuilder = function(opts, element) {
   if (customFields) {
     $.merge(controls, customFields);
   }
-  controls = h.orderFields(controls);
 
-  // remove disableFields
-  if (opts.disableFields) {
-    controls = controls.filter(type => opts.disableFields.indexOf(type) == -1);
-  }
 
   // if we support rearranging control order, add classes to support this
   if (opts.sortableControls) {
@@ -80,8 +75,11 @@ const FormBuilder = function(opts, element) {
   let $cbUL = $(d.controls);
 
   // add each control to the interface
-  let controlIndex = 0;
-  for (let type of controls) {
+  let controlList = [];
+  const allControls = {};
+
+  for (let i = 0; i < controls.length; i++) {
+    let type = controls[i];
     // first check if this is a custom control
     let custom = controlCustom.lookup(type);
     let controlClass;
@@ -98,7 +96,7 @@ const FormBuilder = function(opts, element) {
     }
     let icon = custom.icon || controlClass.icon(type);
     let label = custom.label || controlClass.label(type);
-    let iconClassName = !icon ? custom.iconClassName || `icon-${type}` : '';
+    let iconClassName = !icon ? custom.iconClassName || `icon-${type.replace(/-[\d]{4}$/, '')}` : '';
 
     // if the class has specified a custom icon, inject it into the label
     if (icon) {
@@ -108,27 +106,37 @@ const FormBuilder = function(opts, element) {
     // build & insert the new list item to represent this control
     let newFieldControl = m('li',
       m('span', label),
-      {className: `${iconClassName} input-control input-control-${controlIndex}`}
+      {className: `${iconClassName} input-control input-control-${i}`}
     );
     newFieldControl.dataset.type = type;
-    d.controls.appendChild(newFieldControl);
-
-    // map for later access
-    controlIndex++;
+    controlList.push(type);
+    allControls[type] = newFieldControl;
   }
 
   if (opts.inputSets.length) {
-    $('<li/>', {'class': 'fb-separator'}).html('<hr>').appendTo($cbUL);
     opts.inputSets.forEach((set, i) => {
       set.name = set.name || utils.makeClassName(set.label);
       let inputSet = m('li', set.label, {
-        className: `input-set-control input-set-${i}`,
-        type: set.name
+        className: `input-set-control input-set-${i}`
       });
-      $(inputSet).appendTo($cbUL);
+      inputSet.dataset.type = set.name;
+      controlList.push(set.name);
+      allControls[set.name] = inputSet;
     });
   }
 
+  // remove disableFields
+  if (opts.disableFields) {
+    controls = controls.filter(type => opts.disableFields.indexOf(type) == -1);
+  }
+
+  // append controls to list
+  h.orderFields(controlList).forEach(control => {
+    if (allControls[control]) {
+      d.controls.appendChild(allControls[control]);
+    }
+  });
+
   // Sortable fields
   $stage.sortable({
     cursor: 'move',
@@ -181,8 +189,7 @@ const FormBuilder = function(opts, element) {
   let processControl = control => {
     if (control[0].classList.contains('input-set-control')) {
       let inputSets = [];
-      let inputSet = opts.inputSets.find(set =>
-        (set.name === control[0].getAttribute('type')));
+      let inputSet = opts.inputSets.find(set => (set.name === control[0].dataset.type));
       if (inputSet && inputSet.showHeader) {
         let header = {
           type: 'header',
@@ -302,9 +309,7 @@ const FormBuilder = function(opts, element) {
         // check for a custom type
         let custom = controlCustom.lookup(field.type);
         if (custom) {
-          field.label = custom.label;
-          field.type = custom.type;
-          field.subtype = custom.subtype;
+          field = Object.assign({}, custom);
         } else {
           let controlClass = control.getClass(field.type);
           field.label = controlClass.label(field.type);

src/js/helpers.js

@@ -695,7 +695,10 @@ export default class Helpers {
     let fieldOrder = [];
 
     $cbUL.children().each((index, element) => {
-      fieldOrder.push($(element).data('type'));
+      let type = $(element).data('type');
+      if (type) {
+        fieldOrder.push(type);
+      }
     });
 
     if (sessionStorage) {
@@ -730,11 +733,23 @@ export default class Helpers {
     } else {
       fieldOrder = window.JSON.parse(fieldOrder);
       fieldOrder = utils.unique(fieldOrder.concat(controls));
-      fieldOrder = Object.keys(fieldOrder).map(function(i) {
-        return fieldOrder[i];
-      });
+      fieldOrder = Object.keys(fieldOrder).map(i => fieldOrder[i]);
     }
 
+    // order custom fields
+    fieldOrder.forEach(field => {
+      // identify custom field
+      const randomKey = new RegExp('-[\\d]{4}$');
+
+      if (field.match(randomKey)) {
+        let baseFieldIndex = fieldOrder.indexOf(field.replace(randomKey, ''));
+        if (baseFieldIndex !== -1) {
+          fieldOrder.splice(fieldOrder.indexOf(field), 1);
+          fieldOrder.splice(baseFieldIndex + 1, fieldOrder.indexOf(field), field);
+        }
+      }
+    });
+
     return fieldOrder.filter(Boolean);
   }