mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
fix overlays
This commit is contained in:
@ -1,6 +1,4 @@
|
|||||||
import {Component, View, bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef, DynamicComponentLoader, Injector} from 'angular2/angular2';
|
import {Component, View, bootstrap, ElementRef, NgZone, bind, DynamicComponentLoader, Injector} from 'angular2/angular2';
|
||||||
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
|
|
||||||
import {NgZone} from 'angular2/src/core/zone/ng_zone';
|
|
||||||
|
|
||||||
import {IonicRouter} from '../../routing/router';
|
import {IonicRouter} from '../../routing/router';
|
||||||
import {IonicConfig} from '../../config/config';
|
import {IonicConfig} from '../../config/config';
|
||||||
@ -28,7 +26,7 @@ export class IonicApp {
|
|||||||
|
|
||||||
load(appRef) {
|
load(appRef) {
|
||||||
this.ref(appRef);
|
this.ref(appRef);
|
||||||
this._zone = this.injector.get(NgZone);
|
this._zone = appRef.injector.get(NgZone);
|
||||||
}
|
}
|
||||||
|
|
||||||
focusHolder(val) {
|
focusHolder(val) {
|
||||||
@ -49,7 +47,7 @@ export class IonicApp {
|
|||||||
return this._ref;
|
return this._ref;
|
||||||
}
|
}
|
||||||
|
|
||||||
get injector {
|
get injector() {
|
||||||
return this._ref.injector;
|
return this._ref.injector;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -73,7 +71,6 @@ export class IonicApp {
|
|||||||
*/
|
*/
|
||||||
register(key, component) {
|
register(key, component) {
|
||||||
this.components[key] = component;
|
this.components[key] = component;
|
||||||
console.log('App: Registered component', key, component);
|
|
||||||
// TODO(mlynch): We need to track the lifecycle of this component to remove it onDehydrate
|
// TODO(mlynch): We need to track the lifecycle of this component to remove it onDehydrate
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,16 +88,8 @@ export class IonicApp {
|
|||||||
* @param Component the component to create and insert
|
* @param Component the component to create and insert
|
||||||
* @return Promise that resolves with the ContainerRef created
|
* @return Promise that resolves with the ContainerRef created
|
||||||
*/
|
*/
|
||||||
appendComponent(component: Type, context=null) {
|
appendComponent(componentType: Type, context=null) {
|
||||||
let loader = this.injector.get(DynamicComponentLoader);
|
return this.rootAnchor.append(componentType);
|
||||||
let rootComponentRef = this.ref()._hostComponent;
|
|
||||||
|
|
||||||
let bindings = this.injector._proto._strategy.bindings;
|
|
||||||
|
|
||||||
return loader.loadNextToLocation(component, rootComponentRef.location)
|
|
||||||
.catch(err => {
|
|
||||||
console.error('appendComponent:', err);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
applyBodyCss(bodyEle, platform, config) {
|
applyBodyCss(bodyEle, platform, config) {
|
||||||
@ -151,7 +140,27 @@ function initApp(window, document, config) {
|
|||||||
return app;
|
return app;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ionicBootstrap(component, config, router) {
|
@Component({
|
||||||
|
selector: 'root-anchor'
|
||||||
|
})
|
||||||
|
@View({
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
class RootAnchor {
|
||||||
|
constructor(app: IonicApp, elementRef: ElementRef, loader: DynamicComponentLoader) {
|
||||||
|
this.elementRef = elementRef;
|
||||||
|
this.loader = loader;
|
||||||
|
app.rootAnchor = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
append(componentType) {
|
||||||
|
return this.loader.loadNextToLocation(componentType, this.elementRef).catch(err => {
|
||||||
|
console.error(err)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ionicBootstrap(rootComponentType, config, router) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
try {
|
try {
|
||||||
// get the user config, or create one if wasn't passed in
|
// get the user config, or create one if wasn't passed in
|
||||||
@ -188,7 +197,7 @@ export function ionicBootstrap(component, config, router) {
|
|||||||
let popup = new Popup(app, config);
|
let popup = new Popup(app, config);
|
||||||
|
|
||||||
// add injectables that will be available to all child components
|
// add injectables that will be available to all child components
|
||||||
app.bindings = Injector.resolve([
|
let appBindings = Injector.resolve([
|
||||||
bind(IonicApp).toValue(app),
|
bind(IonicApp).toValue(app),
|
||||||
bind(IonicConfig).toValue(config),
|
bind(IonicConfig).toValue(config),
|
||||||
bind(IonicRouter).toValue(router),
|
bind(IonicRouter).toValue(router),
|
||||||
@ -197,15 +206,24 @@ export function ionicBootstrap(component, config, router) {
|
|||||||
bind(Popup).toValue(popup)
|
bind(Popup).toValue(popup)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
bootstrap(component, app.bindings).then(appRef => {
|
bootstrap(rootComponentType, appBindings).then(appRef => {
|
||||||
app.load(appRef);
|
app.load(appRef);
|
||||||
|
|
||||||
|
// Adding a anchor to add overlays off of...huh??
|
||||||
|
let elementRefs = appRef._hostComponent.hostView._view.elementRefs;
|
||||||
|
let lastElementRef = elementRefs[1];
|
||||||
|
let injector = lastElementRef.parentView._view.rootElementInjectors[0]._injector;
|
||||||
|
let loader = injector.get(DynamicComponentLoader);
|
||||||
|
loader.loadNextToLocation(RootAnchor, lastElementRef).then(() => {
|
||||||
// append the focus holder if its needed
|
// append the focus holder if its needed
|
||||||
if (config.setting('keyboardScrollAssist')) {
|
if (config.setting('keyboardScrollAssist')) {
|
||||||
app.appendComponent(FocusHolder).then(ref => {
|
app.appendComponent(FocusHolder).then(ref => {
|
||||||
app.focusHolder(ref.instance);
|
app.focusHolder(ref.instance);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error(err)
|
||||||
|
});
|
||||||
|
|
||||||
router.load(window, app, config).then(() => {
|
router.load(window, app, config).then(() => {
|
||||||
// resolve that the app has loaded
|
// resolve that the app has loaded
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.mode-md {
|
.mode-md {
|
||||||
ion-app, .ion-app {
|
ion-app {
|
||||||
font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif;
|
font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,8 +30,7 @@ body {
|
|||||||
@include user-select-none();
|
@include user-select-none();
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-app,
|
ion-app {
|
||||||
.ion-app {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
@ -26,8 +26,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ion-app,
|
ion-app {
|
||||||
.ion-app {
|
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
|
|
||||||
|
@ -8,16 +8,16 @@ import * as util from 'ionic/util';
|
|||||||
* sending/receiving app-level events.
|
* sending/receiving app-level events.
|
||||||
*/
|
*/
|
||||||
export class Ion {
|
export class Ion {
|
||||||
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
|
constructor(elementRef: ElementRef, config: IonicConfig) {
|
||||||
this.elementRef = elementRef;
|
this.elementRef = elementRef;
|
||||||
this.ionicConfig = ionicConfig;
|
this.config = config;
|
||||||
this.clsMode = this.ionicConfig.setting('mode');
|
this.clsMode = config.setting('mode');
|
||||||
}
|
}
|
||||||
|
|
||||||
onInit() {
|
onInit() {
|
||||||
let cls = this.constructor;
|
let cls = this.constructor;
|
||||||
|
|
||||||
if (cls.defaultProperties && this.ionicConfig) {
|
if (cls.defaultProperties && this.config) {
|
||||||
for (let prop in cls.defaultProperties) {
|
for (let prop in cls.defaultProperties) {
|
||||||
// Priority:
|
// Priority:
|
||||||
// ---------
|
// ---------
|
||||||
@ -35,7 +35,7 @@ export class Ion {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// get the property values from a global user/platform config
|
// get the property values from a global user/platform config
|
||||||
let configVal = this.ionicConfig.setting(prop);
|
let configVal = this.config.setting(prop);
|
||||||
if (configVal) {
|
if (configVal) {
|
||||||
this[prop] = configVal;
|
this[prop] = configVal;
|
||||||
continue;
|
continue;
|
||||||
|
@ -27,8 +27,7 @@ export class Nav extends ViewController {
|
|||||||
super(ancestorViewCtrl, injector, elementRef);
|
super(ancestorViewCtrl, injector, elementRef);
|
||||||
}
|
}
|
||||||
|
|
||||||
onInit() {
|
onIonInit() {
|
||||||
super.onInit();
|
|
||||||
|
|
||||||
if (this.root) {
|
if (this.root) {
|
||||||
this.push(this.root);
|
this.push(this.root);
|
||||||
|
@ -9,12 +9,12 @@ import * as util from 'ionic/util';
|
|||||||
|
|
||||||
export class Overlay {
|
export class Overlay {
|
||||||
|
|
||||||
constructor(app: IonicApp, ionicConfig: IonicConfig) {
|
constructor(app: IonicApp, config: IonicConfig) {
|
||||||
this.app = app;
|
this.app = app;
|
||||||
this.ionicConfig = ionicConfig;
|
this.mode = config.setting('mode');
|
||||||
}
|
}
|
||||||
|
|
||||||
create(overlayType, ComponentType: Type, opts={}, context=null) {
|
create(overlayType, componentType: Type, opts={}, context=null) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let app = this.app;
|
let app = this.app;
|
||||||
|
|
||||||
@ -22,14 +22,17 @@ export class Overlay {
|
|||||||
selector: 'ion-' + overlayType,
|
selector: 'ion-' + overlayType,
|
||||||
host: {
|
host: {
|
||||||
'[style.z-index]': 'zIndex',
|
'[style.z-index]': 'zIndex',
|
||||||
'class': overlayType + ' ion-app',
|
'mode': this.mode,
|
||||||
'mode': this.ionicConfig.setting('mode')
|
'class': overlayType
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);
|
let overlayComponentType = DirectiveBinding.createFromType(componentType, annotation);
|
||||||
|
|
||||||
app.appendComponent(overlayComponent, context).then(ref => {
|
// create a unique token that works as a cache key
|
||||||
let overlayRef = new OverlayRef(app, overlayType, opts, ref);
|
overlayComponentType.token = overlayType + componentType.name;
|
||||||
|
|
||||||
|
app.appendComponent(overlayComponentType).then(ref => {
|
||||||
|
let overlayRef = new OverlayRef(app, overlayType, opts, ref, context);
|
||||||
overlayRef._open(opts).then(() => {
|
overlayRef._open(opts).then(() => {
|
||||||
resolve(overlayRef);
|
resolve(overlayRef);
|
||||||
});
|
});
|
||||||
@ -70,10 +73,13 @@ export class Overlay {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class OverlayRef {
|
export class OverlayRef {
|
||||||
constructor(app, overlayType, opts, ref) {
|
constructor(app, overlayType, opts, ref, context) {
|
||||||
let overlayInstance = (ref && ref.instance);
|
let overlayInstance = (ref && ref.instance);
|
||||||
if (!overlayInstance) return;
|
if (!overlayInstance) return;
|
||||||
|
|
||||||
|
if (context) {
|
||||||
|
util.extend(ref.instance, context);
|
||||||
|
}
|
||||||
this._instance = overlayInstance;
|
this._instance = overlayInstance;
|
||||||
|
|
||||||
overlayInstance.viewLoaded && overlayInstance.viewLoaded();
|
overlayInstance.viewLoaded && overlayInstance.viewLoaded();
|
||||||
@ -90,7 +96,7 @@ export class OverlayRef {
|
|||||||
this.close(instanceOpts);
|
this.close(instanceOpts);
|
||||||
};
|
};
|
||||||
|
|
||||||
this._elementRef = ref.elementRef;
|
this._elementRef = ref.location;
|
||||||
this._type = overlayType;
|
this._type = overlayType;
|
||||||
this._opts = opts;
|
this._opts = opts;
|
||||||
this._handle = opts.handle || this.zIndex;
|
this._handle = opts.handle || this.zIndex;
|
||||||
|
@ -6,9 +6,9 @@ import {NavParams} from '../nav/nav-controller';
|
|||||||
|
|
||||||
export class ViewItem {
|
export class ViewItem {
|
||||||
|
|
||||||
constructor(viewCtrl, component, params = {}) {
|
constructor(viewCtrl, componentType, params = {}) {
|
||||||
this.viewCtrl = viewCtrl;
|
this.viewCtrl = viewCtrl;
|
||||||
this.component = component;
|
this.componentType = componentType;
|
||||||
this.params = new NavParams(params);
|
this.params = new NavParams(params);
|
||||||
this.instance = null;
|
this.instance = null;
|
||||||
this.state = 0;
|
this.state = 0;
|
||||||
@ -43,10 +43,14 @@ export class ViewItem {
|
|||||||
'class': 'nav-item'
|
'class': 'nav-item'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
let viewComponent = DirectiveBinding.createFromType(this.component, annotation);
|
|
||||||
|
let ionViewComponentType = DirectiveBinding.createFromType(this.componentType, annotation);
|
||||||
|
|
||||||
|
// create a unique token that works as a cache key
|
||||||
|
ionViewComponentType.token = 'ionView' + this.componentType.name;
|
||||||
|
|
||||||
// compile the Component
|
// compile the Component
|
||||||
viewCtrl.compiler.compileInHost(viewComponent).then(hostProtoViewRef => {
|
viewCtrl.compiler.compileInHost(ionViewComponentType).then(hostProtoViewRef => {
|
||||||
|
|
||||||
// figure out the sturcture of this Component
|
// figure out the sturcture of this Component
|
||||||
// does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
|
// does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
|
||||||
@ -69,7 +73,7 @@ export class ViewItem {
|
|||||||
var hostViewRef =
|
var hostViewRef =
|
||||||
contentContainer.createHostView(hostProtoViewRef, -1, bindings);
|
contentContainer.createHostView(hostProtoViewRef, -1, bindings);
|
||||||
var newLocation = viewCtrl.viewMngr.getHostElement(hostViewRef);
|
var newLocation = viewCtrl.viewMngr.getHostElement(hostViewRef);
|
||||||
var component = viewCtrl.viewMngr.getComponent(newLocation);
|
var newComponent = viewCtrl.viewMngr.getComponent(newLocation);
|
||||||
|
|
||||||
var dispose = () => {
|
var dispose = () => {
|
||||||
var index = contentContainer.indexOf(hostViewRef);
|
var index = contentContainer.indexOf(hostViewRef);
|
||||||
@ -78,7 +82,7 @@ export class ViewItem {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.disposals.push(dispose);
|
this.disposals.push(dispose);
|
||||||
var viewComponetRef = new ComponentRef(newLocation, component, dispose);
|
var viewComponetRef = new ComponentRef(newLocation, newComponent, dispose);
|
||||||
|
|
||||||
// get the component's instance, and set it to the this ViewItem
|
// get the component's instance, and set it to the this ViewItem
|
||||||
this.setInstance(viewComponetRef.instance);
|
this.setInstance(viewComponetRef.instance);
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import {onInit, Directive} from 'angular2/angular2';
|
import {Directive} from 'angular2/angular2';
|
||||||
|
|
||||||
import {IonicApp} from 'ionic/ionic'
|
import {IonicApp} from 'ionic/ionic'
|
||||||
|
|
||||||
@ -11,17 +11,18 @@ import {IonicApp} from 'ionic/ionic'
|
|||||||
],
|
],
|
||||||
host: {
|
host: {
|
||||||
'this.register-id': 'registerId'
|
'this.register-id': 'registerId'
|
||||||
},
|
}
|
||||||
lifecycle: [onInit]
|
|
||||||
})
|
})
|
||||||
export class Register {
|
export class Register {
|
||||||
|
|
||||||
constructor(app: IonicApp) {
|
constructor(app: IonicApp) {
|
||||||
this.app = app;
|
this.app = app;
|
||||||
}
|
}
|
||||||
|
|
||||||
onInit() {
|
onInit() {
|
||||||
if(!this.register || !this.registerId) {
|
if (this.register && this.registerId) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.app.register(this.registerId, this.register);
|
this.app.register(this.registerId, this.register);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user