modal.js 13.61 KiB
import Util from './util'
/**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.0.0): modal.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */
const Modal = (($) => {
  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
  const NAME                         = 'modal'
  const VERSION                      = '4.0.0'
  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 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',
    IN                 : 'in'
  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._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) { let 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() $(this._element).on( Event.CLICK_DISMISS, Selector.DATA_DISMISS, $.proxy(this.hide, this) ) $(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => { $(this._element).one(Event.MOUSEUP_DISMISS, (event) => { if ($(event.target).is(this._element)) {