make sim selection dropdown click to open

ToxicKevinFerm · Mar 12, 2024 · c696c84 · c696c84
1 parent 70d363e
commit c696c84
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 59 deletions.
diff --git a/ui/core/components/sim_title_dropdown.ts b/ui/core/components/sim_title_dropdown.ts
@@ -118,7 +118,7 @@ export class SimTitleDropdown extends Component {
 
 		const fragment = document.createElement('fragment');
 		fragment.innerHTML = `
-			<a href="javascript:void(0)" class="sim-link ${textKlass}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+			<a href="javascript:void(0)" class="sim-link ${textKlass}" role="button" data-bs-toggle="dropdown" data-bs-trigger="click" aria-expanded="false">
 				<div class="sim-link-content">
 				<img src="${iconPath}" class="sim-link-icon">
 				<div class="d-flex flex-column">

diff --git a/ui/shared/bootstrap_overrides.ts b/ui/shared/bootstrap_overrides.ts
@@ -1,90 +1,105 @@
 import { Dropdown, Popover, Tooltip } from 'bootstrap';
+
 import { isDescendant } from './utils';
 
 Dropdown.Default.offset = [0, -1];
 //Dropdown.Default.display = "static";
 
-Tooltip.Default.trigger = "hover";
+Tooltip.Default.trigger = 'hover';
 
-let body = document.querySelector('body') as HTMLElement;
+const body = document.querySelector('body') as HTMLElement;
 
 function hasTouch() {
-	return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+	return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 }
 
 function hasHover() {
-	return window.matchMedia("(any-hover: hover)").matches;
+	return window.matchMedia('(any-hover: hover)').matches;
 }
 
 // Disable 'mouseover' to avoid needed to double click on mobile
 // Leaving 'mouseleave', however still allows dropdown to close when clicking new box
 if (!hasTouch() || hasHover()) {
 	// Custom dropdown event handlers for mouseover dropdowns
-	body.addEventListener('mouseover', event => {
-		let target = event.target as HTMLElement;
-		let toggle = target.closest('[data-bs-toggle=dropdown]');
-		if (toggle && !toggle.classList.contains('open-on-click')) {
-			let dropdown = Dropdown.getOrCreateInstance(toggle);
-			dropdown.show();
-		}
-	}, true);
+	body.addEventListener(
+		'mouseover',
+		event => {
+			const target = event.target as HTMLElement;
+			const toggle = target.closest('[data-bs-toggle=dropdown]:not([data-bs-trigger=click])');
+			if (toggle && !toggle.classList.contains('open-on-click')) {
+				const dropdown = Dropdown.getOrCreateInstance(toggle);
+				dropdown.show();
+			}
+		},
+		true,
+	);
 }
 
-body.addEventListener('mouseleave', event => {
-	let e = event as MouseEvent;
-	let target = event.target as HTMLElement;
-	let toggle = target.closest('[data-bs-toggle=dropdown]') as HTMLElement | null;
-	// Hide dropdowns when hovering off of the toggle, so long as the new target is not part of the dropdown as well
-	if (toggle) {
-		let dropdown = Dropdown.getOrCreateInstance(toggle);
-		let dropdownMenu = toggle.nextElementSibling as HTMLElement;
-		let relatedTarget = e.relatedTarget as HTMLElement;
-		if (relatedTarget == null || (!isDescendant(relatedTarget, dropdownMenu) && !isDescendant(relatedTarget, toggle)))
-			dropdown.hide();
-	}
+body.addEventListener(
+	'mouseleave',
+	event => {
+		const e = event as MouseEvent;
+		const target = event.target as HTMLElement;
+		const toggle = target.closest('[data-bs-toggle=dropdown]:not([data-bs-trigger=click])') as HTMLElement | null;
+		// Hide dropdowns when hovering off of the toggle, so long as the new target is not part of the dropdown as well
+		if (toggle) {
+			const dropdown = Dropdown.getOrCreateInstance(toggle);
+			const dropdownMenu = toggle.nextElementSibling as HTMLElement;
+			const relatedTarget = e.relatedTarget as HTMLElement;
+			if (relatedTarget == null || (!isDescendant(relatedTarget, dropdownMenu) && !isDescendant(relatedTarget, toggle))) dropdown.hide();
+		}
 
-	let dropdownMenu = target.closest('.dropdown-menu') as HTMLElement;
-	// Hide dropdowns when hovering off of the menu, so long as the new target is not part of the dropdown as well
-	if (dropdownMenu) {
-		let toggle = dropdownMenu.previousElementSibling as HTMLElement;
-		let dropdown = Dropdown.getOrCreateInstance(toggle);
-		let relatedTarget = e.relatedTarget as HTMLElement;
-		if (relatedTarget == null || (!isDescendant(relatedTarget, dropdownMenu) && e.relatedTarget != toggle))
-			dropdown.hide();
-	}
-}, true);
+		const dropdownMenu = target.closest('.dropdown-menu') as HTMLElement;
+		// Hide dropdowns when hovering off of the menu, so long as the new target is not part of the dropdown as well
+		if (dropdownMenu) {
+			const toggle = dropdownMenu.previousElementSibling as HTMLElement;
+			const dropdown = Dropdown.getOrCreateInstance(toggle);
+			const relatedTarget = e.relatedTarget as HTMLElement;
+			if (relatedTarget == null || (!isDescendant(relatedTarget, dropdownMenu) && e.relatedTarget != toggle)) dropdown.hide();
+		}
+	},
+	true,
+);
 
-let closePopovers = () => {
+const closePopovers = () => {
 	document.querySelectorAll('[data-bs-toggle="popover"][aria-describedby]').forEach(e => {
-		let p = Popover.getOrCreateInstance(e);
+		const p = Popover.getOrCreateInstance(e);
 		p.hide();
 	});
-}
-
-body.addEventListener('show.bs.popover', (event) => {
-	closePopovers();
+};
 
-	document.querySelectorAll('[data-bs-toggle="tooltip"][aria-describedby]').forEach(e => {
-		let t = Tooltip.getOrCreateInstance(e);
-		t.hide();
-	});
-
-	document.querySelectorAll('.tooltip').forEach(e => e.remove());
-}, true);
-
-body.addEventListener('show.bs.tooltip', (event) => {
-	document.querySelectorAll('[data-bs-toggle="tooltip"][aria-describedby]').forEach(e => {
-		let t = Tooltip.getOrCreateInstance(e);
-		t.hide();
-	});
-
-	document.querySelectorAll('.tooltip').forEach(e => e.remove());
-}, true);
+body.addEventListener(
+	'show.bs.popover',
+	event => {
+		closePopovers();
 
-document.onkeydown = (event) => {
+		document.querySelectorAll('[data-bs-toggle="tooltip"][aria-describedby]').forEach(e => {
+			const t = Tooltip.getOrCreateInstance(e);
+			t.hide();
+		});
+
+		document.querySelectorAll('.tooltip').forEach(e => e.remove());
+	},
+	true,
+);
+
+body.addEventListener(
+	'show.bs.tooltip',
+	event => {
+		document.querySelectorAll('[data-bs-toggle="tooltip"][aria-describedby]').forEach(e => {
+			const t = Tooltip.getOrCreateInstance(e);
+			t.hide();
+		});
+
+		document.querySelectorAll('.tooltip').forEach(e => e.remove());
+	},
+	true,
+);
+
+document.onkeydown = event => {
 	event = event || window.event;
 
 	if (event.key == 'Escape') {
 		closePopovers();
 	}
-}
+};