javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(): deprecate web component controllers (#19109)

Browse Source
This commit is contained in:
Manu MA
2019-08-27 14:00:45 +02:00
committed by GitHub
parent 3e63b3c2c4
commit a65d897214
71 changed files with 1446 additions and 1472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Animation, AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';
@ -30,7 +30,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
animation?: Animation;
mode = getIonMode(this);
@Element() el!: HTMLElement;
@Element() el!: HTMLIonLoadingElement;
/** @internal */
@Prop() overlayIndex!: number;
@ -113,6 +113,10 @@ export class Loading implements ComponentInterface, OverlayInterface {
*/
@Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
constructor() {
prepareOverlay(this.el);
}
componentWillLoad() {
if (this.spinner === undefined) {
const mode = getIonMode(this);

31
core/src/components/loading/readme.md
View File

@ -62,13 +62,11 @@ export class LoadingExample {
```javascript
async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
const loading = await loadingController.create({
message: 'Hellooo',
duration: 2000
});
const loading = document.createElement('ion-loading');
loading.message: 'Hellooo',
loading.duration: 2000;
document.body.appendChild(loading);
await loading.present();
const { role, data } = await loading.onDidDismiss();
@ -76,17 +74,16 @@ async function presentLoading() {
console.log('Loading dismissed!');
}
async function presentLoadingWithOptions() {
const loadingController = document.querySelector('ion-loading-controller');
const loading = await loadingController.create({
spinner: null,
duration: 5000,
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});
return await loading.present();
function presentLoadingWithOptions() {
const loading = document.createElement('ion-loading');
loading.spinner = null;
loading.duration = 5000;
loading.message = 'Please wait...';
loading.translucent = true;
loading.cssClass = 'custom-class custom-loading';
document.body.appendChild(loading);
return loading.present();
}
```

18
core/src/components/loading/test/basic/index.html
View File

@ -30,8 +30,6 @@
<ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-button id="html-content-loading" expand="block" onclick="presentLoadingWithOptions({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>
<ion-loading-controller></ion-loading-controller>
<ion-grid>
<ion-row>
<ion-col size="6">
@ -64,19 +62,19 @@
</ion-app>
<script>
async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
const loadingElement = await loadingController.create({
function presentLoading() {
const loadingElement = Object.assign(document.createElement('ion-loading'), {
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();
document.body.appendChild(loadingElement);
return loadingElement.present();
}
async function presentLoadingWithOptions(opts) {
const loadingController = document.querySelector('ion-loading-controller');
const loadingElement = await loadingController.create(opts);
return await loadingElement.present();
function presentLoadingWithOptions(opts) {
const loadingElement = Object.assign(document.createElement('ion-loading'), opts);
document.body.appendChild(loadingElement);
return loadingElement.present();
}
</script>

16
core/src/components/loading/test/standalone/index.html
View File

@ -18,8 +18,6 @@
<button id="translucent-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
<button id="custom-class-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
<ion-loading-controller></ion-loading-controller>
<style>
body > button {
display: block;
@ -36,18 +34,18 @@
<script>
async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
const loadingElement = await loadingController.create({
const loadingElement = Object.assign(document.createElement('ion-loading'), {
message: 'Hellooo',
duration: 5000
});
return await loadingElement.present();
document.body.appendChild(loadingElement);
return loadingElement.present();
}
async function presentLoadingWithOptions(opts) {
const loadingController = document.querySelector('ion-loading-controller');
const loadingElement = await loadingController.create(opts);
return await loadingElement.present();
function presentLoadingWithOptions(opts) {
const loadingElement = Object.assign(document.createElement('ion-loading'), opts);
document.body.appendChild(loadingElement);
return loadingElement.present();
}
</script>
</body>

29
core/src/components/loading/usage/javascript.md
View File

@ -1,12 +1,10 @@
```javascript
async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
const loading = await loadingController.create({
message: 'Hellooo',
duration: 2000
});
const loading = document.createElement('ion-loading');
loading.message: 'Hellooo',
loading.duration: 2000;
document.body.appendChild(loading);
await loading.present();
const { role, data } = await loading.onDidDismiss();
@ -14,16 +12,15 @@ async function presentLoading() {
console.log('Loading dismissed!');
}
async function presentLoadingWithOptions() {
const loadingController = document.querySelector('ion-loading-controller');
function presentLoadingWithOptions() {
const loading = document.createElement('ion-loading');
loading.spinner = null;
loading.duration = 5000;
loading.message = 'Please wait...';
loading.translucent = true;
loading.cssClass = 'custom-class custom-loading';
const loading = await loadingController.create({
spinner: null,
duration: 5000,
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});
return await loading.present();
document.body.appendChild(loading);
return loading.present();
}
```