mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(prop): load controllers w/ prop connect and context
This commit is contained in:
@@ -1,32 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Loading Controller
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-loading-controller {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Loading Controller Backdrop
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the backdrop
|
||||
$loading-backdrop-color: #000 !default;
|
||||
|
||||
|
||||
.loading-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-backdrop;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: $loading-backdrop-color;
|
||||
opacity: .01;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@@ -1,26 +1,17 @@
|
||||
import { Component, Listen } from '@stencil/core';
|
||||
import { Ionic } from '../../index';
|
||||
import { LoadingEvent, LoadingOptions, Loading, IonicControllerApi } from '../../index';
|
||||
import { Component, Listen, Method } from '@stencil/core';
|
||||
import { LoadingEvent, LoadingOptions, Loading } from '../../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-loading-controller',
|
||||
styleUrl: 'loading-controller.scss'
|
||||
tag: 'ion-loading-ctrl'
|
||||
})
|
||||
export class LoadingController implements IonicControllerApi {
|
||||
export class LoadingController {
|
||||
private ids = 0;
|
||||
private loadingResolves: {[loadingId: string]: Function} = {};
|
||||
private loadings: Loading[] = [];
|
||||
private appRoot: Element;
|
||||
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.appRoot = document.querySelector('ion-app') || document.body;
|
||||
Ionic.registerController('loading', this);
|
||||
}
|
||||
|
||||
|
||||
load(opts?: LoadingOptions) {
|
||||
@Method()
|
||||
create(opts?: LoadingOptions) {
|
||||
// create ionic's wrapping ion-loading component
|
||||
const loading = document.createElement('ion-loading');
|
||||
|
||||
@@ -35,7 +26,8 @@ export class LoadingController implements IonicControllerApi {
|
||||
Object.assign(loading, opts);
|
||||
|
||||
// append the loading element to the document body
|
||||
this.appRoot.appendChild(loading as any);
|
||||
const appRoot = document.querySelector('ion-app') || document.body;
|
||||
appRoot.appendChild(loading as any);
|
||||
|
||||
// store the resolve function to be called later up when the loading loads
|
||||
return new Promise<Loading>(resolve => {
|
||||
@@ -45,7 +37,7 @@ export class LoadingController implements IonicControllerApi {
|
||||
|
||||
|
||||
@Listen('body:ionLoadingDidLoad')
|
||||
viewDidLoad(ev: LoadingEvent) {
|
||||
protected viewDidLoad(ev: LoadingEvent) {
|
||||
const loading = ev.detail.loading;
|
||||
const loadingResolve = this.loadingResolves[loading.id];
|
||||
if (loadingResolve) {
|
||||
@@ -56,13 +48,13 @@ export class LoadingController implements IonicControllerApi {
|
||||
|
||||
|
||||
@Listen('body:ionLoadingWillPresent')
|
||||
willPresent(ev: LoadingEvent) {
|
||||
protected willPresent(ev: LoadingEvent) {
|
||||
this.loadings.push(ev.detail.loading);
|
||||
}
|
||||
|
||||
|
||||
@Listen('body:ionLoadingWillDismiss, body:ionLoadingDidUnload')
|
||||
willDismiss(ev: LoadingEvent) {
|
||||
protected willDismiss(ev: LoadingEvent) {
|
||||
const index = this.loadings.indexOf(ev.detail.loading);
|
||||
if (index > -1) {
|
||||
this.loadings.splice(index, 1);
|
||||
@@ -71,7 +63,7 @@ export class LoadingController implements IonicControllerApi {
|
||||
|
||||
|
||||
@Listen('body:keyup.escape')
|
||||
escapeKeyUp() {
|
||||
protected escapeKeyUp() {
|
||||
const lastLoading = this.loadings[this.loadings.length - 1];
|
||||
if (lastLoading) {
|
||||
lastLoading.dismiss();
|
||||
|
||||
Reference in New Issue
Block a user