MOBILE-3915 course: Expand selected or scrolled section on course index

src/core/features/course/components/course-index/course-index.ts

@@ -69,6 +69,10 @@ export class CoreCourseCourseIndexComponent implements OnInit {
         if (!formatOptions || formatOptions.completionusertracked === false) {
             return;
         }
+
+        // Collapse all sections first.
+        this.sections.forEach((section) => section.expanded = false);
+
         const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);
         currentSection.highlighted = true;
         if (this.selectedId === undefined) {

src/core/features/course/components/format/core-course-format.html

@@ -65,7 +65,8 @@
 
 <!-- Template to render a section. -->
 <ng-template #sectionTemplate let-section="section">
-    <section *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId">
+    <section *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId"
+        class="section-wrapper" [id]="section.id">
         <ion-item-divider class="course-section ion-text-wrap" color="light"
             [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
             <ion-icon name="fas-folder" aria-label="hidden" slot="start"></ion-icon>

src/core/features/course/components/format/format.ts

@@ -283,12 +283,32 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
      * Display the course index modal.
      */
     async openCourseIndex(): Promise<void> {
+        let selectedId = this.selectedSection?.id;
+
+        if (selectedId == this.allSectionsId) {
+            // Check current scrolled section.
+            const allSectionElements: NodeListOf<HTMLElement> =
+                this.elementRef.nativeElement.querySelectorAll('section.section-wrapper');
+
+            const scroll = await this.content.getScrollElement();
+            const containerTop = scroll.getBoundingClientRect().top;
+
+            const element = Array.from(allSectionElements).find((element) => {
+                const position = element.getBoundingClientRect();
+
+                // The bottom is inside the container or lower.
+                return position.bottom >= containerTop;
+            });
+
+            selectedId = Number(element?.getAttribute('id')) || undefined;
+        }
+
         const data = await CoreDomUtils.openModal<CoreCourseIndexSectionWithModule>({
             component: CoreCourseCourseIndexComponent,
             componentProps: {
                 course: this.course,
                 sections: this.sections,
-                selectedId: this.selectedSection?.id,
+                selectedId: selectedId,
             },
         });