From cc6e7d4c2c81bd4a86e857966e649d546ad004f9 Mon Sep 17 00:00:00 2001 From: Boris Date: Sun, 1 Feb 2026 16:05:03 +0100 Subject: [PATCH 1/2] Refactor openDialog function without jquery-ui --- public/layouts/opus4/js/getDoi.js | 108 ++++++++++++++++++++---------- 1 file changed, 72 insertions(+), 36 deletions(-) diff --git a/public/layouts/opus4/js/getDoi.js b/public/layouts/opus4/js/getDoi.js index c3610c3db..f0fb45505 100644 --- a/public/layouts/opus4/js/getDoi.js +++ b/public/layouts/opus4/js/getDoi.js @@ -476,74 +476,110 @@ async function getDoctypes(data) function openDialog(title, text, type = 'note', id = null) { - var dialogButtons = {}; + if (!window.HTMLDialogElement) { + window.alert(title + "\n\n" + text); + return; + } + + var dlg = document.createElement("dialog"); + dlg.className = "opus-dialog opus-dialog--" + type; + + var header = document.createElement("div"); + header.className = "opus-dialog__title"; + header.textContent = title; - var dialogContent = document.createElement("div"); - dialogContent.textContent = text; + var closeBtn = document.createElement("button"); + closeBtn.type = "button"; + closeBtn.className = "opus-dialog__close"; + closeBtn.setAttribute("aria-label", translations.doiimport_button_cancel || "Close"); + closeBtn.textContent = "×"; + closeBtn.addEventListener("click", closeDialog); + header.appendChild(closeBtn); - // Hinzufügen eines Buttons, wenn DOI schon vorhanden und eine ID verfügbar ist + var body = document.createElement("div"); + body.className = "opus-dialog__body"; + body.textContent = text; + + var footer = document.createElement("div"); + footer.className = "opus-dialog__footer"; + + function closeDialog() { + dlg.close(); + dlg.remove(); + } + + function addButton(label, handler, css) { + var btn = document.createElement("button"); + btn.type = "button"; + btn.className = "opus-dialog__btn" + (css ? " " + css : ""); + btn.textContent = label; + btn.addEventListener("click", handler); + footer.appendChild(btn); + } + + // Optionaler Button, wenn DOI bereits existiert if (id) { - dialogButtons[translations.doiimport_button_showId + ' ' + id] = function () { + addButton(translations.doiimport_button_showId + ' ' + id, function () { var checkLink = baseUrl + "/" + id; window.open(checkLink, '_blank'); - }; + }, "secondary"); } switch (type) { case 'warning': - dialogButtons['OK'] = function () { - $(this).dialog("close"); + addButton('OK', function () { + closeDialog(); cleanup(); document.getElementById("IdentifierDoi").value = doi; startCheck(); - }; - dialogButtons[translations.doiimport_button_cancel] = function () { - $(this).dialog("close"); - }; + }, "primary"); + addButton(translations.doiimport_button_cancel, closeDialog, "secondary"); break; case 'note': - dialogButtons[translations.doiimport_button_back] = function () { - $(this).dialog("close"); + addButton(translations.doiimport_button_back, function () { + closeDialog(); document.getElementById("abort").click(); - }; - dialogButtons[translations.doiimport_button_tryAgain] = function () { + }, "secondary"); + addButton(translations.doiimport_button_tryAgain, function () { document.getElementById("IdentifierDoi").style.backgroundColor = null; document.getElementById("IdentifierDoi").value = ""; - $(this).dialog("close"); + closeDialog(); setTimeout(function () { document.getElementById("IdentifierDoi").focus(); }, 100); - }; + }, "primary"); break; case 'redirect': - //Falls DOI nicht bei Crossref gefunden wurde -> zurück zur Auswahl des Dokumenttyps (um manuelle Eingabe im DOI-Import zu verhindern) - dialogButtons[translations.doiimport_button_back] = function () { - $(this).dialog("close"); + addButton(translations.doiimport_button_back, function () { + closeDialog(); document.getElementById("abort").click(); - }; - dialogButtons[translations.doiimport_button_tryAgain] = function () { + }, "secondary"); + addButton(translations.doiimport_button_tryAgain, function () { document.getElementById("IdentifierDoi").style.backgroundColor = null; document.getElementById("IdentifierDoi").value = ""; - $(this).dialog("close"); + closeDialog(); setTimeout(function () { document.getElementById("IdentifierDoi").focus(); }, 100); - }; + }, "primary"); break; default: - // Weitere Fälle können hier hinzugefügt werden - dialogButtons['OK'] = function () { - $(this).dialog("close"); - }; + addButton('OK', closeDialog, "primary"); break; } - // Dialog initialisieren - $(function () { - $(dialogContent).dialog({ - title: title, - modal: true, - buttons: dialogButtons - }); + dlg.appendChild(header); + dlg.appendChild(body); + dlg.appendChild(footer); + + dlg.addEventListener("cancel", function (ev) { + ev.preventDefault(); + closeDialog(); + }); + dlg.addEventListener("close", function () { + dlg.remove(); }); + + document.body.appendChild(dlg); + dlg.showModal(); } From ec94d41b7ff38f6c338207981dd0e6786b786182 Mon Sep 17 00:00:00 2001 From: Boris Date: Sun, 1 Feb 2026 16:06:43 +0100 Subject: [PATCH 2/2] Add styles for dialog component in getDoi.js --- .../opus4/css/components/doi-import.css | 68 ++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/public/layouts/opus4/css/components/doi-import.css b/public/layouts/opus4/css/components/doi-import.css index 0c88188c0..8215e9f8e 100644 --- a/public/layouts/opus4/css/components/doi-import.css +++ b/public/layouts/opus4/css/components/doi-import.css @@ -8,4 +8,70 @@ display: inline-block; font-size: 15px; border-radius: 4px; -} \ No newline at end of file +} + +/* Dialog */ +.opus-dialog { + border: 2px solid #0b3a70; + border-radius: 8px; + padding: 0; + max-width: 520px; + width: 90vw; + box-shadow: 0 24px 48px rgba(0,0,0,0.25); + font: inherit; +} + +.opus-dialog::backdrop { + background: rgba(0,0,0,0.35); +} + +.opus-dialog__title { + position: relative; + padding: 16px 48px 16px 16px; + font-weight: 600; + border-bottom: 1px solid #e5e5e5; +} + +.opus-dialog__body { + padding: 20px 16px 12px; + line-height: 1.4; +} + +.opus-dialog__footer { + display: flex; + flex-direction: column; + gap: 12px; + padding: 18px 16px 20px; + border-top: 1px solid #e5e5e5; +} + +.opus-dialog__btn { + padding: 10px 14px; + border: 1px solid #0b3a70; + border-radius: 4px; + background: #e3f0ff; + cursor: pointer; + color: #0b3a70; +} + +.opus-dialog__btn.primary { + background: #4da3ff; + border-color: #0b3a70; + color: #fff; +} + +.opus-dialog__btn.secondary { + background: #e3f0ff; +} + +.opus-dialog__close { + position: absolute; + right: 12px; + top: 12px; + border: none; + background: transparent; + font-size: 20px; + line-height: 1; + cursor: pointer; + color: #0b3a70; +}