290 lines
10 KiB
TypeScript
290 lines
10 KiB
TypeScript
// (C) Copyright 2015 Moodle Pty Ltd.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
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';
|
|
import { CoreMath } from '@singletons/math';
|
|
import { CoreDirectivesRegistry } from '@singletons/directives-registry';
|
|
import { CoreFormatTextDirective } from './format-text';
|
|
import { CoreEventObserver } from '@singletons/events';
|
|
import { CoreLoadingComponent } from '@components/loading/loading';
|
|
import { CoreCancellablePromise } from '@classes/cancellable-promise';
|
|
import { CoreDom } from '@singletons/dom';
|
|
|
|
/**
|
|
* Directive to make an element fixed at the bottom collapsible when scrolling.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* <div collapsible-footer>
|
|
*/
|
|
@Directive({
|
|
selector: '[collapsible-footer]',
|
|
})
|
|
export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
|
|
|
|
@Input() appearOnBottom = false;
|
|
|
|
protected id = '0';
|
|
protected element: HTMLElement;
|
|
protected initialHeight = 48;
|
|
protected finalHeight = 0;
|
|
protected initialPaddingBottom = '0px';
|
|
protected previousTop = 0;
|
|
protected previousHeight = 0;
|
|
protected content?: HTMLIonContentElement | null;
|
|
protected loadingChangedListener?: CoreEventObserver;
|
|
protected contentScrollListener?: EventListener;
|
|
protected endContentScrollListener?: EventListener;
|
|
protected resizeListener?: CoreEventObserver;
|
|
protected slotPromise?: CoreCancellablePromise<void>;
|
|
protected viewportPromise?: CoreCancellablePromise<void>;
|
|
protected loadingHeight = false;
|
|
protected pageDidEnterListener?: EventListener;
|
|
protected keyUpListener?: EventListener;
|
|
protected page?: HTMLElement;
|
|
|
|
constructor(el: ElementRef, protected ionContent: IonContent) {
|
|
this.element = el.nativeElement;
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
async ngOnInit(): Promise<void> {
|
|
this.id = String(CoreUtils.getUniqueId('CoreCollapsibleFooterDirective'));
|
|
|
|
// Only if not present or explicitly falsy it will be false.
|
|
this.appearOnBottom = !CoreUtils.isFalseOrZero(this.appearOnBottom);
|
|
this.slotPromise = CoreDom.slotOnContent(this.element);
|
|
|
|
await this.slotPromise;
|
|
await this.waitLoadingsDone();
|
|
await this.waitFormatTextsRendered();
|
|
|
|
this.content = this.element.closest('ion-content');
|
|
this.content?.setAttribute('data-collapsible-footer-id', this.id);
|
|
|
|
await this.calculateHeight();
|
|
|
|
CoreDom.onElementSlot(this.element, () => {
|
|
this.calculateHeight();
|
|
});
|
|
|
|
this.listenEvents();
|
|
}
|
|
|
|
/**
|
|
* Calculate the height of the footer.
|
|
*/
|
|
protected async calculateHeight(): Promise<void> {
|
|
if (this.loadingHeight) {
|
|
// Already calculating, return.
|
|
return;
|
|
}
|
|
this.loadingHeight = true;
|
|
|
|
this.viewportPromise = CoreDom.waitToBeInViewport(this.element);
|
|
await this.viewportPromise;
|
|
|
|
this.element.classList.remove('is-active');
|
|
await CoreUtils.nextTick();
|
|
|
|
// Set a minimum height value.
|
|
this.initialHeight = this.element.getBoundingClientRect().height || this.initialHeight;
|
|
const moduleNav = this.element.querySelector('core-course-module-navigation');
|
|
if (moduleNav) {
|
|
this.element.classList.add('has-module-nav');
|
|
this.finalHeight = this.initialHeight - (moduleNav.getBoundingClientRect().height);
|
|
}
|
|
|
|
this.previousHeight = this.initialHeight;
|
|
|
|
this.content?.style.setProperty('--core-collapsible-footer-max-height', this.initialHeight + 'px');
|
|
this.element.classList.add('is-active');
|
|
|
|
this.setBarHeight(this.initialHeight);
|
|
this.loadingHeight = false;
|
|
}
|
|
|
|
/**
|
|
* Setup event listeners.
|
|
*/
|
|
protected async listenEvents(): Promise<void> {
|
|
if (!this.content || this.content?.classList.contains('has-collapsible-footer')) {
|
|
return;
|
|
}
|
|
|
|
this.content.classList.add('has-collapsible-footer');
|
|
|
|
// Move element to the nearest ion-content if it's not the parent.
|
|
if (this.element.parentElement?.nodeName != 'ION-CONTENT') {
|
|
this.content.appendChild(this.element);
|
|
}
|
|
|
|
// Set a padding to not overlap elements.
|
|
this.initialPaddingBottom = this.content.style.getPropertyValue('--padding-bottom') || this.initialPaddingBottom;
|
|
this.content.style.setProperty(
|
|
'--padding-bottom',
|
|
`calc(${this.initialPaddingBottom} + var(--core-collapsible-footer-max-height, 0px))`,
|
|
);
|
|
|
|
const scroll = await this.content.getScrollElement();
|
|
this.content.scrollEvents = true;
|
|
|
|
// Init shadow.
|
|
this.content.classList.toggle('core-footer-shadow', !CoreDom.scrollIsBottom(scroll));
|
|
|
|
this.content.addEventListener('ionScroll', this.contentScrollListener = (e: CustomEvent<ScrollDetail>): void => {
|
|
if (!this.content) {
|
|
return;
|
|
}
|
|
|
|
this.onScroll(e.detail, scroll);
|
|
});
|
|
|
|
this.content.addEventListener('ionScrollEnd', this.endContentScrollListener = (): void => {
|
|
if (!this.content) {
|
|
return;
|
|
}
|
|
|
|
const height = this.previousHeight;
|
|
const collapsed = height <= this.finalHeight;
|
|
const expanded = height >= this.initialHeight;
|
|
|
|
if (!collapsed && !expanded) {
|
|
// Finish opening or closing the bar.
|
|
const newHeight = (height - this.finalHeight) < (this.initialHeight - this.finalHeight) / 2
|
|
? this.finalHeight
|
|
: this.initialHeight;
|
|
|
|
this.setBarHeight(newHeight);
|
|
}
|
|
});
|
|
|
|
this.resizeListener = CoreDom.onWindowResize(() => {
|
|
this.calculateHeight();
|
|
}, 50);
|
|
|
|
this.page = this.content.closest<HTMLElement>('.ion-page') || undefined;
|
|
this.page?.addEventListener(
|
|
'ionViewDidEnter',
|
|
this.pageDidEnterListener = () => {
|
|
this.calculateHeight();
|
|
},
|
|
);
|
|
|
|
// Handle scroll when navigating using tab key and the selected element is behind the footer.
|
|
this.content.addEventListener('keyup', this.keyUpListener = (ev: KeyboardEvent) => {
|
|
if (ev.key !== 'Tab' || !document.activeElement) {
|
|
return;
|
|
}
|
|
|
|
if (document.activeElement.getBoundingClientRect().bottom > this.element.getBoundingClientRect().top) {
|
|
document.activeElement.scrollIntoView({ block: 'center' });
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Wait until all <core-format-text> children inside the element are done rendering.
|
|
*/
|
|
protected async waitFormatTextsRendered(): Promise<void> {
|
|
await CoreDirectivesRegistry.waitDirectivesReady(this.element, 'core-format-text', CoreFormatTextDirective);
|
|
}
|
|
|
|
/**
|
|
* On scroll function.
|
|
*
|
|
* @param scrollDetail Scroll detail object.
|
|
* @param scrollElement Scroll element to calculate maxScroll.
|
|
*/
|
|
protected onScroll(scrollDetail: ScrollDetail, scrollElement: HTMLElement): void {
|
|
const maxScroll = scrollElement.scrollHeight - scrollElement.offsetHeight;
|
|
if (scrollDetail.scrollTop <= 0 || (this.appearOnBottom && scrollDetail.scrollTop >= maxScroll)) {
|
|
// Reset.
|
|
this.setBarHeight(this.initialHeight);
|
|
} else {
|
|
let newHeight = this.previousHeight - (scrollDetail.scrollTop - this.previousTop);
|
|
newHeight = CoreMath.clamp(newHeight, this.finalHeight, this.initialHeight);
|
|
|
|
this.setBarHeight(newHeight);
|
|
}
|
|
this.previousTop = scrollDetail.scrollTop;
|
|
}
|
|
|
|
/**
|
|
* Sets the bar height.
|
|
*
|
|
* @param height The new bar height.
|
|
*/
|
|
protected setBarHeight(height: number): void {
|
|
const collapsed = height <= this.finalHeight;
|
|
const expanded = height >= this.initialHeight;
|
|
this.element.classList.toggle('footer-collapsed', collapsed);
|
|
this.element.classList.toggle('footer-expanded', expanded);
|
|
this.content?.style.setProperty('--core-collapsible-footer-height', height + 'px');
|
|
this.previousHeight = height;
|
|
}
|
|
|
|
/**
|
|
* Wait until all <core-loading> children inside the page.
|
|
*
|
|
* @returns Promise resolved when loadings are done.
|
|
*/
|
|
protected async waitLoadingsDone(): Promise<void> {
|
|
const scrollElement = await this.ionContent.getScrollElement();
|
|
|
|
await Promise.all([
|
|
await CoreDirectivesRegistry.waitDirectivesReady(scrollElement, 'core-loading', CoreLoadingComponent),
|
|
await CoreDirectivesRegistry.waitDirectivesReady(this.element, 'core-loading', CoreLoadingComponent),
|
|
]);
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
async ngOnDestroy(): Promise<void> {
|
|
if (this.content) {
|
|
// Only reset the variables and classes if the collapsible footer hasn't changed (avoid race conditions).
|
|
if (this.content.getAttribute('data-collapsible-footer-id') === this.id) {
|
|
this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom);
|
|
this.content.classList.remove('has-collapsible-footer');
|
|
}
|
|
|
|
if (this.contentScrollListener) {
|
|
this.content.removeEventListener('ionScroll', this.contentScrollListener);
|
|
}
|
|
if (this.endContentScrollListener) {
|
|
this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
|
|
}
|
|
if (this.keyUpListener) {
|
|
this.content.removeEventListener('keyup', this.keyUpListener);
|
|
}
|
|
}
|
|
|
|
if (this.page && this.pageDidEnterListener) {
|
|
this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener);
|
|
}
|
|
|
|
this.element?.remove();
|
|
this.resizeListener?.off();
|
|
this.slotPromise?.cancel();
|
|
this.viewportPromise?.cancel();
|
|
}
|
|
|
|
}
|