@ionic/core
Version:
Base components for Ionic
217 lines (216 loc) • 9.35 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { Host, h, writeTask } from "@stencil/core";
import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
import { inheritAriaAttributes } from "../../utils/helpers";
import { hostContext } from "../../utils/theme";
import { getIonMode } from "../../global/ionic-global";
import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.utils";
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
export class Header {
constructor() {
this.inheritedAttributes = {};
/**
* If `true`, the header will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*
* Note: In order to scroll content behind the header, the `fullscreen`
* attribute needs to be set on the content.
*/
this.translucent = false;
this.setupFadeHeader = async (contentEl, condenseHeader) => {
const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
/**
* Handle fading of toolbars on scroll
*/
this.contentScrollCallback = () => {
handleHeaderFade(this.scrollEl, this.el, condenseHeader);
};
scrollEl.addEventListener('scroll', this.contentScrollCallback);
handleHeaderFade(this.scrollEl, this.el, condenseHeader);
};
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
componentDidLoad() {
this.checkCollapsibleHeader();
}
componentDidUpdate() {
this.checkCollapsibleHeader();
}
disconnectedCallback() {
this.destroyCollapsibleHeader();
}
async checkCollapsibleHeader() {
const mode = getIonMode(this);
if (mode !== 'ios') {
return;
}
const { collapse } = this;
const hasCondense = collapse === 'condense';
const hasFade = collapse === 'fade';
this.destroyCollapsibleHeader();
if (hasCondense) {
const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
const contentEl = pageEl ? findIonContent(pageEl) : null;
// Cloned elements are always needed in iOS transition
writeTask(() => {
const title = cloneElement('ion-title');
title.size = 'large';
cloneElement('ion-back-button');
});
await this.setupCondenseHeader(contentEl, pageEl);
}
else if (hasFade) {
const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
const contentEl = pageEl ? findIonContent(pageEl) : null;
if (!contentEl) {
printIonContentErrorMsg(this.el);
return;
}
const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
await this.setupFadeHeader(contentEl, condenseHeader);
}
}
destroyCollapsibleHeader() {
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
this.intersectionObserver = undefined;
}
if (this.scrollEl && this.contentScrollCallback) {
this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
this.contentScrollCallback = undefined;
}
if (this.collapsibleMainHeader) {
this.collapsibleMainHeader.classList.remove('header-collapse-main');
this.collapsibleMainHeader = undefined;
}
}
async setupCondenseHeader(contentEl, pageEl) {
if (!contentEl || !pageEl) {
printIonContentErrorMsg(this.el);
return;
}
if (typeof IntersectionObserver === 'undefined') {
return;
}
this.scrollEl = await getScrollElement(contentEl);
const headers = pageEl.querySelectorAll('ion-header');
this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
if (!this.collapsibleMainHeader) {
return;
}
const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
const scrollHeaderIndex = createHeaderIndex(this.el);
if (!mainHeaderIndex || !scrollHeaderIndex) {
return;
}
setHeaderActive(mainHeaderIndex, false);
setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
/**
* Handle interaction between toolbar collapse and
* showing/hiding content in the primary ion-header
* as well as progressively showing/hiding the main header
* border as the top-most toolbar collapses or expands.
*/
const toolbarIntersection = (ev) => {
handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
};
this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
root: contentEl,
threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
});
this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
/**
* Handle scaling of large iOS titles and
* showing/hiding border on last toolbar
* in primary header
*/
this.contentScrollCallback = () => {
handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
};
this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
writeTask(() => {
if (this.collapsibleMainHeader !== undefined) {
this.collapsibleMainHeader.classList.add('header-collapse-main');
}
});
}
render() {
const { translucent, inheritedAttributes } = this;
const mode = getIonMode(this);
const collapse = this.collapse || 'none';
// banner role must be at top level, so remove role if inside a menu
const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
return (h(Host, Object.assign({ key: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
[mode]: true,
// Used internally for styling
[`header-${mode}`]: true,
[`header-translucent`]: this.translucent,
[`header-collapse-${collapse}`]: true,
[`header-translucent-${mode}`]: this.translucent,
} }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), h("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
}
static get is() { return "ion-header"; }
static get originalStyleUrls() {
return {
"ios": ["header.ios.scss"],
"md": ["header.md.scss"]
};
}
static get styleUrls() {
return {
"ios": ["header.ios.css"],
"md": ["header.md.css"]
};
}
static get properties() {
return {
"collapse": {
"type": "string",
"attribute": "collapse",
"mutable": false,
"complexType": {
"original": "'condense' | 'fade'",
"resolved": "\"condense\" | \"fade\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
},
"getter": false,
"setter": false,
"reflect": false
},
"translucent": {
"type": "boolean",
"attribute": "translucent",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "el"; }
}