angular2-mdl
Version:
Angular 2 components, directives and styles based on material design lite https://getmdl.io.
252 lines • 11.3 kB
JavaScript
import { Inject, Injectable, ComponentFactoryResolver, ReflectiveInjector, OpaqueToken, ApplicationRef, EventEmitter } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { Subject } from 'rxjs/Subject';
import { MdlSimpleDialogComponent } from './mdl-simple-dialog.component';
import { MdlDialogHostComponent } from './mdl-dialog-host.component';
import { InternalMdlDialogReference } from './internal-dialog-reference';
import { MdlDialogOutletService } from '../dialog-outlet/mdl-dialog-outlet.service';
export var MDL_CONFIGUARTION = new OpaqueToken('MDL_CONFIGUARTION');
export var MIN_DIALOG_Z_INDEX = 100000;
/**
* The reference to the created and displayed dialog.
*/
export var MdlDialogReference = (function () {
function MdlDialogReference(internaleRef) {
this.internaleRef = internaleRef;
internaleRef.dialogRef = this;
}
/**
* closes the dialog
*/
MdlDialogReference.prototype.hide = function (data) {
this.internaleRef.hide(data);
};
/**
* Observable that emits, if the dialog was closed.
* @returns {Observable<void>}
*/
MdlDialogReference.prototype.onHide = function () {
return this.internaleRef.onHide();
};
/**
* Observable that emits, if the dialog is really visible and not only created.
* @returns {Observable<void>}
*/
MdlDialogReference.prototype.onVisible = function () {
return this.internaleRef.onVisible();
};
return MdlDialogReference;
}());
/**
* The MdlDialogService is used to open different kind of dialogs. SimpleDialogs and Custom Dialogs.
* @experimental
*/
export var MdlDialogService = (function () {
function MdlDialogService(componentFactoryResolver, doc, appRef, mdlDialogOutletService) {
var _this = this;
this.componentFactoryResolver = componentFactoryResolver;
this.doc = doc;
this.appRef = appRef;
this.mdlDialogOutletService = mdlDialogOutletService;
this.openDialogs = new Array();
/**
* Emits an event when either all modals are closed, or one gets opened.
* @returns A subscribable event emitter that provides a boolean indicating whether a modal is open or not.
*/
this.onDialogsOpenChanged = new EventEmitter();
this.mdlDialogOutletService.backdropClickEmitter.subscribe(function () {
_this.onBackdropClick();
});
}
/**
* Shows a dialog that is just an alert - e.g. with one button.
* @param alertMessage The message that should be displayed.
* @param okText The text that the button should have
* @param title The optional title of the dialog
* @returns An Observable that is called if the user hits the Ok button.
*/
MdlDialogService.prototype.alert = function (alertMessage, okText, title) {
if (okText === void 0) { okText = 'Ok'; }
var result = new Subject();
this.showDialog({
title: title,
message: alertMessage,
actions: [
{ handler: function () {
result.next(null);
result.complete();
}, text: okText }
],
isModal: true
});
return result;
};
/**
* Shows a dialog that is just a confirm message - e.g. with two button.
* @param question The question that should be displayed.
* @param title The title that should be displayed on top of Question.
* @param declineText The text for decline button. defaults to Cancel
* @param confirmText The text for the confirm button . defaults to Ok
* @returns An Observable that is called if the user hits the Ok button.
*/
MdlDialogService.prototype.confirm = function (question, declineText, confirmText, title) {
if (declineText === void 0) { declineText = 'Cancel'; }
if (confirmText === void 0) { confirmText = 'Ok'; }
var result = new Subject();
this.showDialog({
title: title,
message: question,
actions: [
{
handler: function () {
result.next(null);
result.complete();
}, text: confirmText
},
{
handler: function () {
result.error(null);
}, text: declineText, isClosingAction: true
}
],
isModal: true
});
return result.asObservable();
};
/**
* Shows a dialog that is specified by the provided configuration.
* @param config The simple dialog configuration.
* @returns An Observable that returns the MdlDialogReference.
*/
MdlDialogService.prototype.showDialog = function (config) {
if (config.actions.length === 0) {
throw new Error('a dialog mus have at least one action');
}
var internalDialogRef = new InternalMdlDialogReference(config);
var providers = [
{ provide: MdlDialogReference, useValue: new MdlDialogReference(internalDialogRef) },
{ provide: MDL_CONFIGUARTION, useValue: config }
];
var hostComponentRef = this.createHostDialog(internalDialogRef, config);
var cRef = this.createComponentInstance(hostComponentRef.instance.dialogTarget, providers, MdlSimpleDialogComponent);
return this.showHostDialog(internalDialogRef.dialogRef, hostComponentRef);
};
/**
* Shows a dialog that is specified by the provided configuration.
* @param config The custom dialog configuration.
* @returns An Observable that returns the MdlDialogReference.
*/
MdlDialogService.prototype.showCustomDialog = function (config) {
var internalDialogRef = new InternalMdlDialogReference(config);
var providers = [
{ provide: MdlDialogReference, useValue: new MdlDialogReference(internalDialogRef) }
];
if (config.providers) {
providers.push.apply(providers, config.providers);
}
var hostComponentRef = this.createHostDialog(internalDialogRef, config);
this.createComponentInstance(hostComponentRef.instance.dialogTarget, providers, config.component);
return this.showHostDialog(internalDialogRef.dialogRef, hostComponentRef);
};
MdlDialogService.prototype.showDialogTemplate = function (template, config) {
var internalDialogRef = new InternalMdlDialogReference(config);
var hostComponentRef = this.createHostDialog(internalDialogRef, config);
hostComponentRef.instance.dialogTarget.createEmbeddedView(template);
return this.showHostDialog(internalDialogRef.dialogRef, hostComponentRef);
};
MdlDialogService.prototype.showHostDialog = function (dialogRef, hostComponentRef) {
var result = new Subject();
setTimeout(function () {
result.next(dialogRef);
result.complete();
hostComponentRef.instance.show();
});
return result.asObservable();
};
MdlDialogService.prototype.createHostDialog = function (internalDialogRef, dialogConfig) {
var _this = this;
var viewContainerRef = this.mdlDialogOutletService.viewContainerRef;
if (!viewContainerRef) {
throw new Error('You did not provide a ViewContainerRef. ' +
'Please see https://github.com/mseemann/angular2-mdl/wiki/How-to-use-the-MdlDialogService');
}
var providers = [
{ provide: MDL_CONFIGUARTION, useValue: dialogConfig },
{ provide: InternalMdlDialogReference, useValue: internalDialogRef }
];
var hostDialogComponent = this.createComponentInstance(viewContainerRef, providers, MdlDialogHostComponent);
internalDialogRef.hostDialogComponentRef = hostDialogComponent;
internalDialogRef.isModal = dialogConfig.isModal;
internalDialogRef.closeCallback = function () {
_this.popDialog(internalDialogRef);
hostDialogComponent.instance.hide(hostDialogComponent);
};
this.pushDialog(internalDialogRef);
return hostDialogComponent;
};
MdlDialogService.prototype.pushDialog = function (dialogRef) {
if (this.openDialogs.length == 0) {
this.onDialogsOpenChanged.emit(true);
}
this.openDialogs.push(dialogRef);
this.orderDialogStack();
};
MdlDialogService.prototype.popDialog = function (dialogRef) {
this.openDialogs.splice(this.openDialogs.indexOf(dialogRef), 1);
this.orderDialogStack();
if (this.openDialogs.length == 0) {
this.onDialogsOpenChanged.emit(false);
}
};
MdlDialogService.prototype.orderDialogStack = function () {
// +1 because the overlay may have MIN_DIALOG_Z_INDEX if the dialog is modal.
var zIndex = MIN_DIALOG_Z_INDEX + 1;
this.openDialogs.forEach(function (iDialogRef) {
iDialogRef.hostDialog.zIndex = zIndex;
// +2 to make room for the overlay if a dialog is modal
zIndex += 2;
});
this.mdlDialogOutletService.hideBackdrop();
// if there is a modal dialog append the overloay to the dom - if not remove the overlay from the body
var topMostModalDialog = this.getTopMostInternalDialogRef();
if (topMostModalDialog) {
// move the overlay diredct under the topmos modal dialog
this.mdlDialogOutletService.showBackdropWithZIndex(topMostModalDialog.hostDialog.zIndex - 1);
}
};
MdlDialogService.prototype.getTopMostInternalDialogRef = function () {
var topMostModalDialog = null;
for (var i = (this.openDialogs.length - 1); i >= 0; i--) {
if (this.openDialogs[i].isModal) {
topMostModalDialog = this.openDialogs[i];
break;
}
}
return topMostModalDialog;
};
MdlDialogService.prototype.onBackdropClick = function () {
var topMostModalDialog = this.getTopMostInternalDialogRef();
if (topMostModalDialog.config.clickOutsideToClose) {
topMostModalDialog.hide();
}
};
MdlDialogService.prototype.createComponentInstance = function (viewContainerRef, providers, component) {
var cFactory = this.componentFactoryResolver.resolveComponentFactory(component);
var resolvedProviders = ReflectiveInjector.resolve(providers);
var parentInjector = viewContainerRef.parentInjector;
var childInjector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, parentInjector);
return viewContainerRef.createComponent(cFactory, viewContainerRef.length, childInjector);
};
MdlDialogService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
MdlDialogService.ctorParameters = function () { return [
{ type: ComponentFactoryResolver, },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] },] },
{ type: ApplicationRef, },
{ type: MdlDialogOutletService, },
]; };
return MdlDialogService;
}());
//# sourceMappingURL=mdl-dialog.service.js.map