Merge pull request #26 from drgrice1/remove-jquery-usage

Remove the last direct jquery usage of the renderer javascript.

Author: somiaj

public/js/navbar.js

@@ -21,15 +21,26 @@ for (const element of templateItems) {
 	});
 }
 
-$(function () {
-	$('#hiddenSourceFilePath').text($('#sourceFilePath').val());
-	$('#sourceFilePath').width($('#hiddenSourceFilePath').width());
-}).on('input', function () {
-	$('#hiddenSourceFilePath').text($('#sourceFilePath').val());
-	$('#sourceFilePath').width($('#hiddenSourceFilePath').width() + 12);
-	const remaining =
-		document.querySelector('.topnav').offsetWidth - document.querySelector('#template-select').offsetWidth - 330;
-	$('#sourceFilePath').css('maxWidth', remaining);
+window.addEventListener('DOMContentLoaded', () => {
+	const sourceFilePath = document.getElementById('sourceFilePath');
+	const hiddenSourceFilePath = document.getElementById('hiddenSourceFilePath');
+	if (!sourceFilePath || !hiddenSourceFilePath) return;
+
+	const adjustSourceWidth = () => {
+		hiddenSourceFilePath.textContent = sourceFilePath.value;
+		hiddenSourceFilePath.style.display = 'inline';
+		sourceFilePath.style.width = `${hiddenSourceFilePath.offsetWidth + 12}px`;
+		hiddenSourceFilePath.style.display = 'none';
+
+		const remaining =
+			document.querySelector('.topnav').offsetWidth -
+			document.querySelector('#template-select').offsetWidth -
+			330;
+		sourceFilePath.style.maxWidth = `${remaining}px`;
+	};
+
+	sourceFilePath.addEventListener('input', adjustSourceWidth);
+	adjustSourceWidth();
 });
 
 let loadbutton = document.getElementById('load-problem');

templates/columns/editorUI.html.ep

@@ -1,5 +1,4 @@
 %= javascript 'node_modules/@openwebwork/pg-codemirror-editor/dist/pg-codemirror-editor.js'
-%= javascript 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
 
 <div id='edit-header' class='header'>
     <b>Editing problem:</b><br>
@@ -24,22 +23,22 @@
 	overflow: auto;
 	background-color: white;
 	height: 100%;
+}
 
-	.cm-editor {
-		height: 100%;
+.code-mirror-editor .cm-editor {
+	height: 100%;
+}
 
-		.cm-scroller {
-			height: 100%;
+.code-mirror-editor .cm-editor .cm-scroller {
+	height: 100%;
+}
 
-			.cm-content {
-				height: 100%;
-				min-height: 400px;
-			}
-		}
+.code-mirror-editor .cm-editor .cm-scroller .cm-content {
+	height: 100%;
+	min-height: 400px;
+}
 
-		.cm-panels {
-			z-index: 18;
-		}
-	}
+.code-mirror-editor .cm-editor .cm-panels {
+	z-index: 18;
 }
 % end