Merge branch 'develop' into details

.github/workflows/unit-tests.yml

@@ -29,6 +29,7 @@ jobs:
             libjson-perl \
             libjson-xs-perl \
             liblocale-maketext-lexicon-perl \
+            libmojolicious-perl \
             libtest2-suite-perl \
             libtie-ixhash-perl \
             libuuid-tiny-perl \

cpanfile

@@ -18,6 +18,7 @@ on runtime => sub {
 	requires 'JSON::XS';
 	requires 'Locale::Maketext';
 	requires 'Locale::Maketext::Lexicon';
+	requires 'Mojolicious';
 	requires 'Tie::IxHash';
 	requires 'Types::Serialiser';
 	requires 'UUID::Tiny';

docker/pg.Dockerfile

@@ -21,6 +21,7 @@ RUN apt-get update \
 		libjson-perl \
 		libjson-xs-perl \
 		liblocale-maketext-lexicon-perl \
+		libmojolicious-perl \
 		libtest2-suite-perl \
 		libtie-ixhash-perl \
 		libuuid-tiny-perl \

htdocs/js/Essay/essay.js

@@ -1,17 +1,28 @@
 'use strict';
 
 (() => {
-	const addPreviewButton = (latexEntry) => {
-		if (latexEntry.dataset.previewBtnAdded) return;
-		latexEntry.dataset.previewBtnAdded = 'true';
+	const initializePreviewButton = (latexEntry) => {
+		if (latexEntry.dataset.previewBtnInitialized) return;
+		latexEntry.dataset.previewBtnInitialized = 'true';
 
-		const buttonContainer = document.createElement('div');
-		buttonContainer.classList.add('latexentry-button-container', 'mt-1');
+		const buttonContainer =
+			document.getElementById(`${latexEntry.id}-latexentry-button-container`) || document.createElement('div');
 
-		const button = document.createElement('button');
-		button.type = 'button';
-		button.classList.add('latexentry-preview', 'btn', 'btn-secondary', 'btn-sm');
-		button.textContent = 'Preview';
+		if (!buttonContainer.classList.contains('latexentry-button-container')) {
+			buttonContainer.classList.add('latexentry-button-container', 'mt-1');
+			buttonContainer.id = `${latexEntry.id}-latexentry-button-container`;
+			latexEntry.after(buttonContainer);
+		}
+
+		const button = buttonContainer.querySelector('.latexentry-preview') || document.createElement('button');
+
+		if (!button.classList.contains('latexentry-preview')) {
+			button.type = 'button';
+			button.classList.add('latexentry-preview', 'btn', 'btn-secondary', 'btn-sm');
+			button.textContent = 'Preview';
+
+			buttonContainer.append(button);
+		}
 
 		button.addEventListener('click', () => {
 			button.dataset.bsContent = latexEntry.value
@@ -49,19 +60,16 @@
 				popover.show();
 			}
 		});
-
-		buttonContainer.append(button);
-		latexEntry.after(buttonContainer);
 	};
 
-	document.querySelectorAll('.latexentryfield').forEach(addPreviewButton);
+	document.querySelectorAll('.latexentryfield').forEach(initializePreviewButton);
 
 	const observer = new MutationObserver((mutationsList) => {
 		for (const mutation of mutationsList) {
 			for (const node of mutation.addedNodes) {
 				if (node instanceof Element) {
-					if (node.classList.contains('latexentryfield')) addPreviewButton(node);
-					else node.querySelectorAll('.latexentryfield').forEach(addPreviewButton);
+					if (node.classList.contains('latexentryfield')) initializePreviewButton(node);
+					else node.querySelectorAll('.latexentryfield').forEach(initializePreviewButton);
 				}
 			}
 		}

htdocs/js/Feedback/feedback.js

@@ -0,0 +1,49 @@
+(() => {
+	const initializeFeedback = (feedbackBtn) => {
+		if (feedbackBtn.dataset.popoverInitialized) return;
+		feedbackBtn.dataset.popoverInitialized = 'true';
+
+		new bootstrap.Popover(feedbackBtn, { sanitize: false, container: feedbackBtn.parentElement });
+
+		// Render MathJax previews.
+		if (window.MathJax) {
+			feedbackBtn.addEventListener('show.bs.popover', () => {
+				MathJax.startup.promise = MathJax.startup.promise.then(() => MathJax.typesetPromise(['.popover-body']));
+			});
+		}
+
+		feedbackBtn.addEventListener('shown.bs.popover', () => {
+			const bsPopover = bootstrap.Popover.getInstance(feedbackBtn);
+
+			// Execute javascript in the answer preview.
+			bsPopover.tip?.querySelectorAll('script').forEach((origScript) => {
+				const newScript = document.createElement('script');
+				Array.from(origScript.attributes).forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+				newScript.appendChild(document.createTextNode(origScript.innerHTML));
+				origScript.parentNode.replaceChild(newScript, origScript);
+			});
+
+			// Make a click on the popover header close the popover.
+			bsPopover.tip?.querySelector('.popover-header')?.addEventListener('click', () => bsPopover?.hide());
+		});
+	};
+
+	// Setup feedback popovers already on the page.
+	document.querySelectorAll('.ww-feedback-btn').forEach(initializeFeedback);
+
+	// Deal with feedback popovers that are added to the page later.
+	const observer = new MutationObserver((mutationsList) => {
+		mutationsList.forEach((mutation) => {
+			mutation.addedNodes.forEach((node) => {
+				if (node instanceof Element) {
+					if (node.classList.contains('ww-feedback-btn')) initializeFeedback(node.firstElementChild);
+					else node.querySelectorAll('.ww-feedback-btn').forEach(initializeFeedback);
+				}
+			});
+		});
+	});
+	observer.observe(document.body, { childList: true, subtree: true });
+
+	// Stop the mutation observer when the window is closed.
+	window.addEventListener('unload', () => observer.disconnect());
+})();