From b16c2c84a9f60b21125dbdb57b90138fb59d48ca Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Fri, 20 Dec 2024 17:19:45 -0500
Subject: [PATCH] feat: Initial popover support for tray positioning. (#5273)

---
 components/popover/demo/popover.html |  16 ++
 components/popover/popover-mixin.js  | 215 ++++++++++++++++++++++++++-
 components/popover/test/popover.js   |   6 +
 3 files changed, 234 insertions(+), 3 deletions(-)

diff --git a/components/popover/demo/popover.html b/components/popover/demo/popover.html
index c262e23501d..3df87a13cc5 100644
--- a/components/popover/demo/popover.html
+++ b/components/popover/demo/popover.html
@@ -273,6 +273,22 @@ <h2>Popover (trap-focus)</h2>
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Popover (mobile tray)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-button-subtle text="Open"></d2l-button-subtle>
+				<d2l-test-popover mobile-tray-location="inline-start" style="max-width: 400px;">
+					<d2l-link href="https://pirateipsum.me/" target="_blank">Pirate Ipsum</d2l-link>
+					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
+					<d2l-button-subtle text="Close"></d2l-button-subtle>
+				</d2l-test-popover>
+				<script>
+					window.wireUpPopover(document.currentScript.parentNode);
+				</script>
+			</template>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 	<script>
diff --git a/components/popover/popover-mixin.js b/components/popover/popover-mixin.js
index d08ec86f235..ded5418ef5b 100644
--- a/components/popover/popover-mixin.js
+++ b/components/popover/popover-mixin.js
@@ -12,6 +12,8 @@ const defaultPreferredPosition = {
 	span: 'all', // start, end, all
 	allowFlip: true
 };
+const minBackdropHeightMobile = 42;
+const minBackdropWidthMobile = 30;
 const pointerLength = 16;
 const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 const isSupported = ('popover' in HTMLElement.prototype);
@@ -30,6 +32,9 @@ export const PopoverMixin = superclass => class extends superclass {
 			_maxWidth: { state: true },
 			_minHeight: { state: true },
 			_minWidth: { state: true },
+			_mobile: { type: Boolean, reflect: true, attribute: '_mobile' },
+			_mobileBreakpoint: { state: true },
+			_mobileTrayLocation: { type: String, reflect: true, attribute: '_mobile-tray-location' },
 			_noAutoClose: { state: true },
 			_noAutoFit: { state: true },
 			_noAutoFocus: { state: true },
@@ -140,6 +145,58 @@ export const PopoverMixin = superclass => class extends superclass {
 				}
 			}
 
+			:host([_mobile][_mobile-tray-location]) .content-width {
+				position: fixed;
+				z-index: 1000;
+			}
+
+			:host([_mobile][_mobile-tray-location="inline-start"]) .content-width,
+			:host([_mobile][_mobile-tray-location="inline-end"]) .content-width {
+				inset-block-end: 0;
+				inset-block-start: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="inline-start"]) .content-width {
+				border-end-start-radius: 0;
+				border-start-start-radius: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="inline-end"]) .content-width {
+				border-end-end-radius: 0;
+				border-start-end-radius: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="block-end"]) .content-width {
+				border-end-end-radius: 0;
+				border-end-start-radius: 0;
+				inset-inline-start: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="inline-end"][opened]) .content-width {
+				inset-inline-end: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="inline-start"][opened]) .content-width {
+				inset-inline-start: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="block-end"][opened]) .content-width {
+				inset-block-end: 0;
+			}
+
+			:host([_mobile][_mobile-tray-location="inline-start"][opened]) .content-container,
+			:host([_mobile][_mobile-tray-location="inline-end"][opened]) .content-container {
+				height: 100vh;
+			}
+
+			:host([_mobile][_mobile-tray-location]) > .pointer {
+				display: none;
+			}
+
+			:host([_mobile][_mobile-tray-location][opened]) {
+				animation: none;
+			}
+
 			:host([_offscreen]) {
 				${_offscreenStyleDeclarations}
 			}
@@ -149,10 +206,12 @@ export const PopoverMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 		this.configure();
+		this._mobile = false;
 		this._useNativePopover = isSupported ? 'manual' : undefined;
 		this.#handleAncestorMutationBound = this.#handleAncestorMutation.bind(this);
 		this.#handleAutoCloseClickBound = this.#handleAutoCloseClick.bind(this);
 		this.#handleAutoCloseFocusBound = this.#handleAutoCloseFocus.bind(this);
+		this.#handleMobileResizeBound = this.#handleMobileResize.bind(this);
 		this.#handleResizeBound = this.#handleResize.bind(this);
 		this.#repositionBound = this.#reposition.bind(this);
 	}
@@ -161,6 +220,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		super.connectedCallback();
 		if (this._opened) {
 			this.#addAutoCloseHandlers();
+			this.#addMediaQueryHandlers();
 			this.#addRepositionHandlers();
 		}
 	}
@@ -168,6 +228,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#removeAutoCloseHandlers();
+		this.#removeMediaQueryHandlers();
 		this.#removeRepositionHandlers();
 		this.#clearDismissible();
 	}
