Skip to content

Commit 4aa2df6

Browse files
DinetsVDinetsV
committed
Merge branch 'develop' into release/v4.1.3
2 parents d9907bd + 717870b commit 4aa2df6

3 files changed

Lines changed: 78 additions & 32 deletions

File tree

‎modules/deactivation/assets/css/style.css‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99

1010
#TB_window.ea11y-feedback-thickbox {
1111
height: auto !important;
12-
max-height: 90vh;
13-
overflow: auto;
12+
overflow: visible;
1413
top: 50% !important;
1514
left: 50% !important;
1615
transform: translate(-50%, -50%) !important;
@@ -22,14 +21,20 @@
2221

2322
.ea11y-feedback-thickbox #TB_ajaxContent {
2423
overflow: visible;
24+
height: auto !important;
2525
padding: 0;
2626
}
2727

28+
.ea11y-deactivation-content > h4 {
29+
margin-block-start: 0;
30+
}
31+
2832
.ea11y-feedback-thickbox #TB_title {
2933
padding: 5px;
3034
display: flex;
3135
flex-direction: row;
3236
text-align: start;
37+
border-radius: 8px 8px 0 0;
3338
}
3439

3540
.ea11y-feedback-thickbox #TB_closeWindowButton {
@@ -66,25 +71,28 @@
6671

6772
.ea11y-feedback-option {
6873
margin-block-end: 15px;
74+
cursor: pointer;
6975
}
7076

7177
.ea11y-feedback-option > label {
7278
display: flex;
7379
align-items: center;
80+
width: 100%;
7481
cursor: pointer;
7582
color: #23282d;
7683
margin-block-end: 8px;
7784
}
7885

79-
.ea11y-feedback-option input[type="radio"] {
80-
margin-inline-end: 8px;
81-
}
82-
8386
.ea11y-feedback-text-field {
87+
cursor: default;
8488
margin-inline-start: 24px;
8589
margin-block-start: 8px;
8690
}
8791

