rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #199 from one-some/ui2-js-tooltip

Browse Source 
JS Tooltip
This commit is contained in:
ebolam
2022-10-11 17:19:14 -04:00
committed by GitHub
parent 87ad8704f5 44ca71d1a5
commit 7bbb788f48
2 changed files with 66 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/koboldai.css
View File

@@ -1884,27 +1884,14 @@ body {
outline: 1px solid gray;
}
[tooltip]:after {
opacity: 0;
content: "";
}
[tooltip]:hover::after {
#tooltip-text {
content: attr(tooltip);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position: fixed;
transition: opacity 0s linear 0.5s;
border: 3px ridge grey;
width: 200px;
white-space: normal;
top: calc(var(--mouse-y) * 100vh);
left: calc(var(--mouse-x) * 100vw);
transform: translate(var(--tooltip_x), var(--tooltip_y)) !important;
opacity: 1;
padding: 0px 2px;
color: var(--tooltip_text);
background-color: var(--tooltip_background);
@@ -1913,27 +1900,19 @@ body {
z-index: 9999999;
}
.context-token[tooltip]:hover::after {
content: attr(tooltip);
.tooltip-standard {
border: 3px ridge grey;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position: fixed;
transition: opacity 0s linear 0.5s;
top: calc(var(--mouse-y) * 100vh - 30px);
left: calc(var(--mouse-x) * 100vw);
transform: translate(var(--tooltip_x), var(--tooltip_y_context)) !important;
opacity: 1;
padding: 0px 2px;
color: var(--tooltip_text);
background-color: var(--tooltip_background);
pointer-events: none;
z-index: 9999999;
width: 200px;
}
.tooltip-context-token {
border: none;
font-family: monospace;
max-width: min-content;
}
/* Mobile tooltips */
@media (pointer: coarse), (hover: none) {
[tooltip]:after {

78
static/koboldai.js
View File

@@ -5004,6 +5004,60 @@ let load_substitutions;
return [load_substitutions];
})();
/* -- Tooltips -- */
(function() {
const tooltip = $e("span", document.body, {id: "tooltip-text", "style.display": "none"});
let tooltipActive = false;
function alterTooltipState(enabled, specialClass=null) {
tooltipActive = enabled;
tooltip.style.display = enabled ? "block" : "none";
tooltip.className = specialClass || "";
}
function registerElement(el) {
// el should have attribute "tooltip"
let text = el.getAttribute("tooltip");
el.setAttribute("wawawa", "yeah")
el.addEventListener("mouseenter", function(event) {
tooltip.innerText = text;
let specialClass = "tooltip-standard";
// Kinda lame
if (this.classList.contains("context-token")) specialClass = "tooltip-context-token";
alterTooltipState(true, specialClass);
});
el.addEventListener("mouseleave", function(event) {
alterTooltipState(false);
});
}
document.addEventListener("mousemove", function(event) {
if (!tooltipActive) return;
tooltip.style.left = `${event.x}px`;
tooltip.style.top = `${event.y}px`;
});
// Inital scan
for (const element of document.querySelectorAll("[tooltip]")) {
registerElement(element);
}
// Use a MutationObserver to catch future tooltips
const observer = new MutationObserver(function(records, observer) {
for (const record of records) {
for (const node of record.addedNodes) {
if (node.nodeType !== 1 || !node.hasAttribute("tooltip")) continue;
registerElement(node);
}
}
});
observer.observe(document.body, {childList: true, subtree: true});
})();
/* -- Shortcuts -- */
document.addEventListener("keydown", function(event) {
@@ -5070,26 +5124,4 @@ function run_infinite_scroll_update(action_type, actions, first_action) {
}
}
}
document.addEventListener('mousemove', evt => {
let x = evt.clientX / innerWidth;
let y = evt.clientY / innerHeight;
var r = document.querySelector(':root');
if (x > 0.5) {
r.style.setProperty("--tooltip_x", "-100%");
} else {
r.style.setProperty("--tooltip_x", "0%");
}
if (y > 0.5) {
r.style.setProperty("--tooltip_y", "-100%");
r.style.setProperty("--tooltip_y_context", "0%");
} else {
r.style.setProperty("--tooltip_y", "100%");
r.style.setProperty("--tooltip_y_context", "200%");
}
r.style.setProperty("--mouse-x", evt.clientX / innerWidth);
r.style.setProperty("--mouse-y", evt.clientY / innerHeight);
});
}