Enhance markup rendering to support interactive tokens with styled spans and data attributes for client-side upgrades
This commit is contained in:
Ross
@@ -283,4 +283,153 @@
|
||||
// Simplified detection: rely on explicit dataset attributes set by the widget
|
||||
// When a textarea includes `data-current-case` and optionally `data-current-case-title`, that will be used as the default filter.
|
||||
|
||||
// --- Render inserted markup tokens as styled items with popup/modal actions ---
|
||||
function injectMarkupStyles(){
|
||||
if(document.getElementById('markup-inserter-styles')) return;
|
||||
var s = document.createElement('style'); s.id = 'markup-inserter-styles';
|
||||
s.textContent = '\n.markup-token{cursor:pointer;display:inline-block;margin:0 .25rem .25rem 0;padding:.25rem .5rem;border-radius:.375rem;font-size:0.85em;}\n.markup-popup{position:fixed;z-index:1060;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 6px 18px rgba(0,0,0,.12);padding:.5rem;border-radius:.25rem;}\n.markup-modal-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.45);z-index:1080;display:flex;align-items:flex-start;justify-content:center;padding-top:4vh;}\n.markup-modal{background:#fff;border-radius:.375rem;max-width:95%;max-height:85vh;overflow:auto;}\n';
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
function getDetailUrl(type, pk){
|
||||
if(!type || !pk) return null;
|
||||
if(type === 'seriesfinding') return window.location.origin + '/atlas/series_finding/' + pk + '/details/';
|
||||
if(type === 'finding') return window.location.origin + '/atlas/finding/' + pk;
|
||||
if(type === 'displayset') return window.location.origin + '/' + 'atlas/' + pk + '/display_sets/detail';
|
||||
if(type === 'case') return window.location.origin + '/atlas/case/' + pk + '/';
|
||||
return null;
|
||||
}
|
||||
|
||||
// Reusable modal element
|
||||
var __markup_modal = null;
|
||||
function ensureModal(){
|
||||
if(__markup_modal) return __markup_modal;
|
||||
var backdrop = document.createElement('div'); backdrop.className = 'markup-modal-backdrop'; backdrop.style.display='none';
|
||||
var modal = document.createElement('div'); modal.className = 'markup-modal card'; modal.style.marginTop='1rem'; modal.style.maxHeight='80vh'; modal.style.overflow='auto';
|
||||
var header = document.createElement('div'); header.className='card-header d-flex justify-content-between align-items-center';
|
||||
var h = document.createElement('strong'); h.textContent = 'Detail';
|
||||
var closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn-close'; closeBtn.addEventListener('click', function(){ backdrop.style.display='none'; modal.querySelector('.card-body') && (modal.querySelector('.card-body').innerHTML=''); });
|
||||
header.appendChild(h); header.appendChild(closeBtn);
|
||||
var body = document.createElement('div'); body.className='card-body'; body.style.maxHeight='70vh'; body.style.overflow='auto';
|
||||
modal.appendChild(header); modal.appendChild(body); backdrop.appendChild(modal); document.body.appendChild(backdrop);
|
||||
__markup_modal = { backdrop: backdrop, modal: modal, body: body };
|
||||
return __markup_modal;
|
||||
}
|
||||
|
||||
function showModalForUrl(url, title){
|
||||
var m = ensureModal();
|
||||
m.backdrop.style.display = 'flex';
|
||||
if(title){ var h = m.modal.querySelector('strong'); if(h) h.textContent = title; }
|
||||
m.body.innerHTML = '<div class="p-3 text-muted">Loading…</div>';
|
||||
fetch(url, {credentials:'same-origin'}).then(function(r){ return r.text(); }).then(function(html){ m.body.innerHTML = html; }).catch(function(e){ m.body.innerHTML = '<div class="p-3 text-danger">Failed to load</div>'; console.error('modal fetch error', e); });
|
||||
}
|
||||
|
||||
function showPopupFor(element){
|
||||
// remove existing
|
||||
var existing = document.getElementById('markup-popup'); if(existing) existing.remove();
|
||||
var type = element.getAttribute('data-type'); var pk = element.getAttribute('data-pk'); var label = element.getAttribute('data-label') || element.textContent || '';
|
||||
var popup = document.createElement('div'); popup.id = 'markup-popup'; popup.className = 'markup-popup';
|
||||
popup.innerHTML = '<div style="font-weight:600;margin-bottom:.25rem;">'+ (label||type+':'+pk) +'</div>';
|
||||
var openBtn = document.createElement('button'); openBtn.type='button'; openBtn.className='btn btn-sm btn-outline-primary me-2'; openBtn.textContent='Open';
|
||||
openBtn.addEventListener('click', function(){ var url = getDetailUrl(type, pk); if(url) showModalForUrl(url, label); popup.remove(); });
|
||||
var closeBtn = document.createElement('button'); closeBtn.type='button'; closeBtn.className='btn btn-sm btn-outline-secondary'; closeBtn.textContent='Close'; closeBtn.addEventListener('click', function(){ popup.remove(); });
|
||||
popup.appendChild(openBtn); popup.appendChild(closeBtn);
|
||||
document.body.appendChild(popup);
|
||||
// position near element
|
||||
try{
|
||||
var r = element.getBoundingClientRect();
|
||||
popup.style.top = (window.scrollY + r.bottom + 6) + 'px';
|
||||
popup.style.left = Math.min(window.innerWidth - 240, window.scrollX + r.left) + 'px';
|
||||
popup.style.minWidth = '160px';
|
||||
}catch(e){}
|
||||
// clicking outside closes it
|
||||
setTimeout(function(){
|
||||
var onDoc = function(ev){ if(!popup.contains(ev.target) && ev.target !== element) { popup.remove(); document.removeEventListener('click', onDoc); } };
|
||||
document.addEventListener('click', onDoc);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
// Replace tokens in text nodes with styled spans
|
||||
function renderMarkupTokens(root){
|
||||
injectMarkupStyles();
|
||||
root = root || document.body;
|
||||
// Convert server-rendered anchor tokens into our interactive spans
|
||||
try{
|
||||
if(root.querySelectorAll){
|
||||
root.querySelectorAll('a.markup-link').forEach(function(a){
|
||||
try{
|
||||
var type = a.getAttribute('data-type') || '';
|
||||
var args = [];
|
||||
try{ args = JSON.parse(a.getAttribute('data-args') || '[]'); }catch(e){ args = []; }
|
||||
var pk = (args && args.length) ? (args[0] + '') : (a.getAttribute('data-pk') || '');
|
||||
var label = a.textContent ? a.textContent.trim() : null;
|
||||
var span = document.createElement('span');
|
||||
span.className = 'markup-token';
|
||||
if(type) span.setAttribute('data-type', type);
|
||||
if(pk) span.setAttribute('data-pk', pk);
|
||||
if(label) span.setAttribute('data-label', label);
|
||||
if(type === 'case') span.className += ' badge bg-primary text-white';
|
||||
else if(type === 'displayset') span.className += ' badge bg-success text-white';
|
||||
else span.className += ' badge bg-info text-dark';
|
||||
span.textContent = label ? label : (type + ':' + pk);
|
||||
span.addEventListener('click', function(e){ e.stopPropagation(); showPopupFor(span); });
|
||||
a.parentNode.replaceChild(span, a);
|
||||
}catch(e){}
|
||||
});
|
||||
}
|
||||
}catch(e){}
|
||||
var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
|
||||
var nodes = [];
|
||||
while(walker.nextNode()) nodes.push(walker.currentNode);
|
||||
var re = /\[\[(seriesfinding|finding|displayset|case):(\d+)(?:\|([^\]]+))?\]\]/gi;
|
||||
nodes.forEach(function(textNode){
|
||||
if(!textNode.nodeValue || !re.test(textNode.nodeValue)) return;
|
||||
var parentTag = textNode.parentElement && textNode.parentElement.tagName ? textNode.parentElement.tagName.toLowerCase() : '';
|
||||
if(['script','style','textarea','code','pre','a','button'].includes(parentTag)) return;
|
||||
// rebuild the fragment
|
||||
var frag = document.createDocumentFragment();
|
||||
var txt = textNode.nodeValue;
|
||||
var lastIndex = 0; var m;
|
||||
re.lastIndex = 0;
|
||||
while((m = re.exec(txt)) !== null){
|
||||
var before = txt.slice(lastIndex, m.index);
|
||||
if(before) frag.appendChild(document.createTextNode(before));
|
||||
var type = m[1].toLowerCase(); var pk = m[2]; var label = m[3] ? m[3] : null;
|
||||
var span = document.createElement('span'); span.className = 'markup-token'; span.setAttribute('data-type', type); span.setAttribute('data-pk', pk); if(label) span.setAttribute('data-label', label);
|
||||
// style by type
|
||||
if(type === 'case') span.className += ' badge bg-primary text-white';
|
||||
else if(type === 'displayset') span.className += ' badge bg-success text-white';
|
||||
else span.className += ' badge bg-info text-dark';
|
||||
span.textContent = label ? label : (type + ':' + pk);
|
||||
span.addEventListener('click', function(e){ e.stopPropagation(); showPopupFor(span); });
|
||||
frag.appendChild(span);
|
||||
lastIndex = re.lastIndex;
|
||||
}
|
||||
var rest = txt.slice(lastIndex); if(rest) frag.appendChild(document.createTextNode(rest));
|
||||
textNode.parentNode.replaceChild(frag, textNode);
|
||||
});
|
||||
|
||||
// Ensure any server-rendered span.markup-token elements have click handlers
|
||||
try{
|
||||
if(root.querySelectorAll){
|
||||
root.querySelectorAll('span.markup-token').forEach(function(span){
|
||||
try{
|
||||
if(span._markupBound) return;
|
||||
span._markupBound = true;
|
||||
// ensure data attributes are present
|
||||
var type = span.getAttribute('data-type') || '';
|
||||
var pk = span.getAttribute('data-pk') || '';
|
||||
var label = span.getAttribute('data-label') || span.textContent || '';
|
||||
span.addEventListener('click', function(e){ e.stopPropagation(); showPopupFor(span); });
|
||||
}catch(e){}
|
||||
});
|
||||
}
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// Run rendering on DOMContentLoaded and after HTMX swaps
|
||||
document.addEventListener('DOMContentLoaded', function(){ try{ renderMarkupTokens(document.body); }catch(e){console.error(e);} });
|
||||
document.addEventListener('htmx:afterSwap', function(evt){ try{ var target = evt.detail && evt.detail.target ? evt.detail.target : document; renderMarkupTokens(target); }catch(e){/*ignore*/} });
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
@@ -26,28 +26,26 @@ def render_markup(value):
|
||||
# Default display text
|
||||
display = text_override or (" ".join([typ.capitalize()] + args))
|
||||
|
||||
# Build href when possible
|
||||
href = "#"
|
||||
# Provide data attributes and render as a non-clickable span badge so
|
||||
# client-side JS can upgrade it to an interactive token. Keep
|
||||
# `data-args` for backward compatibility.
|
||||
data_args = json.dumps(args)
|
||||
|
||||
try:
|
||||
if typ == "case":
|
||||
# args[0] expected to be case PK
|
||||
case_id = int(args[0])
|
||||
href = reverse("atlas:collection_detail", args=[case_id])
|
||||
elif typ == "finding":
|
||||
# finding view not implemented here; provide data attrs for JS
|
||||
href = "#"
|
||||
elif typ == "displayset":
|
||||
href = "#"
|
||||
except Exception:
|
||||
href = "#"
|
||||
pk = args[0] if args else ''
|
||||
cls = 'markup-token'
|
||||
if typ == 'case':
|
||||
cls += ' badge bg-primary text-white'
|
||||
elif typ == 'displayset':
|
||||
cls += ' badge bg-success text-white'
|
||||
else:
|
||||
cls += ' badge bg-info text-dark'
|
||||
|
||||
return format_html(
|
||||
'<a href="{}" class="markup-link" data-type="{}" data-args="{}">{}</a>',
|
||||
href,
|
||||
'<span class="{}" data-type="{}" data-args="{}" data-pk="{}" data-label="{}">{}</span>',
|
||||
cls,
|
||||
typ,
|
||||
data_args,
|
||||
pk,
|
||||
display,
|
||||
display,
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user