From 1d89206108856ad05ea0bdcd54f9a2c8e1ff2fa8 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 18 Oct 2023 15:53:53 -0500 Subject: [PATCH 1/4] fix(dropdown): add left and right repositioning for the rails dropdown --- packages/sage-system/lib/dropdown.js | 55 ++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 15 deletions(-) diff --git a/packages/sage-system/lib/dropdown.js b/packages/sage-system/lib/dropdown.js index 53fc894565..2960dbfacf 100644 --- a/packages/sage-system/lib/dropdown.js +++ b/packages/sage-system/lib/dropdown.js @@ -191,48 +191,73 @@ Sage.dropdown = (function () { function positionElement(el) { let direction = null; - + // Elements const button = el; - const panel = el.lastElementChild + const panel = el.lastElementChild; const win = panel.ownerDocument.defaultView; const docEl = window.document.documentElement; - + panel.style.top = ''; // resets the style - + panel.style.left = ''; // resets the style + // Dimensions const buttonDimensions = button.getBoundingClientRect(); const panelDimensions = panel.getBoundingClientRect(); - + const panelNewLoc = { - top: ( buttonDimensions.height / 2 ) + panelDimensions.height - } - + top: (buttonDimensions.height / 2) + panelDimensions.height, + left: (buttonDimensions.width / 2) + panelDimensions.width, + }; + const viewport = { top: docEl.scrollTop, bottom: window.pageYOffset + docEl.clientHeight, - } - + left: docEl.scrollLeft, + right: window.pageXOffset + docEl.clientWidth, + }; + const offset = { top: panelDimensions.top + win.pageYOffset, left: panelDimensions.left + win.pageXOffset, - bottom: (panelDimensions.top + win.pageYOffset) + bottom: (panelDimensions.top + win.pageYOffset), + right: (panelDimensions.left + win.pageXOffset), }; - + const panelHeight = getHeight(panel); - const enoughSpaceAbove = viewport.top < ( offset.top + panelHeight); + const panelWidth = panelDimensions.width; + const enoughSpaceAbove = viewport.top < (offset.top + panelHeight); const enoughSpaceBelow = viewport.bottom > (offset.bottom + panelHeight); - + const enoughSpaceLeft = viewport.left < (offset.left + panelWidth); + const enoughSpaceRight = viewport.right > (offset.right + panelWidth); + if (!enoughSpaceBelow && enoughSpaceAbove) { direction = 'above'; } else if (!enoughSpaceAbove && enoughSpaceBelow) { direction = 'below'; + } else if (!enoughSpaceRight && enoughSpaceLeft) { + direction = 'left'; + } else if (!enoughSpaceLeft && enoughSpaceRight) { + direction = 'right'; } - if ( direction == 'above') { + console.log('direction: ', direction); + + if (direction === 'above') { panel.style.top = `-${panelNewLoc.top}px`; + } else if (direction === 'below') { + // panel.style.top = 'inherit'; + // panel.style.bottom = 0; + } else if (direction === 'left') { + // panel.style.left = `-${panelNewLoc.left}px`; + panel.style.left = 'inherit'; + panel.style.right = 0; + } else if (direction === 'right') { + panel.style.left = 0; + panel.style.right = 'inherit'; } } + function open(el) { el.setAttribute("aria-expanded", "true"); positionElement(el); From 3526e82ff2d8160854b55e6ad1df5b27d90221f7 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 18 Oct 2023 16:28:31 -0500 Subject: [PATCH 2/4] fix(dropdown rails): keep dropdown content on the screen --- packages/sage-system/lib/dropdown.js | 40 +++++++++++++++++----------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/sage-system/lib/dropdown.js b/packages/sage-system/lib/dropdown.js index 2960dbfacf..faad472a09 100644 --- a/packages/sage-system/lib/dropdown.js +++ b/packages/sage-system/lib/dropdown.js @@ -190,7 +190,8 @@ Sage.dropdown = (function () { } function positionElement(el) { - let direction = null; + let directionX = null; + let directionY = null; // Elements const button = el; @@ -200,6 +201,7 @@ Sage.dropdown = (function () { panel.style.top = ''; // resets the style panel.style.left = ''; // resets the style + panel.style.right = ''; // resets the style // Dimensions const buttonDimensions = button.getBoundingClientRect(); @@ -231,31 +233,37 @@ Sage.dropdown = (function () { const enoughSpaceLeft = viewport.left < (offset.left + panelWidth); const enoughSpaceRight = viewport.right > (offset.right + panelWidth); + // Check if there is enough space to the top or bottom if (!enoughSpaceBelow && enoughSpaceAbove) { - direction = 'above'; + directionY = 'above'; } else if (!enoughSpaceAbove && enoughSpaceBelow) { - direction = 'below'; - } else if (!enoughSpaceRight && enoughSpaceLeft) { - direction = 'left'; - } else if (!enoughSpaceLeft && enoughSpaceRight) { - direction = 'right'; + directionY = 'below'; } - - console.log('direction: ', direction); - if (direction === 'above') { + if (directionY === 'above') { panel.style.top = `-${panelNewLoc.top}px`; - } else if (direction === 'below') { - // panel.style.top = 'inherit'; - // panel.style.bottom = 0; - } else if (direction === 'left') { - // panel.style.left = `-${panelNewLoc.left}px`; + } else if (directionY === 'below') { + // find test case + // panel.style.top = 0; + } + + // Check if there is enough space to the left or right + if (!enoughSpaceRight && enoughSpaceLeft) { + directionX = 'left'; + } else if (!enoughSpaceLeft && enoughSpaceRight) { + directionX = 'right'; + } + + if (directionX === 'left') { panel.style.left = 'inherit'; panel.style.right = 0; - } else if (direction === 'right') { + } else if (directionX === 'right') { panel.style.left = 0; panel.style.right = 'inherit'; } + + console.log('directionX', directionX); + console.log('directionY', directionY); } function open(el) { From 7d38b2cfeaf55a93e54179e1a0684b1102471ef1 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 18 Oct 2023 16:57:49 -0500 Subject: [PATCH 3/4] fix(dropdown react): add horizontal repositioning to unpinned dropdowns --- packages/sage-react/lib/Dropdown/Dropdown.jsx | 35 ++++++++++++++++--- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/packages/sage-react/lib/Dropdown/Dropdown.jsx b/packages/sage-react/lib/Dropdown/Dropdown.jsx index c0cc2ca9a8..1da670778b 100644 --- a/packages/sage-react/lib/Dropdown/Dropdown.jsx +++ b/packages/sage-react/lib/Dropdown/Dropdown.jsx @@ -77,7 +77,8 @@ export const Dropdown = ({ }; const positionElement = () => { - let direction = null; + let directionX = null; + let directionY = null; const el = wrapperRef.current; // Elements const button = el; @@ -90,11 +91,13 @@ export const Dropdown = ({ const panelHeight = getHeight(panel); const enoughSpaceAbove = panelHeight + buttonDimensions.bottom > window.innerHeight; const enoughSpaceBelow = panelHeight + buttonDimensions.bottom < window.innerHeight; + const enoughSpaceLeft = panelDimensions.width < buttonDimensions.left; + const enoughSpaceRight = panelDimensions.width < window.innerWidth - buttonDimensions.right; if (!enoughSpaceBelow && enoughSpaceAbove) { - direction = 'above'; + directionY = 'above'; } else if (!enoughSpaceAbove && enoughSpaceBelow) { - direction = 'below'; + directionY = 'below'; } const rect = wrapperRef.current.getBoundingClientRect(); const coords = { @@ -112,7 +115,7 @@ export const Dropdown = ({ coords.left = 'initial'; } - if (direction === 'above') { + if (directionY === 'above') { coords.top = ((buttonDimensions.height / 4) + panelDimensions.height) * -1; coords.left = 'initial'; if (isPinned) { @@ -121,6 +124,30 @@ export const Dropdown = ({ } } + // Check if there is enough space to the left or right + // CHECK ISPINNED + if (!enoughSpaceRight && enoughSpaceLeft) { + directionX = 'left'; + } else if (!enoughSpaceLeft && enoughSpaceRight) { + directionX = 'right'; + } + + if (directionX === 'left') { + coords.left = 'initial'; + coords.right = 0; + if (isPinned) { + coords.right = window.innerWidth - buttonDimensions.right + inlineBoxOffset; + } + } + + if (directionX === 'right') { + coords.left = 0; + coords.right = 'initial'; + if (isPinned) { + coords.left = buttonDimensions.left + inlineBoxOffset; + } + } + setPanelCoords(coords); }; From 80c7d50f3edd739966e0ddbcaf5b509338a9e5fe Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Thu, 19 Oct 2023 14:16:59 -0500 Subject: [PATCH 4/4] chore(dropdown): remove whitespace and console logs --- packages/sage-system/lib/dropdown.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/sage-system/lib/dropdown.js b/packages/sage-system/lib/dropdown.js index faad472a09..f1a35d6171 100644 --- a/packages/sage-system/lib/dropdown.js +++ b/packages/sage-system/lib/dropdown.js @@ -198,7 +198,7 @@ Sage.dropdown = (function () { const panel = el.lastElementChild; const win = panel.ownerDocument.defaultView; const docEl = window.document.documentElement; - + panel.style.top = ''; // resets the style panel.style.left = ''; // resets the style panel.style.right = ''; // resets the style @@ -206,7 +206,7 @@ Sage.dropdown = (function () { // Dimensions const buttonDimensions = button.getBoundingClientRect(); const panelDimensions = panel.getBoundingClientRect(); - + const panelNewLoc = { top: (buttonDimensions.height / 2) + panelDimensions.height, left: (buttonDimensions.width / 2) + panelDimensions.width, @@ -225,7 +225,7 @@ Sage.dropdown = (function () { bottom: (panelDimensions.top + win.pageYOffset), right: (panelDimensions.left + win.pageXOffset), }; - + const panelHeight = getHeight(panel); const panelWidth = panelDimensions.width; const enoughSpaceAbove = viewport.top < (offset.top + panelHeight); @@ -239,7 +239,7 @@ Sage.dropdown = (function () { } else if (!enoughSpaceAbove && enoughSpaceBelow) { directionY = 'below'; } - + if (directionY === 'above') { panel.style.top = `-${panelNewLoc.top}px`; } else if (directionY === 'below') { @@ -261,9 +261,6 @@ Sage.dropdown = (function () { panel.style.left = 0; panel.style.right = 'inherit'; } - - console.log('directionX', directionX); - console.log('directionY', directionY); } function open(el) {