Skip to content

Commit 75f83fa

Browse files
ilicfilipilicfilip
authored
Merge pull request #685 from ProgressPlanner/filip/v19/interactive-tasks-loader
Add spinner (loader) to the interactive tasks forms
2 parents e3a8b5e + 5ec5c5c commit 75f83fa

28 files changed

Lines changed: 157 additions & 118 deletions

‎assets/css/page-widgets/suggested-tasks.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,10 @@
206206
&.prpl-note-error {
207207
color: var(--prpl-color-alert-error-text);
208208
background-color: var(--prpl-background-alert-error);
209+
margin-bottom: 0;
210+
211+
order: 98; /* One less than the spinner. */
212+
flex-grow: 1;
209213

210214
.prpl-note-icon {
211215
color: var(--prpl-color-alert-error);
@@ -441,10 +445,22 @@
441445
padding-top: 1rem;
442446
display: flex;
443447
justify-content: flex-end;
448+
align-items: center;
444449
gap: 1rem;
445450
align-self: flex-end;
446451
width: 100%;
447452

453+
/* If there are no other elements in the form, align the button to the left. */
454+
&:only-child {
455+
padding-top: 0;
456+
justify-content: flex-start;
457+
458+
/* Display the spinner after the button. */
459+
.prpl-spinner {
460+
order: 99;
461+
}
462+
}
463+
448464
.prpl-button {
449465
cursor: pointer;
450466
margin: 0;
@@ -456,6 +472,11 @@
456472
}
457473
}
458474

475+
/* Display the spinner before the button. */
476+
.prpl-spinner {
477+
order: -1;
478+
}
479+
459480
}
460481
}
461482

‎assets/js/recommendations/interactive-task.js‎

