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

refactor(framework-delegate): wrap user element with ion-page for modal and nav

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-04 13:01:31 -06:00
parent ebfb54ff21
commit e64944d6de
6 changed files with 62 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/angular/src/providers/angular-component-mounter.ts
View File

@ -1,7 +1,6 @@
import {
ApplicationRef,
ComponentFactoryResolver,
ComponentRef,
Injectable,
Injector,
NgZone,
@ -12,7 +11,7 @@ import {
import { getProviders } from '../di/di';
import { AngularMountingData } from '../types/interfaces';
const elementToComponentRefMap = new Map<HTMLElement, ComponentRef<any>>();
const elementToComponentRefMap = new Map<HTMLElement, AngularMountingData>();
@Injectable()
export class AngularComponentMounter {
@ -20,14 +19,14 @@ export class AngularComponentMounter {
constructor(private defaultCfr: ComponentFactoryResolver, private zone: NgZone, private appRef: ApplicationRef) {
}
attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, data: any, classesToAdd: string[], wrapUserTemplateInIonPage: boolean): Promise<AngularMountingData> {
attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, data: any, classesToAdd: string[], wrapUserComponentInIonPage: boolean): Promise<AngularMountingData> {
return new Promise((resolve) => {
this.zone.run(() => {
const crf = componentResolveFactory ? componentResolveFactory : this.defaultCfr;
const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, data, classesToAdd, wrapUserTemplateInIonPage);
const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, data, classesToAdd, wrapUserComponentInIonPage);
resolve(mountingData);
});
});
@ -45,16 +44,17 @@ export class AngularComponentMounter {
}
export function removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) {
const componentRef = elementToComponentRefMap.get(childElement);
if (componentRef) {
componentRef.destroy();
if (parentElement.contains(childElement)) {
parentElement.removeChild(childElement);
const mountingData = elementToComponentRefMap.get(childElement);
if (mountingData) {
const componentParent = mountingData.element.parentNode;
mountingData.componentRef.destroy();
if (mountingData.wrapUserComponentInIonPage && parentElement.contains(componentParent) ) {
parentElement.removeChild(componentParent)
}
}
}
export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, injector: Injector, appRef: ApplicationRef, data: any, classesToAdd: string[], wrapUserTemplateInIonPage: boolean): AngularMountingData {
export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, injector: Injector, appRef: ApplicationRef, data: any, classesToAdd: string[], wrapUserComponentInIonPage: boolean): AngularMountingData {
const componentProviders = ReflectiveInjector.resolve(getProviders(parentElement, data));
const componentFactory = crf.resolveComponentFactory(componentToMount);
@ -62,32 +62,34 @@ export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HT
hostElement = document.createElement(componentFactory.selector);
}
let mountingElement = hostElement;
if (wrapUserTemplateInIonPage) {
const ionPageElement = document.createElement('ion-page');
hostElement.appendChild(ionPageElement);
mountingElement = ionPageElement;
}
const childInjector = ReflectiveInjector.fromResolvedProviders(componentProviders, injector);
const componentRef = componentFactory.create(childInjector, [], mountingElement);
const componentRef = componentFactory.create(childInjector, [], hostElement);
for (const clazz of classesToAdd) {
hostElement.classList.add(clazz);
}
parentElement.appendChild(hostElement);
const elementToAppend = wrapUserComponentInIonPage ? getIonPageElement(hostElement) : hostElement;
parentElement.appendChild(elementToAppend);
appRef.attachView(componentRef.hostView);
elementToComponentRefMap.set(hostElement, componentRef);
return {
const mountingData = {
componentFactory,
childInjector,
componentRef,
instance: componentRef.instance,
angularHostElement: componentRef.location.nativeElement,
element: hostElement,
wrapUserComponentInIonPage
};
elementToComponentRefMap.set(hostElement, mountingData);
return mountingData;
}
export function getIonPageElement(hostElement: HTMLElement) {
const page = document.createElement('ion-page');
page.appendChild(hostElement);
return page;
}

1
packages/angular/src/types/interfaces.ts
View File

@ -12,4 +12,5 @@ export interface AngularMountingData extends FrameworkMountingData {
componentRef?: ComponentRef<any>;
instance?: any;
angularHostElement?: HTMLElement;
wrapUserComponentInIonPage?: boolean;
}

21
packages/core/src/utils/dom-framework-delegate.ts
View File

@ -1,21 +1,24 @@
import { FrameworkDelegate, FrameworkMountingData, } from '../index';
import { isString } from './helpers';
import { isElementModal, isElementNav, isString } from './helpers';
export class DomFrameworkDelegate implements FrameworkDelegate {
attachViewToDom(parentElement: HTMLElement, tagOrElement: string | HTMLElement, propsOrDataObj: any = {}, classesToAdd: string[] = []): Promise<FrameworkMountingData> {
return new Promise((resolve) => {
const usersElement = (isString(tagOrElement) ? document.createElement(tagOrElement) : tagOrElement) as HTMLElement;
Object.assign(usersElement, propsOrDataObj);
if (classesToAdd.length) {
for (const clazz of classesToAdd) {
usersElement.classList.add(clazz);
}
}
parentElement.appendChild(usersElement);
const elementToAppend = shouldWrapInIonPage(parentElement) ? createIonPageAndAppendUserElement(usersElement) : usersElement;
parentElement.appendChild(elementToAppend);
resolve({
element: usersElement
element: elementToAppend
});
});
}
@ -27,3 +30,13 @@ export class DomFrameworkDelegate implements FrameworkDelegate {
});
}
}
export function shouldWrapInIonPage(element: HTMLElement) {
return isElementModal(element) || isElementNav(element);
}
export function createIonPageAndAppendUserElement(userElement: HTMLElement) {
const wrappingElement = document.createElement('ion-page');
wrappingElement.appendChild(userElement);
return wrappingElement;
}

