qurator-spk
/
dinglehopper
mirror of https://github.com/qurator-spk/dinglehopper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

🚧 dinglehopper: Use a Bootstrap tooltip for the segment id

Browse Source
pull/38/head
Gerber, Mike 4 years ago
parent a1c1b9c5ca
commit 4b86f01b15
3 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File

10
qurator/dinglehopper/cli.py
Unescape Escape View File

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

7
qurator/dinglehopper/templates/report.html.j2
Unescape Escape View File

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

16
qurator/dinglehopper/templates/report.html.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save