From 15b45f5f30c530d0c2c3e8bb42618e7a649cead2 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 3 Aug 2017 08:51:25 -0500 Subject: [PATCH] feat(Ionic): import Ionic for controllers and config --- .../core/src/components/content/content.tsx | 2 +- packages/core/src/components/fixed/fixed.tsx | 1 + .../core/src/components/gesture/gesture.tsx | 4 ++ .../loading-controller/loading-controller.tsx | 3 +- .../modal-controller/modal-controller.tsx | 15 +++--- packages/core/src/components/modal/modal.tsx | 46 +++++++++++-------- .../core/src/components/scroll/scroll.tsx | 1 + .../core/src/components/spinner/spinner.tsx | 1 + .../core/src/components/toolbar/navbar.tsx | 1 + .../core/src/components/toolbar/toolbar.tsx | 1 + packages/core/src/global/ionic-global.ts | 33 ++++++------- packages/core/src/{index.d.ts => index.ts} | 14 +++--- 12 files changed, 71 insertions(+), 51 deletions(-) rename packages/core/src/{index.d.ts => index.ts} (83%) diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index 91a0c37b0c..67fa9bd922 100644 --- a/packages/core/src/components/content/content.tsx +++ b/packages/core/src/components/content/content.tsx @@ -1,5 +1,5 @@ import { Component, Element, Prop } from '@stencil/core'; -import { Scroll, ScrollDetail } from '../../index'; +import { Ionic, Scroll, ScrollDetail } from '../../index'; import { createThemedClasses } from '../../utils/theme'; import { getParentElement, getToolbarHeight } from '../../utils/helpers'; diff --git a/packages/core/src/components/fixed/fixed.tsx b/packages/core/src/components/fixed/fixed.tsx index 64eb0b9989..69a9df670a 100644 --- a/packages/core/src/components/fixed/fixed.tsx +++ b/packages/core/src/components/fixed/fixed.tsx @@ -1,5 +1,6 @@ import { Component, Element } from '@stencil/core'; import { getParentElement, getToolbarHeight } from '../../utils/helpers'; +import { Ionic } from '../../index'; @Component({ diff --git a/packages/core/src/components/gesture/gesture.tsx b/packages/core/src/components/gesture/gesture.tsx index b4ea0d2bdf..2da90f6823 100644 --- a/packages/core/src/components/gesture/gesture.tsx +++ b/packages/core/src/components/gesture/gesture.tsx @@ -2,6 +2,7 @@ import { applyStyles, getElementReference, pointerCoordX, pointerCoordY } from ' import { BlockerDelegate } from './gesture-controller'; import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core'; import { GestureController, GestureDelegate, BLOCK_ALL } from './gesture-controller'; +import { Ionic } from '../../index'; import { PanRecognizer } from './recognizers'; @@ -49,6 +50,9 @@ export class Gesture { ionViewDidLoad() { + // in this case, we already know the GestureController and Gesture are already + // apart of the same bundle, so it's safe to load it this way + // only create one instance of GestureController, and reuse the same one later this.ctrl = Ionic.controllers.gesture = (Ionic.controllers.gesture || new GestureController()); this.gesture = this.ctrl.createGesture(this.gestureName, this.gesturePriority, this.disableScroll); diff --git a/packages/core/src/components/loading-controller/loading-controller.tsx b/packages/core/src/components/loading-controller/loading-controller.tsx index 44ce7f073a..bc844bb572 100644 --- a/packages/core/src/components/loading-controller/loading-controller.tsx +++ b/packages/core/src/components/loading-controller/loading-controller.tsx @@ -1,4 +1,5 @@ import { Component, Listen } from '@stencil/core'; +import { Ionic } from '../../index'; import { LoadingEvent, LoadingOptions, Loading, IonicControllerApi } from '../../index'; @@ -15,7 +16,7 @@ export class LoadingController implements IonicControllerApi { ionViewDidLoad() { this.appRoot = document.querySelector('ion-app') || document.body; - Ionic.loadController('loading', this); + Ionic.registerController('loading', this); } diff --git a/packages/core/src/components/modal-controller/modal-controller.tsx b/packages/core/src/components/modal-controller/modal-controller.tsx index 8085968627..23626aab93 100644 --- a/packages/core/src/components/modal-controller/modal-controller.tsx +++ b/packages/core/src/components/modal-controller/modal-controller.tsx @@ -1,4 +1,5 @@ import { Component, Listen } from '@stencil/core'; +import { Ionic } from '../../index'; import { ModalEvent, ModalOptions, Modal, IonicControllerApi } from '../../index'; @@ -15,7 +16,7 @@ export class ModalController implements IonicControllerApi { ionViewDidLoad() { this.appRoot = document.querySelector('ion-app') || document.body; - Ionic.loadController('modal', this); + Ionic.registerController('modal', this); } @@ -44,8 +45,8 @@ export class ModalController implements IonicControllerApi { @Listen('body:ionModalDidLoad') - viewDidLoad(ev: ModalEvent) { - const modal = ev.modal; + modalDidLoad(ev: ModalEvent) { + const modal = ev.detail.modal; const modalResolve = this.modalResolves[modal.id]; if (modalResolve) { modalResolve(modal); @@ -55,14 +56,14 @@ export class ModalController implements IonicControllerApi { @Listen('body:ionModalWillPresent') - willPresent(ev: ModalEvent) { - this.modals.push(ev.modal); + modalWillPresent(ev: ModalEvent) { + this.modals.push(ev.detail.modal); } @Listen('body:ionModalWillDismiss, body:ionModalDidUnload') - willDismiss(ev: ModalEvent) { - const index = this.modals.indexOf(ev.modal); + modalWillDismiss(ev: ModalEvent) { + const index = this.modals.indexOf(ev.detail.modal); if (index > -1) { this.modals.splice(index, 1); } diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index cff7f68c25..2c3973b23b 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -1,5 +1,5 @@ import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core'; -import { AnimationBuilder, Animation } from '../../index'; +import { AnimationBuilder, Animation, Ionic } from '../../index'; import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; @@ -63,7 +63,7 @@ export class Modal { this.animation = null; } - this.ionModalWillPresent.emit({ modal: this } as ModalEvent); + this.ionModalWillPresent.emit({ modal: this }); // get the user's animation fn if one was provided let animationBuilder = this.enterAnimation; @@ -75,14 +75,16 @@ export class Modal { animationBuilder = iOSEnterAnimation; } - // build the animation and kick it off - this.animation = animationBuilder(this.el); + Ionic.controller('animation').then(Animation => { + // build the animation and kick it off + this.animation = animationBuilder(Animation, this.el); - this.animation.onFinish((a: any) => { - a.destroy(); - this.ionModalDidPresent.emit({ modal: this }); - resolve(); - }).play(); + this.animation.onFinish((a: any) => { + a.destroy(); + this.ionModalDidPresent.emit({ modal: this }); + resolve(); + }).play(); + }); } dismiss() { @@ -105,16 +107,18 @@ export class Modal { } // build the animation and kick it off - this.animation = animationBuilder(this.el); - this.animation.onFinish((a: any) => { - a.destroy(); - this.ionModalDidDismiss.emit({ modal: this }); + Ionic.controller('animation').then(Animation => { + this.animation = animationBuilder(Animation, this.el); + this.animation.onFinish((a: any) => { + a.destroy(); + this.ionModalDidDismiss.emit({ modal: this }); - Core.dom.write(() => { - this.el.parentNode.removeChild(this.el); - }); - resolve(); - }).play(); + Core.dom.write(() => { + this.el.parentNode.removeChild(this.el); + }); + resolve(); + }).play(); + }); }); } @@ -176,6 +180,8 @@ export interface ModalOptions { } -export interface ModalEvent { - modal: Modal; +export interface ModalEvent extends Event { + detail: { + modal: Modal; + } } diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx index c0d54e9c25..ed532ee31b 100644 --- a/packages/core/src/components/scroll/scroll.tsx +++ b/packages/core/src/components/scroll/scroll.tsx @@ -1,6 +1,7 @@ import { Component, Element, Listen, Prop } from '@stencil/core'; import { GestureDetail } from '../../index'; import { GestureController, GestureDelegate } from '../gesture/gesture-controller'; +import { Ionic } from '../../index'; @Component({ diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx index 7c3e657f26..901a00e4d8 100644 --- a/packages/core/src/components/spinner/spinner.tsx +++ b/packages/core/src/components/spinner/spinner.tsx @@ -1,5 +1,6 @@ import { Component, Prop } from '@stencil/core'; import { createThemedClasses } from '../../utils/theme'; +import { Ionic } from '../../index'; import { SPINNERS, SpinnerConfig } from './spinner-configs'; diff --git a/packages/core/src/components/toolbar/navbar.tsx b/packages/core/src/components/toolbar/navbar.tsx index 0a76761008..49e72c20a1 100644 --- a/packages/core/src/components/toolbar/navbar.tsx +++ b/packages/core/src/components/toolbar/navbar.tsx @@ -1,5 +1,6 @@ import { Component, Element, Prop } from '@stencil/core'; import { createThemedClasses } from '../../utils/theme'; +import { Ionic } from '../../index'; /** diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx index f07b52300d..6711883bed 100644 --- a/packages/core/src/components/toolbar/toolbar.tsx +++ b/packages/core/src/components/toolbar/toolbar.tsx @@ -1,5 +1,6 @@ import { Component, Element } from '@stencil/core'; import { createThemedClasses } from '../../utils/theme'; +import { Ionic } from '../../index'; /** diff --git a/packages/core/src/global/ionic-global.ts b/packages/core/src/global/ionic-global.ts index 04328b5099..c068fad291 100644 --- a/packages/core/src/global/ionic-global.ts +++ b/packages/core/src/global/ionic-global.ts @@ -4,28 +4,16 @@ import { IonicControllerApi, IonicGlobal } from '../index'; // create the Ionic global (if one doesn't exist) -const Ionic: IonicGlobal = (window as any)['Ionic'] = (window as any)['Ionic'] || {}; - -// create the Ionic.config from raw config object (if it exists) -// and convert Ionic.config into a ConfigApi that has a get() fn -Ionic.config = createConfigController( - Ionic.config, - detectPlatforms(window.location.href, window.navigator.userAgent, PLATFORM_CONFIGS, 'core') -); - -// get the mode via config settings and set it to -// both Ionic and the Core global -Core.mode = Ionic.mode = Ionic.config.get('mode', 'md'); - +const Ionic: IonicGlobal = (window as any).Ionic = (window as any).Ionic || {}; // used to store the queued controller promises to // be resolved when the controller finishes loading const queuedCtrlResolves: {[ctrlName: string]: any[]} = {}; - // create a container for all of the controllers that get loaded Ionic.controllers = {}; +// create the public method to load controllers Ionic.controller = (ctrlName: string, opts?: any) => { // loading a controller is always async so return a promise return new Promise((resolve: Function) => { @@ -59,8 +47,8 @@ Ionic.controller = (ctrlName: string, opts?: any) => { }); }; - -Ionic.loadController = (ctrlName: string, ctrl: IonicControllerApi) => { +// create the method controllers will call once their instance has loaded +Ionic.registerController = (ctrlName: string, ctrl: IonicControllerApi) => { // this method is called when the singleton // instance of our controller initially loads @@ -97,3 +85,16 @@ function resolveController(ctrl: IonicControllerApi, resolve: Function, opts: an resolve(ctrl); } } + + +// create the Ionic.config from raw config object (if it exists) +// and convert Ionic.config into a ConfigApi that has a get() fn +Ionic.config = createConfigController( + Ionic.config, + detectPlatforms(window.location.href, window.navigator.userAgent, PLATFORM_CONFIGS, 'core') +); + + +// get the mode via config settings and set it to +// both Ionic and the Core global +Core.mode = Ionic.mode = Ionic.config.get('mode', 'md'); diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.ts similarity index 83% rename from packages/core/src/index.d.ts rename to packages/core/src/index.ts index 8d75a8a908..881dd4c0c0 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.ts @@ -1,4 +1,5 @@ -import { Animation, AnimationBuilder } from './animations/interfaces'; +import { AnimationController } from './components/animation-controller/animation-controller'; +import { Animation, AnimationBuilder } from './components/animation-controller/animation-interface'; import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading'; import { LoadingController } from './components/loading-controller/loading-controller'; import { GestureDetail, GestureCallback } from './components/gesture/gesture'; @@ -13,22 +14,20 @@ import { SegmentButton, SegmentButtonEvent } from './components/segment-button/s import * as Stencil from '@stencil/core'; -declare global { - const Ionic: IonicGlobal; -} +export const Ionic: IonicGlobal = (window as any).Ionic; export interface IonicGlobal extends Stencil.AppGlobal { - Animation?: Animation; controllers?: {[ctrlName: string]: any}; controller?: IonicController; config: ConfigApi; - loadController?: (ctrlName: string, ctrl: any) => void; + registerController?: (ctrlName: string, ctrl: any) => void; mode: string; } export interface IonicController { + (ctrlName: 'animation'): Promise; (ctrlName: 'loading', opts: LoadingOptions): Promise; (ctrlName: 'menu'): Promise; (ctrlName: 'modal', opts: ModalOptions): Promise; @@ -70,6 +69,8 @@ export interface BooleanInputComponent extends BaseInputComponent { export { Animation, AnimationBuilder, + AnimationController, + GestureCallback, GestureDetail, Loading, LoadingOptions, @@ -79,6 +80,7 @@ export { MenuController, MenuType, Modal, + ModalController, ModalOptions, ModalEvent, Scroll,