@browninglogic/ng-modal
Version:
A simple, lightweight interface for creating layered modal dialogs in Angular 6+
70 lines • 8.69 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Injectable, Output, EventEmitter } from '@angular/core';
/**
* Maintains the indices of all active modal windows and reports index
* changes to the relevant modals so that each modal can layer itself
* accordingly with the correct z-index.
*/
let ModalManagerService = class ModalManagerService {
constructor() {
/** Informs subscribers when the index of a modal on the stack changes */
this.modalIndexChanged = new EventEmitter();
/** Maintains the currently-displayed modal windows in order */
this.activeModals = new Array();
/** Starting point for the z-index of the layered modal windows */
this.startingZIndex = 1000;
}
/**
* Pushes the provided modal to the top of the stack, if it's not already there, and
* returns its index so that the component knows where to place itself via z-index
* @param modal A reference to the the modal component instance that we want to register
*/
push(modal) {
const modalIndex = this.activeModals.indexOf(modal);
// If the modal isn't already on the stack, then push it to the top.
if (modalIndex === -1) {
this.activeModals.push(modal);
return this.activeModals.indexOf(modal);
}
else if (modalIndex === this.activeModals.length - 1) {
// If the modal is already on the top, then don't do anything: simply return the index
return modalIndex;
}
else {
/* If the modal is already on the stack, but not on the top, then remove it and
add it to the top. */
this.removeModal(modal);
this.activeModals.push(modal);
return this.activeModals.indexOf(modal);
}
}
/**
* Removes the specified modal, if it exists.
* @param modal The modal to remove
*/
removeModal(modal) {
// Find the index of the modal
const modalIndex = this.activeModals.indexOf(modal);
if (modalIndex > -1) {
// If the modal exists in the array, then remove it.
this.activeModals.splice(modalIndex, 1);
/*
If we removed a modal which was not at the top of the stack,
then inform each modal above the removed modal in the stack
so that they can update their index and, by extension, z-index.
*/
for (let i = modalIndex; i < this.activeModals.length; i++) {
this.modalIndexChanged.emit([this.activeModals[i], i]);
}
}
}
};
__decorate([
Output(),
__metadata("design:type", Object)
], ModalManagerService.prototype, "modalIndexChanged", void 0);
ModalManagerService = __decorate([
Injectable()
], ModalManagerService);
export { ModalManagerService };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtbWFuYWdlci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGJyb3duaW5nbG9naWMvbmctbW9kYWwvIiwic291cmNlcyI6WyJsaWIvc2VydmljZXMvbW9kYWwtbWFuYWdlci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHakU7Ozs7RUFJRTtBQUVGLElBQWEsbUJBQW1CLEdBQWhDLE1BQWEsbUJBQW1CO0lBQWhDO1FBQ0kseUVBQXlFO1FBQy9ELHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFrQyxDQUFDO1FBQ2pGLCtEQUErRDtRQUN2RCxpQkFBWSxHQUFHLElBQUksS0FBSyxFQUF3QixDQUFDO1FBQ3pELGtFQUFrRTtRQUMzRCxtQkFBYyxHQUFHLElBQUksQ0FBQztJQThDakMsQ0FBQztJQTVDRzs7OztPQUlHO0lBQ0ksSUFBSSxDQUFDLEtBQTJCO1FBQ25DLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3BELG9FQUFvRTtRQUNwRSxJQUFJLFVBQVUsS0FBSyxDQUFDLENBQUMsRUFBRTtZQUNuQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM5QixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzNDO2FBQU0sSUFBSSxVQUFVLEtBQUssSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ3BELHNGQUFzRjtZQUN0RixPQUFPLFVBQVUsQ0FBQztTQUNyQjthQUFNO1lBQ0g7aUNBQ3FCO1lBQ3JCLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDeEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDOUIsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUMzQztJQUNMLENBQUM7SUFFRDs7O09BR0c7SUFDSSxXQUFXLENBQUMsS0FBMkI7UUFDMUMsOEJBQThCO1FBQzlCLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3BELElBQUksVUFBVSxHQUFHLENBQUMsQ0FBQyxFQUFFO1lBQ2pCLG9EQUFvRDtZQUNwRCxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFFeEM7Ozs7Y0FJRTtZQUNGLEtBQUssSUFBSSxDQUFDLEdBQUcsVUFBVSxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtnQkFDeEQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUMxRDtTQUNKO0lBQ0wsQ0FBQztDQUNKLENBQUE7QUFsRGE7SUFBVCxNQUFNLEVBQUU7OzhEQUF3RTtBQUZ4RSxtQkFBbUI7SUFEL0IsVUFBVSxFQUFFO0dBQ0EsbUJBQW1CLENBb0QvQjtTQXBEWSxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlLCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTW9kYWxXaW5kb3dDb21wb25lbnQgfSBmcm9tICcuLi9jb21wb25lbnRzL21vZGFsLXdpbmRvdy5jb21wb25lbnQnO1xuXG4vKipcbiAqIE1haW50YWlucyB0aGUgaW5kaWNlcyBvZiBhbGwgYWN0aXZlIG1vZGFsIHdpbmRvd3MgYW5kIHJlcG9ydHMgaW5kZXhcbiAqIGNoYW5nZXMgdG8gdGhlIHJlbGV2YW50IG1vZGFscyBzbyB0aGF0IGVhY2ggbW9kYWwgY2FuIGxheWVyIGl0c2VsZlxuICogYWNjb3JkaW5nbHkgd2l0aCB0aGUgY29ycmVjdCB6LWluZGV4LlxuKi9cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBNb2RhbE1hbmFnZXJTZXJ2aWNlIHtcbiAgICAvKiogSW5mb3JtcyBzdWJzY3JpYmVycyB3aGVuIHRoZSBpbmRleCBvZiBhIG1vZGFsIG9uIHRoZSBzdGFjayBjaGFuZ2VzICovXG4gICAgQE91dHB1dCgpIG1vZGFsSW5kZXhDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxbTW9kYWxXaW5kb3dDb21wb25lbnQsIG51bWJlcl0+KCk7XG4gICAgLyoqIE1haW50YWlucyB0aGUgY3VycmVudGx5LWRpc3BsYXllZCBtb2RhbCB3aW5kb3dzIGluIG9yZGVyICovXG4gICAgcHJpdmF0ZSBhY3RpdmVNb2RhbHMgPSBuZXcgQXJyYXk8TW9kYWxXaW5kb3dDb21wb25lbnQ+KCk7XG4gICAgLyoqIFN0YXJ0aW5nIHBvaW50IGZvciB0aGUgei1pbmRleCBvZiB0aGUgbGF5ZXJlZCBtb2RhbCB3aW5kb3dzICovXG4gICAgcHVibGljIHN0YXJ0aW5nWkluZGV4ID0gMTAwMDtcblxuICAgIC8qKlxuICAgICAqIFB1c2hlcyB0aGUgcHJvdmlkZWQgbW9kYWwgdG8gdGhlIHRvcCBvZiB0aGUgc3RhY2ssIGlmIGl0J3Mgbm90IGFscmVhZHkgdGhlcmUsIGFuZFxuICAgICAqIHJldHVybnMgaXRzIGluZGV4IHNvIHRoYXQgdGhlIGNvbXBvbmVudCBrbm93cyB3aGVyZSB0byBwbGFjZSBpdHNlbGYgdmlhIHotaW5kZXhcbiAgICAgKiBAcGFyYW0gbW9kYWwgQSByZWZlcmVuY2UgdG8gdGhlIHRoZSBtb2RhbCBjb21wb25lbnQgaW5zdGFuY2UgdGhhdCB3ZSB3YW50IHRvIHJlZ2lzdGVyXG4gICAgICovXG4gICAgcHVibGljIHB1c2gobW9kYWw6IE1vZGFsV2luZG93Q29tcG9uZW50KTogbnVtYmVyIHtcbiAgICAgICAgY29uc3QgbW9kYWxJbmRleCA9IHRoaXMuYWN0aXZlTW9kYWxzLmluZGV4T2YobW9kYWwpO1xuICAgICAgICAvLyBJZiB0aGUgbW9kYWwgaXNuJ3QgYWxyZWFkeSBvbiB0aGUgc3RhY2ssIHRoZW4gcHVzaCBpdCB0byB0aGUgdG9wLlxuICAgICAgICBpZiAobW9kYWxJbmRleCA9PT0gLTEpIHtcbiAgICAgICAgICAgIHRoaXMuYWN0aXZlTW9kYWxzLnB1c2gobW9kYWwpO1xuICAgICAgICAgICAgcmV0dXJuIHRoaXMuYWN0aXZlTW9kYWxzLmluZGV4T2YobW9kYWwpO1xuICAgICAgICB9IGVsc2UgaWYgKG1vZGFsSW5kZXggPT09IHRoaXMuYWN0aXZlTW9kYWxzLmxlbmd0aCAtIDEpIHtcbiAgICAgICAgICAgIC8vIElmIHRoZSBtb2RhbCBpcyBhbHJlYWR5IG9uIHRoZSB0b3AsIHRoZW4gZG9uJ3QgZG8gYW55dGhpbmc6IHNpbXBseSByZXR1cm4gdGhlIGluZGV4XG4gICAgICAgICAgICByZXR1cm4gbW9kYWxJbmRleDtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIC8qIElmIHRoZSBtb2RhbCBpcyBhbHJlYWR5IG9uIHRoZSBzdGFjaywgYnV0IG5vdCBvbiB0aGUgdG9wLCB0aGVuIHJlbW92ZSBpdCBhbmRcbiAgICAgICAgICAgIGFkZCBpdCB0byB0aGUgdG9wLiAqL1xuICAgICAgICAgICAgdGhpcy5yZW1vdmVNb2RhbChtb2RhbCk7XG4gICAgICAgICAgICB0aGlzLmFjdGl2ZU1vZGFscy5wdXNoKG1vZGFsKTtcbiAgICAgICAgICAgIHJldHVybiB0aGlzLmFjdGl2ZU1vZGFscy5pbmRleE9mKG1vZGFsKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFJlbW92ZXMgdGhlIHNwZWNpZmllZCBtb2RhbCwgaWYgaXQgZXhpc3RzLlxuICAgICAqIEBwYXJhbSBtb2RhbCBUaGUgbW9kYWwgdG8gcmVtb3ZlXG4gICAgICovXG4gICAgcHVibGljIHJlbW92ZU1vZGFsKG1vZGFsOiBNb2RhbFdpbmRvd0NvbXBvbmVudCk6IHZvaWQge1xuICAgICAgICAvLyBGaW5kIHRoZSBpbmRleCBvZiB0aGUgbW9kYWxcbiAgICAgICAgY29uc3QgbW9kYWxJbmRleCA9IHRoaXMuYWN0aXZlTW9kYWxzLmluZGV4T2YobW9kYWwpO1xuICAgICAgICBpZiAobW9kYWxJbmRleCA+IC0xKSB7XG4gICAgICAgICAgICAvLyBJZiB0aGUgbW9kYWwgZXhpc3RzIGluIHRoZSBhcnJheSwgdGhlbiByZW1vdmUgaXQuXG4gICAgICAgICAgICB0aGlzLmFjdGl2ZU1vZGFscy5zcGxpY2UobW9kYWxJbmRleCwgMSk7XG5cbiAgICAgICAgICAgIC8qXG4gICAgICAgICAgICBJZiB3ZSByZW1vdmVkIGEgbW9kYWwgd2hpY2ggd2FzIG5vdCBhdCB0aGUgdG9wIG9mIHRoZSBzdGFjayxcbiAgICAgICAgICAgIHRoZW4gaW5mb3JtIGVhY2ggbW9kYWwgYWJvdmUgdGhlIHJlbW92ZWQgbW9kYWwgaW4gdGhlIHN0YWNrXG4gICAgICAgICAgICBzbyB0aGF0IHRoZXkgY2FuIHVwZGF0ZSB0aGVpciBpbmRleCBhbmQsIGJ5IGV4dGVuc2lvbiwgei1pbmRleC5cbiAgICAgICAgICAgICovXG4gICAgICAgICAgICBmb3IgKGxldCBpID0gbW9kYWxJbmRleDsgaSA8IHRoaXMuYWN0aXZlTW9kYWxzLmxlbmd0aDsgaSsrKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5tb2RhbEluZGV4Q2hhbmdlZC5lbWl0KFt0aGlzLmFjdGl2ZU1vZGFsc1tpXSwgaV0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxufVxuIl19