mbk-lab
/
rui_orig
mirror of https://github.com/anoshenko/rui.git
2
0
Fork 1
Code Issues Projects Releases Wiki Activity

Bug fixing

This commit is contained in:
Alexei Anoshenko 2026-11-02 14:13:08 +03:00
parent 608c6174dc
commit e4b89dc833
4 changed files with 74 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
app_scripts.js
View File

@ -135,6 +135,8 @@ function scanElementsSize() {
function scrollEvent(element, event) { function scrollEvent(element, event) {
sendMessage("scroll{session=" + sessionID + ",id=" + element.id + ",x=" + element.scrollLeft + sendMessage("scroll{session=" + sessionID + ",id=" + element.id + ",x=" + element.scrollLeft +
",y=" + element.scrollTop + ",width=" + element.scrollWidth + ",height=" + element.scrollHeight + "}"); ",y=" + element.scrollTop + ",width=" + element.scrollWidth + ",height=" + element.scrollHeight + "}");
hideTooltip();
} }
function updateCSSRule(selector, ruleText) { function updateCSSRule(selector, ruleText) {
@ -2060,101 +2062,70 @@ function localStorageClear() {
} }
} }
function showTooltip(element, tooltip) { function showTooltip(element, tooltipText) {
const layer = document.getElementById("ruiTooltipLayer"); const tooltip = document.getElementById("ruiTooltip");
if (!layer) { const topArrow = document.getElementById("ruiTooltipTopArrow");
const bottomArrow = document.getElementById("ruiTooltipBottomArrow");
const tooltipBox = document.getElementById("ruiTooltipText");
if (!tooltip || !topArrow || !bottomArrow || !tooltipBox) {
return; return;
} }
layer.style.left = "0px"; topArrow.style.display = "";
layer.style.right = "0px"; tooltipBox.innerHTML = tooltipText;
const tooltipBox = document.getElementById("ruiTooltipText"); const arrowSize = topArrow.offsetHeight;
if (tooltipBox) { const tooltipHeight = tooltipBox.offsetHeight + arrowSize;
tooltipBox.innerHTML = tooltip; const screenWidth = document.body.offsetWidth;
} const screenHeight = document.body.offsetHeight;
const elementRect = element.getBoundingClientRect();
let arrow = topArrow;
let scrollLeft = element.parentElement.scrollLeft; if (elementRect.top >= tooltipHeight) {
let scrollTop = element.parentElement.scrollTop; topArrow.style.display = "none";
let left = element.offsetLeft - scrollLeft; bottomArrow.style.display = "";
let top = element.offsetTop - scrollTop; arrow = bottomArrow;
let width = element.offsetWidth; tooltip.style.top = (elementRect.top - tooltipHeight) + "px";
let height = element.offsetHeight; } else if (screenHeight - elementRect.bottom >= tooltipHeight) {
let parent = element.offsetParent; bottomArrow.style.display = "none";
tooltip.style.top = (elementRect.bottom) + "px";
while (parent) {
left += parent.offsetLeft;
top += parent.offsetTop;
if (parent.parentElement) {
left -= parent.parentElement.scrollLeft;
top -= parent.parentElement.scrollTop;
}
width = parent.offsetWidth;
height = parent.offsetHeight;
parent = parent.offsetParent;
}
if (element.offsetWidth >= tooltipBox.offsetWidth) {
layer.style.left = left + "px";
layer.style.justifyItems = "start";
} else { } else {
const rightOff = width - (left + element.offsetWidth); return;
if (left > rightOff) { }
if (width - left < tooltipBox.offsetWidth) {
layer.style.right = rightOff + "px"; const xCenter = (elementRect.left + elementRect.right) / 2;
layer.style.justifyItems = "end"; const tooltipWidth = tooltip.offsetWidth;
let left = xCenter - tooltipWidth / 2;
let right = left + tooltipWidth;
if (left >= 0 && right < screenWidth) {
tooltip.style.left = left + "px";
tooltip.style.justifyItems = "center";
arrow.style.marginLeft = "0px";
arrow.style.marginRight = "0px";
} else { } else {
layer.style.left = (left - rightOff) + "px"; if (left < 0) {
layer.style.right = "0px"; left = 0;
layer.style.justifyItems = "center";
}
} else { } else {
if (width - rightOff < tooltipBox.offsetWidth) { left = screenWidth - tooltipWidth;
layer.style.left = left + "px";
layer.style.justifyItems = "start";
} else {
layer.style.right = (rightOff - left) + "px";
layer.style.justifyItems = "center";
}
} }
tooltip.style.left = left + "px";
tooltip.style.justifyItems = "left";
arrow.style.marginLeft = (xCenter - left - arrowSize) + "px";
arrow.style.marginRight = "0px";
} }
const bottomOff = height - (top + element.offsetHeight); tooltip.style.visibility = "visible";
let arrow = document.getElementById("ruiTooltipTopArrow"); tooltip.style.opacity = 1;
if (bottomOff < arrow.offsetHeight + tooltipBox.offsetHeight) {
if (arrow) {
arrow.style.visibility = "hidden";
} }
arrow = document.getElementById("ruiTooltipBottomArrow"); function hideTooltip() {
if (arrow) { const layer = document.getElementById("ruiTooltip");
arrow.style.visibility = "visible"; if (layer && layer.style.visibility != "hidden") {
layer.style.opacity = 0;
layer.style.visibility = "hidden";
} }
layer.style.top = "0px";
layer.style.bottom = height - top - arrow.offsetHeight / 2 + "px";
layer.style.gridTemplateRows = "1fr auto auto"
} else {
if (arrow) {
arrow.style.visibility = "visible";
}
layer.style.top = top + element.offsetHeight - arrow.offsetHeight / 2 + "px";
layer.style.bottom = "0px";
layer.style.gridTemplateRows = "auto auto 1fr"
arrow = document.getElementById("ruiTooltipBottomArrow");
if (arrow) {
arrow.style.visibility = "hidden";
}
}
layer.style.visibility = "visible";
layer.style.opacity = 1;
} }
function mouseEnterEvent(element, event) { function mouseEnterEvent(element, event) {
@ -2172,24 +2143,12 @@ function mouseLeaveEvent(element, event) {
event.stopPropagation(); event.stopPropagation();
if (element.getAttribute("data-tooltip")) { if (element.getAttribute("data-tooltip")) {
const layer = document.getElementById("ruiTooltipLayer"); hideTooltip()
if (layer) {
layer.style.opacity = 0;
layer.style.visibility = "hidden";
}
} }
sendMessage("mouse-leave{session=" + sessionID + ",id=" + element.id + mouseEventData(element, event) + "}"); sendMessage("mouse-leave{session=" + sessionID + ",id=" + element.id + mouseEventData(element, event) + "}");
} }
function hideTooltip() {
const layer = document.getElementById("ruiTooltipLayer");
if (layer) {
layer.style.opacity = 0;
layer.style.visibility = "hidden";
}
}
function stopEventPropagation(element, event) { function stopEventPropagation(element, event) {
event.stopPropagation(); event.stopPropagation();
} }

35
app_styles.css
View File

@ -10,7 +10,8 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--tooltip-arrow-size: 6px; --tooltip-arrow-width: 10px;
--tooltip-arrow-height: 6px;
--tooltip-background: white; --tooltip-background: white;
--tooltip-text-color: black; --tooltip-text-color: black;
--tooltip-shadow-color: gray; --tooltip-shadow-color: gray;
@ -98,49 +99,45 @@ ul:focus {
padding: 0; padding: 0;
} }
.ruiTooltipLayer { .ruiTooltip {
display: grid; display: grid;
grid-template-rows: 1fr auto 1fr; grid-template-rows: auto auto auto;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 0px; top: 0px;
bottom: 0px;
right: 0px;
left: 0px; left: 0px;
transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;
filter: drop-shadow(0px 0px 2px var(--tooltip-shadow-color)); filter: drop-shadow(0px 0px 1px var(--tooltip-shadow-color));
} }
.ruiTooltipTopArrow { .ruiTooltipTopArrow {
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 2; grid-row-end: 2;
border-width: var(--tooltip-arrow-size); width: var(--tooltip-arrow-width);
border-style: solid; height: var(--tooltip-arrow-height);
border-color: transparent transparent var(--tooltip-background) transparent; background-color: var(--tooltip-background);
margin-left: 12px; clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
margin-right: 12px;
} }
.ruiTooltipBottomArrow { .ruiTooltipBottomArrow {
grid-row-start: 3; grid-row-start: 3;
grid-row-end: 4; grid-row-end: 4;
border-width: var(--tooltip-arrow-size); width: var(--tooltip-arrow-width);
border-style: solid; height: var(--tooltip-arrow-height);
border-color: var(--tooltip-background) transparent transparent transparent; background-color: var(--tooltip-background);
margin-left: 12px; clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
margin-right: 12px;
} }
.ruiTooltipText { .ruiTooltipText {
max-width: 100%;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 3; grid-row-end: 3;
padding: 4px 8px 4px 8px; padding: 4px 8px 4px 8px;
margin-left: 8px; margin-left: 1px;
margin-right: 8px; margin-right: 1px;
background-color: var(--tooltip-background); background-color: var(--tooltip-background);
color: var(--tooltip-text-color); color: var(--tooltip-text-color);
/*box-shadow: 0px 0px 4px 2px #8888;*/
border-radius: 4px; border-radius: 4px;
} }

