From c7ac4b32779381c5d5b0bd4d2aec8a395665a0b1 Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Thu, 14 Jul 2022 08:08:32 -0500
Subject: [PATCH] Make it possible for a user to cancel a problem load in the
 PG problem editor.

After pressing "Take Action!" to view a problem, press escape to cancel the load.  The busy indicator tells the user this can be done.

This was requested in openwebwork/pg#698.
---
 .../apps/PGProblemEditor/pgproblemeditor.js   | 25 +++++++++++++------
 htdocs/themes/math4/math4.scss                | 13 ++++------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/htdocs/js/apps/PGProblemEditor/pgproblemeditor.js b/htdocs/js/apps/PGProblemEditor/pgproblemeditor.js
index ec32e886bb..062cf4950c 100644
--- a/htdocs/js/apps/PGProblemEditor/pgproblemeditor.js
+++ b/htdocs/js/apps/PGProblemEditor/pgproblemeditor.js
@@ -1,18 +1,18 @@
 (function () {
-	document.addEventListener('keydown', (e) => {
-		if (e.key === 'Escape') bsModal.hide();
-	});
-
 	const bsModal = new bootstrap.Modal(document.getElementById('render-modal'), { keyboard: true, show: false });
 
 	let busyIndicator = null;
 
-	const frame = document.getElementById('pg_editor_frame_id');
-	frame?.addEventListener('load', () => {
+	const removeBusyIndicator = () => {
 		if (busyIndicator) {
 			busyIndicator.remove();
 			busyIndicator = null;
 		}
+	};
+
+	const frame = document.getElementById('pg_editor_frame_id');
+	frame?.addEventListener('load', () => {
+		removeBusyIndicator();
 		if (frame.contentDocument.URL == 'about:blank') return;
 		const style = frame.contentDocument.createElement('style');
 		style.type = 'text/css';
@@ -42,8 +42,19 @@
 			busyIndicator = document.createElement('div');
 			busyIndicator.classList.add('page-loading-busy-indicator');
 			busyIndicator.innerHTML = '<div class="busy-text"><h2>Loading...</h2></div>' +
-				'<div><i class="fas fa-circle-notch fa-spin fa-3x"></i></div>';
+				'<div><i class="fas fa-circle-notch fa-spin fa-3x"></i></div>' +
+				'<div class="busy-text">Press escape to cancel</div>';
+			busyIndicator.tabIndex = -1;
 			document.body.appendChild(busyIndicator);
+			busyIndicator.focus();
+
+			// Allow the user to cancel loading of the iframe by pressing escape.
+			busyIndicator.addEventListener('keydown', (e) => {
+				if (e.key === 'Escape') {
+					removeBusyIndicator();
+					window.stop();
+				}
+			});
 		}
 	});
 
diff --git a/htdocs/themes/math4/math4.scss b/htdocs/themes/math4/math4.scss
index f8b803c212..e51a52a366 100644
--- a/htdocs/themes/math4/math4.scss
+++ b/htdocs/themes/math4/math4.scss
@@ -771,24 +771,21 @@ input.changed[type=text] { /* orange */
 	height: 100%;
 	left: 0;
 	top: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
 	background: rgba(0, 0, 0, .5);
 	z-index: 105;
 
 	.busy-text {
-		position: relative;
 		color: white;
 		font-size: 1.4em;
-		top: calc(50% - 4em);
-		margin: auto;
-		width: 100%;
-		text-align: center;
 	}
 
 	i {
 		color: white;
-		position: absolute;
-		left: calc(50% - 30px);
-		top: calc(50% - 30px);
 	}
 }