8
packages/core/src/utils/helpers.ts
View File

@ -24,6 +24,14 @@ export function isStringOrNumber(v: any): v is (string | number) { return isStri
export function isBlank(val: any): val is null { return val === undefined || val === null; }
export function isElementNav(element: HTMLElement) {
return element.tagName.toUpperCase() === 'ION-NAV';
}
export function isElementModal(element: HTMLElement) {
return element.classList.contains('modal-wrapper');
}
/** @hidden */
export function isCheckedProperty(a: any, b: any): boolean {
if (a === undefined || a === null || a === '') {

8
packages/react/src/react-framework-delegate.ts
View File

@ -2,10 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { FrameworkDelegate } from '@ionic/core';
import { isElementModal, isElementNav } from './utils/helpers';
export function attachViewToDom(parentElement: HTMLElement, reactComponent: any, propsOrData: any, classesToAdd: string[]) {
console.log('parentElement: ', parentElement);
console.log('reactComponent: ', reactComponent);
const wrappingDiv = shouldWrapInIonPage(parentElement) ? document.createElement('ion-page') : document.createElement('div');
if (classesToAdd) {
for (const clazz of classesToAdd) {
@ -41,8 +40,5 @@ export { Delegate }
export function shouldWrapInIonPage(element: HTMLElement) {
if (element.tagName.toUpperCase() === 'ION-NAV' || element.classList.contains('modal-wrapper')) {
return true;
}
return false;
return isElementModal(element) || isElementNav(element);
}

8
packages/react/src/utils/helpers.ts
View File

@ -8,3 +8,11 @@ export function getOrAppendElement(tagName: string): Element {
document.body.appendChild(tmp);
return tmp;
}
export function isElementNav(element: HTMLElement) {
return element.tagName.toUpperCase() === 'ION-NAV';
}
export function isElementModal(element: HTMLElement) {
return element.classList.contains('modal-wrapper');
}