javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

lint(eslint): migrate to eslint and prettier (#25046)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-04 11:12:53 -04:00
committed by GitHub
parent 12fd19dd4d
commit 5676bab316
826 changed files with 56539 additions and 52754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
core/src/components/header/header.utils.ts
View File

@ -19,7 +19,9 @@ interface ToolbarIndex {
export const cloneElement = (tagName: string) => {
const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
if (getCachedEl !== null) { return getCachedEl; }
if (getCachedEl !== null) {
return getCachedEl;
}
const clonedEl = document.createElement(tagName);
clonedEl.classList.add('ion-cloned-element');
@ -30,29 +32,32 @@ export const cloneElement = (tagName: string) => {
};
export const createHeaderIndex = (headerEl: HTMLElement | undefined): HeaderIndex | undefined => {
if (!headerEl) { return; }
if (!headerEl) {
return;
}
const toolbars = headerEl.querySelectorAll('ion-toolbar');
return {
el: headerEl,
toolbars: Array.from(toolbars).map((toolbar: any) => {
const ionTitleEl = toolbar.querySelector('ion-title');
return {
el: toolbar,
background: toolbar.shadowRoot!.querySelector('.toolbar-background'),
ionTitleEl,
innerTitleEl: (ionTitleEl) ? ionTitleEl.shadowRoot!.querySelector('.toolbar-title') : null,
ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || []
} as ToolbarIndex;
}) || []
toolbars:
Array.from(toolbars).map((toolbar: any) => {
const ionTitleEl = toolbar.querySelector('ion-title');
return {
el: toolbar,
background: toolbar.shadowRoot!.querySelector('.toolbar-background'),
ionTitleEl,
innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot!.querySelector('.toolbar-title') : null,
ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || [],
} as ToolbarIndex;
}) || [],
} as HeaderIndex;
};
export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: HeaderIndex, contentEl: HTMLElement) => {
readTask(() => {
const scrollTop = scrollEl.scrollTop;
const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);
const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
// Native refresher should not cause titles to scale
const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
@ -71,7 +76,9 @@ export const setToolbarBackgroundOpacity = (headerEl: HTMLIonHeaderElement, opac
* has collapsed, so it is handled
* by handleHeaderFade()
*/
if (headerEl.collapse === 'fade') { return; }
if (headerEl.collapse === 'fade') {
return;
}
if (opacity === undefined) {
headerEl.style.removeProperty('--opacity-scale');
@ -81,7 +88,9 @@ export const setToolbarBackgroundOpacity = (headerEl: HTMLIonHeaderElement, opac
};
const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollTop: number) => {
if (!ev[0].isIntersecting) { return; }
if (!ev[0].isIntersecting) {
return;
}
/**
* There is a bug in Safari where overflow scrolling on a non-body element
@ -94,9 +103,9 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
* the content is transformed which can cause the intersection observer to erroneously
* fire here as well.
*/
const scale = (ev[0].intersectionRatio > 0.9 || scrollTop <= 0) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
setToolbarBackgroundOpacity(mainHeaderIndex.el, (scale === 1) ? undefined : scale);
setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
};
/**
@ -104,7 +113,12 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
* and show the primary toolbar content. If the toolbars are not intersecting,
* hide the primary toolbar content and show the scrollable toolbar content
*/
export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, scrollEl: HTMLElement) => {
export const handleToolbarIntersection = (
ev: any,
mainHeaderIndex: HeaderIndex,
scrollHeaderIndex: HeaderIndex,
scrollEl: HTMLElement
) => {
writeTask(() => {
const scrollTop = scrollEl.scrollTop;
handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
@ -137,7 +151,8 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
* only Safari + CSS Animations.
*/
const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
const hasValidIntersection =
(intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
if (hasValidIntersection && scrollTop > 0) {
setHeaderActive(mainHeaderIndex);
@ -157,12 +172,14 @@ export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
};
export const scaleLargeTitles = (toolbars: ToolbarIndex[] = [], scale = 1, transition = false) => {
toolbars.forEach(toolbar => {
toolbars.forEach((toolbar) => {
const ionTitle = toolbar.ionTitleEl;
const titleDiv = toolbar.innerTitleEl;
if (!ionTitle || ionTitle.size !== 'large') { return; }
if (!ionTitle || ionTitle.size !== 'large') {
return;
}
titleDiv.style.transition = (transition) ? TRANSITION : '';
titleDiv.style.transition = transition ? TRANSITION : '';
titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
});
};
@ -171,7 +188,7 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con
readTask(() => {
const scrollTop = scrollEl.scrollTop;
const baseElHeight = baseEl.clientHeight;
const fadeStart = (condenseHeader) ? condenseHeader.clientHeight : 0;
const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
/**
* If we are using fade header with a condense
@ -185,7 +202,7 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con
* using just the condense header the content
* should overflow out of the container.
*/
if ((condenseHeader !== null) && (scrollTop < fadeStart)) {
if (condenseHeader !== null && scrollTop < fadeStart) {
baseEl.style.setProperty('--opacity-scale', '0');
scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
return;
@ -193,10 +210,10 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con
const distanceToStart = scrollTop - fadeStart;
const fadeDuration = 10;
const scale = clamp(0, (distanceToStart / fadeDuration), 1);
const scale = clamp(0, distanceToStart / fadeDuration, 1);
writeTask(() => {
scrollEl.style.removeProperty('clip-path');
baseEl.style.setProperty('--opacity-scale', scale.toString());
})
});
});
}
};