MOBILE-3814 collapsible: Now collapsible header can be disabled

src/core/directives/collapsible-header.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, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
 import { CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet';
 import { ScrollDetail } from '@ionic/core';
 import { CoreUtils } from '@services/utils/utils';
@@ -50,7 +50,9 @@ import { CoreFormatTextDirective } from './format-text';
 @Directive({
     selector: 'ion-header[collapsible]',
 })
-export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
+export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDestroy {
+
+    @Input() collapsible = true;
 
     protected page?: HTMLElement;
     protected collapsedHeader?: Element;
@@ -63,6 +65,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
     protected floatingTitle?: HTMLElement;
     protected scrollingHeight?: number;
     protected subscriptions: Subscription[] = [];
+    protected enabled = true;
 
     constructor(protected el: ElementRef) {}
 
@@ -82,6 +85,18 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
         this.initializeContent();
     }
 
+    /**
+     * @inheritdoc
+     */
+    ngOnChanges(changes: {[name: string]: SimpleChange}): void {
+        if (changes.collapsible) {
+            this.enabled = !CoreUtils.isFalseOrZero(changes.collapsible.currentValue);
+            setTimeout(() => {
+                this.setEnabled(this.enabled);
+            }, 200);
+        }
+    }
+
     /**
      * @inheritdoc
      */
@@ -277,6 +292,29 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
         content && this.trackContentScroll(content);
     }
 
+    /**
+     * Set collapsed/expanded based on properties.
+     *
+     * @param enable True to enable, false otherwise
+     */
+    async setEnabled(enable: boolean): Promise<void> {
+        if (!this.page || !this.content) {
+            return;
+        }
+
+        if (enable) {
+            const contentScroll = await this.content.getScrollElement();
+
+            // Do nothing, since scroll has already started on the page.
+            if (contentScroll.scrollTop > 0) {
+                return;
+            }
+        }
+
+        this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1');
+        this.page.classList.toggle('is-collapsed', !enable);
+    }
+
     /**
      * Listen to a content element for scroll events that will control the header state transition.
      *
@@ -287,6 +325,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
             return;
         }
 
+        this.content = content;
+
         const page = this.page;
         const scrollingHeight = this.scrollingHeight;
         const expandedHeader = this.expandedHeader;
@@ -294,7 +334,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
         const expandedFontStyles = this.expandedFontStyles;
         const collapsedFontStyles = this.collapsedFontStyles;
         const floatingTitle = this.floatingTitle;
-        const contentScroll = await content.getScrollElement();
+        const contentScroll = await this.content.getScrollElement();
 
         if (
             !page ||
@@ -308,17 +348,15 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnDestroy {
             throw new Error('[collapsible-header] Couldn\'t set up scrolling');
         }
 
-        page.style.setProperty('--collapsible-header-progress', '0');
         page.classList.toggle('is-within-content', content.contains(expandedHeader));
-        page.classList.toggle('is-collapsed', false);
+        this.setEnabled(this.enabled);
 
         Object
             .entries(expandedFontStyles)
             .forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string));
 
-        this.content = content;
         this.content.addEventListener('ionScroll', this.contentScrollListener = ({ target }: CustomEvent<ScrollDetail>): void => {
-            if (target !== this.content) {
+            if (target !== this.content || !this.enabled) {
                 return;
             }
 

src/core/features/course/pages/index/index.html

@@ -1,4 +1,4 @@
-<ion-header collapsible>
+<ion-header [collapsible]="tabsComponent?.selectedIndex == 0 || tabsComponent?.selectedIndex === undefined">
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>

src/core/features/course/pages/index/index.ts

@@ -27,7 +27,6 @@ import { CoreTextUtils } from '@services/utils/text';
 import { CoreNavigationOptions, CoreNavigator } from '@services/navigator';
 import { CONTENTS_PAGE_NAME } from '@features/course/course.module';
 import { CoreDomUtils } from '@services/utils/dom';
-import { CoreCollapsibleHeaderDirective } from '@directives/collapsible-header';
 import { CoreCourseSummaryPage } from '../course-summary/course-summary';
 
 /**
@@ -41,7 +40,6 @@ import { CoreCourseSummaryPage } from '../course-summary/course-summary';
 export class CoreCourseIndexPage implements OnInit, OnDestroy {
 
     @ViewChild(CoreTabsOutletComponent) tabsComponent?: CoreTabsOutletComponent;
-    @ViewChild(CoreCollapsibleHeaderDirective) ionCollapsibleHeader?: CoreCollapsibleHeaderDirective;
 
     title = '';
     category = '';