MOBILE-3814 collapsible: Add appear on bottom attribute to footer

src/addons/mod/book/components/index/addon-mod-book-index.html

@@ -33,7 +33,7 @@
         </ion-item>
     </ion-list>
 
-    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+    <div collapsible-footer appearOnBottom *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width">
             <ion-button expand="block" (click)="openBook()" class="ion-margin ion-text-wrap">
                 <span *ngIf="!hasStartedBook">{{ 'core.start' | translate }}</span>

src/addons/mod/folder/components/index/addon-mod-folder-index.html

@@ -32,6 +32,6 @@
 
 </core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id"
+<core-course-module-navigation collapsible-footer appearOnBottom [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id"
     (completionChanged)="onCompletionChange()">
 </core-course-module-navigation>

src/addons/mod/imscp/components/index/addon-mod-imscp-index.html

@@ -30,7 +30,7 @@
         </ion-item>
     </ion-list>
 
-    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+    <div collapsible-footer appearOnBottom *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width">
             <ion-button class="ion-margin ion-text-wrap" expand="block" (click)="openImscp()">
                 <span *ngIf="!hasStarted">{{ 'core.start' | translate }}</span>

src/addons/mod/page/components/index/addon-mod-page-index.html

@@ -32,5 +32,5 @@
 
 </core-loading>
 
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
+<core-course-module-navigation collapsible-footer appearOnBottom [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
 </core-course-module-navigation>

src/addons/mod/resource/components/index/addon-mod-resource-index.html

@@ -79,7 +79,7 @@
         </ion-list>
     </ng-container>
 
-    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+    <div collapsible-footer appearOnBottom *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width" *ngIf="mode == 'external'">
             <ion-button expand="block" (click)="open(openFileAction.OPEN)" class="ion-margin ion-text-wrap">
                 <ng-container *ngIf="isStreamedFile">

src/addons/mod/url/components/index/addon-mod-url-index.html

@@ -37,7 +37,7 @@
         </ion-item>
     </ion-list>
 
-    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
+    <div collapsible-footer appearOnBottom *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width" *ngIf="url && !shouldIframe && (!shouldEmbed || !isOther)">
             <ion-button expand="block" (click)="go()" class="ion-margin ion-text-wrap">
                 <ion-icon name="fas-link" slot="start" aria-hidden="true"></ion-icon>

src/core/directives/collapsible-footer.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ScrollDetail } from '@ionic/core';
 import { IonContent } from '@ionic/angular';
 import { CoreUtils } from '@services/utils/utils';
@@ -34,6 +34,8 @@ import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@sin
 })
 export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
 
+    @Input() appearOnBottom = false;
+
     protected element: HTMLElement;
     protected initialHeight = 0;
     protected initialPaddingBottom = '0px';
@@ -127,7 +129,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
      */
     protected onScroll(scrollDetail: ScrollDetail, scrollElement: HTMLElement): void {
         const maxScroll = scrollElement.scrollHeight - scrollElement.offsetHeight;
-        if (scrollDetail.scrollTop <= 0 || scrollDetail.scrollTop >= maxScroll) {
+        if (scrollDetail.scrollTop <= 0 || (this.appearOnBottom && scrollDetail.scrollTop >= maxScroll)) {
             // Reset.
             this.setBarHeight(this.initialHeight);
         } else {
@@ -181,6 +183,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
 
         this.listenScrollEvents();
 
+        // Only if not present or explicitly falsy it will be false.
+        this.appearOnBottom = !CoreUtils.isFalseOrZero(this.appearOnBottom);
+
         // Recalculate the height if a parent core-loading displays the content.
         this.loadingChangedListener =
             CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, async (data: CoreEventLoadingChangedData) => {

src/core/features/course/pages/module-preview/module-preview.html

@@ -45,6 +45,6 @@
         <core-course-unsupported-module *ngIf="unsupported" [module]="module"></core-course-unsupported-module>
     </core-loading>
 
-    <core-course-module-navigation collapsible-footer [hidden]="!loaded" [courseId]="courseId" [currentModuleId]="module.id">
+    <core-course-module-navigation collapsible-footer appearOnBottom [hidden]="!loaded" [courseId]="courseId" [currentModuleId]="module.id">
     </core-course-module-navigation>
 </ion-content>

src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html

@@ -14,5 +14,6 @@
     (onLoadingContent)="contentLoading()">
 </core-site-plugins-plugin-content>
 
-<core-course-module-navigation collapsible-footer *ngIf="module" [courseId]="courseId" [currentModuleId]="module.id">
+<core-course-module-navigation collapsible-footer [appearOnBottom]="collapsibleFooterAppearOnBottom" *ngIf="module" [courseId]="courseId"
+    [currentModuleId]="module.id">
 </core-course-module-navigation>

src/core/features/siteplugins/components/module-index/module-index.ts

@@ -85,6 +85,8 @@ export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, C
      */
     size?: string;
 
+    collapsibleFooterAppearOnBottom = true;
+
     displayOpenInBrowser = true;
     displayDescription = true;
     displayRefresh = true;
@@ -133,6 +135,8 @@ export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, C
             this.displaySize = !CoreUtils.isFalseOrZero(handlerSchema.displaysize);
             this.displayGrades = CoreUtils.isTrueOrOne(handlerSchema.displaygrades); // False by default.
             this.ptrEnabled = !CoreUtils.isFalseOrZero(handlerSchema.ptrenabled);
+
+            this.collapsibleFooterAppearOnBottom = !CoreUtils.isFalseOrZero(handlerSchema.isresource);
         }
 
         // Get the data for the context menu.