javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Manu MA
2019-09-27 13:12:06 +02:00
committed by GitHub
parent a28e501272
commit b4d92c6241
7 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
angular/src/directives/control-value-accessors/value-accessor.ts
View File

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

3
angular/src/directives/navigation/stack-controller.ts
View File

@ -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);
}

4
core/src/components/tab/tab.tsx
View File

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

24
core/src/components/tabs/tabs.tsx
View File

@ -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;
};

2
core/src/utils/animation/animation-utils.ts
View File

@ -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);

8
core/src/utils/animation/animation.ts
View File

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

3
vue/src/components/navigation/ion-vue-router.ts
View File

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