Skip to content
Permalink
Browse files

fix(ie): classList does not support variadic (#19460)

  • Loading branch information...
manucorporat committed Sep 27, 2019
1 parent a28e501 commit b4d92c62410cebe788b7ce207ae7f743d682bf97
@@ -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 => {
@@ -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);
}
@@ -48,7 +48,7 @@ export class Tab implements ComponentInterface {
this.active = true;
}

private async prepareLazyLoaded(): Promise<HTMLElement | undefined> {
private prepareLazyLoaded(): Promise<HTMLElement | undefined> {
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() {
@@ -66,7 +66,7 @@ export class Tabs implements NavOutlet {
*/
@Method()
async select(tab: string | HTMLIonTabElement): Promise<boolean> {
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<HTMLIonTabElement | undefined> {
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<RouteWrite> {
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;
};
@@ -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);

@@ -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)) {
@@ -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) => {

0 comments on commit b4d92c6

Please sign in to comment.
You can’t perform that action at this time.