Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
modal.js 17.01 KiB
1 
/**
2 
 * --------------------------------------------------------------------------
3 
 * Bootstrap (v4.3.1): modal.js
4 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 
 * --------------------------------------------------------------------------
6 
 */
7
8 
import {
9 
  jQuery as $,
10 
  TRANSITION_END,
11 
  emulateTransitionEnd,
12 
  getSelectorFromElement,
13 
  getTransitionDurationFromElement,
14 
  isVisible,
15 
  makeArray,
16 
  reflow,
17 
  typeCheckConfig
18 
} from './util/index'
19 
import Data from './dom/data'
20 
import EventHandler from './dom/eventHandler'
21 
import Manipulator from './dom/manipulator'
22 
import SelectorEngine from './dom/selectorEngine'
23
24 
/**
25 
 * ------------------------------------------------------------------------
26 
 * Constants
27 
 * ------------------------------------------------------------------------
28 
 */
29
30 
const NAME               = 'modal'
31 
const VERSION            = '4.3.1'
32 
const DATA_KEY           = 'bs.modal'
33 
const EVENT_KEY          = `.${DATA_KEY}`
34 
const DATA_API_KEY       = '.data-api'
35 
const ESCAPE_KEYCODE     = 27 // KeyboardEvent.which value for Escape (Esc) key
36
37 
const Default = {
38 
  backdrop : true,
39 
  keyboard : true,
40 
  focus    : true,
41 
  show     : true
42 
}
43
44 
const DefaultType = {
45 
  backdrop : '(boolean|string)',
46 
  keyboard : 'boolean',
47 
  focus    : 'boolean',
48 
  show     : 'boolean'
49 
}
50
51 
const Event = {
52 
  HIDE              : `hide${EVENT_KEY}`,
53 
  HIDDEN            : `hidden${EVENT_KEY}`,
54 
  SHOW              : `show${EVENT_KEY}`,
55 
  SHOWN             : `shown${EVENT_KEY}`,
56 
  FOCUSIN           : `focusin${EVENT_KEY}`,
57 
  RESIZE            : `resize${EVENT_KEY}`,
58 
  CLICK_DISMISS     : `click.dismiss${EVENT_KEY}`,
59 
  KEYDOWN_DISMISS   : `keydown.dismiss${EVENT_KEY}`,
60 
  MOUSEUP_DISMISS   : `mouseup.dismiss${EVENT_KEY}`,
61 
  MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
62 
  CLICK_DATA_API    : `click${EVENT_KEY}${DATA_API_KEY}`
63 
}
64
65 
const ClassName = {
66 
  SCROLLABLE         : 'modal-dialog-scrollable',
67 
  SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
68 
  BACKDROP           : 'modal-backdrop',
69 
  OPEN               : 'modal-open',
70 
  FADE               : 'fade',
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
SHOW : 'show' } const Selector = { DIALOG : '.modal-dialog', MODAL_BODY : '.modal-body', DATA_TOGGLE : '[data-toggle="modal"]', DATA_DISMISS : '[data-dismiss="modal"]', FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', STICKY_CONTENT : '.sticky-top' } /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Modal { constructor(element, config) { this._config = this._getConfig(config) this._element = element this._dialog = SelectorEngine.findOne(Selector.DIALOG, element) this._backdrop = null this._isShown = false this._isBodyOverflowing = false this._ignoreBackdropClick = false this._isTransitioning = false this._scrollbarWidth = 0 Data.setData(element, DATA_KEY, this) } // 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._isShown || this._isTransitioning) { return } if (this._element.classList.contains(ClassName.FADE)) { this._isTransitioning = true } const showEvent = EventHandler.trigger(this._element, Event.SHOW, { relatedTarget }) if (this._isShown || showEvent.defaultPrevented) { return } this._isShown = true this._checkScrollbar() this._setScrollbar()