92+
.ea11y-feedback-option input[type="radio"] {
93+
margin-inline-end: 8px;
94+
}
95+
8896
.ea11y-feedback-text-field label {
8997
display: block;
9098
font-size: 12px;

‎modules/deactivation/assets/js/deactivation-feedback.js‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { __ } from '@wordpress/i18n';
22
import '../css/style.css';
33

44
const REASON_FIELDS = {
5-
unclear_how_to_use: ['text_field_unclear', 'unclear_details'],
6-
switched_solution: ['text_field_switched', 'switched_details'],
7-
other: ['text_field_other', 'other_details'],
5+
unclear_how_to_use: ['ea11y_text_field_unclear', 'ea11y_unclear_details'],
6+
switched_solution: ['ea11y_text_field_switched', 'ea11y_switched_details'],
7+
other: ['ea11y_text_field_other', 'ea11y_other_details'],
88
};
99

1010
class Ea11yDeactivationHandler {
@@ -30,6 +30,15 @@ class Ea11yDeactivationHandler {
3030
);
3131
}
3232

33+
resetModal() {
34+
this.hideFields();
35+
document
36+
.querySelectorAll('input[name="ea11y_deactivation_reason"]')
37+
.forEach((radio) => {
38+
radio.checked = false;
39+
});
40+
}
41+
3342
hideFields() {
3443
document
3544
.querySelectorAll('.ea11y-feedback-text-field')
@@ -38,12 +47,34 @@ class Ea11yDeactivationHandler {
3847

3948
toggleField(reason) {
4049
this.hideFields();
50+
4151
const fieldId = REASON_FIELDS[reason]?.[0];
52+
4253
if (fieldId) {
4354
document.getElementById(fieldId).style.display = 'block';
4455
}
4556
}
4657

58+
handleOptionClick(e) {
59+
const option = e.target.closest('.ea11y-feedback-option');
60+
61+
if (!option || e.target.closest('.ea11y-feedback-text-field')) {
62+
return;
63+
}
64+
65+
const radio = option.querySelector(
66+
'input[type="radio"][name="ea11y_deactivation_reason"]',
67+
);
68+
69+
if (!radio) {
70+
return;
71+
}
72+
73+
radio.checked = true;
74+
75+
this.toggleField(radio.value);
76+
}
77+
4778
sendRequest(data, done) {
4879
fetch(window?.ea11yDeactivationFeedback?.ajaxurl || '', {
4980
method: 'POST',
@@ -84,6 +115,7 @@ class Ea11yDeactivationHandler {
84115
init() {
85116
this.deactivationLink.addEventListener('click', (e) => {
86117
e.preventDefault();
118+
this.resetModal();
87119
this.modal(
88120
__('Quick feedback', 'pojo-accessibility'),
89121
'#TB_inline?width=600&height=auto&inlineId=ea11y-deactivation-modal',
@@ -101,11 +133,17 @@ class Ea11yDeactivationHandler {
101133
if (e.target?.id === 'ea11y-submit-deactivate') {
102134
e.preventDefault();
103135
this.handleSubmit();
136+
137+
return;
104138
}
105139
if (e.target?.id === 'ea11y-skip-deactivate') {
106140
e.preventDefault();
107141
this.deactivate();
142+
143+
return;
108144
}
145+
146+
this.handleOptionClick(e);
109147
});
110148
}
111149
}

‎modules/deactivation/module.php‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -80,63 +80,63 @@ public function add_deactivation_modal(): void {
8080

8181
<div class="ea11y-feedback-options">
8282
<div class="ea11y-feedback-option">
83-
<label for="reason_no_longer_needed">
84-
<input type="radio" name="ea11y_deactivation_reason" value="no_longer_needed" id="reason_no_longer_needed">
83+
<label>
84+
<input type="radio" name="ea11y_deactivation_reason" value="no_longer_needed" id="ea11y_reason_no_longer_needed">
8585
<?php esc_html_e( 'I no longer need this plugin', 'pojo-accessibility' ); ?>
8686
</label>
8787
</div>
8888

8989
<div class="ea11y-feedback-option">
90-
<label for="reason_too_expensive">
91-
<input type="radio" name="ea11y_deactivation_reason" value="too_expensive" id="reason_too_expensive">
90+
<label>
91+
<input type="radio" name="ea11y_deactivation_reason" value="too_expensive" id="ea11y_reason_too_expensive">
9292
<?php esc_html_e( 'It\'s too expensive', 'pojo-accessibility' ); ?>
9393
</label>
9494
</div>
9595

9696
<div class="ea11y-feedback-option">
97-
<label for="reason_no_results">
98-
<input type="radio" name="ea11y_deactivation_reason" value="no_results" id="reason_no_results">
97+
<label>
98+
<input type="radio" name="ea11y_deactivation_reason" value="no_results" id="ea11y_reason_no_results">
9999
<?php esc_html_e( 'The plugin didn\'t provide the results I was hoping for', 'pojo-accessibility' ); ?>
100100
</label>
101101
</div>
102102

103103
<div class="ea11y-feedback-option">
104-
<label for="reason_unclear">
105-
<input type="radio" name="ea11y_deactivation_reason" value="unclear_how_to_use" id="reason_unclear">
104+
<label>
105+
<input type="radio" name="ea11y_deactivation_reason" value="unclear_how_to_use" id="ea11y_reason_unclear">
106106
<?php esc_html_e( 'I wasn\'t sure how to use the plugin', 'pojo-accessibility' ); ?>
107107
</label>
108-
<div class="ea11y-feedback-text-field" id="text_field_unclear" style="display: none;">
109-
<label for="unclear_details"><?php esc_html_e( 'Optional: Was anything unclear or confusing?', 'pojo-accessibility' ); ?></label>
110-
<textarea id="unclear_details" name="unclear_details" rows="3" placeholder="<?php esc_attr_e( 'Please share details...', 'pojo-accessibility' ); ?>"></textarea>
108+
<div class="ea11y-feedback-text-field" id="ea11y_text_field_unclear" style="display: none;">
109+
<label for="ea11y_unclear_details"><?php esc_html_e( 'Optional: Was anything unclear or confusing?', 'pojo-accessibility' ); ?></label>
110+
<textarea id="ea11y_unclear_details" name="ea11y_unclear_details" rows="3" placeholder="<?php esc_attr_e( 'Please share details...', 'pojo-accessibility' ); ?>"></textarea>
111111
</div>
112112
</div>
113113

114114
<div class="ea11y-feedback-option">
115-
<label for="reason_technical">
116-
<input type="radio" name="ea11y_deactivation_reason" value="technical_issues" id="reason_technical">
115+
<label>
116+
<input type="radio" name="ea11y_deactivation_reason" value="technical_issues" id="ea11y_reason_technical">
117117
<?php esc_html_e( 'I had technical issues or conflicts with my site', 'pojo-accessibility' ); ?>
118118
</label>
119119
</div>
120120

121121
<div class="ea11y-feedback-option">
122-
<label for="reason_switched">
123-
<input type="radio" name="ea11y_deactivation_reason" value="switched_solution" id="reason_switched">
122+
<label>
123+
<input type="radio" name="ea11y_deactivation_reason" value="switched_solution" id="ea11y_reason_switched">
124124
<?php esc_html_e( 'I switched to a different solution', 'pojo-accessibility' ); ?>
125125
</label>
126-
<div class="ea11y-feedback-text-field" id="text_field_switched" style="display: none;">
127-
<label for="switched_details"><?php esc_html_e( 'Optional: Please share which solution:', 'pojo-accessibility' ); ?></label>
128-
<input type="text" id="switched_details" name="switched_details" placeholder="<?php esc_attr_e( 'Solution name...', 'pojo-accessibility' ); ?>">
126+
<div class="ea11y-feedback-text-field" id="ea11y_text_field_switched" style="display: none;">
127+
<label for="ea11y_switched_details"><?php esc_html_e( 'Optional: Please share which solution:', 'pojo-accessibility' ); ?></label>
128+
<input type="text" id="ea11y_switched_details" name="ea11y_switched_details" placeholder="<?php esc_attr_e( 'Solution name...', 'pojo-accessibility' ); ?>">
129129
</div>
130130
</div>
131131

132132
<div class="ea11y-feedback-option">
133-
<label for="reason_other">
134-
<input type="radio" name="ea11y_deactivation_reason" value="other" id="reason_other">
133+
<label>
134+
<input type="radio" name="ea11y_deactivation_reason" value="other" id="ea11y_reason_other">
135135
<?php esc_html_e( 'Other', 'pojo-accessibility' ); ?>
136136
</label>
137-
<div class="ea11y-feedback-text-field" id="text_field_other" style="display: none;">
138-
<label for="other_details"><?php esc_html_e( 'Optional: Please share the reason:', 'pojo-accessibility' ); ?></label>
139-
<textarea id="other_details" name="other_details" rows="3" placeholder="<?php esc_attr_e( 'Please explain...', 'pojo-accessibility' ); ?>"></textarea>
137+
<div class="ea11y-feedback-text-field" id="ea11y_text_field_other" style="display: none;">
138+
<label for="ea11y_other_details"><?php esc_html_e( 'Optional: Please share the reason:', 'pojo-accessibility' ); ?></label>
139+
<textarea id="ea11y_other_details" name="ea11y_other_details" rows="3" placeholder="<?php esc_attr_e( 'Please explain...', 'pojo-accessibility' ); ?>"></textarea>
140140
</div>
141141
</div>
142142
</div>

0 commit comments

Comments
 (0)