Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1441 ariadna 1 
/**
2 
 * --------------------------------------------------------------------------
3 
 * Bootstrap util/backdrop.js
4 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5 
 * --------------------------------------------------------------------------
6 
 */
7 
 
8 
import EventHandler from '../dom/event-handler'
9 
import Config from './config'
10 
import {
11 
  execute, executeAfterTransition, getElement, reflow
12 
} from './index'
13 
 
14 
/**
15 
 * Constants
16 
 */
17 
 
18 
const NAME = 'backdrop'
19 
const CLASS_NAME_FADE = 'fade'
20 
const CLASS_NAME_SHOW = 'show'
21 
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`
22 
 
23 
const Default = {
24 
  className: 'modal-backdrop',
25 
  clickCallback: null,
26 
  isAnimated: false,
27 
  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
28 
  rootElement: 'body' // give the choice to place backdrop under different elements
29 
}
30 
 
31 
const DefaultType = {
32 
  className: 'string',
33 
  clickCallback: '(function|null)',
34 
  isAnimated: 'boolean',
35 
  isVisible: 'boolean',
36 
  rootElement: '(element|string)'
37 
}
38 
 
39 
/**
40 
 * Class definition
41 
 */
42 
 
43 
class Backdrop extends Config {
44 
  constructor(config) {
45 
    super()
46 
    this._config = this._getConfig(config)
47 
    this._isAppended = false
48 
    this._element = null
49 
  }
50 
 
51 
  // Getters
52 
  static get Default() {
53 
    return Default
54 
  }
55 
 
56 
  static get DefaultType() {
57 
    return DefaultType
58 
  }
59 
 
60 
  static get NAME() {
61 
    return NAME
62 
  }
63 
 
64 
  // Public
65 
  show(callback) {
66 
    if (!this._config.isVisible) {
67 
      execute(callback)
68 
      return
69 
    }
70 
 
71 
    this._append()
72 
 
73 
    const element = this._getElement()
74 
    if (this._config.isAnimated) {
75 
      reflow(element)
76 
    }
77 
 
78 
    element.classList.add(CLASS_NAME_SHOW)
79 
 
80 
    this._emulateAnimation(() => {
81 
      execute(callback)
82 
    })
83 
  }
84 
 
85 
  hide(callback) {
86 
    if (!this._config.isVisible) {
87 
      execute(callback)
88 
      return
89 
    }
90 
 
91 
    this._getElement().classList.remove(CLASS_NAME_SHOW)
92 
 
93 
    this._emulateAnimation(() => {
94 
      this.dispose()
95 
      execute(callback)
96 
    })
97 
  }
98 
 
99 
  dispose() {
100 
    if (!this._isAppended) {
101 
      return
102 
    }
103 
 
104 
    EventHandler.off(this._element, EVENT_MOUSEDOWN)
105 
 
106 
    this._element.remove()
107 
    this._isAppended = false
108 
  }
109 
 
110 
  // Private
111 
  _getElement() {
112 
    if (!this._element) {
113 
      const backdrop = document.createElement('div')
114 
      backdrop.className = this._config.className
115 
      if (this._config.isAnimated) {
116 
        backdrop.classList.add(CLASS_NAME_FADE)
117 
      }
118 
 
119 
      this._element = backdrop
120 
    }
121 
 
122 
    return this._element
123 
  }
124 
 
125 
  _configAfterMerge(config) {
126 
    // use getElement() with the default "body" to get a fresh Element on each instantiation
127 
    config.rootElement = getElement(config.rootElement)
128 
    return config
129 
  }
130 
 
131 
  _append() {
132 
    if (this._isAppended) {
133 
      return
134 
    }
135 
 
136 
    const element = this._getElement()
137 
    this._config.rootElement.append(element)
138 
 
139 
    EventHandler.on(element, EVENT_MOUSEDOWN, () => {
140 
      execute(this._config.clickCallback)
141 
    })
142 
 
143 
    this._isAppended = true
144 
  }
145 
 
146 
  _emulateAnimation(callback) {
147 
    executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
148 
  }
149 
}
150 
 
151 
export default Backdrop