From f5303b3cc6d999379027cbaeceb5fb490e4b08bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Mar 2022 15:42:03 +0100
Subject: [PATCH] MOBILE-3814 collapsible: Now collapsible header can be
disabled
---
src/core/directives/collapsible-header.ts | 52 ++++++++++++++++---
.../features/course/pages/index/index.html | 2 +-
src/core/features/course/pages/index/index.ts | 2 -
3 files changed, 46 insertions(+), 10 deletions(-)
diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
index 61c2f9d1a..7918d377d 100644
--- a/src/core/directives/collapsible-header.ts
+++ b/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;
}
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index c1d586d11..b864139cd 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/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>
diff --git a/src/core/features/course/pages/index/index.ts b/src/core/features/course/pages/index/index.ts
index 82ddef122..bb2537e83 100644
--- a/src/core/features/course/pages/index/index.ts
+++ b/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 = '';