From e41cd58e21f1236b8c5208bd2c508a11b24a7987 Mon Sep 17 00:00:00 2001 From: Mykyta Synelnikov Date: Tue, 11 Jul 2023 14:27:57 +0300 Subject: [PATCH] - reviewed #1239; --- .../admin/assets/css/um-admin-builder.css | 8 +- includes/admin/assets/js/um-admin-ajax.js | 28 +++ includes/admin/assets/js/um-admin-dragdrop.js | 229 +++++++++++------- includes/admin/core/class-admin-builder.php | 4 + includes/admin/core/class-admin-dragdrop.php | 2 + 5 files changed, 183 insertions(+), 88 deletions(-) diff --git a/includes/admin/assets/css/um-admin-builder.css b/includes/admin/assets/css/um-admin-builder.css index f6b7210c..6a6e4201 100644 --- a/includes/admin/assets/css/um-admin-builder.css +++ b/includes/admin/assets/css/um-admin-builder.css @@ -133,6 +133,7 @@ position: relative; padding: 60px 20px 20px 20px; margin: 0 0 60px 0; + position: relative; } .um-admin-drag-row:last-child {margin-bottom: 0} @@ -316,10 +317,11 @@ height: calc( 100% + 30px ); top: -30px; left: 0; - background: #ccc; - opacity: 0.23; + background: rgba(241, 241, 241, 0.6); + z-index: 999; + display: none; } -.um-admin-row-loading span{ +.um-admin-row-loading > span { display: block; -webkit-transition: 0.1s opacity; -moz-transition: 0.1s opacity; diff --git a/includes/admin/assets/js/um-admin-ajax.js b/includes/admin/assets/js/um-admin-ajax.js index fb4afb99..adfb5fdf 100644 --- a/includes/admin/assets/js/um-admin-ajax.js +++ b/includes/admin/assets/js/um-admin-ajax.js @@ -1,3 +1,31 @@ +function um_builder_delete_field_ajax( callback ) { + if ( UM.admin.builder.fieldsToDelete.length > 0 ) { + let fieldDelete = UM.admin.builder.fieldsToDelete.shift(); + let arg1 = jQuery( fieldDelete ).find('[data-silent_action="um_admin_remove_field"]').data('arg1'); + let arg2 = jQuery( fieldDelete ).find('[data-silent_action="um_admin_remove_field"]').data('arg2'); + + jQuery.ajax({ + url: wp.ajax.settings.url, + type: 'POST', + data: { + action:'um_do_ajax_action', + act_id : 'um_admin_remove_field', + arg1 : arg1, + arg2 : arg2, + nonce: um_admin_scripts.nonce + }, + success: function( data ) { + um_builder_delete_field_ajax( callback ); + }, + error: function( data ) { + callback(); + } + }); + } else { + callback(); + } +} + jQuery(document).ready(function() { jQuery(document).ajaxStart( function() { diff --git a/includes/admin/assets/js/um-admin-dragdrop.js b/includes/admin/assets/js/um-admin-dragdrop.js index 0e05c389..0ca3d977 100644 --- a/includes/admin/assets/js/um-admin-dragdrop.js +++ b/includes/admin/assets/js/um-admin-dragdrop.js @@ -1,3 +1,16 @@ +if ( typeof (window.UM) !== 'object' ) { + window.UM = {}; +} + +if ( typeof (window.UM.admin) !== 'object' ) { + window.UM.admin = {}; +} + +UM.admin.builder = { + deleteProcess: [], + fieldsToDelete: [], +} + function UM_Drag_and_Drop() { jQuery('.um-admin-drag-col,.um-admin-drag-group').sortable({ items: '.um-admin-drag-fld', @@ -5,66 +18,66 @@ function UM_Drag_and_Drop() { placeholder: "um-fld-placeholder", forcePlaceholderSize:true, update: function(event, ui){ - + jQuery('#publish').attr('disabled','disabled'); - + if ( ui.item.hasClass('um-field-type-group') && ui.item.parents('.um-field-type-group').length > 0 ) { - + jQuery('.um-admin-drag-col,.um-admin-drag-group').sortable('cancel'); - + jQuery('#publish').prop('disabled', false); - + } else { - + UM_Change_Field_Col(); - + UM_Change_Field_Grp(); - + UM_Rows_Refresh(); - + } - + } }); - + jQuery('.um-admin-drag-rowsubs').sortable({ items: '.um-admin-drag-rowsub', placeholder: "um-rowsub-placeholder", forcePlaceholderSize:true, zIndex: 9999999999, update: function(){ - + jQuery('#publish').attr('disabled','disabled'); - + UM_update_subrows(); - + UM_Rows_Refresh(); - + } }).disableSelection(); - + jQuery('.um-admin-drag-rowsub').sortable({ items: '.um-admin-drag-col', zIndex: 9999999999, update: function(){ - + jQuery('#publish').attr('disabled','disabled'); - + row = jQuery(this); row.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle'); row.find('.um-admin-drag-col').addClass('cols-' + row.find('.um-admin-drag-col').length ); row.find('.um-admin-drag-col:last').addClass('cols-last'); if ( row.find('.um-admin-drag-col').length == 3 ) {row.find('.um-admin-drag-col:eq(1)').addClass('cols-middle');} - + UM_Change_Field_Col(); - + UM_Change_Field_Grp(); - + UM_Rows_Refresh(); - + } }).disableSelection(); - + jQuery('.um-admin-drag-ajax').sortable({ items: '.um-admin-drag-row', handle: ".um-admin-drag-row-start", @@ -75,15 +88,15 @@ function UM_Drag_and_Drop() { jQuery('.tipsy').remove(); }, update: function(){ - + jQuery('#publish').attr('disabled','disabled'); - + UM_update_rows(); - + UM_Change_Field_Col(); - + UM_Change_Field_Grp(); - + UM_Rows_Refresh(); } @@ -152,7 +165,7 @@ function UM_Change_Field_Grp(){ function UM_Rows_Refresh(){ jQuery('.um_update_order_fields').empty(); - + /* ROWS */ var c = 0; jQuery('.um-admin-drag-row').each(function(){ @@ -162,41 +175,41 @@ function UM_Rows_Refresh(){ col_num = ''; row.find('.um-admin-drag-rowsub').each(function(){ - + subrow = jQuery(this); - + subrow.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle'); subrow.find('.um-admin-drag-col').addClass('cols-' + subrow.find('.um-admin-drag-col').length ); subrow.find('.um-admin-drag-col:last').addClass('cols-last'); if ( subrow.find('.um-admin-drag-col').length == 3 ) {subrow.find('.um-admin-drag-col:eq(1)').addClass('cols-middle');} - + if ( !col_num ) { col_num = subrow.find('.um-admin-drag-col').length; } else { col_num = col_num + ':' + subrow.find('.um-admin-drag-col').length; } - + }); - + jQuery('.um_update_order_fields').append(''); - + sub_rows_count = row.find('.um-admin-drag-rowsub').length; - + var origin_id = jQuery(this).attr('data-original'); jQuery('.um_update_order_fields').append(''); jQuery('.um_update_order_fields').append(''); jQuery('.um_update_order_fields').append(''); - + jQuery(this).attr('data-original', '_um_row_'+c ); - + }); /* FIELDS */ var order; order = 0; jQuery('.um-admin-drag-col .um-admin-drag-fld').each(function(){ - + if ( !jQuery(this).hasClass('group') ) { var group = jQuery(this).data('group'); if ( group != '' ) { @@ -210,14 +223,14 @@ function UM_Rows_Refresh(){ jQuery('.um_update_order_fields').append(''); } } - + order++; row = jQuery(this).parents('.um-admin-drag-row').index()+1; row = '_um_row_'+row; - + saved_col = jQuery(this).data('column'); - + if ( saved_col == 3 ){ jQuery(this).appendTo( jQuery(this).parents('.um-admin-drag-rowsub').find('.um-admin-drag-col:eq(2)') ); } @@ -226,21 +239,21 @@ function UM_Rows_Refresh(){ } sub_row = jQuery(this).parents('.um-admin-drag-rowsub').index(); - + jQuery('.um_update_order_fields').append(''); - + jQuery('.um_update_order_fields').append(''); - + jQuery('.um_update_order_fields').append(''); - + jQuery('.um_update_order_fields').append(''); - + }); - + UM_Drag_and_Drop(); - + UM_Add_Icon(); - + jQuery.ajax({ url: wp.ajax.settings.url, type: 'POST', @@ -249,38 +262,38 @@ function UM_Rows_Refresh(){ jQuery('#publish').prop('disabled', false); } }); - + } function UM_Add_Icon(){ var add_icon_html = ''; - + jQuery('.um-admin-drag-col').each(function(){ if ( jQuery(this).find('.um-admin-drag-add-field').length == 0 ) { jQuery(this).append(add_icon_html); } else { jQuery(this).find('.um-admin-drag-add-field').remove(); - jQuery(this).append(add_icon_html); + jQuery(this).append(add_icon_html); } }); - + jQuery('.um-admin-drag-group').each(function(){ if ( jQuery(this).find('.um-admin-drag-add-field').length == 0 ) { jQuery(this).append(add_icon_html); } else { jQuery(this).find('.um-admin-drag-add-field').remove(); - jQuery(this).append(add_icon_html); + jQuery(this).append(add_icon_html); } }); - + } jQuery(document).ready(function() { if ( !jQuery('.um-admin-drag').length ) { return false; } - + UM_Drag_and_Drop(); /* add field to respected area */ @@ -302,19 +315,19 @@ jQuery(document).ready(function() { in_column = 1; } } - + if ( jQuery(this).parents('.um-admin-drag-group').length ) { in_group = jQuery(this).parents('.um-admin-drag-fld.um-field-type-group').data('key'); } else { in_group = ''; } - + jQuery('.um-col-demon-settings').data('in_row', in_row); jQuery('.um-col-demon-settings').data('in_sub_row', in_sub_row); jQuery('.um-col-demon-settings').data('in_column', in_column); jQuery('.um-col-demon-settings').data('in_group', in_group); }); - + /* add row */ jQuery(document.body).on('click', '*[data-row_action="add_row"]', function(){ var dragg = jQuery('.um-admin-drag-ajax'); @@ -325,7 +338,7 @@ jQuery(document).ready(function() { UM_update_subrows(); UM_Rows_Refresh(); }); - + /* add sub row */ jQuery(document.body).on('click', '*[data-row_action="add_subrow"]', function(){ var dragg = jQuery(this).parents('.um-admin-drag-row').find('.um-admin-drag-rowsubs'); @@ -333,23 +346,69 @@ jQuery(document).ready(function() { UM_update_subrows(); UM_Rows_Refresh(); }); - - /* remove element */ - jQuery(document.body).on('click', 'a[data-remove_element^="um-"]',function(){ - element = jQuery(this).data('remove_element'); - jQuery(this).parents('.' +element).find('.um-admin-drag-fld').each(function(){ - jQuery(this).find('a[data-silent_action="um_admin_remove_field"]').trigger('click'); + /* remove element: Row, Subrow */ + jQuery(document.body).on('click', 'a[data-remove_element^="um-"]',function(){ + let deleteButton = jQuery(this); + let element = jQuery(this).data('remove_element'); + let loadingWrapper = jQuery(this).parents('.' + element ).children('.um-admin-row-loading'); + + loadingWrapper.show(); + + let row = jQuery(this).parents('.um-admin-drag-row').index(); + let subrow = jQuery(this).parents('.um-admin-drag-rowsub').index(); + + let fieldPosition= {row,subrow}; + let deleteExists= false; + jQuery.each( UM.admin.builder.deleteProcess, function(i) { + if ( fieldPosition.row === UM.admin.builder.deleteProcess[i].row && fieldPosition.subrow === UM.admin.builder.deleteProcess[i].subrow ) { + deleteExists = true; + return false; + } }); - - jQuery(this).parents('.' +element).remove(); - jQuery('.tipsy').remove(); - UM_Rows_Refresh(); + + if ( deleteExists ) { + return; + } + + UM.admin.builder.deleteProcess.push({row,subrow}); + + UM.admin.builder.fieldsToDelete = jQuery(this).parents('.' +element).find('.um-admin-drag-fld').toArray(); + + if ( UM.admin.builder.fieldsToDelete.length > 0 ) { + um_builder_delete_field_ajax( function () { + deleteButton.parents('.' +element).remove(); + jQuery('.tipsy').remove(); + UM_Rows_Refresh(); + + jQuery.each( UM.admin.builder.deleteProcess, function(i) { + if ( fieldPosition.row === UM.admin.builder.deleteProcess[i].row && fieldPosition.subrow === UM.admin.builder.deleteProcess[i].subrow ) { + UM.admin.builder.fieldsToDelete.splice(i, 1); + return false; + } + }); + + loadingWrapper.hide(); + } ); + } else { + jQuery(this).parents('.' +element).remove(); + jQuery('.tipsy').remove(); + UM_Rows_Refresh(); + + jQuery.each( UM.admin.builder.deleteProcess, function(i) { + if ( fieldPosition.row === UM.admin.builder.deleteProcess[i].row && fieldPosition.subrow === UM.admin.builder.deleteProcess[i].subrow ) { + UM.admin.builder.fieldsToDelete.splice(i, 1); + return false; + } + }); + + loadingWrapper.hide(); + } }); - + /* dynamically change columns */ jQuery(document.body).on('click', '.um-admin-drag-ctrls.columns a', function(){ - + var row = jQuery(this).parents('.um-admin-drag-rowsub'); var tab = jQuery(this); var tabs = jQuery(this).parent(); @@ -358,21 +417,21 @@ jQuery(document).ready(function() { var existing_cols = row.find('.um-admin-drag-col').length; var required_cols = tab.data('cols'); var needed_cols = required_cols - existing_cols; - + if ( needed_cols > 0 ) { - + for (i = 0; i < needed_cols; i++){ row.find('.um-admin-drag-col-dynamic').append('
'); } - + row.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle'); row.find('.um-admin-drag-col').addClass('cols-' + row.find('.um-admin-drag-col').length ); row.find('.um-admin-drag-col:last').addClass('cols-last'); - + if ( row.find('.um-admin-drag-col').length == 3 ) {row.find('.um-admin-drag-col:eq(1)').addClass('cols-middle');} - + } else if ( needed_cols < 0 ) { - + needed_cols = needed_cols + 3; if ( needed_cols == 2 ) { row.find('.um-admin-drag-col:first').append( row.find('.um-admin-drag-col.cols-last').html() ); @@ -384,25 +443,25 @@ jQuery(document).ready(function() { row.find('.um-admin-drag-col.cols-last').remove(); row.find('.um-admin-drag-col.cols-middle').remove(); } - + row.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle'); row.find('.um-admin-drag-col').addClass('cols-' + row.find('.um-admin-drag-col:visible').length ); row.find('.um-admin-drag-col:last').addClass('cols-last'); - + } - + if ( allow_update_via_col_click == true ) { UM_Change_Field_Col(); UM_Rows_Refresh(); } }); - + /* trigger columns at start */ allow_update_via_col_click = false; jQuery('.um-admin-drag-ctrls.columns a.active').each(function(){ jQuery(this).trigger('click'); }).promise().done( function(){ allow_update_via_col_click = true; } ); - + UM_Rows_Refresh(); -}); \ No newline at end of file +}); diff --git a/includes/admin/core/class-admin-builder.php b/includes/admin/core/class-admin-builder.php index 265771e4..1ed73dbc 100644 --- a/includes/admin/core/class-admin-builder.php +++ b/includes/admin/core/class-admin-builder.php @@ -410,6 +410,7 @@ if ( ! class_exists( 'um\admin\core\Admin_Builder' ) ) { if ( empty( $fields ) ) { ?>
+
@@ -419,6 +420,7 @@ if ( ! class_exists( 'um\admin\core\Admin_Builder' ) ) {
+
@@ -462,6 +464,7 @@ if ( ! class_exists( 'um\admin\core\Admin_Builder' ) ) { foreach ( $rows as $row_id => $array ) { ?>
+
@@ -481,6 +484,7 @@ if ( ! class_exists( 'um\admin\core\Admin_Builder' ) ) { $subrow_fields = $this->get_fields_in_subrow( $row_fields, $c ); ?>
+