From c499d36d11089f3c9667b784b4be5a2f4f180ea5 Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Tue, 4 Apr 2023 16:40:39 -0700 Subject: [PATCH 1/8] Make popovers to switch to appearing on the left of the relevant element instead of the default right when there is not enough space on the right. --- src/NuGetGallery/Scripts/gallery/common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index cfed8a112e..5d28100117 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -467,7 +467,7 @@ var popoverHideTimeMS = 2000; var popoverFadeTimeMS = 200; - popoverElement.popover({ trigger: 'hover' }); + popoverElement.popover({ trigger: 'hover', placement: 'auto right' }); popoverElement.click(popoverShowAndHide); popoverElement.focus(popoverShowAndHide); popoverElement.keyup(function (event) { From 42d4237458e26445bca7658e4498c1fee2bcb3f1 Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Tue, 4 Apr 2023 18:43:14 -0700 Subject: [PATCH 2/8] More flexible setup. --- src/NuGetGallery/Scripts/gallery/common.js | 19 ++++++++++++++++--- .../Scripts/gallery/page-display-package.js | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index 5d28100117..360a6d1571 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -460,14 +460,27 @@ } }; + nuget.setPopoversAutoRight = function () { + setPopoversInternal(this, 'auto right'); + } + nuget.setPopovers = function () { - var popoverElement = $(this); - var popoverElementDom = this; + setPopoversInternal(this); + } + + function setPopoversInternal(element, placement) { + var popoverElement = $(element); + var popoverElementDom = element; var originalLabel = popoverElementDom.ariaLabel; var popoverHideTimeMS = 2000; var popoverFadeTimeMS = 200; - popoverElement.popover({ trigger: 'hover', placement: 'auto right' }); + var popoverOptions = { trigger: 'hover' }; + if (placement) { + popoverOptions.placement = placement; + } + + popoverElement.popover(popoverOptions); popoverElement.click(popoverShowAndHide); popoverElement.focus(popoverShowAndHide); popoverElement.keyup(function (event) { diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js index dbc1c36bb3..fd15ea717c 100644 --- a/src/NuGetGallery/Scripts/gallery/page-display-package.js +++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js @@ -196,5 +196,5 @@ $(".reserved-indicator").each(window.nuget.setPopovers); $(".framework-badge-asset").each(window.nuget.setPopovers); - $(".package-warning-icon").each(window.nuget.setPopovers); + $(".package-warning-icon").each(window.nuget.setPopoversAutoRight); }); From 133397f3daf65f49903930d63677684322ef0875 Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Tue, 4 Apr 2023 19:07:22 -0700 Subject: [PATCH 3/8] Using body as a popover container. --- src/NuGetGallery/Scripts/gallery/common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index 360a6d1571..497aef76a2 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -475,7 +475,7 @@ var popoverHideTimeMS = 2000; var popoverFadeTimeMS = 200; - var popoverOptions = { trigger: 'hover' }; + var popoverOptions = { trigger: 'hover', container: 'body' }; if (placement) { popoverOptions.placement = placement; } From 2ef596cd62d9af6411e723dc7aac9ce8f1630229 Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Wed, 5 Apr 2023 09:48:13 -0700 Subject: [PATCH 4/8] Body container for popovers. --- src/NuGetGallery/Scripts/gallery/common.js | 6 +----- src/NuGetGallery/Scripts/gallery/page-display-package.js | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index 497aef76a2..04ef78f4b0 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -460,12 +460,8 @@ } }; - nuget.setPopoversAutoRight = function () { - setPopoversInternal(this, 'auto right'); - } - nuget.setPopovers = function () { - setPopoversInternal(this); + setPopoversInternal(this, 'auto right'); } function setPopoversInternal(element, placement) { diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js index fd15ea717c..dbc1c36bb3 100644 --- a/src/NuGetGallery/Scripts/gallery/page-display-package.js +++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js @@ -196,5 +196,5 @@ $(".reserved-indicator").each(window.nuget.setPopovers); $(".framework-badge-asset").each(window.nuget.setPopovers); - $(".package-warning-icon").each(window.nuget.setPopoversAutoRight); + $(".package-warning-icon").each(window.nuget.setPopovers); }); From 84edea8db48bfb66fa156a982b5d7aec5e80ffbe Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Wed, 5 Apr 2023 14:22:42 -0700 Subject: [PATCH 5/8] Limiting popover update only to the reported case. --- src/NuGetGallery/Scripts/gallery/common.js | 6 +++++- src/NuGetGallery/Scripts/gallery/page-display-package.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index 04ef78f4b0..497aef76a2 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -460,10 +460,14 @@ } }; - nuget.setPopovers = function () { + nuget.setPopoversAutoRight = function () { setPopoversInternal(this, 'auto right'); } + nuget.setPopovers = function () { + setPopoversInternal(this); + } + function setPopoversInternal(element, placement) { var popoverElement = $(element); var popoverElementDom = element; diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js index dbc1c36bb3..fd15ea717c 100644 --- a/src/NuGetGallery/Scripts/gallery/page-display-package.js +++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js @@ -196,5 +196,5 @@ $(".reserved-indicator").each(window.nuget.setPopovers); $(".framework-badge-asset").each(window.nuget.setPopovers); - $(".package-warning-icon").each(window.nuget.setPopovers); + $(".package-warning-icon").each(window.nuget.setPopoversAutoRight); }); From adf08ec481391ab7f679a2a06168ae306137a01e Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Wed, 5 Apr 2023 15:51:25 -0700 Subject: [PATCH 6/8] Custom placement logic. --- src/NuGetGallery/Scripts/gallery/common.js | 18 ++++++++++++++---- .../Scripts/gallery/page-display-package.js | 2 +- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index 497aef76a2..9f7c678541 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -460,12 +460,22 @@ } }; - nuget.setPopoversAutoRight = function () { - setPopoversInternal(this, 'auto right'); + nuget.setPopovers = function () { + setPopoversInternal(this, rightWithVerticalFallback); } - nuget.setPopovers = function () { - setPopoversInternal(this); + function rightWithVerticalFallback(popoverElement, ownerElement) { + let ownerBoundingBox = ownerElement.getBoundingClientRect(); + const pixelsOnRight = window.innerWidth - ownerBoundingBox.right; + if (pixelsOnRight > 150) { + return 'right'; + } + const pixelsOnTop = ownerBoundingBox.top; + if (pixelsOnTop > 100) { + return 'top'; + } + + return 'bottom'; } function setPopoversInternal(element, placement) { diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js index fd15ea717c..dbc1c36bb3 100644 --- a/src/NuGetGallery/Scripts/gallery/page-display-package.js +++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js @@ -196,5 +196,5 @@ $(".reserved-indicator").each(window.nuget.setPopovers); $(".framework-badge-asset").each(window.nuget.setPopovers); - $(".package-warning-icon").each(window.nuget.setPopoversAutoRight); + $(".package-warning-icon").each(window.nuget.setPopovers); }); From 8a608a1437cf5bd999c05deab756a93384741f05 Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Thu, 6 Apr 2023 16:47:47 -0700 Subject: [PATCH 7/8] Constants for magic numbers. --- src/NuGetGallery/Scripts/gallery/common.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index 9f7c678541..c96a3841e4 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -465,13 +465,17 @@ } function rightWithVerticalFallback(popoverElement, ownerElement) { + // Both numbers below are in CSS pixels. + const MinSpaceOnRight = 150; + const MinSpaceOnTop = 100; + let ownerBoundingBox = ownerElement.getBoundingClientRect(); - const pixelsOnRight = window.innerWidth - ownerBoundingBox.right; - if (pixelsOnRight > 150) { + const spaceOnRight = window.innerWidth - ownerBoundingBox.right; + if (spaceOnRight > MinSpaceOnRight) { return 'right'; } - const pixelsOnTop = ownerBoundingBox.top; - if (pixelsOnTop > 100) { + const spaceOnTop = ownerBoundingBox.top; + if (spaceOnTop > MinSpaceOnTop) { return 'top'; } From 4588ce130826a544970693b920c341bf1aefff53 Mon Sep 17 00:00:00 2001 From: Andrei Grigorev Date: Fri, 7 Apr 2023 10:53:33 -0700 Subject: [PATCH 8/8] let -> const. --- src/NuGetGallery/Scripts/gallery/common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js index c96a3841e4..10e973ffc7 100644 --- a/src/NuGetGallery/Scripts/gallery/common.js +++ b/src/NuGetGallery/Scripts/gallery/common.js @@ -469,7 +469,7 @@ const MinSpaceOnRight = 150; const MinSpaceOnTop = 100; - let ownerBoundingBox = ownerElement.getBoundingClientRect(); + const ownerBoundingBox = ownerElement.getBoundingClientRect(); const spaceOnRight = window.innerWidth - ownerBoundingBox.right; if (spaceOnRight > MinSpaceOnRight) { return 'right';