From b4d92c62410cebe788b7ce207ae7f743d682bf97 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Fri, 27 Sep 2019 13:12:06 +0200 Subject: [PATCH] fix(ie): classList does not support variadic (#19460) --- .../control-value-accessors/value-accessor.ts | 8 +++---- .../directives/navigation/stack-controller.ts | 3 ++- core/src/components/tab/tab.tsx | 4 ++-- core/src/components/tabs/tabs.tsx | 24 +++++++++++-------- core/src/utils/animation/animation-utils.ts | 2 +- core/src/utils/animation/animation.ts | 8 +++---- .../components/navigation/ion-vue-router.ts | 3 ++- 7 files changed, 29 insertions(+), 23 deletions(-) diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts index b70b7b9499..c5db6109fd 100644 --- a/angular/src/directives/control-value-accessors/value-accessor.ts +++ b/angular/src/directives/control-value-accessors/value-accessor.ts @@ -74,16 +74,16 @@ const getClasses = (element: HTMLElement) => { const setClasses = (element: HTMLElement, classes: string[]) => { const classList = element.classList; - - classList.remove( + [ 'ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine' - ); - classList.add(...classes); + ].forEach(c => classList.remove(c)); + + classes.forEach(c => classList.add(c)); }; const startsWith = (input: string, search: string): boolean => { diff --git a/angular/src/directives/navigation/stack-controller.ts b/angular/src/directives/navigation/stack-controller.ts index f47bd84a2a..982181633b 100644 --- a/angular/src/directives/navigation/stack-controller.ts +++ b/angular/src/directives/navigation/stack-controller.ts @@ -230,7 +230,8 @@ export class StackController { const leavingEl = leavingView ? leavingView.element : undefined; const containerEl = this.containerEl; if (enteringEl && enteringEl !== leavingEl) { - enteringEl.classList.add('ion-page', 'ion-page-invisible'); + enteringEl.classList.add('ion-page'); + enteringEl.classList.add('ion-page-invisible'); if (enteringEl.parentElement !== containerEl) { containerEl.appendChild(enteringEl); } diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index 1897c7f7c5..769f086765 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -48,7 +48,7 @@ export class Tab implements ComponentInterface { this.active = true; } - private async prepareLazyLoaded(): Promise { + private prepareLazyLoaded(): Promise { if (!this.loaded && this.component != null) { this.loaded = true; try { @@ -57,7 +57,7 @@ export class Tab implements ComponentInterface { console.error(e); } } - return undefined; + return Promise.resolve(undefined); } render() { diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index acd357960b..e269ae9d44 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -66,7 +66,7 @@ export class Tabs implements NavOutlet { */ @Method() async select(tab: string | HTMLIonTabElement): Promise { - const selectedTab = await this.getTab(tab); + const selectedTab = getTab(this.tabs, tab); if (!this.shouldSwitch(selectedTab)) { return false; } @@ -84,14 +84,7 @@ export class Tabs implements NavOutlet { */ @Method() async getTab(tab: string | HTMLIonTabElement): Promise { - const tabEl = (typeof tab === 'string') - ? this.tabs.find(t => t.tab === tab) - : tab; - - if (!tabEl) { - console.error(`tab with id: "${tabEl}" does not exist`); - } - return tabEl; + return getTab(this.tabs, tab); } /** @@ -105,7 +98,7 @@ export class Tabs implements NavOutlet { /** @internal */ @Method() async setRouteId(id: string): Promise { - const selectedTab = await this.getTab(id); + const selectedTab = getTab(this.tabs, id); if (!this.shouldSwitch(selectedTab)) { return { changed: false, element: this.selectedTab }; } @@ -200,3 +193,14 @@ export class Tabs implements NavOutlet { ); } } + +const getTab = (tabs: HTMLIonTabElement[], tab: string | HTMLIonTabElement): HTMLIonTabElement | undefined => { + const tabEl = (typeof tab === 'string') + ? tabs.find(t => t.tab === tab) + : tab; + + if (!tabEl) { + console.error(`tab with id: "${tabEl}" does not exist`); + } + return tabEl; +}; diff --git a/core/src/utils/animation/animation-utils.ts b/core/src/utils/animation/animation-utils.ts index 6cf773076a..846a567ad4 100644 --- a/core/src/utils/animation/animation-utils.ts +++ b/core/src/utils/animation/animation-utils.ts @@ -77,7 +77,7 @@ export const createKeyframeStylesheet = (keyframeName: string, keyframeRules: st const stylesheet = (element.ownerDocument || document).createElement('style'); stylesheet.id = keyframeName; - stylesheet.innerHTML = `@keyframes ${keyframeName} { ${keyframeRules} } @keyframes ${keyframeName}-alt { ${keyframeRules} }`; + stylesheet.textContent = `@keyframes ${keyframeName} { ${keyframeRules} } @keyframes ${keyframeName}-alt { ${keyframeRules} }`; styleContainer.appendChild(stylesheet); diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index 3b9201e5df..f360487bd7 100644 --- a/core/src/utils/animation/animation.ts +++ b/core/src/utils/animation/animation.ts @@ -529,8 +529,8 @@ export const createAnimation = () => { elements.forEach((el: HTMLElement) => { const elementClassList = el.classList; - elementClassList.add(...addClasses); - elementClassList.remove(...removeClasses); + addClasses.forEach(c => elementClassList.add(c)); + removeClasses.forEach(c => elementClassList.remove(c)); for (const property in styles) { if (styles.hasOwnProperty(property)) { @@ -578,8 +578,8 @@ export const createAnimation = () => { elements.forEach((el: HTMLElement) => { const elementClassList = el.classList; - elementClassList.add(...addClasses); - elementClassList.remove(...removeClasses); + addClasses.forEach(c => elementClassList.add(c)); + removeClasses.forEach(c => elementClassList.remove(c)); for (const property in styles) { if (styles.hasOwnProperty(property)) { diff --git a/vue/src/components/navigation/ion-vue-router.ts b/vue/src/components/navigation/ion-vue-router.ts index 30f7b31b52..35ce8f5bc5 100644 --- a/vue/src/components/navigation/ion-vue-router.ts +++ b/vue/src/components/navigation/ion-vue-router.ts @@ -122,7 +122,8 @@ function transition(parent: Vue, props: Props, leavingEl: HTMLElement) { } // Add the proper Ionic classes, important for smooth transitions - enteringEl.classList.add('ion-page', 'ion-page-invisible'); + enteringEl.classList.add('ion-page'); + enteringEl.classList.add('ion-page-invisible'); // Commit to the transition as soon as the Ionic Router Outlet is ready return ionRouterOutlet.componentOnReady().then((el: HTMLIonRouterOutletElement) => {