Skip to content

Commit cea8264

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 cea8264

File tree

7 files changed

+374
-658
lines changed

7 files changed

+374
-658
lines changed

‎acm-autocomplete.js‎

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,11 @@
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

4849
// Re-initialize when new conditional rows are added.
@@ -51,26 +52,28 @@
5152
setTimeout( function() {
5253
self.cleanupNewRows();
5354
self.updateAddButtonVisibility();
55+
self.updateOperatorVisibility();
5456
}, 100 );
5557
});
5658

5759
// Handle remove conditional click.
5860
$( document ).on( 'click', '.acm-remove-conditional', function() {
5961
setTimeout( function() {
6062
self.updateAddButtonVisibility();
63+
self.updateOperatorVisibility();
6164
}, 100 );
6265
});
6366
},
6467

6568
/**
6669
* Initialize any existing conditional fields on page load.
67-
* Only targets the Add form, not inline edit.
70+
* Targets both Add and Edit forms.
6871
*/
6972
initExistingFields: function() {
7073
var self = this;
7174

72-
// Only target the Add form to avoid conflicts with inline edit.
73-
$( '#add-adcode select[name="acm-conditionals[]"]' ).each( function() {
75+
// Target both Add and Edit forms.
76+
$( '#add-adcode select[name="acm-conditionals[]"], #edit-adcode select[name="acm-conditionals[]"]' ).each( function() {
7477
var $select = $( this );
7578
var conditional = $select.val();
7679
var $argumentsContainer = $select.closest( '.conditional-single-field' ).find( '.conditional-arguments' );
@@ -366,22 +369,53 @@
366369
* Shows the button only when at least one condition is selected.
367370
*/
368371
updateAddButtonVisibility: function() {
369-
var $form = $( '#add-adcode' );
370-
var $addButton = $form.find( '.form-add-more' );
371-
var hasSelectedCondition = false;
372+
var $forms = $( '#add-adcode, #edit-adcode' );
373+
374+
$forms.each( function() {
375+
var $form = $( this );
376+
var $addButton = $form.find( '.form-add-more' );
377+
var hasSelectedCondition = false;
378+
379+
// Check if any conditional select has a value.
380+
$form.find( 'select[name="acm-conditionals[]"]' ).each( function() {
381+
if ( $( this ).val() ) {
382+
hasSelectedCondition = true;
383+
return false; // Break the loop.
384+
}
385+
});
386+
387+
if ( hasSelectedCondition ) {
388+
$addButton.addClass( 'visible' );
389+
} else {
390+
$addButton.removeClass( 'visible' );
391+
}
392+
});
393+
},
394+
395+
/**
396+
* Update visibility of the Logical Operator row.
397+
*
398+
* Shows the operator row only when 2+ conditions are selected.
399+
*/
400+
updateOperatorVisibility: function() {
401+
var $operatorRow = $( '#operator-row' );
402+
403+
if ( ! $operatorRow.length ) {
404+
return;
405+
}
372406

373-
// Check if any conditional select has a value.
374-
$form.find( 'select[name="acm-conditionals[]"]' ).each( function() {
407+
// Count selected conditionals.
408+
var selectedCount = 0;
409+
$( '#edit-adcode select[name="acm-conditionals[]"]' ).each( function() {
375410
if ( $( this ).val() ) {
376-
hasSelectedCondition = true;
377-
return false; // Break the loop.
411+
selectedCount++;
378412
}
379413
});
380414

381-
if ( hasSelectedCondition ) {
382-
$addButton.addClass( 'visible' );
415+
if ( selectedCount >= 2 ) {
416+
$operatorRow.show();
383417
} else {
384-
$addButton.removeClass( 'visible' );
418+
$operatorRow.hide();
385419
}
386420
}
387421
};

‎acm.css‎

Lines changed: 69 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -37,127 +37,11 @@ tr:hover .row-actions {
3737
margin-bottom: 5px;
3838
}
3939

40-
.inline-edit-col .acm-section-label {
41-
margin-bottom: 5px;
42-
text-transform: none;
43-
}
44-
45-
.inline-edit-col .acm-float-left {
46-
float: left;
47-
}
48-
49-
.inline-edit-col .acm-column-fields,
50-
.inline-edit-col .acm-priority-field {
51-
width: 250px;
52-
}
53-
54-
.inline-edit-col .acm-column-fields label {
55-
float: left;
56-
width: 75px;
57-
}
58-
59-
.inline-edit-col .acm-column-fields input {
60-
margin-bottom: 5px;
61-
}
62-
63-
.inline-edit-col .acm-conditional-fields {
64-
float: left;
65-
min-width: 270px;
66-
}
67-
68-
.inline-edit-col .acm-conditional-fields .conditional-arguments {
69-
margin-left: 140px;
70-
}
71-
72-
.inline-edit-col .acm-conditional-fields .conditional-arguments input {
73-
width: 70%;
74-
margin-bottom: 5px;
75-
}
76-
77-
.inline-edit-col .acm-conditional-fields .form-add-more {
78-
margin-top: 10px;
79-
clear: both;
80-
}
81-
8240
#add-adcode .form-add-more {
8341
clear:left;
8442
width: 90%;
8543
}
8644

87-
.acm-edit-field {
88-
position: relative;
89-
max-width: 200px;
90-
float: left;
91-
margin: 15px 0 0 15px;
92-
}
93-
94-
.acm-edit-field label {
95-
position: relative;
96-
float: left;
97-
font-weight: 700;
98-
color: #333;
99-
}
100-
101-
.acm-edit-cond,
102-
.acm-cancel-button,
103-
.acm-edit-field input,
104-
.acm-conditional-label {
105-
position: relative;
106-
float: left;
107-
clear: left;
108-
}
109-
110-
.acm-edit-cond {
111-
margin: 5px 0 0 15px;
112-
}
113-
114-
.acm-edit-cond input {
115-
margin-left: 15px;
116-
}
117-
118-
.acm-conditional-label {
119-
width: 100%;
120-
font-weight: 700;
121-
color: #333;
122-
margin: 10px 0 0 15px;
123-
}
124-
125-
.acm-cancel-button {
126-
margin: 10px 0 30px 15px;
127-
}
128-
129-
.acm-edit-button {
130-
float: left;
131-
margin: 10px 0 30px 15px;
132-
}
133-
134-
.acm-x-cond {
135-
font-size: 14px;
136-
padding-left: 5px;
137-
color: #888;
138-
cursor: pointer;
139-
font-family: sans-serif
140-
}
141-
142-
.acm-x-cond:hover {
143-
color: #333;
144-
text-decoration: underline;
145-
}
146-
147-
#acm-add-inline-cond {
148-
display: block;
149-
float: left;
150-
clear: left;
151-
padding-top: 5px;
152-
width: 295px;
153-
text-align: right;
154-
cursor:pointer;
155-
}
156-
157-
#acm-add-inline-cond:hover {
158-
text-decoration: underline;
159-
}
160-
16145
.acm-global-options {
16246
clear: both;
16347
margin-bottom: 20px;
@@ -214,12 +98,6 @@ tr:hover .row-actions {
21498
height: 28px;
21599
}
216100

217-
/* Inline edit Select2 styling */
218-
.inline-edit-col .conditional-arguments .select2-container {
219-
width: 70% !important;
220-
margin-bottom: 5px;
221-
}
222-
223101
/* Hide Add button initially until first condition is selected */
224102
#add-adcode .form-add-more {
225103
display: none;
@@ -229,13 +107,76 @@ tr:hover .row-actions {
229107
display: block;
230108
}
231109

232-
/* Operator field styling in inline edit */
233-
.inline-edit-col .acm-operator-field {
234-
clear: both;
110+
/* Edit page styles */
111+
#edit-adcode .form-table th {
112+
width: 200px;
113+
padding: 20px 10px 20px 0;
114+
}
115+
116+
#edit-adcode .regular-text {
117+
width: 25em;
118+
}
119+
120+
#edit-adcode .conditional-single-field {
121+
margin-bottom: 10px;
122+
display: flex;
123+
align-items: flex-start;
124+
gap: 10px;
125+
}
126+
127+
#edit-adcode .conditional-function {
128+
flex: 0 0 200px;
129+
}
130+
131+
#edit-adcode .conditional-function select {
132+
width: 100%;
133+
}
134+
135+
#edit-adcode .conditional-arguments {
136+
flex: 1;
137+
display: flex;
138+
align-items: center;
139+
gap: 10px;
140+
}
141+
142+
#edit-adcode .conditional-arguments input[type="text"] {
143+
width: 200px;
144+
}
145+
146+
#edit-adcode .form-add-more {
147+
display: none;
235148
margin-top: 10px;
236-
padding-top: 10px;
237149
}
238150

239-
.inline-edit-col .acm-operator-field .acm-section-label {
240-
margin-bottom: 5px;
151+
#edit-adcode .form-add-more.visible {
152+
display: block;
153+
}
154+
155+
#edit-adcode .acm-remove-conditional {
156+
color: #b32d2e;
157+
text-decoration: none;
158+
}
159+
160+
#edit-adcode .acm-remove-conditional:hover {
161+
color: #a00;
162+
}
163+
164+
/* Select2 styling for edit page */
165+
#edit-adcode .conditional-arguments .select2-container {
166+
width: 200px !important;
167+
}
168+
169+
#edit-adcode .conditional-arguments .select2-container--default .select2-selection--single {
170+
height: 30px;
171+
border-color: #8c8f94;
172+
border-radius: 4px;
173+
}
174+
175+
#edit-adcode .conditional-arguments .select2-container--default .select2-selection--single .select2-selection__rendered {
176+
line-height: 28px;
177+
padding-left: 8px;
178+
}
179+
180+
#edit-adcode .conditional-arguments .select2-container--default .select2-selection--single .select2-selection__arrow {
181+
height: 28px;
241182
}

0 commit comments

Comments
 (0)