diff --git a/public/js/navbar.js b/public/js/navbar.js index 05338392d..6028229c1 100644 --- a/public/js/navbar.js +++ b/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'); diff --git a/templates/columns/editorUI.html.ep b/templates/columns/editorUI.html.ep index 6fb6ad637..e55188ae3 100644 --- a/templates/columns/editorUI.html.ep +++ b/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'