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'
Editing problem:
@@ -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