From 31657a26eb9a0c5a1b82487190822aeb2aa4d892 Mon Sep 17 00:00:00 2001 From: Mike Letellier Date: Fri, 19 Jan 2024 14:37:29 -0400 Subject: [PATCH 1/2] Start working on Pro issue 1644 --- js/formidable_admin.js | 62 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/js/formidable_admin.js b/js/formidable_admin.js index df6c953357..42d5a5168e 100644 --- a/js/formidable_admin.js +++ b/js/formidable_admin.js @@ -1601,11 +1601,12 @@ 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 * @returns {void} */ - function updateFieldAfterMovingBetweenSections( currentItem, previousSection ) { + function updateFieldAfterMovingBetweenSections( currentItem, previousSection, confirm = false ) { if ( ! currentItem.hasClass( 'form-field' ) ) { // currentItem is a field group. Call for children recursively. getFieldsInRow( jQuery( currentItem.get( 0 ).firstChild ) ).each( @@ -1631,15 +1632,68 @@ 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 ) + ); + return button; + }; + + const 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 ) + } + ); + modal.classList.add( 'frm_common_modal' ); + return; + } + 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 ) { + return div({ + children: [ + confirmButtonFunction(), + frmDom.modal.footerButton({ + text: __( 'Cancel', 'formidable' ), + buttonType: 'cancel' + }) + ] + }); + } + // Update the in_section field value function updateInSectionValue( fieldId, sectionId ) { document.getElementById( 'frm_in_section_' + fieldId ).value = sectionId; From c4bcf02a52247908c74f857be667a7a326361589 Mon Sep 17 00:00:00 2001 From: Mike Letellier Date: Fri, 19 Jan 2024 15:45:26 -0400 Subject: [PATCH 2/2] More progress --- js/formidable_admin.js | 86 ++++++++++++++++++++++++++++-------------- 1 file changed, 58 insertions(+), 28 deletions(-) diff --git a/js/formidable_admin.js b/js/formidable_admin.js index 42d5a5168e..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,24 +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 {boolean} confirm + * @param {Object} currentItem + * @param {Object} previousSection + * @param {boolean} confirm + * @param {HTMLElement} currentSection + * @param {function} successCallback + * @param {function} cancelCallback * @returns {void} */ - function updateFieldAfterMovingBetweenSections( currentItem, previousSection, confirm = false ) { + 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; @@ -1644,23 +1659,41 @@ function frmAdminBuildJS() { }); button.addEventListener( 'click', - () => updateFieldAfterMovingBetweenSections( currentItem, previousSection, true ) + () => updateFieldAfterMovingBetweenSections( currentItem, previousSection, true, currentSection, successCallback, cancelCallback ) ); return button; }; - const modal = frmDom.modal.maybeCreateModal( + 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 ) + footer: getConfirmMoveRepeaterFieldModalFooter( getConfirmMoveRepeaterFieldConfirmButton, getConfirmMoveRepeaterFieldCancelButton ) } ); modal.classList.add( 'frm_common_modal' ); return; } + successCallback(); + toggleSectionHolder(); updateInSectionValue( fieldId, sectionId ); } @@ -1682,14 +1715,11 @@ function frmAdminBuildJS() { * @param {function} confirmButtonFunction * @returns {HTMLElement} */ - function getConfirmMoveRepeaterFieldModalFooter( confirmButtonFunction ) { + function getConfirmMoveRepeaterFieldModalFooter( confirmButtonFunction, cancelButtonFunction ) { return div({ children: [ confirmButtonFunction(), - frmDom.modal.footerButton({ - text: __( 'Cancel', 'formidable' ), - buttonType: 'cancel' - }) + cancelButtonFunction() ] }); }