modal.js 14.20 KiB
import Util from './util'
/**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.0.0-alpha.5): modal.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */
const Modal = (($) => {
  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
  const NAME                         = 'modal'
  const VERSION                      = '4.0.0-alpha.5'
  const DATA_KEY                     = 'bs.modal'
  const EVENT_KEY                    = `.${DATA_KEY}`
  const DATA_API_KEY                 = '.data-api'
  const JQUERY_NO_CONFLICT           = $.fn[NAME]
  const TRANSITION_DURATION          = 300
  const BACKDROP_TRANSITION_DURATION = 150
  const ESCAPE_KEYCODE               = 27 // KeyboardEvent.which value for Escape (Esc) key
  const Default = {
    backdrop : true,
    keyboard : true,
    focus    : true,
    show     : true
  const DefaultType = {
    backdrop : '(boolean|string)',
    keyboard : 'boolean',
    focus    : 'boolean',
    show     : 'boolean'
  const Event = {
    HIDE              : `hide${EVENT_KEY}`,
    HIDDEN            : `hidden${EVENT_KEY}`,
    SHOW              : `show${EVENT_KEY}`,
    SHOWN             : `shown${EVENT_KEY}`,
    FOCUSIN           : `focusin${EVENT_KEY}`,
    RESIZE            : `resize${EVENT_KEY}`,
    CLICK_DISMISS     : `click.dismiss${EVENT_KEY}`,
    KEYDOWN_DISMISS   : `keydown.dismiss${EVENT_KEY}`,
    MOUSEUP_DISMISS   : `mouseup.dismiss${EVENT_KEY}`,
    MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
    CLICK_DATA_API    : `click${EVENT_KEY}${DATA_API_KEY}`
  const ClassName = {
    SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
    BACKDROP           : 'modal-backdrop',
    OPEN               : 'modal-open',
    FADE               : 'fade',
    ACTIVE             : 'active'
  const Selector = {
    DIALOG             : '.modal-dialog',
    DATA_TOGGLE        : '[data-toggle="modal"]',
    DATA_DISMISS       : '[data-dismiss="modal"]',
    FIXED_CONTENT      : '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
} /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Modal { constructor(element, config) { this._config = this._getConfig(config) this._element = element this._dialog = $(element).find(Selector.DIALOG)[0] this._backdrop = null this._isShown = false this._isBodyOverflowing = false this._ignoreBackdropClick = false this._isTransitioning = false this._originalBodyPadding = 0 this._scrollbarWidth = 0 } // getters static get VERSION() { return VERSION } static get Default() { return Default } // public toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget) } show(relatedTarget) { if (this._isTransitioning) { throw new Error('Modal is transitioning') } if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) { this._isTransitioning = true } const showEvent = $.Event(Event.SHOW, { relatedTarget }) $(this._element).trigger(showEvent) if (this._isShown || showEvent.isDefaultPrevented()) { return } this._isShown = true this._checkScrollbar() this._setScrollbar() $(document.body).addClass(ClassName.OPEN) this._setEscapeEvent() this._setResizeEvent()
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
$(this._element).on( Event.CLICK_DISMISS, Selector.DATA_DISMISS, (event) => this.hide(event) ) $(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => { $(this._element).one(Event.MOUSEUP_DISMISS, (event) => { if ($(event.target).is(this._element)) { this._ignoreBackdropClick = true } }) }) this._showBackdrop(() => this._showElement(relatedTarget)) } hide(event) { if (event) { event.preventDefault() } if (this._isTransitioning) { throw new Error('Modal is transitioning') } const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE) if (transition) { this._isTransitioning = true } const hideEvent = $.Event(Event.HIDE) $(this._element).trigger(hideEvent) if (!this._isShown || hideEvent.isDefaultPrevented()) { return } this._isShown = false this._setEscapeEvent() this._setResizeEvent() $(document).off(Event.FOCUSIN) $(this._element).removeClass(ClassName.ACTIVE) $(this._element).off(Event.CLICK_DISMISS) $(this._dialog).off(Event.MOUSEDOWN_DISMISS) if (transition) { $(this._element) .one(Util.TRANSITION_END, (event) => this._hideModal(event)) .emulateTransitionEnd(TRANSITION_DURATION) } else { this._hideModal() } } dispose() { $.removeData(this._element, DATA_KEY) $(window, document, this._element, this._backdrop).off(EVENT_KEY) this._config = null this._element = null this._dialog = null this._backdrop = null