@goldsam/ng-golden-layout
Version:
Angular bindings for golden-layout
202 lines • 7.66 kB
JavaScript
import { ComponentFactoryResolver, HostListener, ViewContainerRef, Component, NgZone, OpaqueToken, Injector, ReflectiveInjector, ViewChild } from '@angular/core';
import * as GoldenLayout from 'golden-layout';
import { GoldenLayoutService } from './golden-layout.service';
export var /** @type {?} */ GoldenLayoutContainer = new OpaqueToken('GoldenLayoutContainer');
export var /** @type {?} */ GoldenLayoutComponentState = new OpaqueToken('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';
}
var /** @type {?} */ COMPONENT_REF_KEY = '$componentRef';
var GoldenLayoutComponent = (function () {
/**
* @param {?} glService
* @param {?} viewContainer
* @param {?} componentFactoryResolver
* @param {?} ngZone
* @param {?} injector
*/
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 = function () {
var _this = this;
this.glService.getState().then(function (layout) {
_this._createLayout(layout);
});
};
/**
* @param {?} layout
* @return {?}
*/
GoldenLayoutComponent.prototype._createLayout = 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();
((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 = function (event) {
if (this.goldenLayout) {
this.goldenLayout.updateSize();
}
};
/**
* @param {?} componentType
* @return {?}
*/
GoldenLayoutComponent.prototype.createComponentInitCallback = 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.
((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 = 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.
* @param {?} container
* @param {?} component
* @return {?}
*/
GoldenLayoutComponent.prototype._bindEventHooks = 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();
});
}
};
return GoldenLayoutComponent;
}());
export { GoldenLayoutComponent };
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'],] },],
};
function GoldenLayoutComponent_tsickle_Closure_declarations() {
/** @type {?} */
GoldenLayoutComponent.decorators;
/**
* @nocollapse
* @type {?}
*/
GoldenLayoutComponent.ctorParameters;
/** @type {?} */
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