EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-01-31 17:49:27 +01:00
parent 82e04a5599
commit 65de608aee
3 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/features/course/components/course-index/course-index.ts
View File

@ -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) {

3
src/core/features/course/components/format/core-course-format.html
View File

@ -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>

22
src/core/features/course/components/format/format.ts
View File

@ -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,
},
});