@@ -181,6 +242,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this._previousFocusableAncestor = null;
 		this.#removeAutoCloseHandlers();
+		this.#removeMediaQueryHandlers();
 		this.#removeRepositionHandlers();
 		this.#clearDismissible();
 		await this.updateComplete; // wait before applying focus to opener
@@ -195,6 +257,8 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._maxWidth = properties?.maxWidth;
 		this._minHeight = properties?.minHeight;
 		this._minWidth = properties?.minWidth;
+		this._mobileBreakpoint = properties?.mobileBreakpoint ?? 616;
+		this._mobileTrayLocation = properties?.mobileTrayLocation;
 		this._noAutoClose = properties?.noAutoClose ?? false;
 		this._noAutoFit = properties?.noAutoFit ?? false;
 		this._noAutoFocus = properties?.noAutoFocus ?? false;
@@ -217,6 +281,8 @@ export const PopoverMixin = superclass => class extends superclass {
 	async open(applyFocus = true) {
 		if (this._opened) return;
 
+		this.#addMediaQueryHandlers();
+
 		this._rtl = document.documentElement.getAttribute('dir') === 'rtl';
 		this._applyFocus = applyFocus !== undefined ? applyFocus : true;
 		this._opened = true;
@@ -243,7 +309,16 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	renderPopover(content) {
 
-		const stylesMap = this.#getStyleMaps();
+		const mobileTrayLocation = this._mobile ? this._mobileTrayLocation : null;
+
+		let stylesMap;
+		if (mobileTrayLocation === 'block-end') {
+			stylesMap = this.#getMobileTrayBlockStyleMaps();
+		} else if (mobileTrayLocation === 'inline-start' || mobileTrayLocation === 'inline-end') {
+			stylesMap = this.#getMobileTrayInlineStyleMaps();
+		} else {
+			stylesMap = this.#getStyleMaps();
+		}
 		const widthStyle = stylesMap['width'];
 		const contentStyle = stylesMap['content'];
 
@@ -301,9 +376,11 @@ export const PopoverMixin = superclass => class extends superclass {
 		else return this.open(!this._noAutoFocus && applyFocus);
 	}
 
+	#mediaQueryList;
 	#handleAncestorMutationBound;
 	#handleAutoCloseClickBound;
 	#handleAutoCloseFocusBound;
+	#handleMobileResizeBound;
 	#handleResizeBound;
 	#repositionBound;
 
@@ -313,6 +390,12 @@ export const PopoverMixin = superclass => class extends superclass {
 		document.addEventListener('click', this.#handleAutoCloseClickBound, { capture: true });
 	}
 
+	#addMediaQueryHandlers() {
+		this.#mediaQueryList = window.matchMedia(`(max-width: ${this._mobileBreakpoint - 1}px)`);
+		this._mobile = this.#mediaQueryList.matches;
+		this.#mediaQueryList.addEventListener?.('change', this.#handleMobileResizeBound);
+	}
+
 	#addRepositionHandlers() {
 
 		const isScrollable = (node, prop) => {
@@ -434,6 +517,123 @@ export const PopoverMixin = superclass => class extends superclass {
 		return 'block-end';
 	}
 
+	#getMobileTrayBlockStyleMaps() {
+
+		let maxHeightOverride;
+		const availableHeight = Math.min(window.innerHeight, window.screen.height);
+
+		// default maximum height for bottom tray (42px margin)
+		const mobileTrayMaxHeightDefault = availableHeight - minBackdropHeightMobile;
+		if (this._maxHeight) {
+			// if maxHeight provided is smaller, use the maxHeight
+			maxHeightOverride = Math.min(mobileTrayMaxHeightDefault, this._maxHeight);
+		} else {
+			maxHeightOverride = mobileTrayMaxHeightDefault;
+		}
+		maxHeightOverride = `${maxHeightOverride}px`;
+
+		const widthOverride = '100vw';
+
+		const widthStyle = {
+			minWidth: widthOverride,
+			width: widthOverride,
+			maxHeight: maxHeightOverride,
+		};
+
+		const contentWidthStyle = {
+			// set width of content in addition to width container so header and footer borders are full width
+			width: widthOverride
+		};
+
+		const contentStyle = {
+			...contentWidthStyle,
+			maxHeight: maxHeightOverride,
+		};
+
+		return {
+			width: widthStyle,
+			content: contentStyle,
+		};
+	}
+
+	#getMobileTrayInlineStyleMaps() {
+
+		let maxWidthOverride = this._maxWidth;
+		const availableWidth = Math.min(window.innerWidth, window.screen.width);
+
+		// default maximum width for tray (30px margin)
+		const mobileTrayMaxWidthDefault = Math.min(availableWidth - minBackdropWidthMobile, 420);
+		if (maxWidthOverride) {
+			// if maxWidth provided is smaller, use the maxWidth
+			maxWidthOverride = Math.min(mobileTrayMaxWidthDefault, maxWidthOverride);
+		} else {
+			maxWidthOverride = mobileTrayMaxWidthDefault;
+		}
+
+		let minWidthOverride = this.minWidth;
+		// minimum size - 285px
+		const mobileTrayMinWidthDefault = 285;
+		if (minWidthOverride) {
+			// if minWidth provided is smaller, use the minumum width for tray
+			minWidthOverride = Math.max(mobileTrayMinWidthDefault, minWidthOverride);
+		} else {
+			minWidthOverride = mobileTrayMinWidthDefault;
+		}
+
+		// if no width property set, automatically size to maximum width
+		let widthOverride = this._width ? this._width : maxWidthOverride;
+		// ensure width is between minWidth and maxWidth
+		if (widthOverride && maxWidthOverride && widthOverride > (maxWidthOverride - 20)) widthOverride = maxWidthOverride - 20;
+		if (widthOverride && minWidthOverride && widthOverride < (minWidthOverride - 20)) widthOverride = minWidthOverride - 20;
+		maxWidthOverride = `${maxWidthOverride}px`;
+		minWidthOverride = `${minWidthOverride}px`;
+
+		const contentWidth = `${widthOverride + 18}px`;
+		// add 2 to content width since scrollWidth does not include border
+		const containerWidth = `${widthOverride + 20}px`;
+
+		const topOverride = (window.innerHeight > window.screen.height) ? window.pageYOffset : undefined;
+
+		let inlineEndOverride;
+		let inlineStartOverride;
+		if (this._mobileTrayLocation === 'inline-end') {
+			// On non-responsive pages, the innerWidth may be wider than the screen,
+			// override right to stick to right of viewport
+			inlineEndOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
+		} else if (this._mobileTrayLocation === 'inline-start') {
+			// On non-responsive pages, the innerWidth may be wider than the screen,
+			// override left to stick to left of viewport
+			inlineStartOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
+		}
+
+		if (minWidthOverride > maxWidthOverride) {
+			minWidthOverride = maxWidthOverride;
+		}
+		const widthStyle = {
+			maxWidth: maxWidthOverride,
+			minWidth: minWidthOverride,
+			width: containerWidth,
+			top: topOverride,
+			insetInlineStart: inlineStartOverride,
+			insetInlineEnd: inlineEndOverride
+		};
+
+		const contentWidthStyle = {
+			minWidth: minWidthOverride,
+			// set width of content in addition to width container so header and footer borders are full width
+			width: contentWidth,
+		};
+
+		const contentStyle = {
+			...contentWidthStyle,
+		};
+
+		return {
+			width : widthStyle,
+			content : contentStyle,
+		};
+	}
+
 	#getPointer() {
 		return this.shadowRoot.querySelector('.pointer');
 	}
@@ -567,8 +767,8 @@ export const PopoverMixin = superclass => class extends superclass {
 		};
 
 		return {
-			'width' : widthStyle,
-			'content' : contentStyle
+			width : widthStyle,
+			content : contentStyle
 		};
 	}
 
