Make help-info collapsibles close others upon openmutex-help-collapsibles

Scrolling to top seems unreliable for some reason

1 files changed, 24 insertions, 6 deletions

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 5764f3e..d380306 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		w-[90%] max-w-[16cm] max-h-[80%] overflow-auto" :style="styles">
+		w-[90%] max-w-[16cm] max-h-[80%] overflow-auto scroll-smooth" :style="styles" ref="contentArea">
 		<close-icon @click.stop="onClose" ref="closeIcon"
 			class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold pt-2 pb-1">Help</h1>
 		<div class="flex flex-col gap-2 p-2">
-			<s-collapsible :class="scClasses">
+			<s-collapsible :class="scClasses" v-model="collapsiblesOpen[0]" @open="onCollapsibleOpen(0)">
 				<template #summary="slotProps">
 					<div :class="scSummaryClasses">
 						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
@@ -43,7 +43,7 @@
 					</div>
 				</template>
 			</s-collapsible>
-			<s-collapsible :class="scClasses">
+			<s-collapsible :class="scClasses" v-model="collapsiblesOpen[1]" @open="onCollapsibleOpen(1)">
 				<template #summary="slotProps">
 					<div :class="scSummaryClasses">
 						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
@@ -107,7 +107,7 @@
 					</div>
 				</template>
 			</s-collapsible>
-			<s-collapsible :class="scClasses">
+			<s-collapsible :class="scClasses" v-model="collapsiblesOpen[2]" @open="onCollapsibleOpen(2)">
 				<template #summary="slotProps">
 					<div :class="scSummaryClasses">
 						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
@@ -225,7 +225,7 @@
 					</div>
 				</template>
 			</s-collapsible>
-			<s-collapsible :class="scClasses">
+			<s-collapsible :class="scClasses" v-model="collapsiblesOpen[3]" @open="onCollapsibleOpen(3)">
 				<template #summary="slotProps">
 					<div :class="scSummaryClasses">
 						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
@@ -334,7 +334,7 @@
 					</div>
 				</template>
 			</s-collapsible>
-			<s-collapsible :class="scClasses">
+			<s-collapsible :class="scClasses" v-model="collapsiblesOpen[4]" @open="onCollapsibleOpen(4)">
 				<template #summary="slotProps">
 					<div :class="scSummaryClasses">
 						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
@@ -431,6 +431,11 @@ export default defineComponent({
 		tutOpen: {type: Boolean, default: false},
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
+	data(){
+		return {
+			collapsiblesOpen: Array(5).fill(false),
+		};
+	},
 	computed: {
 		styles(): Record<string,string> {
 			return {
@@ -476,6 +481,19 @@ export default defineComponent({
 			this.$emit('start-tutorial');
 			this.$emit('close');
 		},
+		onCollapsibleOpen(idx: number){
+			this.collapsiblesOpen.forEach((b, i) => {
+				if (i != idx && b == true){
+					this.collapsiblesOpen[i] = false;
+				}
+			});
+			this.$nextTick(() => {
+				let el = this.$refs.contentArea;
+				if (el.scrollHeight > el.clientHeight){
+					el.scrollTo(0, 0);
+				}
+			});
+		},
 	},
 	components: {SButton, SCollapsible, CloseIcon, DownIcon, ExternalLinkIcon, },
 	emits: ['close', 'start-tutorial', ],