diff options
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/css/tooltip.css | 21 | ||||
| -rw-r--r-- | src/app/index.html | 15 | ||||
| -rw-r--r-- | src/app/js/tooltip.js | 130 | ||||
| -rw-r--r-- | src/app/main.css | 1 |
4 files changed, 161 insertions, 6 deletions
diff --git a/src/app/css/tooltip.css b/src/app/css/tooltip.css new file mode 100644 index 0000000..673cc64 --- /dev/null +++ b/src/app/css/tooltip.css @@ -0,0 +1,21 @@ +@import "theming.css"; + +#tooltip { + color: white; + opacity: 0.0; + position: fixed; + font-weight: 600; + font-size: 0.8em; + width: max-content; + z-index: 99999999999; + pointer-events: none; + background: var(--bg); + backdrop-filter: blur(15px); + transition: opacity 0.15s ease-in-out; + border-radius: calc(var(--padding) / 1); + padding: calc(var(--padding) / 2.8) calc(var(--padding) / 1.8); +} + +#tooltip.visible { + opacity: 1.0; +} diff --git a/src/app/index.html b/src/app/index.html index 52ac532..2b2abd1 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -6,13 +6,15 @@ <meta charset="utf-8"> </head> <body> + <div id="tooltip">Test</div> + <div id="bgHolder"></div> <div id="toasts"></div> <div id="winbtns"> - <div id="settings" onclick="Settings.toggle(true)"></div> - <div id="minimize" onclick="ipcRenderer.send('minimize')"></div> - <div id="close" onclick="ipcRenderer.send('exit')"></div> + <div id="settings" tooltip="%%tooltip.settings%%" onclick="Settings.toggle(true)"></div> + <div id="minimize" tooltip="%%tooltip.minimize%%" onclick="ipcRenderer.send('minimize')"></div> + <div id="close" tooltip="%%tooltip.close%%" onclick="ipcRenderer.send('exit')"></div> </div> <div id="dragUI"> @@ -170,9 +172,9 @@ </div> <nav class="gamesContainer"> - <button id="vpBtn" onclick="page(0)"></button> - <button id="nsBtn" onclick="page(1)"></button> - <button id="tfBtn" onclick="page(2)"></button> + <button id="vpBtn" tooltip="%%tooltip.pages.viper%%" tooltip-position="horizontal" onclick="page(0)"></button> + <button id="nsBtn" tooltip="%%tooltip.pages.northstar%%" tooltip-position="horizontal" onclick="page(1)"></button> + <button id="tfBtn" tooltip="%%tooltip.pages.titanfall%%" tooltip-position="horizontal" onclick="page(2)"></button> </nav> <div class="mainContainer"> @@ -261,6 +263,7 @@ <script src="js/misc.js"></script> <script src="js/mods.js"></script> <script src="js/toast.js"></script> + <script src="js/tooltip.js"></script> <script src="js/browser.js"></script> <script src="js/settings.js"></script> <script src="js/launcher.js"></script> diff --git a/src/app/js/tooltip.js b/src/app/js/tooltip.js new file mode 100644 index 0000000..13dcd67 --- /dev/null +++ b/src/app/js/tooltip.js @@ -0,0 +1,130 @@ +var tooltip = { + target: false, + div: document.getElementById("tooltip"), +} + +tooltip.show = (target, text, vertical_positioned) => { + if (target == tooltip.target) { + return; + } + + tooltip.target = target; + + let div = tooltip.div; + + let padding = parseFloat( + getComputedStyle(div).getPropertyValue("padding") + ); + + let tooltip_padding = padding / 1.2; + + let get_positions = () => { + div.innerHTML = text; + + let div_rect = div.getBoundingClientRect(); + let target_rect = target.getBoundingClientRect(); + + let x_pos = 0; + let y_pos = 0; + + if (vertical_positioned) { + x_pos = target_rect.x + (target_rect.width / 2); + x_pos = x_pos - (div_rect.width / 2); + + if (x_pos < padding) { + x_pos = padding; + } else if (x_pos + div_rect.width > window.innerWidth - padding) { + x_pos = window.innerWidth - div_rect.width - padding; + } + + y_pos = target_rect.y + target_rect.height + tooltip_padding; + + if (y_pos + div_rect.height > window.innerHeight) { + y_pos = target_rect.y - div_rect.height - tooltip_padding; + } + } else { + x_pos = target_rect.x - div_rect.width - tooltip_padding; + + if (x_pos < 0) { + x_pos = target_rect.x + target_rect.width + tooltip_padding; + } + + if (x_pos > window.innerWidth - padding) { + x_pos = window.innerWidth - div_rect.width - padding; + } + + y_pos = target_rect.y + (target_rect.height / 2); + y_pos = y_pos - (div_rect.height / 2); + } + + return {x: x_pos, y: y_pos} + } + + let transition_duration = parseFloat( + getComputedStyle(div).getPropertyValue("transition-duration") + ) * 1000; + + if (div.classList.contains("visible")) { + div.classList.remove("visible"); + } + + return new Promise((resolve) => { + setTimeout(() => { + if (tooltip.target != target) { + return resolve(); + } + + let pos = get_positions(); + div.style.top = pos.y + "px"; + div.style.left = pos.x + "px"; + }, transition_duration) + + setTimeout(() => { + if (tooltip.target != target) { + return resolve(); + } + + div.classList.add("visible"); + + resolve(); + }, transition_duration * 2) + }) +} + +let mouse_y = 0; +let mouse_x = 0; + +let tooltip_event = (event) => { + if (event && event.x && event.y) { + mouse_y = event.y; + mouse_x = event.x; + } else { + event = { + x: mouse_x, + y: mouse_y + } + } + + let at_mouse = document.elementFromPoint(event.x, event.y); + + if (! at_mouse) {return} + + let tooltip_text = at_mouse.getAttribute("tooltip"); + if (! tooltip_text) { + tooltip.target = false; + tooltip.div.classList.remove("visible"); + + return; + } + + let position = at_mouse.getAttribute("tooltip-position") || "vertical"; + tooltip.show(at_mouse, tooltip_text, (position == "vertical")); +} + +setInterval(tooltip_event, 1000); +document.addEventListener("click", tooltip_event); +document.addEventListener("mouseup", tooltip_event); +document.addEventListener("mousedown", tooltip_event); +document.addEventListener("mousemove", tooltip_event); +document.addEventListener("mouseenter", tooltip_event); +document.addEventListener("mouseleave", tooltip_event); diff --git a/src/app/main.css b/src/app/main.css index d76afdf..fa2fff2 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -2,6 +2,7 @@ @import "css/dragui.css"; @import "css/toasts.css"; @import "css/popups.css"; +@import "css/tooltip.css"; @import "css/theming.css"; @import "css/launcher.css"; |