@@ -622,6 +822,11 @@ export const PopoverMixin = superclass => class extends superclass {
 		this.dispatchEvent(new CustomEvent('d2l-popover-focus-enter', { detail: { applyFocus: this._applyFocus } }));
 	}
 
+	async #handleMobileResize() {
+		this._mobile = this.#mediaQueryList.matches;
+		if (this._opened) await this.#position();
+	}
+
 	#handleResize() {
 		this.resize();
 	}
@@ -720,6 +925,10 @@ export const PopoverMixin = superclass => class extends superclass {
 		document.removeEventListener('click', this.#handleAutoCloseClickBound, { capture: true });
 	}
 
+	#removeMediaQueryHandlers() {
+		this.#mediaQueryList?.removeEventListener?.('change', this.#handleMobileResizeBound);
+	}
+
 	#removeRepositionHandlers() {
 		this._openerIntersectionObserver?.unobserve(this._opener);
 		this._scrollablesObserved?.forEach(node => {
diff --git a/components/popover/test/popover.js b/components/popover/test/popover.js
index 96704281473..f4cb6854124 100644
--- a/components/popover/test/popover.js
+++ b/components/popover/test/popover.js
@@ -27,6 +27,11 @@ class Popover extends PopoverMixin(LitElement) {
 			 * @type {number}
 			 */
 			minWidth: { type: Number, reflect: true, attribute: 'min-width' },
+			/**
+			 * Mobile tray location.
+			 * @type {'inline-start'|'inline-end'|'block-end'}
+			 */
+			mobileTrayLocation: { type: String, reflect: true, attribute: 'mobile-tray-location' },
 			/**
 			 * Whether to disable auto-close/light-dismiss
 			 * @type {boolean}
@@ -148,6 +153,7 @@ class Popover extends PopoverMixin(LitElement) {
 				noAutoClose: this.noAutoClose,
 				noAutoFocus: this.noAutoFocus,
 				noPointer: this.noPointer,
+				mobileTrayLocation: this.mobileTrayLocation,
 				position: { location: this.positionLocation, span: this.positionSpan },
 				trapFocus: this.trapFocus
 			});