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

Pro issue 1644 #1481

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
+104 −20
Draft

Pro issue 1644 #1481

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31657a2
Start working on Pro issue 1644
Crabcyborg Jan 19, 2024
c4bcf02
More progress
Crabcyborg Jan 19, 2024
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
124 changes: 104 additions & 20 deletions js/formidable_admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1073,27 +1073,39 @@ function frmAdminBuildJS() {
const previousSection = ui.helper.get( 0 ).closest( 'ul.start_divider' );
const newSection = placeholder.closest( 'ul.frm_sorting' );

const previousSectionId = previousSection ? parseInt( previousSection.closest( '.edit_field_type_divider' ).getAttribute( 'data-fid' ) ) : 0;
const newSectionId = newSection.classList.contains( 'start_divider' ) ? parseInt( newSection.closest( '.edit_field_type_divider' ).getAttribute( 'data-fid' ) ) : 0;

if ( draggable.classList.contains( 'frm-new-field' ) ) {
insertNewFieldByDragging( draggable.id );
} else {
} else if ( previousSectionId === newSectionId ) {
moveFieldThatAlreadyExists( draggable, placeholder );
} else if ( previousSectionId !== newSectionId ) {
updateFieldAfterMovingBetweenSections(
jQuery( draggable ),
previousSection,
false,
newSection,
function() {
moveFieldThatAlreadyExists( draggable, placeholder );
afterDrop();
},
function() {
afterDrop();
}
);
}

const previousSectionId = previousSection ? parseInt( previousSection.closest( '.edit_field_type_divider' ).getAttribute( 'data-fid' ) ) : 0;
const newSectionId = newSection.classList.contains( 'start_divider' ) ? parseInt( newSection.closest( '.edit_field_type_divider' ).getAttribute( 'data-fid' ) ) : 0;

placeholder.remove();
ui.helper.remove();

const $previousContainerFields = $previousFieldContainer.length ? getFieldsInRow( $previousFieldContainer ) : [];
maybeUpdatePreviousFieldContainerAfterDrop( $previousFieldContainer, $previousContainerFields );
maybeUpdateDraggableClassAfterDrop( draggable, $previousContainerFields );
function afterDrop() {
placeholder.remove();
ui.helper.remove();

if ( previousSectionId !== newSectionId ) {
updateFieldAfterMovingBetweenSections( jQuery( draggable ), previousSection );
const $previousContainerFields = $previousFieldContainer.length ? getFieldsInRow( $previousFieldContainer ) : [];
maybeUpdatePreviousFieldContainerAfterDrop( $previousFieldContainer, $previousContainerFields );
maybeUpdateDraggableClassAfterDrop( draggable, $previousContainerFields );

debouncedSyncAfterDragAndDrop();
}

debouncedSyncAfterDragAndDrop();
}

/**
Expand Down Expand Up @@ -1601,23 +1613,27 @@ function frmAdminBuildJS() {
/**
* Update a field after it is dragged and dropped into, out of, or between sections
*
* @param {Object} currentItem
* @param {Object} previousSection
* @param {Object} currentItem
* @param {Object} previousSection
* @param {boolean} confirm
* @param {HTMLElement} currentSection
* @param {function} successCallback
* @param {function} cancelCallback
* @returns {void}
*/
function updateFieldAfterMovingBetweenSections( currentItem, previousSection ) {
function updateFieldAfterMovingBetweenSections( currentItem, previousSection, confirm, currentSection, successCallback, cancelCallback ) {
if ( ! currentItem.hasClass( 'form-field' ) ) {
// currentItem is a field group. Call for children recursively.
getFieldsInRow( jQuery( currentItem.get( 0 ).firstChild ) ).each(
function() {
updateFieldAfterMovingBetweenSections( jQuery( this ), previousSection );
updateFieldAfterMovingBetweenSections( jQuery( this ), previousSection, confirm, currentSection, successCallback, cancelCallback );
}
);
return;
}

const fieldId = currentItem.attr( 'id' ).replace( 'frm_field_id_', '' );
const section = getSectionForFieldPlacement( currentItem );
const section = currentSection;
const formId = getFormIdForFieldPlacement( section );
const sectionId = getSectionIdForFieldPlacement( section );
const previousFormId = previousSection ? getFormIdForFieldPlacement( jQuery( previousSection.parentNode ) ) : 0;
Expand All @@ -1631,15 +1647,83 @@ function frmAdminBuildJS() {
field: fieldId,
section_id: sectionId,
previous_form_id: previousFormId,
confirm: confirm ? 1 : 0,
nonce: frmGlobal.nonce
},
success: function() {
success: function( response ) {
if ( ! confirm && false === response?.success && 'confirm' === response.data?.action ) {
const getConfirmMoveRepeaterFieldConfirmButton = () => {
const button = frmDom.modal.footerButton({
text: __( 'Confirm', 'formidable' ),
buttonType: 'primary'
});
button.addEventListener(
'click',
() => updateFieldAfterMovingBetweenSections( currentItem, previousSection, true, currentSection, successCallback, cancelCallback )
);
return button;
};

let modal;

const getConfirmMoveRepeaterFieldCancelButton = () => {
const button = frmDom.modal.footerButton({
text: __( 'Cancel', 'formidable' ),
buttonType: 'cancel'
});
button.classList.add( 'dismiss' );
frmDom.util.onClickPreventDefault( button, () => {
cancelCallback();
jQuery( modal ).dialog( 'close' );
} );
return button;
};

console.log( 'confirm' );
modal = frmDom.modal.maybeCreateModal(
'frm_confirm_move_repeater_field',
{
title: __( 'Are you sure you want to move this field?', 'formidable' ),
content: getConfirmMoveRepeaterFieldModalContent(),
footer: getConfirmMoveRepeaterFieldModalFooter( getConfirmMoveRepeaterFieldConfirmButton, getConfirmMoveRepeaterFieldCancelButton )
}
);
modal.classList.add( 'frm_common_modal' );
return;
}

successCallback();

toggleSectionHolder();
updateInSectionValue( fieldId, sectionId );
}
});
}

/**
* @returns {HTMLElement}
*/
function getConfirmMoveRepeaterFieldModalContent() {
const content = div({
text: 'When a field is moved to a repeater, or from a repeater, entry meta will no longer be associated with the field.'
});
content.style.padding = '0 24px 12px';
return content;
}

/**
* @param {function} confirmButtonFunction
* @returns {HTMLElement}
*/
function getConfirmMoveRepeaterFieldModalFooter( confirmButtonFunction, cancelButtonFunction ) {
return div({
children: [
confirmButtonFunction(),
cancelButtonFunction()
]
});
}

// Update the in_section field value
function updateInSectionValue( fieldId, sectionId ) {
document.getElementById( 'frm_in_section_' + fieldId ).value = sectionId;
Expand Down
Loading