mirror of
https://github.com/qurator-spk/dinglehopper.git
synced 2025-06-09 20:00:01 +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_t = escape(t)
|
||||||
|
|
||||||
html_custom_attrs = ""
|
html_custom_attrs = ""
|
||||||
# XXX must sanitize id_ or do we trust the XML?
|
|
||||||
|
# Set Bootstrap tooltip to the segment id
|
||||||
if 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:
|
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)
|
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 \
|
return \
|
||||||
'''
|
'''
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 gt"><div class="status-box"></div>{}</div>
|
<div class="col-md-6 gt">{}</div>
|
||||||
<div class="col-md-6 ocr"><div class="status-box"></div>{}</div>
|
<div class="col-md-6 ocr">{}</div>
|
||||||
</div>
|
</div>
|
||||||
'''.format(gtx, ocrx)
|
'''.format(gtx, ocrx)
|
||||||
|
|
||||||
|
|
|
@ -26,13 +26,6 @@
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
.status-box {
|
|
||||||
position: fixed;
|
|
||||||
background: grey;
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
height: 2em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -1,19 +1,15 @@
|
||||||
function find_diff_class(classes) {
|
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() {
|
$(document).ready(function() {
|
||||||
$('.diff').mouseover(function() {
|
/* Enable Bootstrap tooltips */
|
||||||
let c = find_diff_class($(this).attr('class'));
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
$('.' + c).addClass('diff-highlight');
|
|
||||||
|
|
||||||
segment_id = $(this).attr('data-segment-id');
|
$('.diff').mouseover(function() {
|
||||||
$(this).closest('div').find('.status-box').text(segment_id);
|
find_diff_class($(this).attr('class')).addClass('diff-highlight');
|
||||||
});
|
});
|
||||||
$('.diff').mouseout(function() {
|
$('.diff').mouseout(function() {
|
||||||
let c = find_diff_class($(this).attr('class'));
|
find_diff_class($(this).attr('class')).removeClass('diff-highlight');
|
||||||
$('.' + c).removeClass('diff-highlight');
|
|
||||||
|
|
||||||
$(this).closest('div').find('.status-box').text('');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue