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

fix(refresher): correctly select shadow root on older browsers (#21237)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-05-08 11:54:57 -04:00
committed by GitHub
parent f334e83a43
commit f23f1cb37e
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/refresher/refresher.tsx
View File

@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
import { getTimeGivenProgression } from '../../'; import { getTimeGivenProgression } from '../../';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface'; import { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
import { clamp, raf } from '../../utils/helpers'; import { clamp, getElementRoot, raf } from '../../utils/helpers';
import { hapticImpact } from '../../utils/native/haptic'; import { hapticImpact } from '../../utils/native/haptic';
import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, transitionEndAsync, translateElement } from './refresher.utils'; import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, transitionEndAsync, translateElement } from './refresher.utils';
@ -272,9 +272,9 @@ export class Refresher implements ComponentInterface {
} }
private async setupMDNativeRefresher(contentEl: HTMLIonContentElement, pullingSpinner: HTMLIonSpinnerElement, refreshingSpinner: HTMLIonSpinnerElement) { private async setupMDNativeRefresher(contentEl: HTMLIonContentElement, pullingSpinner: HTMLIonSpinnerElement, refreshingSpinner: HTMLIonSpinnerElement) {
const circle = pullingSpinner.shadowRoot!.querySelector('circle'); const circle = getElementRoot(pullingSpinner).querySelector('circle');
const pullingRefresherIcon = this.el.querySelector('ion-refresher-content .refresher-pulling-icon') as HTMLElement; const pullingRefresherIcon = this.el.querySelector('ion-refresher-content .refresher-pulling-icon') as HTMLElement;
const refreshingCircle = refreshingSpinner.shadowRoot!.querySelector('circle'); const refreshingCircle = getElementRoot(refreshingSpinner).querySelector('circle');
if (circle !== null && refreshingCircle !== null) { if (circle !== null && refreshingCircle !== null) {
writeTask(() => { writeTask(() => {
@ -397,7 +397,7 @@ export class Refresher implements ComponentInterface {
} }
this.scrollEl = await contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
this.backgroundContentEl = contentEl.shadowRoot!.querySelector('#background-content') as HTMLElement; this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content') as HTMLElement;
if (shouldUseNativeRefresher(this.el, getIonMode(this))) { if (shouldUseNativeRefresher(this.el, getIonMode(this))) {
this.setupNativeRefresher(contentEl); this.setupNativeRefresher(contentEl);

13
core/src/utils/helpers.ts
View File

@ -5,6 +5,19 @@ import { Side } from '../interface';
declare const __zone_symbol__requestAnimationFrame: any; declare const __zone_symbol__requestAnimationFrame: any;
declare const requestAnimationFrame: any; declare const requestAnimationFrame: any;
/**
* Gets the root context of a shadow dom element
* On newer browsers this will be the shadowRoot,
* but for older browser this may just be the
* element itself.
*
* Useful for whenever you need to explicitly
* do "myElement.shadowRoot!.querySelector(...)".
*/
export const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {
return el.shadowRoot || fallback;
};
/** /**
* Patched version of requestAnimationFrame that avoids ngzone * Patched version of requestAnimationFrame that avoids ngzone
* Use only when you know ngzone should not run * Use only when you know ngzone should not run