Show a toast message instead of submitting when a non-viewable file is

double clicked.

htdocs/js/FileManager/filemanager.js

@@ -12,7 +12,47 @@
 
 		document.getElementsByName('directory')[0]?.addEventListener('change', () => doAction('Go'));
 		document.getElementsByName('dates')[0]?.addEventListener('click', () => doAction('Refresh'));
-		files?.addEventListener('dblclick', () => doAction('View'));
+		files?.addEventListener('dblclick', () => {
+			if (files.selectedOptions[0].dataset.type & 0b11010) doAction('View');
+			else {
+				const container = document.createElement('div');
+				container.classList.add('toast-container', 'top-50', 'start-50', 'translate-middle');
+
+				const toast = document.createElement('div');
+				toast.classList.add('toast');
+				toast.setAttribute('role', 'alert');
+				toast.setAttribute('aria-live', 'assertive');
+				toast.setAttribute('aria-atomit', 'true');
+				const toastContent = document.createElement('div');
+				toastContent.classList.add('d-flex', 'alert', 'alert-danger', 'mb-0', 'p-0');
+
+				const toastBody = document.createElement('div');
+				toastBody.classList.add('toast-body');
+				toastBody.textContent =
+					files.selectedOptions[0].dataset.type & 0b1
+						? files.dataset.linkMessage || 'Symbolic links can not be followed.'
+						: files.dataset.nonViewableMessage || 'This is not a viewable file type.';
+
+				const closeButton = document.createElement('button');
+				closeButton.type = 'button';
+				closeButton.classList.add('btn-close', 'me-2', 'm-auto');
+				closeButton.dataset.bsDismiss = 'toast';
+				closeButton.setAttribute('aria-label', files.dataset.closeTitle || 'Close');
+
+				toastContent.append(toastBody, closeButton);
+
+				toast.append(toastContent);
+				container.append(toast);
+				document.body.append(container);
+
+				const bsToast = new bootstrap.Toast(toast);
+				bsToast.show();
+				toast.addEventListener('hidden.bs.toast', () => {
+					bsToast.dispose();
+					container.remove();
+				});
+			}
+		});
 
 		// If on the confirmation page, then focus the "name" input.
 		form.querySelector('input[name="name"]')?.focus();
@@ -21,7 +61,7 @@
 	// The bits for types from least to most significant digit are set in the directoryListing method of
 	// lib/WeBWorK/ContentGenerator/Instructor/FileManager.pm to mean a file is a
 	// link, directory, regular file, text file, or image file.
-	const fileActionButtons = [
+	const fileActions = [
 		{ id: 'View', types: 0b11010, multiple: 0 },
 		{ id: 'Edit', types: 0b01000, multiple: 0 },
 		{ id: 'Download', types: 0b100, multiple: 0 },
@@ -30,13 +70,13 @@
 		{ id: 'Delete', types: 0b111, multiple: 1 },
 		{ id: 'MakeArchive', types: 0b111, multiple: 1 }
 	];
-	fileActionButtons.map((button) => (button.elt = document.getElementById(button.id)));
+	fileActions.map((button) => (button.elt = document.getElementById(button.id)));
 	const archiveButton = document.getElementById('MakeArchive');
 
 	const checkFiles = () => {
 		const selectedFiles = files.selectedOptions;
 
-		for (const button of fileActionButtons) {
+		for (const button of fileActions) {
 			if (!button.elt) continue;
 			if (selectedFiles.length) {
 				if (selectedFiles.length == 1 && !button.multiple)

templates/ContentGenerator/Instructor/FileManager/refresh.html.ep

@@ -31,7 +31,12 @@
 <div class="row">
 	<div class="col-md-8 mb-2">
 		<%= select_field files => $files, id => 'files', class => 'form-select font-monospace h-100',
-			dir => 'ltr', size => 17, multiple => undef =%>
+			dir => 'ltr', size => 17, multiple => undef,
+			data => {
+				link_message         => maketext('Symbolic links can not be followed.'),
+				non_viewable_message => maketext('This is not a viewable file type.'),
+				close_title          => maketext('Close')
+			} =%>
 	</div>
 	<div class="col-md-4 mb-2">
 		<div class="d-flex flex-md-column flex-wrap flex-md-nowrap justify-content-evenly gap-1 gap-md-0">