www: fix tooltip met apostrof

This commit is contained in:
Peter Kleiweg
2026-04-14 19:16:15 +02:00
parent e49bdf82dd
commit 23c1881227
2 changed files with 141 additions and 115 deletions

View File

@@ -1,113 +1,136 @@
var tooltip=function(){ var tooltip = (function () {
var id = 'tt'; var id = 'tt'
var top = 3; var top = 3
var left = 3; var left = 3
var maxw = 500; var maxw = 500
var speed = 10; var speed = 10
var timer = 20; var timer = 20
var endalpha = 95; var endalpha = 95
var alpha = 0; var alpha = 0
var tt,t,c,b,h; var tt, t, c, b, h
var ie = document.all ? true : false; var ie = document.all ? true : false
return{ return {
show:function(v,w,below){ show: function (v, w, below) {
if (v.search("<table") == 0) { if (tt == null) {
v = v.replace(/&lt;/g, "<") tt = document.createElement('div')
.replace(/&gt;/g, ">") tt.setAttribute('id', id)
.replace(/&quot;/g, "\"") t = document.createElement('div')
.replace(/&apos;/g, "'") t.setAttribute('id', id + 'top')
.replace(/&amp;/g, "&"); c = document.createElement('div')
c.setAttribute('id', id + 'cont')
b = document.createElement('div')
b.setAttribute('id', id + 'bot')
tt.appendChild(t)
tt.appendChild(c)
tt.appendChild(b)
document.body.appendChild(tt)
tt.style.opacity = 0
tt.style.filter = 'alpha(opacity=0)'
} }
if(tt == null){ document.onmousemove = below ? this.pos2 : this.pos
tt = document.createElement('div'); tt.style.display = 'block'
tt.setAttribute('id',id); c.innerHTML = v
t = document.createElement('div'); tt.style.width = w ? w + 'px' : 'auto'
t.setAttribute('id',id + 'top'); if (!w && ie) {
c = document.createElement('div'); t.style.display = 'none'
c.setAttribute('id',id + 'cont'); b.style.display = 'none'
b = document.createElement('div'); tt.style.width = tt.offsetWidth
b.setAttribute('id',id + 'bot'); t.style.display = 'block'
tt.appendChild(t); b.style.display = 'block'
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
} }
document.onmousemove = below ? this.pos2 : this.pos; if (tt.offsetWidth > maxw) {
tt.style.display = 'block'; tt.style.width = maxw + 'px'
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
} }
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} h = parseInt(tt.offsetHeight) + top
h = parseInt(tt.offsetHeight) + top; clearInterval(tt.timer)
clearInterval(tt.timer); tt.timer = setInterval(function () {
tt.timer = setInterval(function(){tooltip.fade(1)},timer); tooltip.fade(1)
}, timer)
}, },
pos:function(e){ pos: function (e) {
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var w =
var o = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; window.innerWidth ||
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; document.documentElement.clientWidth ||
var top = u - h; document.body.clientWidth
var o =
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0
var scroll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0
var top = u - h
if (top < scroll + 10) { if (top < scroll + 10) {
top = scroll + 10; top = scroll + 10
} }
tt.style.top = top + 'px'; tt.style.top = top + 'px'
if (w > maxw && l + maxw > w + o) { if (w > maxw && l + maxw > w + o) {
tt.style.right = (w - l - left + 10) + 'px'; tt.style.right = w - l - left + 10 + 'px'
tt.style.left = 'auto'; tt.style.left = 'auto'
} else { } else {
tt.style.left = (l + left + 10) + 'px'; tt.style.left = l + left + 10 + 'px'
tt.style.right = 'auto'; tt.style.right = 'auto'
} }
}, },
pos2:function(e){ pos2: function (e) {
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var w =
var o = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; window.innerWidth ||
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; document.documentElement.clientWidth ||
var top = u + 24; document.body.clientWidth
var o =
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0
var scroll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0
var top = u + 24
if (top < scroll + 10) { if (top < scroll + 10) {
top = scroll + 10; top = scroll + 10
} }
tt.style.top = top + 'px'; tt.style.top = top + 'px'
if (w > maxw && l + maxw > w + o) { if (w > maxw && l + maxw > w + o) {
tt.style.right = (w - l - left + 10) + 'px'; tt.style.right = w - l - left + 10 + 'px'
tt.style.left = 'auto'; tt.style.left = 'auto'
} else { } else {
tt.style.left = (l + left + 10) + 'px'; tt.style.left = l + left + 10 + 'px'
tt.style.right = 'auto'; tt.style.right = 'auto'
} }
}, },
fade:function(d){ fade: function (d) {
var a = alpha; var a = alpha
if((a != endalpha && d == 1) || (a != 0 && d == -1)){ if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed; var i = speed
if(endalpha - a < speed && d == 1){ if (endalpha - a < speed && d == 1) {
i = endalpha - a; i = endalpha - a
}else if(alpha < speed && d == -1){ } else if (alpha < speed && d == -1) {
i = a; i = a
}
alpha = a + i * d
tt.style.opacity = alpha * 0.01
tt.style.filter = 'alpha(opacity=' + alpha + ')'
} else {
clearInterval(tt.timer)
if (d == -1) {
tt.style.display = 'none'
} }
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
} }
}, },
hide:function(){ hide: function () {
clearInterval(tt.timer); clearInterval(tt.timer)
tt.timer = setInterval(function(){tooltip.fade(-1)},timer); tt.timer = setInterval(function () {
tooltip.fade(-1)
}, timer)
},
} }
}; })()
}();

View File

@@ -14,6 +14,9 @@ titles = {
'tag.txt': 'tags' 'tag.txt': 'tags'
} }
def e(s):
return s.replace('&#x27;', '&amp;#x27;')
omt0 = ''' onmouseover="tooltip.show('{} &nbsp; {}')" onmouseout="tooltip.hide()"''' omt0 = ''' onmouseover="tooltip.show('{} &nbsp; {}')" onmouseout="tooltip.hide()"'''
omt1 = ''' onmouseover="tooltip.show('{} &nbsp; {}&lt;br&gt;&lt;small&gt;{}&lt;/small&gt;')" onmouseout="tooltip.hide()" class="tags"''' omt1 = ''' onmouseover="tooltip.show('{} &nbsp; {}&lt;br&gt;&lt;small&gt;{}&lt;/small&gt;')" onmouseout="tooltip.hide()" class="tags"'''
@@ -47,9 +50,9 @@ with open(sys.argv[1], 'rt', encoding='utf-8') as fp:
cols=len(aa) cols=len(aa)
p = 100 / mx * v p = 100 / mx * v
if len(aa) > 2: if len(aa) > 2:
mo = omt1.format(aa[0], aa[1], aa[2]) mo = omt1.format(e(aa[0]), e(aa[1]), e(aa[2]))
else: else:
mo = omt0.format(aa[0], aa[1]) mo = omt0.format(e(aa[0]), e(aa[1]))
sys.stdout.buffer.write('<tr{}><td><div style="width:{:.0f}%"></div><td>{}</tr>\n'.format(mo, p, aa[1]).encode('utf-8')) sys.stdout.buffer.write('<tr{}><td><div style="width:{:.0f}%"></div><td>{}</tr>\n'.format(mo, p, aa[1]).encode('utf-8'))
lineno += 1 lineno += 1
if lineno == 20: if lineno == 20: