zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-05 17:28:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

Cleanup and comments

Browse source
This commit is contained in:
CocoByte 2024-10-03 11:53:48 -06:00
parent e57cf6e39a
commit 31df8d9781
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
2 changed files with 64 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5938,12 +5938,21 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
return offset;
};
/*
DOTGOV: Added calculations to allow flexible position settings of tooltip
*/
const tooltipStyle = window.getComputedStyle(tooltipBody);
const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
const triggerRect = tooltipTrigger.getBoundingClientRect();
const element_left = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
const element_top = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
const triggerRect = tooltipTrigger.getBoundingClientRect(); //detect if tooltip is set to "fixed" position
const targetLeft = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
const targetTop = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
if (tooltipIsFixedPositioned) {
// DOTGOV: Add listener to handle scrolling if tooltip position = 'fixed'
// (so that the tooltip doesn't appear to stick to the screen)
window.addEventListener('scroll', function() {
findBestPosition(tooltipBody)
});
}
/**
* Positions tooltip at the top
* @param {HTMLElement} e - this is the tooltip body
@ -5955,7 +5964,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("top");
e.style.left = element_left; // 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
// apply our margins based on the offset
e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
@ -5972,7 +5981,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
if (tooltipIsFixedPositioned){
e.style.top = triggerRect.bottom+'px';
}
e.style.left = element_left;
e.style.left = targetLeft;
e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
};
@ -5984,7 +5993,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e);
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
setPositionClass("right");
e.style.top = element_top;
e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
;
e.style.margin = `-${topMargin / 2}px 0 0 0`;
@ -6001,7 +6010,7 @@ 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");
e.style.top = element_top;
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
};
@ -6027,9 +6036,6 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
if (i < positions.length) {
const pos = positions[i];
pos(element);
const rect = element.getBoundingClientRect();
console.log("***RECTANGLE**** "+rect.width);
if (!isElementInViewport(element)) {
// eslint-disable-next-line no-param-reassign
@ -6142,11 +6148,14 @@ const setUpAttributes = tooltipTrigger => {
tooltipBody.setAttribute("aria-hidden", "true");
// place the text in the tooltip
// DOTGOV: nest elements for tooltip to prevent clipping (works around viewport calcs)
// DOTGOV: nest the text element within a paragraph to prevent clipping.
tooltipBody.innerHTML = `
<p>
${tooltipContent}
</p>`
<div class="usa-tooltip__content">
${tooltipContent}
n oainef aoieiu aw eghr hilabiuyabewisofuha libfasuiybefiae ruhawioeufh aiwfh iahf iuahefailusef aiwsfbali wefbaiue fbaliuefbalieuwfhauiowera jhfasiuf aiuwenail ewfasdn fiausfn iuafia ewfn ia fisfn iuf niuwnf iwenfailuhfiauefn aliefnaifnialsudnf aiufnailufnailefialenf ailefia fa filanf ilaefiunaifalfn ailfnialuefn ialuefnailf lifniasn filsa fnialn fila fi af ai fniaufn ilaufn ial fia fnila fiua fnilaefn ialuefn ial efailf ia fnial fia fniu ialf nailf a fal f Before this domain can be used, you’ll need to add name server addresses.
</div>`
// tooltipBody.textContent = tooltipContent;
return {

62
src/registrar/assets/sass/_theme/_tooltips.scss
View file

@ -29,27 +29,45 @@
font-weight: 400 !important;
}
.usa-tooltip__body > p {
margin-top: 0;
width: 50vw;
text-wrap: wrap;
text-align: center;
font-size: .9rem;
margin-block-start: 0em;
margin-block-end: 0em;
max-width: fit-content;
@include at-media('tablet') {
width: 70vw;
.domains__table {
/*
Trick tooltips in the domains table to do 2 things...
1 - Shrink itself to a padded viewport window
(override width and wrapping properties in key areas to constrain tooltip size)
2 - NOT be clipped by the table's scrollable view
(Set tooltip position to "fixed", which prevents tooltip from being clipped by parent
containers. Fixed-position detection was added to uswds positioning logic to update positioning
calculations accordingly.)
*/
.usa-tooltip__body {
white-space: inherit;
max-width: fit-content; // prevent adjusted widths from being larger than content
position: fixed; // prevents clipping by parent containers
}
/*
Override width adustments in this dynamically added class
(this is original to the javascript handler as a way to shrink tooltip contents within the viewport,
but is insufficient for our needs. We cannot simply override its properties
because the logic surrounding its dynamic appearance in the DOM does not account
for parent containers (basically, this class isn't in the DOM when we need it).
Intercept .usa-tooltip__content instead and nullify the effects of
.usa-tooltip__body--wrap to prevent conflicts)
*/
.usa-tooltip__body--wrap {
min-width: inherit;
width: inherit;
}
/*
Add width and wrapping to tooltip content in order to confine it to a smaller viewport window.
*/
.usa-tooltip__content {
width: 50vw;
text-wrap: wrap;
text-align: center;
font-size: inherit; //inherit tooltip fontsize of .93rem
max-width: fit-content;
@include at-media('tablet') {
width: 70vw;
}
}
}
.usa-tooltip__body {
white-space: inherit;
max-width: fit-content;
position: fixed;
}
.usa-tooltip__body--wrap {
min-width: inherit;
width: inherit;
}