diff --git a/js/formidable_admin.js b/js/formidable_admin.js index df6c953357..c58063ebc3 100644 --- a/js/formidable_admin.js +++ b/js/formidable_admin.js @@ -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(); } /** @@ -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; @@ -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;