Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Copy Button Added #252

Merged
merged 4 commits into from
Sep 19, 2016
Merged

Copy Button Added #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d6d12d2
Copy Button Added
jcacchio Sep 15, 2016
9618616
Sortable options in cloned fields
jcacchio Sep 16, 2016
3d1ae98
Revert "Sortable options in cloned fields"
jcacchio Sep 16, 2016
c849cc2
Sortability restored in cloned fields
jcacchio Sep 16, 2016
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
58 changes: 57 additions & 1 deletion src/js/form-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@
close: 'Close',
content: 'Content',
copy: 'Copy To Clipboard',
copyButton: '+',
copyButtonTooltip: 'Copy',
dateField: 'Date Field',
description: 'Help Text',
descriptionField: 'Description',
Expand Down Expand Up @@ -927,10 +929,15 @@
id: lastID + '-edit',
className: 'toggle-form btn icon-pencil',
title: opts.messages.hide
}),
copyBtn = utils.markup('a', opts.messages.copyButton, {
id: lastID + '-copy',
className: 'copy-button btn icon-copy',
title: opts.messages.copyButtonTooltip
});

var liContents = utils.markup(
'div', [toggleBtn, delBtn], { className: 'field-actions' }
'div', [toggleBtn, copyBtn, delBtn], { className: 'field-actions' }
Copy link
Owner

Choose a reason for hiding this comment

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

Should we change order of action buttons? I think going from most used to least used from right to left makes sense but that would mean moving the delete button also. What are your thoughts? I ask mainly because I keep cloning fields when i mean to edit them.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I personally don't have a preference. But anyone currently using formBuilder could be thrown off by flip-flopping edit and delete.

Copy link
Contributor Author

@jcacchio jcacchio Sep 16, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

On second thought, I do like having delete in the upper right, since the behavior is similar to "close". I.e. closing a window or a dialog is typically done in the upper right.

Copy link
Owner

Choose a reason for hiding this comment

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

OK so then the question is should it be [toggleBtn, copyBtn, delBtn] or [copyBtn, toggleBtn, delBtn]?

I'm fine with it either way.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In that case, let's leave it at [toggleBtn, copyBtn, delBtn] keeping the edit button on the left -- closest to the field attributes that need to be edited.

).outerHTML;

// Field preview Label
Expand Down Expand Up @@ -1024,6 +1031,45 @@
let field = utils.markup('li', optionInputs);

return field.outerHTML;
};

var cloneItem = function cloneItem(currentItem) {
var currentId = currentItem.attr("id");
var cloneName = currentItem.attr("type");
var ts = new Date().getTime();
cloneName = cloneName + "-" + ts;

var $clone = currentItem.clone();

$clone.find('[id]').each(function () { this.id = this.id.replace(currentId, lastID) });

$clone.find('[for]').each(function () { this.setAttribute('for', this.getAttribute('for').replace(currentId, lastID)) });

$clone.each(function (i, e) {
$("e:not(.form-elements)").each(function () {
var newName = this.getAttribute('name');
newName = newName.substring(0, (newName.lastIndexOf('-') + 1));
newName = newName + ts.toString();
this.setAttribute('name', newName);
});

});

$clone.find(".form-elements").find(":input").each(function () {
if (this.getAttribute('name') == 'name') {
var newVal = this.getAttribute('value');
newVal = newVal.substring(0, (newVal.lastIndexOf('-') + 1));
newVal = newVal + ts.toString();
this.setAttribute('value', newVal);
}
});

$clone.attr("id", lastID);
$clone.attr("name", cloneName);
$clone.addClass("cloned");
Copy link
Owner

Choose a reason for hiding this comment

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

Cloned fields with options like select and checkbox groups will need to have their options made sortable again. Adding $('.sortable-options', $clone).sortable(); below this line seems to fix that.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks Kevin. I did toy with that this morning and pushed that change.

$('.sortable-options', $clone).sortable();
lastID = _helpers.incrementId(lastID);
return $clone;
};

// ---------------------- UTILITIES ---------------------- //
Expand Down Expand Up @@ -1117,6 +1163,16 @@
$(this).val(_helpers.forceNumber($(this).val()));
});

// Copy field
$sortableFields.on('click touchstart', '.icon-copy', function (e) {
e.preventDefault();
var currentItem = $(this).parent().parent("li");
var $clone = cloneItem(currentItem);
$clone.insertAfter(currentItem);
_helpers.updatePreview($clone);
_helpers.save();
});

// Delete field
$sortableFields.on('click touchstart', '.delete-confirm', function(e) {
e.preventDefault();
Expand Down
1 change: 1 addition & 0 deletions src/sass/_stage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@
a {
&:hover {
text-decoration: none;
color: #000;
}
}

Expand Down