@wasp-ui/ng-golden-layout
Version:
Angular bindings for golden-layout
238 lines • 9.04 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { ComponentFactoryResolver, HostListener, ViewContainerRef, ElementRef, Component, NgZone, InjectionToken, Injector, ReflectiveInjector, ViewChild } from "@angular/core";
import * as GoldenLayout from "golden-layout";
import { GoldenLayoutService } from "./golden-layout.service";
import * as $_ from "jquery";
var /** @type {?} */ $ = $_;
export var /** @type {?} */ GoldenLayoutContainer = new InjectionToken('GoldenLayoutContainer');
export var /** @type {?} */ GoldenLayoutComponentState = new InjectionToken('GoldenLayoutComponentState');
/**
* Type guard which determines if a component implements the GlOnResize interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnResize(obj) {
return typeof obj === 'object' && typeof obj.glOnResize === 'function';
}
/**
* Type guard which determines if a component implements the GlOnShow interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnShow(obj) {
return typeof obj === 'object' && typeof obj.glOnShow === 'function';
}
/**
* Type guard which determines if a component implements the GlOnHide interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnHide(obj) {
return typeof obj === 'object' && typeof obj.glOnHide === 'function';
}
/**
* Type guard which determines if a component implements the GlOnTab interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnTab(obj) {
return typeof obj === 'object' && typeof obj.glOnTab === 'function';
}
var /** @type {?} */ COMPONENT_REF_KEY = '$componentRef';
var GoldenLayoutComponent = (function () {
function GoldenLayoutComponent(glService, viewContainer, componentFactoryResolver, ngZone, injector) {
this.glService = glService;
this.viewContainer = viewContainer;
this.componentFactoryResolver = componentFactoryResolver;
this.ngZone = ngZone;
this.injector = injector;
}
/**
* @return {?}
*/
GoldenLayoutComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.glService.getState().then(function (layout) {
_this._createLayout(layout);
});
};
/**
* @param {?} layout
* @return {?}
*/
GoldenLayoutComponent.prototype._createLayout = /**
* @param {?} layout
* @return {?}
*/
function (layout) {
this.goldenLayout = new GoldenLayout(layout, $(this.el.nativeElement));
// Destory child angular components on golden-layout container destruction.
this.goldenLayout.eventHub.on('itemDestroyed', function (item) {
var /** @type {?} */ container = item.container;
var /** @type {?} */ component = container && container[COMPONENT_REF_KEY];
if (component) {
component.destroy();
(/** @type {?} */ (container))[COMPONENT_REF_KEY] = null;
}
});
// Register all golden-layout components.
this.glService.initialize(this.goldenLayout, this);
// Initialize the layout.
this.goldenLayout.init();
};
/**
* @param {?} event
* @return {?}
*/
GoldenLayoutComponent.prototype.onResize = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.goldenLayout) {
this.goldenLayout.updateSize();
}
};
/**
* @param {?} componentType
* @return {?}
*/
GoldenLayoutComponent.prototype.createComponentInitCallback = /**
* @param {?} componentType
* @return {?}
*/
function (componentType) {
var _this = this;
return function (container, componentState) {
_this.ngZone.run(function () {
// Create an instance of the angular component.
var /** @type {?} */ factory = _this.componentFactoryResolver.resolveComponentFactory(componentType);
var /** @type {?} */ injector = _this._createComponentInjector(container, componentState);
var /** @type {?} */ componentRef = _this.viewContainer.createComponent(factory, undefined, injector);
// Bind the new component to container's client DOM element.
container.getElement().append($(componentRef.location.nativeElement));
_this._bindEventHooks(container, componentRef.instance);
// Store a ref to the compoenentRef in the container to support destruction later on.
(/** @type {?} */ (container))[COMPONENT_REF_KEY] = componentRef;
});
};
};
/**
* Creates an injector capable of injecting the GoldenLayout object,
* component container, and initial component state.
* @param {?} container
* @param {?} componentState
* @return {?}
*/
GoldenLayoutComponent.prototype._createComponentInjector = /**
* Creates an injector capable of injecting the GoldenLayout object,
* component container, and initial component state.
* @param {?} container
* @param {?} componentState
* @return {?}
*/
function (container, componentState) {
return ReflectiveInjector.resolveAndCreate([
{
provide: GoldenLayoutContainer,
useValue: container
},
{
provide: GoldenLayoutComponentState,
useValue: componentState
},
{
provide: GoldenLayout,
useValue: this.goldenLayout
},
], this.injector);
};
/**
* Registers an event handler for each implemented hook.
* @param {?} container Golden Layout component container.
* @param {?} component Angular component instance.
* @return {?}
*/
GoldenLayoutComponent.prototype._bindEventHooks = /**
* Registers an event handler for each implemented hook.
* @param {?} container Golden Layout component container.
* @param {?} component Angular component instance.
* @return {?}
*/
function (container, component) {
if (implementsGlOnResize(component)) {
container.on('resize', function () {
component.glOnResize();
});
}
if (implementsGlOnShow(component)) {
container.on('show', function () {
component.glOnShow();
});
}
if (implementsGlOnHide(component)) {
container.on('hide', function () {
component.glOnHide();
});
}
if (implementsGlOnTab(component)) {
container.on('tab', function () {
component.glOnTab();
});
}
};
GoldenLayoutComponent.decorators = [
{ type: Component, args: [{
selector: 'golden-layout-root',
styles: ["\n .ng-golden-layout-root {\n width:100%;\n height:100%;\n }"
],
template: "<div class=\"ng-golden-layout-root\" #glroot></div>"
},] },
];
/** @nocollapse */
GoldenLayoutComponent.ctorParameters = function () { return [
{ type: GoldenLayoutService, },
{ type: ViewContainerRef, },
{ type: ComponentFactoryResolver, },
{ type: NgZone, },
{ type: Injector, },
]; };
GoldenLayoutComponent.propDecorators = {
"el": [{ type: ViewChild, args: ['glroot',] },],
"onResize": [{ type: HostListener, args: ['window:resize', ['$event'],] },],
};
return GoldenLayoutComponent;
}());
export { GoldenLayoutComponent };
function GoldenLayoutComponent_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
GoldenLayoutComponent.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
GoldenLayoutComponent.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
GoldenLayoutComponent.propDecorators;
/** @type {?} */
GoldenLayoutComponent.prototype.goldenLayout;
/** @type {?} */
GoldenLayoutComponent.prototype.el;
/** @type {?} */
GoldenLayoutComponent.prototype.glService;
/** @type {?} */
GoldenLayoutComponent.prototype.viewContainer;
/** @type {?} */
GoldenLayoutComponent.prototype.componentFactoryResolver;
/** @type {?} */
GoldenLayoutComponent.prototype.ngZone;
/** @type {?} */
GoldenLayoutComponent.prototype.injector;
}
//# sourceMappingURL=golden-layout.component.js.map