ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement dynamic loading for display set modals and fullscreen viewer

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Ross
2026-04-28 14:48:20 +01:00
parent e894e02445
commit 68dfcdfa7e
2 changed files with 103 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/case_display_block.html
-18
View File
@@ -823,7 +823,6 @@
{% include 'question_notes.html' %}
</div>
{% include 'atlas/partials/_displayset_modals.html' %}
<p><b>Checked by:</b> {% for verified in case.verified.all %} <a
href="{% url 'atlas:verified_detail' pk=verified.pk %}">{{verified}}</a>, {% endfor %}</p>
@@ -1199,28 +1198,11 @@
}
}
document.querySelectorAll(".view-displayset-modal").forEach(button => {
button.addEventListener("click", function () {
const url = this.getAttribute("data-url");
const dsId = this.getAttribute('data-ds-id');
loadDisplaysetModal(url, dsId);
});
});
// remove displayset param when modal closed
document.getElementById('displaysetModal').addEventListener('hidden.bs.modal', function () {
try { removeUrlParam('displayset'); removeUrlParam('displayset_full'); } catch (e) {}
});
// Fullscreen button handler: call loader function
document.querySelectorAll('.displayset-fullscreen-btn').forEach(btn => {
btn.addEventListener('click', function () {
const url = btn.dataset.url;
const dsId = btn.dataset.dsId || null;
loadDisplaysetFullscreen(url, dsId);
});
});
// remove fullscreen param when fullscreen modal closed
document.getElementById('displaysetFullscreenModal').addEventListener('hidden.bs.modal', function () {
try { removeUrlParam('displayset_full'); } catch (e) {}
atlas/templates/atlas/partials/_case_displaysets.html
+103
View File
@@ -89,8 +89,111 @@
</ul>
</div>
{% include 'atlas/partials/_displayset_modals.html' %}
<script>
(function () {
if (!window.__displaysetPartialInitDone) {
window.__displaysetPartialInitDone = true;
if (typeof window.loadDisplaysetModal !== 'function') {
window.loadDisplaysetModal = async function (url, dsId) {
if (!url && dsId) url = '/atlas/' + dsId + '/display_sets/modal';
if (!url) return;
var modalEl = document.getElementById('displaysetModal');
var modalBody = document.getElementById('displaysetModalBody');
if (!modalEl || !modalBody) return;
modalBody.innerHTML = '<p>Loading...</p>';
try {
var resp = await fetch(url, { credentials: 'same-origin' });
var html = await resp.text();
modalBody.innerHTML = html;
var fsBtn = modalEl.querySelector('.displayset-fullscreen-btn');
if (fsBtn) {
fsBtn.dataset.url = url;
if (dsId) fsBtn.dataset.dsId = dsId;
}
bootstrap.Modal.getOrCreateInstance(modalEl).show();
} catch (error) {
console.error('Error loading display set details:', error);
modalBody.innerHTML = '<p>Failed to load display set.</p>';
}
};
}
if (typeof window.loadDisplaysetFullscreen !== 'function') {
window.loadDisplaysetFullscreen = async function (url, dsId) {
if (!url && dsId) url = '/atlas/' + dsId + '/display_sets/modal';
if (!url) return;
var leftEl = document.getElementById('displaysetFullscreenLeft');
var rightEl = document.getElementById('displaysetFullscreenRight');
var fullModalEl = document.getElementById('displaysetFullscreenModal');
if (!leftEl || !rightEl || !fullModalEl) return;
leftEl.innerHTML = '<p style="color:#fff; padding:1rem;">Loading viewer...</p>';
rightEl.innerHTML = '<p>Loading details...</p>';
try {
var resp = await fetch(url, { credentials: 'same-origin' });
var html = await resp.text();
var tmp = document.createElement('div');
tmp.innerHTML = html;
var viewer = tmp.querySelector('.dicom-viewer-root');
if (viewer) {
leftEl.innerHTML = '';
leftEl.appendChild(viewer);
try {
viewer.style.height = '100%';
viewer.style.minHeight = '100%';
viewer.style.width = '100%';
viewer.style.display = 'block';
viewer.style.flex = '1 1 auto';
} catch (e) {}
} else {
leftEl.innerHTML = '<p style="color:#fff; padding:1rem;">No viewer available</p>';
}
var viewerInTmp = tmp.querySelector('.dicom-viewer-root');
if (viewerInTmp) viewerInTmp.remove();
rightEl.innerHTML = tmp.innerHTML;
bootstrap.Modal.getOrCreateInstance(fullModalEl).show();
} catch (error) {
console.error('Error loading fullscreen display set:', error);
leftEl.innerHTML = '<p style="color:#fff; padding:1rem;">Failed to load viewer</p>';
rightEl.innerHTML = '<p>Failed to load details.</p>';
}
};
}
document.addEventListener('click', function (e) {
var modalBtn = e.target.closest('.view-displayset-modal');
if (modalBtn) {
e.preventDefault();
var modalUrl = modalBtn.getAttribute('data-url');
var modalDsId = modalBtn.getAttribute('data-ds-id');
window.loadDisplaysetModal(modalUrl, modalDsId);
return;
}
var fsBtn = e.target.closest('.displayset-fullscreen-btn');
if (fsBtn) {
e.preventDefault();
var fsUrl = fsBtn.dataset.url;
var fsDsId = fsBtn.dataset.dsId || null;
if (typeof window.loadDisplaysetFullscreen === 'function') {
window.loadDisplaysetFullscreen(fsUrl, fsDsId);
}
}
});
}
/**
* For each "View Display Set" button:
* - If the page has an in-page viewer (importAnnotations_main_viewer available),