2
application.go
View File

@ -105,7 +105,7 @@ const sessionID = `, strconv.Itoa(sessionID), `;
<body id="body" onkeydown="keyDownEvent(this, event)"> <body id="body" onkeydown="keyDownEvent(this, event)">
<div class="ruiRoot" id="ruiRootView"></div> <div class="ruiRoot" id="ruiRootView"></div>
<div class="ruiPopupLayer" id="ruiPopupLayer" style="visibility: hidden; isolation: isolate; z-index: 10001;"></div> <div class="ruiPopupLayer" id="ruiPopupLayer" style="visibility: hidden; isolation: isolate; z-index: 10001;"></div>
<div class="ruiTooltipLayer" id="ruiTooltipLayer" style="visibility: hidden; opacity: 0; z-index: 10002;"> <div class="ruiTooltip" id="ruiTooltip" style="visibility: hidden; opacity: 0; z-index: 10002;">
<div id="ruiTooltipText" class="ruiTooltipText"></div> <div id="ruiTooltipText" class="ruiTooltipText"></div>
<div id="ruiTooltipTopArrow" class="ruiTooltipTopArrow"></div> <div id="ruiTooltipTopArrow" class="ruiTooltipTopArrow"></div>
<div id="ruiTooltipBottomArrow" class="ruiTooltipBottomArrow"></div> <div id="ruiTooltipBottomArrow" class="ruiTooltipBottomArrow"></div>

4
popup.go
View File

@ -1722,8 +1722,8 @@ func (manager *popupManager) showPopup(popup Popup) {
session.callFunc("blurCurrent") session.callFunc("blurCurrent")
session.callFunc("appendElement", popupLayerID, popup.html(false)) session.callFunc("appendElement", popupLayerID, popup.html(false))
session.updateCSSProperty("ruiTooltipLayer", "visibility", "hidden") session.updateCSSProperty("ruiTooltip", "visibility", "hidden")
session.updateCSSProperty("ruiTooltipLayer", "opacity", "0") session.updateCSSProperty("ruiTooltip", "opacity", "0")
session.updateCSSProperty(popupLayerID, "visibility", "visible") session.updateCSSProperty(popupLayerID, "visibility", "visible")
session.updateCSSProperty("ruiRoot", "pointer-events", "none") session.updateCSSProperty("ruiRoot", "pointer-events", "none")
popup.showAnimation() popup.showAnimation()