feat(unity-react-core): extend tooltip to own component #1677
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { EventHandler } from "./bootstrap-helper"; | ||
|
|
||
| function initTooltips() { | ||
| /* this value must stay in sync, found in files: */ | ||
| /* packages/unity-bootstrap-theme/src/scss/extends/_tooltips.scss */ | ||
| /* packages/unity-bootstrap-theme/src/js/tooltips.js */ | ||
| const TOOLTIP_MAX_WIDTH = 288; | ||
| const CONTAINER_CLASS = "uds-tooltip-container"; | ||
| const CONTAINER_SELECTOR = `.${CONTAINER_CLASS}`; | ||
| const TRIGGER_ATTR = "aria-describedby"; | ||
| const TRIGGER_SELECTOR = `[${TRIGGER_ATTR}]`; | ||
| const CONTENT_ATTR = "role=tooltip"; | ||
| const CONTENT_SELECTOR = `[${CONTENT_ATTR}]`; | ||
|
|
||
| // This query selector is not just creating a List, | ||
| // it's also checking to ensure all 3 elements are present | ||
| // (container, trigger, content) and in the correct order | ||
| // (trigger immediately followed by content) | ||
| const tooltipContentList = document.querySelectorAll( | ||
| `${CONTAINER_SELECTOR} > ${TRIGGER_SELECTOR} + ${CONTENT_SELECTOR}` | ||
| ); | ||
|
|
||
| function closeActiveTooltips() { | ||
| const activeTooltips = document.querySelectorAll( | ||
| `${TRIGGER_SELECTOR}[aria-expanded="true"]` | ||
| ); | ||
| activeTooltips.forEach(activeTooltip => { | ||
| activeTooltip.setAttribute("aria-expanded", "false"); | ||
| }); | ||
| } | ||
|
|
||
| function show(e) { | ||
| // container or trigger | ||
| let trigger = | ||
| e.target.querySelector(`${CONTAINER_SELECTOR} ${TRIGGER_SELECTOR}`) || | ||
| e.target; | ||
| let content = trigger.nextSibling; | ||
|
|
||
| if (e.type === "keypress") { | ||
| if (e.charCode !== 32) { | ||
|
Contributor
There was a problem hiding this comment. Should use e.key since keypress and charCode is deprecated |
||
| return; | ||
| } | ||
| } | ||
|
|
||
| closeActiveTooltips(); | ||
|
|
||
| if ( | ||
| trigger.getBoundingClientRect().right + TOOLTIP_MAX_WIDTH > | ||
| window.innerWidth | ||
| ) { | ||
| content.classList.add("bottom-placement"); | ||
| } else { | ||
| content.classList.remove("bottom-placement"); | ||
| } | ||
| trigger.setAttribute("aria-expanded", "true"); | ||
| } | ||
|
|
||
| function hide(e) { | ||
| // container or trigger | ||
| let trigger = | ||
| e.target.querySelector(`${CONTAINER_SELECTOR} ${TRIGGER_SELECTOR}`) || | ||
| e.target; | ||
|
|
||
| if (e.type === "mouseleave") { | ||
| if (trigger === document.activeElement) { | ||
| return; | ||
| } | ||
| } | ||
| trigger.setAttribute("aria-expanded", "false"); | ||
| } | ||
|
|
||
| function keyboardHide(e) { | ||
| if (e.key === "Escape") { | ||
| hide(e); | ||
| } | ||
| } | ||
|
|
||
| [...tooltipContentList].map(contentEl => { | ||
| const controller = new AbortController(); | ||
| const { signal } = controller; | ||
| const triggerEl = contentEl.previousElementSibling; | ||
| const containerEl = triggerEl.parentElement; | ||
|
|
||
| triggerEl.addEventListener("mouseenter", show, { signal }); | ||
| triggerEl.addEventListener("focus", show, { signal }); | ||
| triggerEl.addEventListener("keypress", show, { signal }); | ||
| triggerEl.addEventListener("blur", hide, { signal }); | ||
| triggerEl.addEventListener("keydown", keyboardHide, { signal }); | ||
| containerEl.addEventListener("mouseleave", hide, { signal }); | ||
|
|
||
| return controller; | ||
| }); | ||
| } | ||
|
|
||
| EventHandler.on(window, "load.uds.tooltips", initTooltips); | ||
|
|
||
| export { initTooltips }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think nextElementSibling might be better here just in case nextSibling picks up any whitespace elements or line breaks