ng2-bootstrap
Version:
Native Angular Bootstrap Components
317 lines (316 loc) • 12.9 kB
JavaScript
/* tslint:disable:max-file-line-count */
// todo: should we support enforce focus in?
// todo: in original bs there are was a way to prevent modal from showing
// todo: original modal had resize events
"use strict";
var core_1 = require('@angular/core');
var browser_1 = require('../utils/facade/browser');
var ng2_bootstrap_config_1 = require('../utils/ng2-bootstrap-config');
var utils_class_1 = require('../utils/utils.class');
var modal_backdrop_component_1 = require('./modal-backdrop.component');
var modal_options_class_1 = require('./modal-options.class');
var browser_2 = require('../utils/facade/browser');
var component_loader_factory_1 = require('../component-loader/component-loader.factory');
var TRANSITION_DURATION = 300;
var BACKDROP_TRANSITION_DURATION = 150;
/** Mark any code with directive to show it's content in modal */
var ModalDirective = (function () {
function ModalDirective(_element, _viewContainerRef, _renderer, clf) {
/** This event fires immediately when the `show` instance method is called. */
this.onShow = new core_1.EventEmitter();
/** This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete) */
this.onShown = new core_1.EventEmitter();
/** This event is fired immediately when the hide instance method has been called. */
this.onHide = new core_1.EventEmitter();
/** This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). */
this.onHidden = new core_1.EventEmitter();
// seems like an Options
this.isAnimated = true;
this._isShown = false;
this.isBodyOverflowing = false;
this.originalBodyPadding = 0;
this.scrollbarWidth = 0;
this.timerHideModal = 0;
this.timerRmBackDrop = 0;
this._element = _element;
this._renderer = _renderer;
this._backdrop = clf.createLoader(_element, _viewContainerRef, _renderer);
}
Object.defineProperty(ModalDirective.prototype, "config", {
get: function () {
return this._config;
},
/** allows to set modal configuration via element property */
set: function (conf) {
this._config = this.getConfig(conf);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ModalDirective.prototype, "isShown", {
get: function () {
return this._isShown;
},
enumerable: true,
configurable: true
});
ModalDirective.prototype.onClick = function (event) {
if (this.config.ignoreBackdropClick || this.config.backdrop === 'static' || event.target !== this._element.nativeElement) {
return;
}
this.hide(event);
};
// todo: consider preventing default and stopping propagation
ModalDirective.prototype.onEsc = function () {
if (this.config.keyboard) {
this.hide();
}
};
ModalDirective.prototype.ngOnDestroy = function () {
this.config = void 0;
if (this._isShown) {
this._isShown = false;
this.hideModal();
this._backdrop.dispose();
}
};
ModalDirective.prototype.ngAfterViewInit = function () {
this._config = this._config || this.getConfig();
};
/* Public methods */
/** Allows to manually toggle modal visibility */
ModalDirective.prototype.toggle = function () {
return this._isShown ? this.hide() : this.show();
};
/** Allows to manually open modal */
ModalDirective.prototype.show = function () {
var _this = this;
this.onShow.emit(this);
if (this._isShown) {
return;
}
clearTimeout(this.timerHideModal);
clearTimeout(this.timerRmBackDrop);
this._isShown = true;
this.checkScrollbar();
this.setScrollbar();
if (browser_1.document && browser_1.document.body) {
this._renderer.setElementClass(browser_1.document.body, modal_options_class_1.ClassName.OPEN, true);
}
this.showBackdrop(function () {
_this.showElement();
});
};
/** Allows to manually close modal */
ModalDirective.prototype.hide = function (event) {
var _this = this;
if (event) {
event.preventDefault();
}
this.onHide.emit(this);
// todo: add an option to prevent hiding
if (!this._isShown) {
return;
}
clearTimeout(this.timerHideModal);
clearTimeout(this.timerRmBackDrop);
this._isShown = false;
this._renderer.setElementClass(this._element.nativeElement, modal_options_class_1.ClassName.IN, false);
if (!ng2_bootstrap_config_1.isBs3()) {
this._renderer.setElementClass(this._element.nativeElement, modal_options_class_1.ClassName.SHOW, false);
}
// this._addClassIn = false;
if (this.isAnimated) {
this.timerHideModal = setTimeout(function () { return _this.hideModal(); }, TRANSITION_DURATION);
}
else {
this.hideModal();
}
};
/** Private methods @internal */
ModalDirective.prototype.getConfig = function (config) {
return Object.assign({}, modal_options_class_1.modalConfigDefaults, config);
};
/**
* Show dialog
* @internal
*/
ModalDirective.prototype.showElement = function () {
var _this = this;
// todo: replace this with component loader usage
if (!this._element.nativeElement.parentNode ||
(this._element.nativeElement.parentNode.nodeType !== Node.ELEMENT_NODE)) {
// don't move modals dom position
if (browser_1.document && browser_1.document.body) {
browser_1.document.body.appendChild(this._element.nativeElement);
}
}
this._renderer.setElementAttribute(this._element.nativeElement, 'aria-hidden', 'false');
this._renderer.setElementStyle(this._element.nativeElement, 'display', 'block');
this._renderer.setElementProperty(this._element.nativeElement, 'scrollTop', 0);
if (this.isAnimated) {
utils_class_1.Utils.reflow(this._element.nativeElement);
}
// this._addClassIn = true;
this._renderer.setElementClass(this._element.nativeElement, modal_options_class_1.ClassName.IN, true);
if (!ng2_bootstrap_config_1.isBs3()) {
this._renderer.setElementClass(this._element.nativeElement, modal_options_class_1.ClassName.SHOW, true);
}
var transitionComplete = function () {
if (_this._config.focus) {
_this._element.nativeElement.focus();
}
_this.onShown.emit(_this);
};
if (this.isAnimated) {
setTimeout(transitionComplete, TRANSITION_DURATION);
}
else {
transitionComplete();
}
};
/** @internal */
ModalDirective.prototype.hideModal = function () {
var _this = this;
this._renderer.setElementAttribute(this._element.nativeElement, 'aria-hidden', 'true');
this._renderer.setElementStyle(this._element.nativeElement, 'display', 'none');
this.showBackdrop(function () {
if (browser_1.document && browser_1.document.body) {
_this._renderer.setElementClass(browser_1.document.body, modal_options_class_1.ClassName.OPEN, false);
}
_this.resetAdjustments();
_this.resetScrollbar();
_this.onHidden.emit(_this);
});
};
// todo: original show was calling a callback when done, but we can use promise
/** @internal */
ModalDirective.prototype.showBackdrop = function (callback) {
var _this = this;
if (this._isShown && this.config.backdrop && (!this.backdrop || !this.backdrop.instance.isShown)) {
this.removeBackdrop();
this._backdrop
.attach(modal_backdrop_component_1.ModalBackdropComponent)
.to('body')
.show({ isAnimated: false });
this.backdrop = this._backdrop._componentRef;
if (this.isAnimated) {
this.backdrop.instance.isAnimated = this.isAnimated;
utils_class_1.Utils.reflow(this.backdrop.instance.element.nativeElement);
}
this.backdrop.instance.isShown = true;
if (!callback) {
return;
}
if (!this.isAnimated) {
callback();
return;
}
setTimeout(callback, BACKDROP_TRANSITION_DURATION);
}
else if (!this._isShown && this.backdrop) {
this.backdrop.instance.isShown = false;
var callbackRemove = function () {
_this.removeBackdrop();
if (callback) {
callback();
}
};
if (this.backdrop.instance.isAnimated) {
this.timerRmBackDrop = setTimeout(callbackRemove, BACKDROP_TRANSITION_DURATION);
}
else {
callbackRemove();
}
}
else if (callback) {
callback();
}
};
/** @internal */
ModalDirective.prototype.removeBackdrop = function () {
this._backdrop.hide();
};
/** Events tricks */
// no need for it
// protected setEscapeEvent():void {
// if (this._isShown && this._config.keyboard) {
// $(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
// if (event.which === 27) {
// this.hide()
// }
// })
//
// } else if (!this._isShown) {
// $(this._element).off(Event.KEYDOWN_DISMISS)
// }
// }
// protected setResizeEvent():void {
// console.log(this.renderer.listenGlobal('', Event.RESIZE));
// if (this._isShown) {
// $(window).on(Event.RESIZE, $.proxy(this._handleUpdate, this))
// } else {
// $(window).off(Event.RESIZE)
// }
// }
/** @internal */
ModalDirective.prototype.resetAdjustments = function () {
this._renderer.setElementStyle(this._element.nativeElement, 'paddingLeft', '');
this._renderer.setElementStyle(this._element.nativeElement, 'paddingRight', '');
};
/** Scroll bar tricks */
/** @internal */
ModalDirective.prototype.checkScrollbar = function () {
this.isBodyOverflowing = browser_1.document.body.clientWidth < browser_2.window.innerWidth;
this.scrollbarWidth = this.getScrollbarWidth();
};
ModalDirective.prototype.setScrollbar = function () {
if (!browser_1.document) {
return;
}
var fixedEl = browser_1.document.querySelector(modal_options_class_1.Selector.FIXED_CONTENT);
if (!fixedEl) {
return;
}
var bodyPadding = parseInt(utils_class_1.Utils.getStyles(fixedEl).paddingRight || 0, 10);
this.originalBodyPadding = parseInt(browser_1.document.body.style.paddingRight || 0, 10);
if (this.isBodyOverflowing) {
browser_1.document.body.style.paddingRight = (bodyPadding + this.scrollbarWidth) + "px";
}
};
ModalDirective.prototype.resetScrollbar = function () {
browser_1.document.body.style.paddingRight = this.originalBodyPadding;
};
// thx d.walsh
ModalDirective.prototype.getScrollbarWidth = function () {
var scrollDiv = this._renderer.createElement(browser_1.document.body, 'div', void 0);
scrollDiv.className = modal_options_class_1.ClassName.SCROLLBAR_MEASURER;
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
browser_1.document.body.removeChild(scrollDiv);
return scrollbarWidth;
};
ModalDirective.decorators = [
{ type: core_1.Directive, args: [{
selector: '[bsModal]',
exportAs: 'bs-modal'
},] },
];
/** @nocollapse */
ModalDirective.ctorParameters = function () { return [
{ type: core_1.ElementRef, },
{ type: core_1.ViewContainerRef, },
{ type: core_1.Renderer, },
{ type: component_loader_factory_1.ComponentLoaderFactory, },
]; };
ModalDirective.propDecorators = {
'config': [{ type: core_1.Input },],
'onShow': [{ type: core_1.Output },],
'onShown': [{ type: core_1.Output },],
'onHide': [{ type: core_1.Output },],
'onHidden': [{ type: core_1.Output },],
'onClick': [{ type: core_1.HostListener, args: ['click', ['$event'],] },],
'onEsc': [{ type: core_1.HostListener, args: ['keydown.esc',] },],
};
return ModalDirective;
}());
exports.ModalDirective = ModalDirective;