@goldsam/ng-golden-layout
Version:
Angular bindings for golden-layout
333 lines (324 loc) • 12.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('golden-layout'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'golden-layout', '@angular/common'], factory) :
(factory((global.ng = global.ng || {}, global.ng['ng-golden-layout'] = global.ng['ng-golden-layout'] || {}),global.ng.core,global.GoldenLayout,global.ng.common));
}(this, (function (exports,_angular_core,GoldenLayout,_angular_common) { 'use strict';
var GoldenLayoutConfiguration = new _angular_core.OpaqueToken('GoldenLayoutConfiguration');
var GoldenLayoutStateStore = new _angular_core.OpaqueToken('GoldenLayoutStateStore');
var DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY = '$ng-golden-layout-state';
var LocalStorageStateStore = (function () {
/**
* @param {?} key
*/
function LocalStorageStateStore(key) {
this.key = key;
}
/**
* @param {?} state
* @return {?}
*/
LocalStorageStateStore.prototype.writeState = function (state) {
localStorage.setItem(this.key, JSON.stringify(state));
};
/**
* @return {?}
*/
LocalStorageStateStore.prototype.loadState = function () {
var /** @type {?} */ state = localStorage.getItem(this.key);
return state
? Promise.resolve(JSON.parse(state))
: Promise.reject("No state found using key: " + this.key);
};
return LocalStorageStateStore;
}());
/**
* @return {?}
*/
function DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY() {
return new LocalStorageStateStore(DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY);
}
var DEFAULT_LOCAL_STORAGE_STATE_STORE = new LocalStorageStateStore(DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY);
var DEFAULT_LOCAL_STORAGE_STATE_STORE_PROVIDER = {
provide: GoldenLayoutStateStore,
useFactory: DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY
};
var GoldenLayoutService = (function () {
/**
* @param {?} config
* @param {?} stateStore
*/
function GoldenLayoutService(config, stateStore) {
this.config = config;
this.stateStore = stateStore;
}
/**
* @param {?} goldenLayout
* @param {?} componentInitCallbackFactory
* @return {?}
*/
GoldenLayoutService.prototype.initialize = function (goldenLayout, componentInitCallbackFactory) {
var _this = this;
this.config.components.forEach(function (componentConfig) {
var /** @type {?} */ componentInitCallback = componentInitCallbackFactory.createComponentInitCallback(componentConfig.component);
goldenLayout.registerComponent(componentConfig.componentName, componentInitCallback);
});
if (this.stateStore) {
((((goldenLayout)))).on('stateChanged', function () {
_this._saveState(goldenLayout);
});
}
};
/**
* @param {?} goldenLayout
* @return {?}
*/
GoldenLayoutService.prototype._saveState = function (goldenLayout) {
if (this.stateStore && goldenLayout.isInitialised) {
try {
this.stateStore.writeState(goldenLayout.toConfig());
}
catch (ex) {
// Workaround for https://github.com/deepstreamIO/golden-layout/issues/192
}
}
};
/**
* @return {?}
*/
GoldenLayoutService.prototype.getState = function () {
var _this = this;
if (this.stateStore) {
return this.stateStore.loadState().catch(function () {
return _this.config.defaultLayout;
});
}
return Promise.resolve(this.config.defaultLayout);
};
return GoldenLayoutService;
}());
GoldenLayoutService.decorators = [
{ type: _angular_core.Injectable },
];
/**
* @nocollapse
*/
GoldenLayoutService.ctorParameters = function () { return [
{ type: GoldenLayoutConfiguration, decorators: [{ type: _angular_core.Inject, args: [GoldenLayoutConfiguration,] },] },
{ type: undefined, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Inject, args: [GoldenLayoutStateStore,] },] },
]; };
var GoldenLayoutContainer = new _angular_core.OpaqueToken('GoldenLayoutContainer');
var GoldenLayoutComponentState = new _angular_core.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 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 _angular_core.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;
}());
GoldenLayoutComponent.decorators = [
{ type: _angular_core.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: _angular_core.ViewContainerRef, },
{ type: _angular_core.ComponentFactoryResolver, },
{ type: _angular_core.NgZone, },
{ type: _angular_core.Injector, },
]; };
GoldenLayoutComponent.propDecorators = {
'el': [{ type: _angular_core.ViewChild, args: ['glroot',] },],
'onResize': [{ type: _angular_core.HostListener, args: ['window:resize', ['$event'],] },],
};
var GoldenLayoutModule = (function () {
function GoldenLayoutModule() {
}
/**
* @param {?} config
* @return {?}
*/
GoldenLayoutModule.forRoot = function (config) {
return {
ngModule: GoldenLayoutModule,
providers: [
GoldenLayoutService,
{ provide: GoldenLayoutConfiguration, useValue: config }
]
};
};
return GoldenLayoutModule;
}());
GoldenLayoutModule.decorators = [
{ type: _angular_core.NgModule, args: [{
declarations: [GoldenLayoutComponent],
exports: [GoldenLayoutComponent],
imports: [_angular_common.CommonModule]
},] },
];
/**
* @nocollapse
*/
GoldenLayoutModule.ctorParameters = function () { return []; };
exports.GoldenLayoutConfiguration = GoldenLayoutConfiguration;
exports.GoldenLayoutService = GoldenLayoutService;
exports.GoldenLayoutContainer = GoldenLayoutContainer;
exports.GoldenLayoutComponentState = GoldenLayoutComponentState;
exports.GoldenLayoutComponent = GoldenLayoutComponent;
exports.GoldenLayoutModule = GoldenLayoutModule;
exports.GoldenLayoutStateStore = GoldenLayoutStateStore;
exports.DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY = DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY;
exports.LocalStorageStateStore = LocalStorageStateStore;
exports.DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY = DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY;
exports.DEFAULT_LOCAL_STORAGE_STATE_STORE = DEFAULT_LOCAL_STORAGE_STATE_STORE;
exports.DEFAULT_LOCAL_STORAGE_STATE_STORE_PROVIDER = DEFAULT_LOCAL_STORAGE_STATE_STORE_PROVIDER;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-golden-layout.umd.js.map