mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
lint(eslint): migrate to eslint and prettier (#25046)
This commit is contained in:
Liam DeBeasi
@ -1,4 +1,4 @@
|
||||
import { Animation } from '../../../interface';
|
||||
import type { Animation } from '../../../interface';
|
||||
import { createAnimation } from '../../../utils/animation/animation';
|
||||
|
||||
/**
|
||||
@ -13,16 +13,14 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
|
||||
.addElement(baseEl.querySelector('ion-backdrop')!)
|
||||
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
||||
.beforeStyles({
|
||||
'pointer-events': 'none'
|
||||
'pointer-events': 'none',
|
||||
})
|
||||
.afterClearStyles(['pointer-events']);
|
||||
|
||||
wrapperAnimation
|
||||
.addElement(baseEl.querySelector('.loading-wrapper')!)
|
||||
.keyframes([
|
||||
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
||||
{ offset: 1, opacity: 1, transform: 'scale(1)' }
|
||||
]);
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')!).keyframes([
|
||||
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
||||
{ offset: 1, opacity: 1, transform: 'scale(1)' },
|
||||
]);
|
||||
|
||||
return baseAnimation
|
||||
.addElement(baseEl)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Animation } from '../../../interface';
|
||||
import type { Animation } from '../../../interface';
|
||||
import { createAnimation } from '../../../utils/animation/animation';
|
||||
|
||||
/**
|
||||
@ -9,16 +9,12 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
|
||||
const backdropAnimation = createAnimation();
|
||||
const wrapperAnimation = createAnimation();
|
||||
|
||||
backdropAnimation
|
||||
.addElement(baseEl.querySelector('ion-backdrop')!)
|
||||
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
|
||||
|
||||
wrapperAnimation
|
||||
.addElement(baseEl.querySelector('.loading-wrapper')!)
|
||||
.keyframes([
|
||||
{ offset: 0, opacity: 0.99, transform: 'scale(1)' },
|
||||
{ offset: 1, opacity: 0, transform: 'scale(0.9)' }
|
||||
]);
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')!).keyframes([
|
||||
{ offset: 0, opacity: 0.99, transform: 'scale(1)' },
|
||||
{ offset: 1, opacity: 0, transform: 'scale(0.9)' },
|
||||
]);
|
||||
|
||||
return baseAnimation
|
||||
.addElement(baseEl)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Animation } from '../../../interface';
|
||||
import type { Animation } from '../../../interface';
|
||||
import { createAnimation } from '../../../utils/animation/animation';
|
||||
|
||||
/**
|
||||
@ -13,16 +13,14 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
|
||||
.addElement(baseEl.querySelector('ion-backdrop')!)
|
||||
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
||||
.beforeStyles({
|
||||
'pointer-events': 'none'
|
||||
'pointer-events': 'none',
|
||||
})
|
||||
.afterClearStyles(['pointer-events']);
|
||||
|
||||
wrapperAnimation
|
||||
.addElement(baseEl.querySelector('.loading-wrapper')!)
|
||||
.keyframes([
|
||||
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
||||
{ offset: 1, opacity: 1, transform: 'scale(1)' }
|
||||
]);
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')!).keyframes([
|
||||
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
|
||||
{ offset: 1, opacity: 1, transform: 'scale(1)' },
|
||||
]);
|
||||
|
||||
return baseAnimation
|
||||
.addElement(baseEl)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Animation } from '../../../interface';
|
||||
import type { Animation } from '../../../interface';
|
||||
import { createAnimation } from '../../../utils/animation/animation';
|
||||
|
||||
/**
|
||||
@ -9,16 +9,12 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
|
||||
const backdropAnimation = createAnimation();
|
||||
const wrapperAnimation = createAnimation();
|
||||
|
||||
backdropAnimation
|
||||
.addElement(baseEl.querySelector('ion-backdrop')!)
|
||||
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
|
||||
|
||||
wrapperAnimation
|
||||
.addElement(baseEl.querySelector('.loading-wrapper')!)
|
||||
.keyframes([
|
||||
{ offset: 0, opacity: 0.99, transform: 'scale(1)' },
|
||||
{ offset: 1, opacity: 0, transform: 'scale(0.9)' }
|
||||
]);
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')!).keyframes([
|
||||
{ offset: 0, opacity: 0.99, transform: 'scale(1)' },
|
||||
{ offset: 1, opacity: 0, transform: 'scale(0.9)' },
|
||||
]);
|
||||
|
||||
return baseAnimation
|
||||
.addElement(baseEl)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { JSXBase } from '@stencil/core/internal';
|
||||
import type { JSXBase } from '@stencil/core/internal';
|
||||
|
||||
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
|
||||
import { IonicSafeString } from '../../utils/sanitization';
|
||||
import type { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
|
||||
import type { IonicSafeString } from '../../utils/sanitization';
|
||||
|
||||
export interface LoadingOptions {
|
||||
spinner?: SpinnerTypes | null;
|
||||
@ -21,4 +21,4 @@ export interface LoadingOptions {
|
||||
leaveAnimation?: AnimationBuilder;
|
||||
}
|
||||
|
||||
export interface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
|
||||
export type LoadingAttributes = JSXBase.HTMLAttributes<HTMLElement>;
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { AnimationBuilder, LoadingAttributes, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
|
||||
import type {
|
||||
AnimationBuilder,
|
||||
LoadingAttributes,
|
||||
OverlayEventDetail,
|
||||
OverlayInterface,
|
||||
SpinnerTypes,
|
||||
} from '../../interface';
|
||||
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
|
||||
import { IonicSafeString, sanitizeDOMString } from '../../utils/sanitization';
|
||||
import type { IonicSafeString } from '../../utils/sanitization';
|
||||
import { sanitizeDOMString } from '../../utils/sanitization';
|
||||
import { getClassMap } from '../../utils/theme';
|
||||
|
||||
import { iosEnterAnimation } from './animations/ios.enter';
|
||||
@ -19,9 +27,9 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
tag: 'ion-loading',
|
||||
styleUrls: {
|
||||
ios: 'loading.ios.scss',
|
||||
md: 'loading.md.scss'
|
||||
md: 'loading.md.scss',
|
||||
},
|
||||
scoped: true
|
||||
scoped: true,
|
||||
})
|
||||
export class Loading implements ComponentInterface, OverlayInterface {
|
||||
private durationTimeout: any;
|
||||
@ -124,10 +132,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
componentWillLoad() {
|
||||
if (this.spinner === undefined) {
|
||||
const mode = getIonMode(this);
|
||||
this.spinner = config.get(
|
||||
'loadingSpinner',
|
||||
config.get('spinner', mode === 'ios' ? 'lines' : 'crescent')
|
||||
);
|
||||
this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,10 +144,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, undefined);
|
||||
|
||||
if (this.duration > 0) {
|
||||
this.durationTimeout = setTimeout(
|
||||
() => this.dismiss(),
|
||||
this.duration + 10
|
||||
);
|
||||
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,7 +183,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
|
||||
private onBackdropTap = () => {
|
||||
this.dismiss(undefined, BACKDROP);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { message, spinner, htmlAttributes } = this;
|
||||
@ -189,16 +191,16 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
return (
|
||||
<Host
|
||||
tabindex="-1"
|
||||
{...htmlAttributes as any}
|
||||
{...(htmlAttributes as any)}
|
||||
style={{
|
||||
zIndex: `${40000 + this.overlayIndex}`
|
||||
zIndex: `${40000 + this.overlayIndex}`,
|
||||
}}
|
||||
onIonBackdropTap={this.onBackdropTap}
|
||||
class={{
|
||||
...getClassMap(this.cssClass),
|
||||
[mode]: true,
|
||||
'overlay-hidden': true,
|
||||
'loading-translucent': this.translucent
|
||||
'loading-translucent': this.translucent,
|
||||
}}
|
||||
>
|
||||
<ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss} />
|
||||
|
||||
@ -3,10 +3,10 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
import { testLoading } from '../test.utils';
|
||||
|
||||
const DIRECTORY = 'basic';
|
||||
const getActiveElementText = async page => {
|
||||
const getActiveElementText = async (page) => {
|
||||
const activeElement = await page.evaluateHandle(() => document.activeElement);
|
||||
return page.evaluate(el => el && el.textContent, activeElement);
|
||||
}
|
||||
return page.evaluate((el) => el?.textContent, activeElement);
|
||||
};
|
||||
|
||||
test('loading: focus trap', async () => {
|
||||
const page = await newE2EPage({ url: '/src/components/loading/test/basic?ionic:_testing=true' });
|
||||
@ -108,7 +108,7 @@ test('loading: htmlAttributes', async () => {
|
||||
expect(alert).not.toBe(null);
|
||||
await alert.waitForVisible();
|
||||
|
||||
const attribute = await page.evaluate(el => document.querySelector('ion-loading').getAttribute('data-testid'));
|
||||
const attribute = await page.evaluate(() => document.querySelector('ion-loading').getAttribute('data-testid'));
|
||||
|
||||
expect(attribute).toEqual('basic-loading');
|
||||
});
|
||||
|
||||
@ -1,135 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Loading - Basic</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { loadingController } from '../../../../../dist/ionic/index.esm.js';
|
||||
window.loadingController = loadingController;
|
||||
</script>
|
||||
<body>
|
||||
<ion-app>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button
|
||||
id="basic-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })"
|
||||
>Show Loading</ion-button
|
||||
>
|
||||
<ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})"
|
||||
>Show Default Loading</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="long-content-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
|
||||
>Show Loading with long message</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="no-spinner-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})"
|
||||
>Show Loading with no spinner</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="translucent-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})"
|
||||
>Show Loading with translucent</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="custom-class-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})"
|
||||
>Show Loading with cssClass</ion-button
|
||||
>
|
||||
<ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})"
|
||||
>Show Backdrop Click Loading</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="html-content-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})"
|
||||
>Show Loading with HTML content</ion-button
|
||||
>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="basic-loading" expand="block" onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })">Show Loading</ion-button>
|
||||
<ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
||||
<ion-button id="long-content-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
|
||||
<ion-button id="no-spinner-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
||||
<ion-button id="translucent-loading" expand="block" onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||
<ion-button id="custom-class-loading" expand="block" onclick="openLoading({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||
<ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||
<ion-button id="html-content-loading" expand="block" onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
<script>
|
||||
async function openLoading(opts) {
|
||||
const loading = await loadingController.create(opts);
|
||||
await loading.present();
|
||||
}
|
||||
</script>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
<style>
|
||||
.html-loading {
|
||||
--max-width: auto;
|
||||
}
|
||||
|
||||
</ion-app>
|
||||
<script>
|
||||
async function openLoading(opts) {
|
||||
const loading = await loadingController.create(opts);
|
||||
await loading.present();
|
||||
}
|
||||
</script>
|
||||
.custom-loading {
|
||||
--background: rgba(37, 210, 223, 0.8);
|
||||
--spinner-color: white;
|
||||
|
||||
<style>
|
||||
.html-loading {
|
||||
--max-width: auto;
|
||||
}
|
||||
--height: 100%;
|
||||
--max-height: auto;
|
||||
--width: 100%;
|
||||
--max-width: auto;
|
||||
|
||||
.custom-loading {
|
||||
--background: rgba(37, 210, 223, 0.8);
|
||||
--spinner-color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
--height: 100%;
|
||||
--max-height: auto;
|
||||
--width: 100%;
|
||||
--max-width: auto;
|
||||
f {
|
||||
display: block;
|
||||
background: blue;
|
||||
|
||||
color: white;
|
||||
}
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
f {
|
||||
display: block;
|
||||
background: blue;
|
||||
.red {
|
||||
background-color: #ea445a;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.green {
|
||||
background-color: #76d672;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ea445a;
|
||||
}
|
||||
.blue {
|
||||
background-color: #3478f6;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #76d672;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #ffff80;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #3478f6;
|
||||
}
|
||||
.pink {
|
||||
background-color: #ff6b86;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffff80;
|
||||
}
|
||||
.purple {
|
||||
background-color: #7e34f6;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: #ff6b86;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #7e34f6;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #f69234;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #f69234;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,45 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Loading - Standalone</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { loadingController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.loadingController = loadingController;
|
||||
</script>
|
||||
<body>
|
||||
<button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
|
||||
<button id="long-content-loading" onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
|
||||
<button id="no-spinner-loading" onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
|
||||
<button id="translucent-loading" onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
|
||||
<button id="custom-class-loading" onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
|
||||
<body>
|
||||
<button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
|
||||
<button
|
||||
id="long-content-loading"
|
||||
onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
|
||||
>
|
||||
Show Loading with long content
|
||||
</button>
|
||||
<button
|
||||
id="no-spinner-loading"
|
||||
onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})"
|
||||
>
|
||||
Show Loading with no spinner
|
||||
</button>
|
||||
<button
|
||||
id="translucent-loading"
|
||||
onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})"
|
||||
>
|
||||
Show Loading with translucent
|
||||
</button>
|
||||
<button
|
||||
id="custom-class-loading"
|
||||
onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})"
|
||||
>
|
||||
Show Loading with cssClass
|
||||
</button>
|
||||
|
||||
<style>
|
||||
body > button {
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
padding: 12px 8px;
|
||||
font-size: 1em;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body > button {
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
padding: 12px 8px;
|
||||
font-size: 1em;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
async function openLoading(opts) {
|
||||
const loading = await loadingController.create(opts);
|
||||
await loading.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<script>
|
||||
async function openLoading(opts) {
|
||||
const loading = await loadingController.create(opts);
|
||||
await loading.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
import { generateE2EUrl } from '@utils/test';
|
||||
|
||||
export const testLoading = async (
|
||||
type: string,
|
||||
selector: string,
|
||||
rtl = false
|
||||
) => {
|
||||
export const testLoading = async (type: string, selector: string, rtl = false) => {
|
||||
try {
|
||||
const pageUrl = generateE2EUrl('loading', type, rtl);
|
||||
|
||||
const page = await newE2EPage({
|
||||
url: pageUrl
|
||||
url: pageUrl,
|
||||
});
|
||||
|
||||
const screenshotCompares = [];
|
||||
@ -36,7 +32,6 @@ export const testLoading = async (
|
||||
for (const screenshotCompare of screenshotCompares) {
|
||||
expect(screenshotCompare).toMatchScreenshot();
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user