Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
modal.js 13.61 KiB
1 
import Util from './util'
2
3
4 
/**
5 
 * --------------------------------------------------------------------------
6 
 * Bootstrap (v4.0.0): 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'
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
29 
  const Default = {
30 
    backdrop : true,
31 
    keyboard : true,
32 
    focus    : true,
33 
    show     : true
34 
  }
35
36 
  const DefaultType = {
37 
    backdrop : '(boolean|string)',
38 
    keyboard : 'boolean',
39 
    focus    : 'boolean',
40 
    show     : 'boolean'
41 
  }
42
43 
  const Event = {
44 
    HIDE              : `hide${EVENT_KEY}`,
45 
    HIDDEN            : `hidden${EVENT_KEY}`,
46 
    SHOW              : `show${EVENT_KEY}`,
47 
    SHOWN             : `shown${EVENT_KEY}`,
48 
    FOCUSIN           : `focusin${EVENT_KEY}`,
49 
    RESIZE            : `resize${EVENT_KEY}`,
50 
    CLICK_DISMISS     : `click.dismiss${EVENT_KEY}`,
51 
    KEYDOWN_DISMISS   : `keydown.dismiss${EVENT_KEY}`,
52 
    MOUSEUP_DISMISS   : `mouseup.dismiss${EVENT_KEY}`,
53 
    MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
54 
    CLICK_DATA_API    : `click${EVENT_KEY}${DATA_API_KEY}`
55 
  }
56
57 
  const ClassName = {
58 
    SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
59 
    BACKDROP           : 'modal-backdrop',
60 
    OPEN               : 'modal-open',
61 
    FADE               : 'fade',
62 
    IN                 : 'in'
63 
  }
64
65 
  const Selector = {
66 
    DIALOG             : '.modal-dialog',
67 
    DATA_TOGGLE        : '[data-toggle="modal"]',
68 
    DATA_DISMISS       : '[data-dismiss="modal"]',
69 
    FIXED_CONTENT      : '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
70 
  }
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)) {