Refactor code structure for improved readability and maintainability
This commit is contained in:
Ross
@@ -102,52 +102,52 @@
|
||||
{% endif %}
|
||||
|
||||
{% if collection.show_ohif_viewer or collection.show_ohif_viewer_link or collection.show_built_in_viewer %}
|
||||
<div id="viewer-panel" class="mb-3">
|
||||
{% if collection.show_built_in_viewer %}
|
||||
<div class="d-flex align-items-center gap-2 py-1 px-2 mb-1 rounded bg-body-secondary">
|
||||
<span class="text-muted fw-semibold small me-auto">Viewer</span>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="viewer-sidebar-btn" title="Move viewer to sidebar">
|
||||
<i class="bi bi-layout-sidebar-reverse"></i> <span class="d-none d-sm-inline">Sidebar</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="viewer-popout-btn" title="Open viewer in a separate window">
|
||||
<i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">Pop out</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="viewer-moveable-home">
|
||||
<div id="viewer-moveable">
|
||||
<div id="viewer-container" class="viewer-resizable-container">
|
||||
<div id="main_viewer" class="dicom-viewer-root viewer-frame-standard"
|
||||
data-auto-cache-stack="false"
|
||||
data-named-stacks='{{casedetail.get_case_named_stacks}}'
|
||||
></div>
|
||||
<div id="viewer-panel" class="mb-3">
|
||||
{% if collection.show_built_in_viewer %}
|
||||
<div class="d-flex align-items-center gap-2 py-1 px-2 mb-1 rounded bg-body-secondary">
|
||||
<span class="text-muted fw-semibold small me-auto">Viewer</span>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="viewer-sidebar-btn" title="Move viewer to sidebar">
|
||||
<i class="bi bi-layout-sidebar-reverse"></i> <span class="d-none d-sm-inline">Sidebar</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="viewer-popout-btn" title="Open viewer in a separate window">
|
||||
<i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">Pop out</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="viewer-resize-handle" class="viewer-resize-handle" title="Drag to resize viewer">
|
||||
<div class="viewer-resize-grip-inner"></div>
|
||||
<div id="viewer-moveable-home">
|
||||
<div id="viewer-moveable">
|
||||
<div id="viewer-container" class="viewer-resizable-container">
|
||||
<div id="main_viewer" class="dicom-viewer-root viewer-frame-standard"
|
||||
data-auto-cache-stack="false"
|
||||
data-named-stacks='{{casedetail.get_case_named_stacks}}'
|
||||
></div>
|
||||
</div>
|
||||
<div id="viewer-resize-handle" class="viewer-resize-handle" title="Drag to resize viewer">
|
||||
<div class="viewer-resize-grip-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if collection.show_ohif_viewer %}
|
||||
<div{% if collection.show_built_in_viewer %} class="mt-3"{% endif %}>
|
||||
{% if question_completed %}
|
||||
<iframe id="viewer" class="viewer-frame-ohif" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json_review' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_review_legacy' collection.pk case.pk %}{% endif %}"></iframe>
|
||||
{% else %}
|
||||
<iframe id="viewer" class="viewer-frame-ohif" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_legacy' collection.pk case.pk %}{% endif %}"></iframe>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if collection.show_ohif_viewer_link %}
|
||||
<div class="mt-2">
|
||||
{% if question_completed %}
|
||||
<a target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json_review' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_review_legacy' collection.pk case.pk %}{% endif %}" title="Click to open the case in the advanced viewer. This will open in a new tab/window."><button class="viewer"><i class="bi bi-collection"></i> Launch advanced viewer.</button></a>
|
||||
{% else %}
|
||||
<a target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_legacy' collection.pk case.pk %}{% endif %}" title="Click to open the case in the advanced viewer. This will open in a new tab/window."><button class="viewer"><i class="bi bi-collection"></i> Launch advanced viewer.</button></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if collection.show_ohif_viewer %}
|
||||
<div{% if collection.show_built_in_viewer %} class="mt-3"{% endif %}>
|
||||
{% if question_completed %}
|
||||
<iframe id="viewer" class="viewer-frame-ohif" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json_review' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_review_legacy' collection.pk case.pk %}{% endif %}"></iframe>
|
||||
{% else %}
|
||||
<iframe id="viewer" class="viewer-frame-ohif" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_legacy' collection.pk case.pk %}{% endif %}"></iframe>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if collection.show_ohif_viewer_link %}
|
||||
<div class="mt-2">
|
||||
{% if question_completed %}
|
||||
<a target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json_review' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_review_legacy' collection.pk case.pk %}{% endif %}" title="Click to open the case in the advanced viewer. This will open in a new tab/window."><button class="viewer"><i class="bi bi-collection"></i> Launch advanced viewer.</button></a>
|
||||
{% else %}
|
||||
<a target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_legacy' collection.pk case.pk %}{% endif %}" title="Click to open the case in the advanced viewer. This will open in a new tab/window."><button class="viewer"><i class="bi bi-collection"></i> Launch advanced viewer.</button></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -988,263 +988,263 @@
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
function initViewerControls() {
|
||||
var COLL_PK = '{{ collection.pk }}';
|
||||
var HEIGHT_KEY = 'rad_viewer_h_' + COLL_PK;
|
||||
var MODE_KEY = 'rad_viewer_mode_' + COLL_PK;
|
||||
var POPOUT_STATE_KEY = 'rad_local_viewer_popout_state';
|
||||
var SIDEBAR_W_KEY = 'rad_viewer_w_' + COLL_PK;
|
||||
var COLL_PK = '{{ collection.pk }}';
|
||||
var HEIGHT_KEY = 'rad_viewer_h_' + COLL_PK;
|
||||
var MODE_KEY = 'rad_viewer_mode_' + COLL_PK;
|
||||
var POPOUT_STATE_KEY = 'rad_local_viewer_popout_state';
|
||||
var SIDEBAR_W_KEY = 'rad_viewer_w_' + COLL_PK;
|
||||
|
||||
var panel = document.getElementById('viewer-panel');
|
||||
var moveableHome = document.getElementById('viewer-moveable-home');
|
||||
var moveable = document.getElementById('viewer-moveable');
|
||||
var container = document.getElementById('viewer-container');
|
||||
var resizeHandle = document.getElementById('viewer-resize-handle');
|
||||
var sidebarEl = document.getElementById('viewerSidebar');
|
||||
var sidebarBody = document.getElementById('viewerSidebarBody');
|
||||
var sidebarBtn = document.getElementById('viewer-sidebar-btn');
|
||||
var sidebarCloseBtn = document.getElementById('viewer-sidebar-close-btn');
|
||||
var sidebarResizeHandle = document.getElementById('viewer-sidebar-resize-handle');
|
||||
var popoutBtn = document.getElementById('viewer-popout-btn');
|
||||
var mainViewerEl = document.getElementById('main_viewer');
|
||||
var rootStyle = document.documentElement.style;
|
||||
var panel = document.getElementById('viewer-panel');
|
||||
var moveableHome = document.getElementById('viewer-moveable-home');
|
||||
var moveable = document.getElementById('viewer-moveable');
|
||||
var container = document.getElementById('viewer-container');
|
||||
var resizeHandle = document.getElementById('viewer-resize-handle');
|
||||
var sidebarEl = document.getElementById('viewerSidebar');
|
||||
var sidebarBody = document.getElementById('viewerSidebarBody');
|
||||
var sidebarBtn = document.getElementById('viewer-sidebar-btn');
|
||||
var sidebarCloseBtn = document.getElementById('viewer-sidebar-close-btn');
|
||||
var sidebarResizeHandle = document.getElementById('viewer-sidebar-resize-handle');
|
||||
var popoutBtn = document.getElementById('viewer-popout-btn');
|
||||
var mainViewerEl = document.getElementById('main_viewer');
|
||||
var rootStyle = document.documentElement.style;
|
||||
|
||||
if (!panel || !moveableHome || !moveable || !container || !mainViewerEl) {
|
||||
return;
|
||||
}
|
||||
if (!panel || !moveableHome || !moveable || !container || !mainViewerEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (panel.dataset.viewerControlsBound === '1') {
|
||||
return;
|
||||
}
|
||||
panel.dataset.viewerControlsBound = '1';
|
||||
if (panel.dataset.viewerControlsBound === '1') {
|
||||
return;
|
||||
}
|
||||
panel.dataset.viewerControlsBound = '1';
|
||||
|
||||
// Force a take-page-only remount sequence to test thumbnail stabilization.
|
||||
if (mainViewerEl && mainViewerEl.dataset.takeForcedRemountScheduled !== '1') {
|
||||
mainViewerEl.dataset.takeForcedRemountScheduled = '1';
|
||||
var forceTakeRemount = function (label) {
|
||||
if (typeof window.mountDicomViewers === 'function') {
|
||||
console.debug('[take-viewer] forcing dv3d remount:', label);
|
||||
try {
|
||||
window.mountDicomViewers();
|
||||
} catch (e) {
|
||||
console.warn('[take-viewer] forced dv3d remount failed:', label, e);
|
||||
if (mainViewerEl && mainViewerEl.dataset.takeForcedRemountScheduled !== '1') {
|
||||
mainViewerEl.dataset.takeForcedRemountScheduled = '1';
|
||||
var forceTakeRemount = function (label) {
|
||||
if (typeof window.mountDicomViewers === 'function') {
|
||||
console.debug('[take-viewer] forcing dv3d remount:', label);
|
||||
try {
|
||||
window.mountDicomViewers();
|
||||
} catch (e) {
|
||||
console.warn('[take-viewer] forced dv3d remount failed:', label, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// First remount shortly after controls initialize.
|
||||
setTimeout(function () { forceTakeRemount('early'); }, 250);
|
||||
setTimeout(function () { forceTakeRemount('early'); }, 250);
|
||||
// Second remount after initial image pipeline settles.
|
||||
setTimeout(function () { forceTakeRemount('late'); }, 1600);
|
||||
}
|
||||
setTimeout(function () { forceTakeRemount('late'); }, 1600);
|
||||
}
|
||||
|
||||
var savedH = localStorage.getItem(HEIGHT_KEY);
|
||||
if (savedH && !isNaN(parseInt(savedH, 10))) {
|
||||
container.style.height = parseInt(savedH, 10) + 'px';
|
||||
}
|
||||
var savedH = localStorage.getItem(HEIGHT_KEY);
|
||||
if (savedH && !isNaN(parseInt(savedH, 10))) {
|
||||
container.style.height = parseInt(savedH, 10) + 'px';
|
||||
}
|
||||
|
||||
function applySidebarWidth(px) {
|
||||
if (!sidebarEl || !px || isNaN(px)) return;
|
||||
var clamped = Math.max(360, Math.min(window.innerWidth * 0.95, Math.round(px)));
|
||||
sidebarEl.style.width = clamped + 'px';
|
||||
rootStyle.setProperty('--viewer-sidebar-width', clamped + 'px');
|
||||
}
|
||||
function applySidebarWidth(px) {
|
||||
if (!sidebarEl || !px || isNaN(px)) return;
|
||||
var clamped = Math.max(360, Math.min(window.innerWidth * 0.95, Math.round(px)));
|
||||
sidebarEl.style.width = clamped + 'px';
|
||||
rootStyle.setProperty('--viewer-sidebar-width', clamped + 'px');
|
||||
}
|
||||
|
||||
var savedW = localStorage.getItem(SIDEBAR_W_KEY);
|
||||
if (savedW && !isNaN(parseInt(savedW, 10))) {
|
||||
applySidebarWidth(parseInt(savedW, 10));
|
||||
} else if (sidebarEl) {
|
||||
rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
|
||||
}
|
||||
var savedW = localStorage.getItem(SIDEBAR_W_KEY);
|
||||
if (savedW && !isNaN(parseInt(savedW, 10))) {
|
||||
applySidebarWidth(parseInt(savedW, 10));
|
||||
} else if (sidebarEl) {
|
||||
rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
|
||||
}
|
||||
|
||||
if (sidebarEl && 'ResizeObserver' in window) {
|
||||
var sidebarResizeObserver = new ResizeObserver(function () {
|
||||
var width = Math.round(sidebarEl.getBoundingClientRect().width);
|
||||
rootStyle.setProperty('--viewer-sidebar-width', width + 'px');
|
||||
localStorage.setItem(SIDEBAR_W_KEY, width);
|
||||
});
|
||||
sidebarResizeObserver.observe(sidebarEl);
|
||||
}
|
||||
if (sidebarEl && 'ResizeObserver' in window) {
|
||||
var sidebarResizeObserver = new ResizeObserver(function () {
|
||||
var width = Math.round(sidebarEl.getBoundingClientRect().width);
|
||||
rootStyle.setProperty('--viewer-sidebar-width', width + 'px');
|
||||
localStorage.setItem(SIDEBAR_W_KEY, width);
|
||||
});
|
||||
sidebarResizeObserver.observe(sidebarEl);
|
||||
}
|
||||
|
||||
if (sidebarResizeHandle && sidebarEl) {
|
||||
var sidebarResizing = false;
|
||||
var sidebarStartX = 0;
|
||||
var sidebarStartWidth = 0;
|
||||
if (sidebarResizeHandle && sidebarEl) {
|
||||
var sidebarResizing = false;
|
||||
var sidebarStartX = 0;
|
||||
var sidebarStartWidth = 0;
|
||||
|
||||
var onSidebarPointerMove = function (event) {
|
||||
if (!sidebarResizing) return;
|
||||
var delta = sidebarStartX - event.clientX;
|
||||
var nextWidth = sidebarStartWidth + delta;
|
||||
applySidebarWidth(nextWidth);
|
||||
var onSidebarPointerMove = function (event) {
|
||||
if (!sidebarResizing) return;
|
||||
var delta = sidebarStartX - event.clientX;
|
||||
var nextWidth = sidebarStartWidth + delta;
|
||||
applySidebarWidth(nextWidth);
|
||||
};
|
||||
|
||||
var stopSidebarResize = function () {
|
||||
if (!sidebarResizing) return;
|
||||
sidebarResizing = false;
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
var width = Math.round(sidebarEl.getBoundingClientRect().width);
|
||||
localStorage.setItem(SIDEBAR_W_KEY, width);
|
||||
};
|
||||
|
||||
sidebarResizeHandle.addEventListener('pointerdown', function (event) {
|
||||
event.preventDefault();
|
||||
sidebarResizing = true;
|
||||
sidebarStartX = event.clientX;
|
||||
sidebarStartWidth = sidebarEl.getBoundingClientRect().width;
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
});
|
||||
|
||||
window.addEventListener('pointermove', onSidebarPointerMove);
|
||||
window.addEventListener('pointerup', stopSidebarResize);
|
||||
window.addEventListener('pointercancel', stopSidebarResize);
|
||||
}
|
||||
|
||||
var persistHeight = function () {
|
||||
localStorage.setItem(HEIGHT_KEY, Math.round(container.getBoundingClientRect().height));
|
||||
};
|
||||
|
||||
var stopSidebarResize = function () {
|
||||
if (!sidebarResizing) return;
|
||||
sidebarResizing = false;
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
var width = Math.round(sidebarEl.getBoundingClientRect().width);
|
||||
localStorage.setItem(SIDEBAR_W_KEY, width);
|
||||
};
|
||||
|
||||
sidebarResizeHandle.addEventListener('pointerdown', function (event) {
|
||||
event.preventDefault();
|
||||
sidebarResizing = true;
|
||||
sidebarStartX = event.clientX;
|
||||
sidebarStartWidth = sidebarEl.getBoundingClientRect().width;
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
});
|
||||
|
||||
window.addEventListener('pointermove', onSidebarPointerMove);
|
||||
window.addEventListener('pointerup', stopSidebarResize);
|
||||
window.addEventListener('pointercancel', stopSidebarResize);
|
||||
}
|
||||
|
||||
var persistHeight = function () {
|
||||
localStorage.setItem(HEIGHT_KEY, Math.round(container.getBoundingClientRect().height));
|
||||
};
|
||||
|
||||
if ('ResizeObserver' in window) {
|
||||
var ro = new ResizeObserver(function () {
|
||||
persistHeight();
|
||||
});
|
||||
ro.observe(container);
|
||||
} else {
|
||||
window.addEventListener('mouseup', persistHeight);
|
||||
}
|
||||
|
||||
if (resizeHandle) {
|
||||
resizeHandle.addEventListener('pointerdown', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
function openViewerSidebar() {
|
||||
if (!sidebarEl || !sidebarBody) return;
|
||||
sidebarBody.appendChild(moveable);
|
||||
sidebarEl.classList.add('open');
|
||||
document.body.classList.add('viewer-sidebar-open');
|
||||
rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
|
||||
if (sidebarBtn) {
|
||||
sidebarBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Close sidebar</span>';
|
||||
sidebarBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
|
||||
if ('ResizeObserver' in window) {
|
||||
var ro = new ResizeObserver(function () {
|
||||
persistHeight();
|
||||
});
|
||||
ro.observe(container);
|
||||
} else {
|
||||
window.addEventListener('mouseup', persistHeight);
|
||||
}
|
||||
localStorage.setItem(MODE_KEY, 'sidebar');
|
||||
}
|
||||
|
||||
function closeViewerSidebar() {
|
||||
if (!sidebarEl) return;
|
||||
moveableHome.appendChild(moveable);
|
||||
sidebarEl.classList.remove('open');
|
||||
document.body.classList.remove('viewer-sidebar-open');
|
||||
if (sidebarBtn) {
|
||||
sidebarBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i> <span class="d-none d-sm-inline">Sidebar</span>';
|
||||
sidebarBtn.classList.replace('btn-secondary', 'btn-outline-secondary');
|
||||
if (resizeHandle) {
|
||||
resizeHandle.addEventListener('pointerdown', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
localStorage.removeItem(MODE_KEY);
|
||||
}
|
||||
|
||||
if (sidebarBtn) {
|
||||
sidebarBtn.addEventListener('click', function () {
|
||||
function openViewerSidebar() {
|
||||
if (!sidebarEl || !sidebarBody) return;
|
||||
sidebarBody.appendChild(moveable);
|
||||
sidebarEl.classList.add('open');
|
||||
document.body.classList.add('viewer-sidebar-open');
|
||||
rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
|
||||
if (sidebarBtn) {
|
||||
sidebarBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Close sidebar</span>';
|
||||
sidebarBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
|
||||
}
|
||||
localStorage.setItem(MODE_KEY, 'sidebar');
|
||||
}
|
||||
|
||||
function closeViewerSidebar() {
|
||||
if (!sidebarEl) return;
|
||||
moveableHome.appendChild(moveable);
|
||||
sidebarEl.classList.remove('open');
|
||||
document.body.classList.remove('viewer-sidebar-open');
|
||||
if (sidebarBtn) {
|
||||
sidebarBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i> <span class="d-none d-sm-inline">Sidebar</span>';
|
||||
sidebarBtn.classList.replace('btn-secondary', 'btn-outline-secondary');
|
||||
}
|
||||
localStorage.removeItem(MODE_KEY);
|
||||
}
|
||||
|
||||
if (sidebarBtn) {
|
||||
sidebarBtn.addEventListener('click', function () {
|
||||
if (sidebarEl && sidebarEl.classList.contains('open')) {
|
||||
closeViewerSidebar();
|
||||
} else {
|
||||
openViewerSidebar();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (sidebarCloseBtn) {
|
||||
sidebarCloseBtn.addEventListener('click', closeViewerSidebar);
|
||||
}
|
||||
|
||||
var bc = null;
|
||||
try { bc = new BroadcastChannel('viva_load'); } catch (e) {}
|
||||
|
||||
function getViewerPayload() {
|
||||
var namedStacks = mainViewerEl.getAttribute('data-named-stacks');
|
||||
var images = mainViewerEl.getAttribute('data-images');
|
||||
var viewerState = window.exportViewerState_main_viewer ? window.exportViewerState_main_viewer() : '';
|
||||
var annotations = window.exportAnnotations_main_viewer ? window.exportAnnotations_main_viewer() : '';
|
||||
|
||||
return {
|
||||
type: 'open',
|
||||
namedStacks: namedStacks || '',
|
||||
images: images || '',
|
||||
viewerstate: viewerState || '',
|
||||
annotations: annotations || ''
|
||||
};
|
||||
}
|
||||
|
||||
function broadcastViewerState(payload) {
|
||||
if (!payload) return;
|
||||
localStorage.setItem(POPOUT_STATE_KEY, JSON.stringify(payload));
|
||||
if (bc) {
|
||||
try { bc.postMessage(payload); } catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
function showPopoutPlaceholder() {
|
||||
var existing = panel.querySelector('.viewer-popout-placeholder');
|
||||
if (existing) return;
|
||||
var placeholder = document.createElement('div');
|
||||
placeholder.className = 'alert alert-secondary small py-2 mb-0 mt-1 d-flex align-items-center gap-2 viewer-popout-placeholder';
|
||||
placeholder.innerHTML = '<i class="bi bi-box-arrow-up-right"></i> Viewer is open in a separate window. <button type="button" class="btn btn-sm btn-outline-secondary ms-auto" id="viewer-popout-bring-back">Bring back</button>';
|
||||
panel.insertBefore(placeholder, moveableHome);
|
||||
moveableHome.style.display = 'none';
|
||||
document.getElementById('viewer-popout-bring-back').addEventListener('click', closePopout);
|
||||
}
|
||||
|
||||
function hidePopoutPlaceholder() {
|
||||
var placeholder = panel.querySelector('.viewer-popout-placeholder');
|
||||
if (placeholder) placeholder.remove();
|
||||
moveableHome.style.display = '';
|
||||
}
|
||||
|
||||
function openPopout() {
|
||||
if (sidebarEl && sidebarEl.classList.contains('open')) {
|
||||
closeViewerSidebar();
|
||||
} else {
|
||||
openViewerSidebar();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (sidebarCloseBtn) {
|
||||
sidebarCloseBtn.addEventListener('click', closeViewerSidebar);
|
||||
}
|
||||
|
||||
var bc = null;
|
||||
try { bc = new BroadcastChannel('viva_load'); } catch (e) {}
|
||||
|
||||
function getViewerPayload() {
|
||||
var namedStacks = mainViewerEl.getAttribute('data-named-stacks');
|
||||
var images = mainViewerEl.getAttribute('data-images');
|
||||
var viewerState = window.exportViewerState_main_viewer ? window.exportViewerState_main_viewer() : '';
|
||||
var annotations = window.exportAnnotations_main_viewer ? window.exportAnnotations_main_viewer() : '';
|
||||
|
||||
return {
|
||||
type: 'open',
|
||||
namedStacks: namedStacks || '',
|
||||
images: images || '',
|
||||
viewerstate: viewerState || '',
|
||||
annotations: annotations || ''
|
||||
};
|
||||
}
|
||||
|
||||
function broadcastViewerState(payload) {
|
||||
if (!payload) return;
|
||||
localStorage.setItem(POPOUT_STATE_KEY, JSON.stringify(payload));
|
||||
if (bc) {
|
||||
try { bc.postMessage(payload); } catch (e) {}
|
||||
var payload = getViewerPayload();
|
||||
broadcastViewerState(payload);
|
||||
window.open('{% url "atlas:collection_viewer_local" %}', 'collectionTakeViewer', 'width=1200,height=900,noopener');
|
||||
setTimeout(function () { broadcastViewerState(payload); }, 700);
|
||||
localStorage.setItem(MODE_KEY, 'popout');
|
||||
showPopoutPlaceholder();
|
||||
if (popoutBtn) {
|
||||
popoutBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Bring back</span>';
|
||||
popoutBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showPopoutPlaceholder() {
|
||||
var existing = panel.querySelector('.viewer-popout-placeholder');
|
||||
if (existing) return;
|
||||
var placeholder = document.createElement('div');
|
||||
placeholder.className = 'alert alert-secondary small py-2 mb-0 mt-1 d-flex align-items-center gap-2 viewer-popout-placeholder';
|
||||
placeholder.innerHTML = '<i class="bi bi-box-arrow-up-right"></i> Viewer is open in a separate window. <button type="button" class="btn btn-sm btn-outline-secondary ms-auto" id="viewer-popout-bring-back">Bring back</button>';
|
||||
panel.insertBefore(placeholder, moveableHome);
|
||||
moveableHome.style.display = 'none';
|
||||
document.getElementById('viewer-popout-bring-back').addEventListener('click', closePopout);
|
||||
}
|
||||
|
||||
function hidePopoutPlaceholder() {
|
||||
var placeholder = panel.querySelector('.viewer-popout-placeholder');
|
||||
if (placeholder) placeholder.remove();
|
||||
moveableHome.style.display = '';
|
||||
}
|
||||
|
||||
function openPopout() {
|
||||
if (sidebarEl && sidebarEl.classList.contains('open')) {
|
||||
closeViewerSidebar();
|
||||
function closePopout() {
|
||||
hidePopoutPlaceholder();
|
||||
localStorage.removeItem(MODE_KEY);
|
||||
if (popoutBtn) {
|
||||
popoutBtn.innerHTML = '<i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">Pop out</span>';
|
||||
popoutBtn.classList.replace('btn-secondary', 'btn-outline-secondary');
|
||||
}
|
||||
}
|
||||
var payload = getViewerPayload();
|
||||
broadcastViewerState(payload);
|
||||
window.open('{% url "atlas:collection_viewer_local" %}', 'collectionTakeViewer', 'width=1200,height=900,noopener');
|
||||
setTimeout(function () { broadcastViewerState(payload); }, 700);
|
||||
localStorage.setItem(MODE_KEY, 'popout');
|
||||
showPopoutPlaceholder();
|
||||
|
||||
if (popoutBtn) {
|
||||
popoutBtn.addEventListener('click', function () {
|
||||
if (localStorage.getItem(MODE_KEY) === 'popout') {
|
||||
closePopout();
|
||||
} else {
|
||||
openPopout();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var savedMode = localStorage.getItem(MODE_KEY);
|
||||
if (savedMode === 'sidebar') {
|
||||
openViewerSidebar();
|
||||
} else if (savedMode === 'popout' && popoutBtn) {
|
||||
showPopoutPlaceholder();
|
||||
setTimeout(function () { broadcastViewerState(getViewerPayload()); }, 300);
|
||||
popoutBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Bring back</span>';
|
||||
popoutBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
function closePopout() {
|
||||
hidePopoutPlaceholder();
|
||||
localStorage.removeItem(MODE_KEY);
|
||||
if (popoutBtn) {
|
||||
popoutBtn.innerHTML = '<i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">Pop out</span>';
|
||||
popoutBtn.classList.replace('btn-secondary', 'btn-outline-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
if (popoutBtn) {
|
||||
popoutBtn.addEventListener('click', function () {
|
||||
if (localStorage.getItem(MODE_KEY) === 'popout') {
|
||||
closePopout();
|
||||
} else {
|
||||
openPopout();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var savedMode = localStorage.getItem(MODE_KEY);
|
||||
if (savedMode === 'sidebar') {
|
||||
openViewerSidebar();
|
||||
} else if (savedMode === 'popout' && popoutBtn) {
|
||||
showPopoutPlaceholder();
|
||||
setTimeout(function () { broadcastViewerState(getViewerPayload()); }, 300);
|
||||
popoutBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Bring back</span>';
|
||||
popoutBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
+104
-104
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user