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

35
app_styles.css
View File

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

2
application.go
View File

@ -105,7 +105,7 @@ const sessionID = `, strconv.Itoa(sessionID), `;
<body id="body" onkeydown="keyDownEvent(this, event)">
<div class="ruiRoot" id="ruiRootView"></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="ruiTooltipTopArrow" class="ruiTooltipTopArrow"></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("appendElement", popupLayerID, popup.html(false))
session.updateCSSProperty("ruiTooltipLayer", "visibility", "hidden")
session.updateCSSProperty("ruiTooltipLayer", "opacity", "0")
session.updateCSSProperty("ruiTooltip", "visibility", "hidden")
session.updateCSSProperty("ruiTooltip", "opacity", "0")
session.updateCSSProperty(popupLayerID, "visibility", "visible")
session.updateCSSProperty("ruiRoot", "pointer-events", "none")
popup.showAnimation()