Merge pull request #4618 from dodona-edu/chore/modal-jquery-removal

modal.js: remove jquery and convert to typescript

app/assets/javascripts/modal.ts

@@ -0,0 +1,21 @@
+import { Modal } from "bootstrap";
+import { render, TemplateResult } from "lit";
+
+
+function showInfoModal(title: TemplateResult | string, content: TemplateResult | string, options?: {allowFullscreen: boolean}): void {
+    const button = document.querySelector("#info-modal .modal-header #fullscreen-button") as HTMLElement;
+
+    if (options?.allowFullscreen) {
+        button.style.display = "inline";
+    } else {
+        button.style.display = "none";
+    }
+
+    render(title, document.querySelector("#info-modal .modal-title") as HTMLElement);
+    render(content, document.querySelector("#info-modal .modal-body") as HTMLElement);
+
+    const modal = new Modal(document.getElementById("info-modal"));
+    modal.show();
+}
+
+export { showInfoModal };

app/assets/javascripts/pythia_submission.ts

@@ -1,6 +1,7 @@
 import fscreen from "fscreen";
-import { showInfoModal } from "./modal.js";
+import { showInfoModal } from "./modal";
 import { fetch } from "./util.js";
+import { html } from "lit";
 
 function initPythiaSubmissionShow(submissionCode: string, activityPath: string): void {
     function init(): void {
@@ -69,15 +70,15 @@ function initPythiaSubmissionShow(submissionCode: string, activityPath: string):
     }
 
     function showInlineFile(name: string, content: string): void {
-        showInfoModal(name, `<div class='code'>${content}</div>`);
+        showInfoModal(name, html`<div class='code'>${content}</div>`);
     }
 
     function showRealFile(name: string, activityPath: string, filePath: string): void {
         const path = activityPath + "/" + filePath;
         const random = Math.floor(Math.random() * 10000 + 1);
         showInfoModal(
-            `${name} <a href='${path}' title='Download' download><i class='mdi mdi-download'></i></a>`,
-            `<div class='code' id='file-${random}'>Loading...</div>`
+            html`${name} <a href='${path}' title='Download' download><i class='mdi mdi-download'></i></a>`,
+            html`<div class='code' id='file-${random}'>Loading...</div>`
         );
 
         fetch(path, {
@@ -193,7 +194,7 @@ function initPythiaSubmissionShow(submissionCode: string, activityPath: string):
     function createTutor(codeTrace: string): void {
         showInfoModal(
             "Python Tutor",
-            `<div id="tutorcontent"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" style="width: 100%">Loading</div></div></div>`,
+            html`<div id="tutorcontent"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" style="width: 100%">Loading</div></div></div>`,
             { allowFullscreen: true }
         );
         const modal = document.querySelector("#tutor #info-modal");