Skip to content

Commit 5cc139a

Browse files
GaryJonesGaryJones
committed
feat: add dedicated edit page to replace inline editing
Replace the inline edit functionality with a full-page edit interface that provides clearer layout and better autocomplete support for conditional arguments. The dedicated edit page allows users to see all ad code properties simultaneously without table layout constraints. The new edit page includes Select2 autocomplete for conditional arguments, dynamically shows or hides the logical operator field based on the number of conditions, and provides a more intuitive editing experience. This change removes the legacy inline edit JavaScript (acm.js), associated CSS styles, and the column_id() and inline_edit() methods from the list table class. Resolves #195
1 parent 9951b1e commit 5cc139a

File tree

7 files changed

+445
-662
lines changed

7 files changed

+445
-662
lines changed

‎acm-autocomplete.js‎

Lines changed: 120 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,38 +39,52 @@
3939
bindEvents: function() {
4040
var self = this;
4141

42-
// Use event delegation for dynamically added conditional selects (Add form only).
43-
$( document ).on( 'change', '#add-adcode select[name="acm-conditionals[]"]', function() {
42+
// Use event delegation for dynamically added conditional selects (Add and Edit forms).
43+
$( document ).on( 'change', '#add-adcode select[name="acm-conditionals[]"], #edit-adcode select[name="acm-conditionals[]"]', function() {
4444
self.handleConditionalChange( $( this ) );
4545
self.updateAddButtonVisibility();
46+
self.updateOperatorVisibility();
4647
});
4748

48-
// Re-initialize when new conditional rows are added.
49-
$( document ).on( 'click', '.add-more-conditionals', function() {
50-
// Small delay to allow DOM to update.
49+
// Handle adding new conditional rows.
50+
$( document ).on( 'click', '.add-more-conditionals', function( e ) {
51+
e.preventDefault();
52+
var $button = $( this );
53+
var $form = $button.closest( 'form' );
54+
var $container = $form.find( '.form-new-row' );
55+
56+
self.addConditionalRow( $container );
57+
58+
// Small delay to allow DOM to update, then clean up.
5159
setTimeout( function() {
5260
self.cleanupNewRows();
5361
self.updateAddButtonVisibility();
62+
self.updateOperatorVisibility();
5463
}, 100 );
5564
});
5665

5766
// Handle remove conditional click.
58-
$( document ).on( 'click', '.acm-remove-conditional', function() {
67+
$( document ).on( 'click', '.acm-remove-conditional', function( e ) {
68+
e.preventDefault();
69+
var $row = $( this ).closest( '.conditional-single-field' );
70+
$row.remove();
71+
5972
setTimeout( function() {
6073
self.updateAddButtonVisibility();
74+
self.updateOperatorVisibility();
6175
}, 100 );
6276
});
6377
},
6478

6579
/**
6680
* Initialize any existing conditional fields on page load.
67-
* Only targets the Add form, not inline edit.
81+
* Targets both Add and Edit forms.
6882
*/
6983
initExistingFields: function() {
7084
var self = this;
7185

72-
// Only target the Add form to avoid conflicts with inline edit.
73-
$( '#add-adcode select[name="acm-conditionals[]"]' ).each( function() {
86+
// Target both Add and Edit forms.
87+
$( '#add-adcode select[name="acm-conditionals[]"], #edit-adcode select[name="acm-conditionals[]"]' ).each( function() {
7488
var $select = $( this );
7589
var conditional = $select.val();
7690
var $argumentsContainer = $select.closest( '.conditional-single-field' ).find( '.conditional-arguments' );
@@ -92,6 +106,62 @@
92106
});
93107
},
94108

109+
/**
110+
* Add a new conditional row to the form.
111+
*
112+
* @param {jQuery} $container The container to add the row to.
113+
*/
114+
addConditionalRow: function( $container ) {
115+
var $master = $container.find( '#conditional-single-field-master' );
116+
117+
if ( ! $master.length ) {
118+
$master = $container.find( '.conditional-single-field' ).first();
119+
}
120+
121+
if ( ! $master.length ) {
122+
return;
123+
}
124+
125+
// Clone the master row.
126+
var $newRow = $master.clone();
127+
128+
// Remove the master ID so only one exists.
129+
$newRow.removeAttr( 'id' );
130+
131+
// Reset select to default.
132+
$newRow.find( 'select[name="acm-conditionals[]"]' ).val( '' );
133+
134+
// Reset and show the input.
135+
var $input = $newRow.find( 'input[name="acm-arguments[]"]' );
136+
$input.val( '' ).show();
137+
138+
// Remove any Select2 elements that may have been cloned.
139+
$newRow.find( 'select.acm-autocomplete-select' ).remove();
140+
$newRow.find( '.select2-container' ).remove();
141+
142+
// Restore hidden input if present.
143+
var $hiddenInput = $newRow.find( 'input[data-original-name="acm-arguments[]"]' );
144+
if ( $hiddenInput.length ) {
145+
$hiddenInput
146+
.attr( 'name', 'acm-arguments[]' )
147+
.removeAttr( 'data-original-name' )
148+
.val( '' )
149+
.show();
150+
}
151+
152+
// Add remove link if not present.
153+
var $arguments = $newRow.find( '.conditional-arguments' );
154+
if ( ! $arguments.find( '.acm-remove-conditional' ).length ) {
155+
$arguments.append( ' <a href="#" class="acm-remove-conditional">Remove</a>' );
156+
}
157+
158+
// Hide the arguments container initially.
159+
$arguments.hide();
160+
161+
// Append to container.
162+
$container.append( $newRow );
163+
},
164+
95165
/**
96166
* Clean up newly added conditional rows.
97167
*
@@ -366,22 +436,53 @@
366436
* Shows the button only when at least one condition is selected.
367437
*/
368438
updateAddButtonVisibility: function() {
369-
var $form = $( '#add-adcode' );
370-
var $addButton = $form.find( '.form-add-more' );
371-
var hasSelectedCondition = false;
439+
var $forms = $( '#add-adcode, #edit-adcode' );
440+
441+
$forms.each( function() {
442+
var $form = $( this );
443+
var $addButton = $form.find( '.form-add-more' );
444+
var hasSelectedCondition = false;
445+
446+
// Check if any conditional select has a value.
447+
$form.find( 'select[name="acm-conditionals[]"]' ).each( function() {
448+
if ( $( this ).val() ) {
449+
hasSelectedCondition = true;
450+
return false; // Break the loop.
451+
}
452+
});
453+
454+
if ( hasSelectedCondition ) {
455+
$addButton.addClass( 'visible' );
456+
} else {
457+
$addButton.removeClass( 'visible' );
458+
}
459+
});
460+
},
461+
462+
/**
463+
* Update visibility of the Logical Operator row.
464+
*
465+
* Shows the operator row only when 2+ conditions are selected.
466+
*/
467+
updateOperatorVisibility: function() {
468+
var $operatorRow = $( '#operator-row' );
469+
470+
if ( ! $operatorRow.length ) {
471+
return;
472+
}
372473

373-
// Check if any conditional select has a value.
374-
$form.find( 'select[name="acm-conditionals[]"]' ).each( function() {
474+
// Count selected conditionals.
475+
var selectedCount = 0;
476+
$( '#edit-adcode select[name="acm-conditionals[]"]' ).each( function() {
375477
if ( $( this ).val() ) {
376-
hasSelectedCondition = true;
377-
return false; // Break the loop.
478+
selectedCount++;
378479
}
379480
});
380481

381-
if ( hasSelectedCondition ) {
382-
$addButton.addClass( 'visible' );
482+
if ( selectedCount >= 2 ) {
483+
$operatorRow.show();
383484
} else {
384-
$addButton.removeClass( 'visible' );
485+
$operatorRow.hide();
385486
}
386487
}
387488
};

0 commit comments

Comments
 (0)