modal.js 14.1 KB
Newer Older
1
2
3
4
5
import Util from './util'


/**
 * --------------------------------------------------------------------------
Mark Otto's avatar
Mark Otto committed
6
 * Bootstrap (v4.0.0-alpha.6): modal.js
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */

const Modal = (($) => {


  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
   */

  const NAME                         = 'modal'
Mark Otto's avatar
Mark Otto committed
21
  const VERSION                      = '4.0.0-alpha.6'
22
  const DATA_KEY                     = 'bs.modal'
fat's avatar
fat committed
23
24
  const EVENT_KEY                    = `.${DATA_KEY}`
  const DATA_API_KEY                 = '.data-api'
25
26
27
  const JQUERY_NO_CONFLICT           = $.fn[NAME]
  const TRANSITION_DURATION          = 300
  const BACKDROP_TRANSITION_DURATION = 150
28
  const ESCAPE_KEYCODE               = 27 // KeyboardEvent.which value for Escape (Esc) key
29
30
31
32

  const Default = {
    backdrop : true,
    keyboard : true,
33
    focus    : true,
34
35
36
    show     : true
  }

fat's avatar
fat committed
37
38
39
40
41
42
43
  const DefaultType = {
    backdrop : '(boolean|string)',
    keyboard : 'boolean',
    focus    : 'boolean',
    show     : 'boolean'
  }

44
  const Event = {
XhmikosR's avatar
XhmikosR committed
45
46
47
48
    HIDE              : `hide${EVENT_KEY}`,
    HIDDEN            : `hidden${EVENT_KEY}`,
    SHOW              : `show${EVENT_KEY}`,
    SHOWN             : `shown${EVENT_KEY}`,
fat's avatar
fat committed
49
50
51
52
53
54
55
    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}`
56
57
58
  }

  const ClassName = {
59
60
61
62
    SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
    BACKDROP           : 'modal-backdrop',
    OPEN               : 'modal-open',
    FADE               : 'fade',
Starsam80's avatar
Starsam80 committed
63
    SHOW               : 'show'
64
65
66
67
68
69
  }

  const Selector = {
    DIALOG             : '.modal-dialog',
    DATA_TOGGLE        : '[data-toggle="modal"]',
    DATA_DISMISS       : '[data-dismiss="modal"]',
Mark Otto's avatar
Mark Otto committed
70
    FIXED_CONTENT      : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
71
72
73
74
75
76
77
78
79
80
81
82
  }


  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
   */

  class Modal {

    constructor(element, config) {
fat's avatar
fat committed
83
      this._config              = this._getConfig(config)
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
      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) {
113
      if (this._isTransitioning) {
114
        return
115
116
      }

117
      if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) {
118
119
        this._isTransitioning = true
      }
120

121
      const showEvent = $.Event(Event.SHOW, {
Jacob Thornton's avatar
Jacob Thornton committed
122
        relatedTarget
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
      })

      $(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(
fat's avatar
fat committed
142
        Event.CLICK_DISMISS,
143
        Selector.DATA_DISMISS,
144
        (event) => this.hide(event)
145
146
      )

fat's avatar
fat committed
147
148
      $(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => {
        $(this._element).one(Event.MOUSEUP_DISMISS, (event) => {
149
          if ($(event.target).is(this._element)) {
150
            this._ignoreBackdropClick = true
151
152
153
154
          }
        })
      })

155
      this._showBackdrop(() => this._showElement(relatedTarget))
156
157
158
159
160
161
162
    }

    hide(event) {
      if (event) {
        event.preventDefault()
      }

163
164
      if (this._isTransitioning || !this._isShown) {
        return
165
      }
166

167
168
      const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)

169
170
171
172
173
      if (transition) {
        this._isTransitioning = true
      }

      const hideEvent = $.Event(Event.HIDE)
174

175
176
177
178
179
180
181
182
183
184
185
186
187
      $(this._element).trigger(hideEvent)

      if (!this._isShown || hideEvent.isDefaultPrevented()) {
        return
      }

      this._isShown = false

      this._setEscapeEvent()
      this._setResizeEvent()

      $(document).off(Event.FOCUSIN)

Starsam80's avatar
Starsam80 committed
188
      $(this._element).removeClass(ClassName.SHOW)
189

fat's avatar
fat committed
190
191
      $(this._element).off(Event.CLICK_DISMISS)
      $(this._dialog).off(Event.MOUSEDOWN_DISMISS)
192

193
      if (transition) {
194

195
        $(this._element)
196
          .one(Util.TRANSITION_END, (event) => this._hideModal(event))
197
198
199
200
201
202
          .emulateTransitionEnd(TRANSITION_DURATION)
      } else {
        this._hideModal()
      }
    }

fat's avatar
fat committed
203
204
205
    dispose() {
      $.removeData(this._element, DATA_KEY)

206
      $(window, document, this._element, this._backdrop).off(EVENT_KEY)
fat's avatar
fat committed
207
208
209
210
211
212
213
214
215
216
217
218

      this._config              = null
      this._element             = null
      this._dialog              = null
      this._backdrop            = null
      this._isShown             = null
      this._isBodyOverflowing   = null
      this._ignoreBackdropClick = null
      this._originalBodyPadding = null
      this._scrollbarWidth      = null
    }

219
220
221
    handleUpdate() {
      this._adjustDialog()
    }
222
223
224

    // private

fat's avatar
fat committed
225
226
227
228
229
230
    _getConfig(config) {
      config = $.extend({}, Default, config)
      Util.typeCheckConfig(NAME, config, DefaultType)
      return config
    }

231
    _showElement(relatedTarget) {
232
      const transition = Util.supportsTransitionEnd() &&
233
234
235
        $(this._element).hasClass(ClassName.FADE)

      if (!this._element.parentNode ||
236
         this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
237
238
239
240
241
        // don't move modals dom position
        document.body.appendChild(this._element)
      }

      this._element.style.display = 'block'
242
      this._element.removeAttribute('aria-hidden')
243
244
245
246
247
248
      this._element.scrollTop = 0

      if (transition) {
        Util.reflow(this._element)
      }

Starsam80's avatar
Starsam80 committed
249
      $(this._element).addClass(ClassName.SHOW)
250

Jacob Thornton's avatar
Jacob Thornton committed
251
252
253
      if (this._config.focus) {
        this._enforceFocus()
      }
254

255
      const shownEvent = $.Event(Event.SHOWN, {
Jacob Thornton's avatar
Jacob Thornton committed
256
        relatedTarget
257
258
      })

259
      const transitionComplete = () => {
Jacob Thornton's avatar
Jacob Thornton committed
260
261
262
        if (this._config.focus) {
          this._element.focus()
        }
263
        this._isTransitioning = false
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
        $(this._element).trigger(shownEvent)
      }

      if (transition) {
        $(this._dialog)
          .one(Util.TRANSITION_END, transitionComplete)
          .emulateTransitionEnd(TRANSITION_DURATION)
      } else {
        transitionComplete()
      }
    }

    _enforceFocus() {
      $(document)
        .off(Event.FOCUSIN) // guard against infinite focus loop
        .on(Event.FOCUSIN, (event) => {
280
281
          if (document !== event.target &&
              this._element !== event.target &&
282
              !$(this._element).has(event.target).length) {
283
284
285
286
287
288
289
            this._element.focus()
          }
        })
    }

    _setEscapeEvent() {
      if (this._isShown && this._config.keyboard) {
fat's avatar
fat committed
290
        $(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
291
          if (event.which === ESCAPE_KEYCODE) {
292
293
294
295
296
            this.hide()
          }
        })

      } else if (!this._isShown) {
fat's avatar
fat committed
297
        $(this._element).off(Event.KEYDOWN_DISMISS)
298
299
300
301
302
      }
    }

    _setResizeEvent() {
      if (this._isShown) {
303
        $(window).on(Event.RESIZE, (event) => this.handleUpdate(event))
304
305
306
307
308
309
310
      } else {
        $(window).off(Event.RESIZE)
      }
    }

    _hideModal() {
      this._element.style.display = 'none'
311
      this._element.setAttribute('aria-hidden', true)
312
      this._isTransitioning = false
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
      this._showBackdrop(() => {
        $(document.body).removeClass(ClassName.OPEN)
        this._resetAdjustments()
        this._resetScrollbar()
        $(this._element).trigger(Event.HIDDEN)
      })
    }

    _removeBackdrop() {
      if (this._backdrop) {
        $(this._backdrop).remove()
        this._backdrop = null
      }
    }

    _showBackdrop(callback) {
329
      const animate = $(this._element).hasClass(ClassName.FADE) ?
330
331
332
        ClassName.FADE : ''

      if (this._isShown && this._config.backdrop) {
333
        const doAnimate = Util.supportsTransitionEnd() && animate
334
335
336
337
338
339
340
341

        this._backdrop = document.createElement('div')
        this._backdrop.className = ClassName.BACKDROP

        if (animate) {
          $(this._backdrop).addClass(animate)
        }

Jacob Thornton's avatar
Jacob Thornton committed
342
        $(this._backdrop).appendTo(document.body)
343

fat's avatar
fat committed
344
        $(this._element).on(Event.CLICK_DISMISS, (event) => {
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
          if (this._ignoreBackdropClick) {
            this._ignoreBackdropClick = false
            return
          }
          if (event.target !== event.currentTarget) {
            return
          }
          if (this._config.backdrop === 'static') {
            this._element.focus()
          } else {
            this.hide()
          }
        })

        if (doAnimate) {
          Util.reflow(this._backdrop)
        }

Starsam80's avatar
Starsam80 committed
363
        $(this._backdrop).addClass(ClassName.SHOW)
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378

        if (!callback) {
          return
        }

        if (!doAnimate) {
          callback()
          return
        }

        $(this._backdrop)
          .one(Util.TRANSITION_END, callback)
          .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)

      } else if (!this._isShown && this._backdrop) {
Starsam80's avatar
Starsam80 committed
379
        $(this._backdrop).removeClass(ClassName.SHOW)
380

381
        const callbackRemove = () => {
382
383
384
385
386
387
388
          this._removeBackdrop()
          if (callback) {
            callback()
          }
        }

        if (Util.supportsTransitionEnd() &&
389
           $(this._element).hasClass(ClassName.FADE)) {
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
          $(this._backdrop)
            .one(Util.TRANSITION_END, callbackRemove)
            .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
        } else {
          callbackRemove()
        }

      } else if (callback) {
        callback()
      }
    }


    // ----------------------------------------------------------------------
    // the following methods are used to handle overflowing modals
    // todo (fat): these should probably be refactored out of modal.js
    // ----------------------------------------------------------------------

    _adjustDialog() {
409
      const isModalOverflowing =
410
411
412
        this._element.scrollHeight > document.documentElement.clientHeight

      if (!this._isBodyOverflowing && isModalOverflowing) {
Jacob Thornton's avatar
Jacob Thornton committed
413
        this._element.style.paddingLeft = `${this._scrollbarWidth}px`
414
415
416
      }

      if (this._isBodyOverflowing && !isModalOverflowing) {
417
        this._element.style.paddingRight = `${this._scrollbarWidth}px`
418
419
420
421
422
423
424
425
426
      }
    }

    _resetAdjustments() {
      this._element.style.paddingLeft = ''
      this._element.style.paddingRight = ''
    }

    _checkScrollbar() {
427
      this._isBodyOverflowing = document.body.clientWidth < window.innerWidth
428
429
430
431
      this._scrollbarWidth = this._getScrollbarWidth()
    }

    _setScrollbar() {
432
      const bodyPadding = parseInt(
433
        $(Selector.FIXED_CONTENT).css('padding-right') || 0,
434
435
436
437
438
439
440
        10
      )

      this._originalBodyPadding = document.body.style.paddingRight || ''

      if (this._isBodyOverflowing) {
        document.body.style.paddingRight =
441
          `${bodyPadding + this._scrollbarWidth}px`
442
443
444
445
446
447
448
449
      }
    }

    _resetScrollbar() {
      document.body.style.paddingRight = this._originalBodyPadding
    }

    _getScrollbarWidth() { // thx d.walsh
450
      const scrollDiv = document.createElement('div')
451
      scrollDiv.className = ClassName.SCROLLBAR_MEASURER
452
      document.body.appendChild(scrollDiv)
453
      const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth
454
455
456
457
458
459
460
461
462
      document.body.removeChild(scrollDiv)
      return scrollbarWidth
    }


    // static

    static _jQueryInterface(config, relatedTarget) {
      return this.each(function () {
463
464
        let data      = $(this).data(DATA_KEY)
        const _config = $.extend(
465
466
467
468
469
470
471
472
473
474
475
476
          {},
          Modal.Default,
          $(this).data(),
          typeof config === 'object' && config
        )

        if (!data) {
          data = new Modal(this, _config)
          $(this).data(DATA_KEY, data)
        }

        if (typeof config === 'string') {
477
478
479
          if (data[config] === undefined) {
            throw new Error(`No method named "${config}"`)
          }
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
          data[config](relatedTarget)
        } else if (_config.show) {
          data.show(relatedTarget)
        }
      })
    }

  }


  /**
   * ------------------------------------------------------------------------
   * Data Api implementation
   * ------------------------------------------------------------------------
   */

fat's avatar
fat committed
496
  $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
497
    let target
498
    const selector = Util.getSelectorFromElement(this)
499
500
501
502
503

    if (selector) {
      target = $(selector)[0]
    }

504
    const config = $(target).data(DATA_KEY) ?
505
506
      'toggle' : $.extend({}, $(target).data(), $(this).data())

507
    if (this.tagName === 'A' || this.tagName === 'AREA') {
508
509
510
      event.preventDefault()
    }

511
    const $target = $(target).one(Event.SHOW, (showEvent) => {
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
      if (showEvent.isDefaultPrevented()) {
        // only register focus restorer if modal will actually get shown
        return
      }

      $target.one(Event.HIDDEN, () => {
        if ($(this).is(':visible')) {
          this.focus()
        }
      })
    })

    Modal._jQueryInterface.call($(target), config, this)
  })


  /**
   * ------------------------------------------------------------------------
   * jQuery
   * ------------------------------------------------------------------------
   */

  $.fn[NAME]             = Modal._jQueryInterface
  $.fn[NAME].Constructor = Modal
  $.fn[NAME].noConflict  = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return Modal._jQueryInterface
  }

  return Modal

})(jQuery)

export default Modal