mirror of
https://github.com/qurator-spk/dinglehopper.git
synced 2025-06-09 11:50:00 +02:00
🚧 dinglehopper: Use a Bootstrap tooltip for the segment id
This commit is contained in:
parent
a1c1b9c5ca
commit
4b86f01b15
3 changed files with 12 additions and 21 deletions
|
@ -22,9 +22,11 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none):
|
|||
html_t = escape(t)
|
||||
|
||||
html_custom_attrs = ""
|
||||
# XXX must sanitize id_ or do we trust the XML?
|
||||
|
||||
# Set Bootstrap tooltip to the segment id
|
||||
if id_:
|
||||
html_custom_attrs = 'data-segment-id="{}"'.format(id_)
|
||||
html_custom_attrs += 'data-toggle="tooltip" title="{}"'.format(id_)
|
||||
# XXX must sanitize id_ or do we trust the XML?
|
||||
|
||||
if css_classes:
|
||||
return '<span class="{css_classes}" {html_custom_attrs}>{html_t}</span>'.format(css_classes=css_classes, html_t=html_t, html_custom_attrs=html_custom_attrs)
|
||||
|
@ -70,8 +72,8 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none):
|
|||
return \
|
||||
'''
|
||||
<div class="row">
|
||||
<div class="col-md-6 gt"><div class="status-box"></div>{}</div>
|
||||
<div class="col-md-6 ocr"><div class="status-box"></div>{}</div>
|
||||
<div class="col-md-6 gt">{}</div>
|
||||
<div class="col-md-6 ocr">{}</div>
|
||||
</div>
|
||||
'''.format(gtx, ocrx)
|
||||
|
||||
|
|
|
@ -26,13 +26,6 @@
|
|||
border: 2px solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.status-box {
|
||||
position: fixed;
|
||||
background: grey;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -1,19 +1,15 @@
|
|||
function find_diff_class(classes) {
|
||||
return classes.split(/\s+/).find(x => x.match(/.diff\d.*/));
|
||||
return $('.' + classes.split(/\s+/).find(x => x.match(/.diff\d.*/)));
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.diff').mouseover(function() {
|
||||
let c = find_diff_class($(this).attr('class'));
|
||||
$('.' + c).addClass('diff-highlight');
|
||||
/* Enable Bootstrap tooltips */
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
segment_id = $(this).attr('data-segment-id');
|
||||
$(this).closest('div').find('.status-box').text(segment_id);
|
||||
$('.diff').mouseover(function() {
|
||||
find_diff_class($(this).attr('class')).addClass('diff-highlight');
|
||||
});
|
||||
$('.diff').mouseout(function() {
|
||||
let c = find_diff_class($(this).attr('class'));
|
||||
$('.' + c).removeClass('diff-highlight');
|
||||
|
||||
$(this).closest('div').find('.status-box').text('');
|
||||
find_diff_class($(this).attr('class')).removeClass('diff-highlight');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue