Fix EGG tooltip css/script
This commit is contained in:
parent
6f0a66f880
commit
766087357b
@ -2,46 +2,47 @@
|
|||||||
var ExtendedGitGraph2;
|
var ExtendedGitGraph2;
|
||||||
(function (ExtendedGitGraph2) {
|
(function (ExtendedGitGraph2) {
|
||||||
function initHover() {
|
function initHover() {
|
||||||
const allsvgtips = Array.from(document.getElementsByClassName("svg-tip"));
|
for (const container of document.querySelectorAll('.extGitGraphContainer')) {
|
||||||
if (allsvgtips.length == 0)
|
const masterTip = container.querySelector('.svg-tip');
|
||||||
return;
|
if (masterTip === null)
|
||||||
const masterTip = allsvgtips[0];
|
continue;
|
||||||
masterTip.style.opacity = '1';
|
masterTip.style.opacity = '1';
|
||||||
masterTip.style.display = 'none';
|
masterTip.style.display = 'none';
|
||||||
const masterTipHeader = masterTip.getElementsByTagName('strong')[0];
|
const masterTipHeader = masterTip.querySelector('.caption');
|
||||||
const masterTipContent = masterTip.getElementsByTagName('span')[0];
|
const masterTipContent = masterTip.querySelector('.date');
|
||||||
const masterTipExtra = masterTip.getElementsByTagName('span')[0];
|
const masterTipExtra = masterTip.querySelector('.extra');
|
||||||
const rects = Array.from(document.getElementsByClassName("egg_rect"));
|
const rects = Array.from(container.querySelectorAll(".egg_rect"));
|
||||||
for (let rect of rects) {
|
for (let rect of rects) {
|
||||||
rect.addEventListener("mouseenter", event => {
|
rect.addEventListener("mouseenter", event => {
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
let count = target.getAttribute('data-count');
|
let count = target.getAttribute('data-count');
|
||||||
let date = target.getAttribute('data-date');
|
let date = target.getAttribute('data-date');
|
||||||
masterTip.style.display = 'block';
|
masterTip.style.display = 'block';
|
||||||
masterTipHeader.innerHTML = count + ' commits';
|
masterTipHeader.innerHTML = count + ' commits';
|
||||||
masterTipContent.innerHTML = ' on ' + date;
|
masterTipContent.innerHTML = ' on ' + date;
|
||||||
if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
|
if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
|
||||||
masterTipExtra.style.display = 'grid';
|
masterTipExtra.style.display = 'grid';
|
||||||
const extraAttr = target.getAttributeNames().sort().filter(p => p.startsWith('data-repo-')).map(p => target.getAttribute(p));
|
const extraAttr = target.getAttributeNames().sort().filter(p => p.startsWith('data-repo-')).map(p => target.getAttribute(p));
|
||||||
let extraHTML = '';
|
let extraHTML = '';
|
||||||
for (const attr of extraAttr) {
|
for (const attr of extraAttr) {
|
||||||
try {
|
try {
|
||||||
let obj = JSON.parse(attr.replace(/'/g, '"'));
|
let obj = JSON.parse(attr.replace(/'/g, '"'));
|
||||||
extraHTML += `<span class="extra-attr">[${obj.source}] ${obj.repo_name}:</span><strong>${obj.count}</strong>\n`;
|
extraHTML += `<span class="extra-attr">${obj.repo_name}:</span><strong>${obj.count}</strong>\n`;
|
||||||
}
|
}
|
||||||
catch (e) {
|
catch (e) {
|
||||||
console.error('Error parsing extra attribute:', attr, e);
|
console.error('Error parsing extra attribute:', attr, e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
masterTipExtra.innerHTML = extraHTML;
|
||||||
}
|
}
|
||||||
masterTipExtra.innerHTML = extraHTML;
|
else {
|
||||||
}
|
masterTipExtra.style.display = 'none';
|
||||||
else {
|
}
|
||||||
masterTipExtra.style.display = 'none';
|
masterTip.style.left = (window.pageXOffset + target.getBoundingClientRect().left - masterTip.getBoundingClientRect().width / 2 - 3.5 + 9) + 'px';
|
||||||
}
|
masterTip.style.top = (window.pageYOffset + target.getBoundingClientRect().top - masterTip.getBoundingClientRect().height - 10) + 'px';
|
||||||
masterTip.style.left = (window.pageXOffset + target.getBoundingClientRect().left - masterTip.getBoundingClientRect().width / 2 - 3.5 + 9) + 'px';
|
});
|
||||||
masterTip.style.top = (window.pageYOffset + target.getBoundingClientRect().top - masterTip.getBoundingClientRect().height - 10) + 'px';
|
rect.addEventListener("mouseleave", _ => masterTip.style.display = 'none');
|
||||||
});
|
}
|
||||||
rect.addEventListener("mouseleave", _ => masterTip.style.display = 'none');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ExtendedGitGraph2.initHover = initHover;
|
ExtendedGitGraph2.initHover = initHover;
|
||||||
|
2
www/extern/egg/OutputGenerator.php
vendored
2
www/extern/egg/OutputGenerator.php
vendored
@ -291,7 +291,7 @@ class SingleYearRenderer implements IOutputGenerator
|
|||||||
$html .= '</g>' . "\n";
|
$html .= '</g>' . "\n";
|
||||||
$html .= '</svg>' . "\n";
|
$html .= '</svg>' . "\n";
|
||||||
$html .= '<div class="svg-tip n"">' . "\n";
|
$html .= '<div class="svg-tip n"">' . "\n";
|
||||||
$html .= '<strong> </strong><span> </span><div style="display: grid; grid-template-columns: auto 1fr; grid-column-gap: 0.5rem; margin-top: 1rem; text-align: right;"></div>' . "\n";
|
$html .= '<strong class="caption"> </strong><span class="date"> </span><div class="extra" style="display: grid; grid-template-columns: auto 1fr; grid-column-gap: 0.5rem; margin-top: 1rem; text-align: right;"></div>' . "\n";
|
||||||
$html .= '</div>' . "\n";
|
$html .= '</div>' . "\n";
|
||||||
$html .= '<div class="egg_footer">' . "\n";
|
$html .= '<div class="egg_footer">' . "\n";
|
||||||
$html .= '<a href="https://www.mikescher.com/programs/view/ExtendedGitGraph">extendedGitGraph</a>' . "\n";
|
$html .= '<a href="https://www.mikescher.com/programs/view/ExtendedGitGraph">extendedGitGraph</a>' . "\n";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user