qurator-spk/dinglehopper
1
0
Fork 0
mirror of https://github.com/qurator-spk/dinglehopper.git synced 2025-06-09 11:50:00 +02:00
Code Issues Releases Wiki Activity

🚧 dinglehopper: Use a Bootstrap tooltip for the segment id

Browse source
This commit is contained in:
Gerber, Mike 2020-06-12 15:56:01 +02:00
parent a1c1b9c5ca
commit 4b86f01b15
3 changed files with 12 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

10
qurator/dinglehopper/cli.py
View file

@ -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)

7
qurator/dinglehopper/templates/report.html.j2
View file

@ -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>

16
qurator/dinglehopper/templates/report.html.js
View file

@ -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');
});
});