Skip to content

Commit 6ce120f

Browse files
GaryJonesGaryJones
authored
Merge pull request #196 from Automattic/feature/195-dedicated-edit-page
2 parents 9951b1e + 5cc139a commit 6ce120f

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)