Lines changed: 69 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ const prplInteractiveTaskFormListener = {
3535
formElement.addEventListener( 'submit', ( event ) => {
3636
event.preventDefault();
3737

38+
prplInteractiveTaskFormListener.showLoading( formElement );
39+
3840
// Get the form data.
3941
const formData = new FormData( formElement );
4042
const settingsToPass = {};
@@ -56,6 +58,8 @@ const prplInteractiveTaskFormListener = {
5658
return response;
5759
}
5860

61+
prplInteractiveTaskFormListener.hideLoading( formElement );
62+
5963
// This will trigger the celebration event (confetti) as well.
6064
prplSuggestedTask.maybeComplete( postId ).then( () => {
6165
// Close popover.
@@ -76,6 +80,8 @@ const prplInteractiveTaskFormListener = {
7680
const formSubmitHandler = ( event ) => {
7781
event.preventDefault();
7882

83+
prplInteractiveTaskFormListener.showLoading( formElement );
84+
7985
callback()
8086
.then( ( response ) => {
8187
if ( true !== response.success ) {
@@ -110,6 +116,9 @@ const prplInteractiveTaskFormListener = {
110116
);
111117
} )
112118
.finally( () => {
119+
// Hide loading state.
120+
prplInteractiveTaskFormListener.hideLoading( formElement );
121+
113122
// Remove the form listener once the callback is executed.
114123
formElement.removeEventListener(
115124
'submit',
@@ -139,6 +148,8 @@ const prplInteractiveTaskFormListener = {
139148
formElement.addEventListener( 'submit', ( event ) => {
140149
event.preventDefault();
141150

151+
prplInteractiveTaskFormListener.showLoading( formElement );
152+
142153
const formData = new FormData( formElement );
143154
const settingsToPass = {};
144155
settingsToPass[ setting ] = settingCallbackValue(
@@ -157,7 +168,6 @@ const prplInteractiveTaskFormListener = {
157168
},
158169
} )
159170
.then( ( response ) => {
160-
console.log( response );
161171
if ( true !== response.success ) {
162172
// Show error to the user.
163173
prplInteractiveTaskFormListener.showError(
@@ -193,6 +203,10 @@ const prplInteractiveTaskFormListener = {
193203
error,
194204
popoverId
195205
);
206+
} )
207+
.finally( () => {
208+
// Hide loading state.
209+
prplInteractiveTaskFormListener.hideLoading( formElement );
196210
} );
197211
} );
198212
},
@@ -214,17 +228,12 @@ const prplInteractiveTaskFormListener = {
214228

215229
console.error( 'Error in interactive task callback:', error );
216230

217-
// Add error message.
218-
const submitButton = formElement.querySelector(
219-
'button[type="submit"]'
231+
// Check if there's already an error message <p> element right after the form
232+
const existingErrorElement = formElement.parentNode.querySelector(
233+
'p.prpl-interactive-task-error-message'
220234
);
221235

222-
if (
223-
submitButton &&
224-
! formElement.querySelector(
225-
'.prpl-interactive-task-error-message'
226-
)
227-
) {
236+
if ( ! existingErrorElement ) {
228237
// Add paragraph with error message.
229238
const errorParagraph = document.createElement( 'p' );
230239
errorParagraph.classList.add(
@@ -234,11 +243,57 @@ const prplInteractiveTaskFormListener = {
234243
);
235244
errorParagraph.textContent = prplL10n( 'somethingWentWrong' );
236245

237-
// Append before submit button.
238-
submitButton.parentNode.insertBefore(
239-
errorParagraph,
240-
submitButton
246+
// Append after the form element.
247+
formElement.insertAdjacentElement( 'afterend', errorParagraph );
248+
}
249+
},
250+
251+
/**
252+
* Show loading state.
253+
*
254+
* @param {HTMLFormElement} formElement - The form element.
255+
* @return {void}
256+
*/
257+
showLoading: ( formElement ) => {
258+
let submitButton = formElement.querySelector( 'button[type="submit"]' );
259+
260+
if ( ! submitButton ) {
261+
submitButton = formElement.querySelector(
262+
'button[data-action="completeTask"]'
241263
);
242264
}
265+
266+
submitButton.disabled = true;
267+
268+
// Add spinner.
269+
const spinner = document.createElement( 'span' );
270+
spinner.classList.add( 'prpl-spinner' );
271+
spinner.innerHTML =
272+
'<span class="spinner" style="visibility: visible;"></span>'; // WP spinner.
273+
274+
// Append spinner after submit button.
275+
submitButton.after( spinner );
276+
},
277+
278+
/**
279+
* Hide loading state.
280+
*
281+
* @param {HTMLFormElement} formElement - The form element.
282+
* @return {void}
283+
*/
284+
hideLoading: ( formElement ) => {
285+
let submitButton = formElement.querySelector( 'button[type="submit"]' );
286+
287+
if ( ! submitButton ) {
288+
submitButton = formElement.querySelector(
289+
'button[data-action="completeTask"]'
290+
);
291+
}
292+
293+
submitButton.disabled = false;
294+
const spinner = formElement.querySelector( 'span.prpl-spinner' );
295+
if ( spinner ) {
296+
spinner.remove();
297+
}
243298
},
244299
};

‎classes/suggested-tasks/providers/class-blog-description.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,11 @@ public function print_popover_form_contents() {
123123
placeholder="<?php \esc_html_e( 'A catchy phrase to describe your website', 'progress-planner' ); ?>"
124124
>
125125
</label>
126-
<button type="submit" class="prpl-button prpl-button-primary" disabled>
127-
<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
128-
</button>
126+
<div class="prpl-steps-nav-wrapper">
127+
<button type="submit" class="prpl-button prpl-button-primary" disabled>
128+
<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
129+
</button>
130+
</div>
129131
<?php
130132
}
131133

‎classes/suggested-tasks/providers/class-disable-comment-pagination.php‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,7 @@ public function print_popover_instructions() {
120120
* @return void
121121
*/
122122
public function print_popover_form_contents() {
123-
?>
124-
<button type="submit" class="prpl-button prpl-button-primary">
125-
<?php \esc_html_e( 'Disable comment pagination', 'progress-planner' ); ?>
126-
</button>
127-
<?php
123+
$this->print_submit_button( \__( 'Disable comment pagination', 'progress-planner' ) );
128124
}
129125

130126
/**

‎classes/suggested-tasks/providers/class-disable-comments.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,11 @@ public function print_popover_instructions() {
144144
*/
145145
public function print_popover_form_contents() {
146146
?>
147-
<button type="submit" class="prpl-button prpl-button-primary">
148-
<?php \esc_html_e( 'Disable new comments', 'progress-planner' ); ?>
149-
</button>
147+
<div class="prpl-steps-nav-wrapper" style="justify-content: flex-start;margin-bottom: 1.25rem;">
148+
<button type="submit" class="prpl-button prpl-button-primary" style="order:-2;">
149+
<?php \esc_html_e( 'Disable new comments', 'progress-planner' ); ?>
150+
</button>
151+
</div>
150152
<?php if ( ! \is_multisite() && \current_user_can( 'install_plugins' ) ) : ?>
151153
<prpl-install-plugin
152154
data-plugin-name="Comment-free zone"

‎classes/suggested-tasks/providers/class-hello-world.php‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -139,11 +139,7 @@ public function should_add_task() {
139139
* @return void
140140
*/
141141
public function print_popover_form_contents() {
142-
?>
143-
<button type="submit" class="prpl-button prpl-button-primary">
144-
<?php \esc_html_e( 'Delete the "Hello World!" post', 'progress-planner' ); ?>
145-
</button>
146-
<?php
142+
$this->print_submit_button( \__( 'Delete the "Hello World!" post', 'progress-planner' ) );
147143
}
148144

149145
/**

‎classes/suggested-tasks/providers/class-permalink-structure.php‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -236,10 +236,8 @@ public function print_popover_form_contents() {
236236
</div>
237237
</fieldset>
238238
</div>
239-
<button type="submit" class="prpl-button prpl-button-primary">
240-
<?php \esc_html_e( 'Set permalink structure', 'progress-planner' ); ?>
241-
</button>
242239
<?php
240+
$this->print_submit_button( \__( 'Set permalink structure', 'progress-planner' ) );
243241
}
244242

245243
/**

‎classes/suggested-tasks/providers/class-sample-page.php‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,11 +138,7 @@ public function should_add_task() {
138138
* @return void
139139
*/
140140
public function print_popover_form_contents() {
141-
?>
142-
<button type="submit" class="prpl-button prpl-button-primary">
143-
<?php \esc_html_e( 'Delete the "Sample Page" page', 'progress-planner' ); ?>
144-
</button>
145-
<?php
141+
$this->print_submit_button( \__( 'Delete the "Sample Page" page', 'progress-planner' ) );
146142
}
147143

148144
/**

‎classes/suggested-tasks/providers/class-search-engine-visibility.php‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,7 @@ public function print_popover_instructions() {
112112
* @return void
113113
*/
114114
public function print_popover_form_contents() {
115-
?>
116-
<button type="submit" class="prpl-button prpl-button-primary">
117-
<?php \esc_html_e( 'Allow search engines to index your site', 'progress-planner' ); ?>
118-
</button>
119-
<?php
115+
$this->print_submit_button( \__( 'Allow search engines to index your site', 'progress-planner' ) );
120116
}
121117

122118
/**

‎classes/suggested-tasks/providers/class-select-locale.php‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -225,11 +225,8 @@ public function print_popover_form_contents() {
225225
'show_available_translations' => \current_user_can( 'install_languages' ) && \wp_can_install_language_pack(),
226226
]
227227
);
228-
?>
229-
<button type="submit" class="prpl-button prpl-button-primary">
230-
<?php \esc_html_e( 'Select locale', 'progress-planner' ); ?>
231-
</button>
232-
<?php
228+
229+
$this->print_submit_button( \__( 'Select locale', 'progress-planner' ) );
233230
}
234231

235232
/**

0 commit comments

Comments
 (0)