feat(prop): load controllers w/ prop connect and context

This commit is contained in:
Adam Bradley
2017-08-10 08:17:30 -05:00
parent 814268b31e
commit ccb63ee34f
28 changed files with 262 additions and 379 deletions

View File

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

View File

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