zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-21 10:16:13 +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

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

@ -25,6 +25,8 @@
/** /**
* Edits made for dotgov project: * Edits made for dotgov project:
* - tooltip exposed to window to be accessible in other js files * - 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 * - modal exposed to window to be accessible in other js files
* - fixed bug in createHeaderButton which added newlines to header button tooltips * - 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 tooltipStyle = window.getComputedStyle(tooltipBody);
const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed'; const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
@ -5964,6 +5966,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger); const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger); const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("top"); setPositionClass("top");
// DOTGOV: updated logic for position:fixed
e.style.left = targetLeft; // center the element 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 // apply our margins based on the offset
@ -5978,6 +5982,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e); resetPositionStyles(e);
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger); const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("bottom"); setPositionClass("bottom");
// DOTGOV: updated logic for position:fixed
if (tooltipIsFixedPositioned){ if (tooltipIsFixedPositioned){
e.style.top = triggerRect.bottom+'px'; e.style.top = triggerRect.bottom+'px';
} }
@ -5993,6 +5999,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e); resetPositionStyles(e);
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger); const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
setPositionClass("right"); setPositionClass("right");
// DOTGOV: updated logic for position:fixed
e.style.top = targetTop; e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`; 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 // we have to check for some utility margins
const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger); const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
setPositionClass("left"); setPositionClass("left");
// DOTGOV: updated logic for position:fixed
e.style.top = targetTop; e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`; 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 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"); tooltipBody.setAttribute("aria-hidden", "true");
// place the text in the tooltip // 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 = ` tooltipBody.innerHTML = `
<div class="usa-tooltip__content"> <div class="usa-tooltip__content">
${tooltipContent} ${tooltipContent}