zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-25 03:58:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

More comments

Browse source
This commit is contained in:
CocoByte 2024-10-03 12:01:40 -06:00
parent 31df8d9781
commit 8c1d0430eb
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/registrar/assets/js/uswds-edited.js
View file

@ -25,6 +25,8 @@
/**
* Edits made for dotgov project:
* - tooltip exposed to window to be accessible in other js files
* - tooltip postiioning logic updated to allow position:fixed
* - tooltip dynamic content updated to include nested element (for better sizing control)
* - modal exposed to window to be accessible in other js files
* - fixed bug in createHeaderButton which added newlines to header button tooltips
*/
@ -5939,7 +5941,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
};
/*
DOTGOV: Added calculations to allow flexible position settings of tooltip
DOTGOV: Tooltip postiioning logic updated to allow position:fixed
*/
const tooltipStyle = window.getComputedStyle(tooltipBody);
const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
@ -5964,8 +5966,10 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("top");
// DOTGOV: updated logic for position:fixed
e.style.left = targetLeft; // center the element
e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
// apply our margins based on the offset
e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
};
@ -5978,6 +5982,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e);
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("bottom");
// DOTGOV: updated logic for position:fixed
if (tooltipIsFixedPositioned){
e.style.top = triggerRect.bottom+'px';
}
@ -5993,6 +5999,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e);
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
setPositionClass("right");
// DOTGOV: updated logic for position:fixed
e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
;
@ -6010,6 +6018,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
// we have to check for some utility margins
const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
setPositionClass("left");
// DOTGOV: updated logic for position:fixed
e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
@ -6148,7 +6158,7 @@ const setUpAttributes = tooltipTrigger => {
tooltipBody.setAttribute("aria-hidden", "true");
// place the text in the tooltip
// DOTGOV: nest the text element within a paragraph to prevent clipping.
// DOTGOV: nest the text element to allow us creater control over width and wrapping behavior
tooltipBody.innerHTML = `
<div class="usa-tooltip__content">
${tooltipContent}