Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Merged
merged 1 commit into from
May 26, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions demo/assets/js/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion demo/assets/js/form-builder.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified demo/assets/js/form-builder.min.js.gz
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion demo/assets/js/form-render.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified demo/assets/js/form-render.min.js.gz
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/form-builder.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified dist/form-builder.min.js.gz
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/form-render.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified dist/form-render.min.js.gz
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions src/js/control/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -138,4 +138,4 @@ export default class controlCustom extends control {
};
}
}
controlCustom.customRegister = {};
controlCustom.customRegister = {};
49 changes: 27 additions & 22 deletions src/js/form-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -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}$/, '')}` : '';
Copy link
Contributor

@brentkelly brentkelly May 26, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kevinchappell is this icon-${type.replace(/-[\d]{4}$/, '')} there to handle the custom fields?

If so a better way to write this section may be:

let iconClassName = '';
if (!icon) {
   icon = custom ? custom.iconClassName || `icon-${custom.type}` : `icon-${type}`;
}

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree on the custom type but since since the custom type key is randomly generated each time, even if there was an icon of say 'autocomplete-2847' those last 4 digits would change on each initialization. The regex removes hyphen and 4 digits which should only be generated by custom fields. If the custom field is actually an extended base type like in the autocomplete example, its possible the autocomplete icon still wants to be used. To make that happen we strip the '-2847' leaving 'icon-autocomplete'. If they don't want the autocomplete icon they can always explicitly define an icon or iconClassName.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep I guess either way works. My implementation above removes ignores the '-1234' by just using the original type defined in opts.fields. So

var fields [
  {
    type => 'text',
      ...
  }
];

... would then output icon-text for that custom field.

Either way should have the same outcome so up to you which you'd prefer.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok. We can always change it if it becomes an issue.


// if the class has specified a custom icon, inject it into the label
if (icon) {
Expand All @@ -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);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should go either before for loop above, or filter out controlList / allControls

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to orderFields in helpers

}

// append controls to list
h.orderFields(controlList).forEach(control => {
if (allControls[control]) {
d.controls.appendChild(allControls[control]);
}
});

// Sortable fields
$stage.sortable({
cursor: 'move',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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);
Expand Down
23 changes: 19 additions & 4 deletions src/js/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}

Expand Down