fix(angular): modal and popover support

This commit is contained in:
Manu Mtz.-Almeida
2018-03-13 20:53:17 +01:00
parent 6e2ca85b2a
commit 9a0755a268
9 changed files with 80 additions and 50 deletions

View File

@@ -1,41 +1,5 @@
export interface FrameworkDelegate {
attachViewToDom(elementOrContainerToMountTo: any, elementOrComponentToMount: any, propsOrDataObj?: any, classesToAdd?: string[], escapeHatch?: any): Promise<FrameworkMountingData>;
removeViewFromDom(elementOrContainerToUnmountFrom: any, elementOrComponentToUnmount: any, escapeHatch?: any): Promise<void>;
}
export interface FrameworkMountingData {
element: HTMLElement;
component: any;
data: any;
}
export class DomFrameworkDelegate implements FrameworkDelegate {
attachViewToDom(parentElement: HTMLElement, tagOrElement: string | HTMLElement, data: any = {}, classesToAdd: string[] = []): Promise<FrameworkMountingData> {
return new Promise((resolve) => {
const usersElement = (typeof tagOrElement === 'string' ? document.createElement(tagOrElement) : tagOrElement);
Object.assign(usersElement, data);
if (classesToAdd.length) {
for (const clazz of classesToAdd) {
usersElement.classList.add(clazz);
}
}
parentElement.appendChild(usersElement);
resolve({
element: usersElement,
data: data,
component: tagOrElement
});
});
}
removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement): Promise<void> {
parentElement.removeChild(childElement);
return Promise.resolve();
}
attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<any>;
removeViewFromDom(container: any, component: any): Promise<void>;
}

View File

@@ -1,5 +1,5 @@
import { EventEmitter } from '@stencil/core';
import { Animation, AnimationBuilder, Config, CssClassMap } from '..';
import { Animation, AnimationBuilder, Config, CssClassMap, FrameworkDelegate } from '..';
let lastId = 1;
@@ -137,7 +137,10 @@ export function autoFocus(containerEl: HTMLElement): HTMLElement|null {
return null;
}
export function attachComponent(container: Element, component: string|HTMLElement, cssClasses: CssClassMap, data: any): Promise<HTMLElement> {
export function attachComponent(delegate: FrameworkDelegate, container: Element, component: string|HTMLElement, cssClasses: CssClassMap, data: any): Promise<HTMLElement> {
if (delegate) {
return delegate.attachViewToDom(container, component, data, Object.keys(cssClasses));
}
const el = (typeof component === 'string') ? document.createElement(component) : component;
Object.assign(el, data);
Object.keys(cssClasses).forEach(c => el.classList.add(c));