Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
modal.js 14.20 KiB
1 
import Util from './util'
2
3
4 
/**
5 
 * --------------------------------------------------------------------------
6 
 * Bootstrap (v4.0.0-alpha.5): modal.js
7 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
8 
 * --------------------------------------------------------------------------
9 
 */
10
11 
const Modal = (($) => {
12
13
14 
  /**
15 
   * ------------------------------------------------------------------------
16 
   * Constants
17 
   * ------------------------------------------------------------------------
18 
   */
19
20 
  const NAME                         = 'modal'
21 
  const VERSION                      = '4.0.0-alpha.5'
22 
  const DATA_KEY                     = 'bs.modal'
23 
  const EVENT_KEY                    = `.${DATA_KEY}`
24 
  const DATA_API_KEY                 = '.data-api'
25 
  const JQUERY_NO_CONFLICT           = $.fn[NAME]
26 
  const TRANSITION_DURATION          = 300
27 
  const BACKDROP_TRANSITION_DURATION = 150
28 
  const ESCAPE_KEYCODE               = 27 // KeyboardEvent.which value for Escape (Esc) key
29
30 
  const Default = {
31 
    backdrop : true,
32 
    keyboard : true,
33 
    focus    : true,
34 
    show     : true
35 
  }
36
37 
  const DefaultType = {
38 
    backdrop : '(boolean|string)',
39 
    keyboard : 'boolean',
40 
    focus    : 'boolean',
41 
    show     : 'boolean'
42 
  }
43
44 
  const Event = {
45 
    HIDE              : `hide${EVENT_KEY}`,
46 
    HIDDEN            : `hidden${EVENT_KEY}`,
47 
    SHOW              : `show${EVENT_KEY}`,
48 
    SHOWN             : `shown${EVENT_KEY}`,
49 
    FOCUSIN           : `focusin${EVENT_KEY}`,
50 
    RESIZE            : `resize${EVENT_KEY}`,
51 
    CLICK_DISMISS     : `click.dismiss${EVENT_KEY}`,
52 
    KEYDOWN_DISMISS   : `keydown.dismiss${EVENT_KEY}`,
53 
    MOUSEUP_DISMISS   : `mouseup.dismiss${EVENT_KEY}`,
54 
    MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
55 
    CLICK_DATA_API    : `click${EVENT_KEY}${DATA_API_KEY}`
56 
  }
57
58 
  const ClassName = {
59 
    SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
60 
    BACKDROP           : 'modal-backdrop',
61 
    OPEN               : 'modal-open',
62 
    FADE               : 'fade',
63 
    ACTIVE             : 'active'
64 
  }
65
66 
  const Selector = {
67 
    DIALOG             : '.modal-dialog',
68 
    DATA_TOGGLE        : '[data-toggle="modal"]',
69 
    DATA_DISMISS       : '[data-dismiss="modal"]',
70 
    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