Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
/**
2
 * --------------------------------------------------------------------------
1441 ariadna 3
 * Bootstrap toast.js
1 efrain 4
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
 * --------------------------------------------------------------------------
6
 */
7
 
1441 ariadna 8
import BaseComponent from './base-component'
9
import EventHandler from './dom/event-handler'
10
import { enableDismissTrigger } from './util/component-functions'
11
import { defineJQueryPlugin, reflow } from './util/index'
1 efrain 12
 
13
/**
14
 * Constants
15
 */
16
 
17
const NAME = 'toast'
18
const DATA_KEY = 'bs.toast'
19
const EVENT_KEY = `.${DATA_KEY}`
20
 
1441 ariadna 21
const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
22
const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
23
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
24
const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`
1 efrain 25
const EVENT_HIDE = `hide${EVENT_KEY}`
26
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
27
const EVENT_SHOW = `show${EVENT_KEY}`
28
const EVENT_SHOWN = `shown${EVENT_KEY}`
29
 
1441 ariadna 30
const CLASS_NAME_FADE = 'fade'
31
const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility
32
const CLASS_NAME_SHOW = 'show'
33
const CLASS_NAME_SHOWING = 'showing'
1 efrain 34
 
35
const DefaultType = {
36
  animation: 'boolean',
37
  autohide: 'boolean',
38
  delay: 'number'
39
}
40
 
1441 ariadna 41
const Default = {
42
  animation: true,
43
  autohide: true,
44
  delay: 5000
45
}
46
 
1 efrain 47
/**
48
 * Class definition
49
 */
50
 
1441 ariadna 51
class Toast extends BaseComponent {
1 efrain 52
  constructor(element, config) {
1441 ariadna 53
    super(element, config)
54
 
1 efrain 55
    this._timeout = null
1441 ariadna 56
    this._hasMouseInteraction = false
57
    this._hasKeyboardInteraction = false
1 efrain 58
    this._setListeners()
59
  }
60
 
61
  // Getters
1441 ariadna 62
  static get Default() {
63
    return Default
1 efrain 64
  }
65
 
66
  static get DefaultType() {
67
    return DefaultType
68
  }
69
 
1441 ariadna 70
  static get NAME() {
71
    return NAME
1 efrain 72
  }
73
 
74
  // Public
75
  show() {
1441 ariadna 76
    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW)
1 efrain 77
 
1441 ariadna 78
    if (showEvent.defaultPrevented) {
1 efrain 79
      return
80
    }
81
 
82
    this._clearTimeout()
83
 
84
    if (this._config.animation) {
85
      this._element.classList.add(CLASS_NAME_FADE)
86
    }
87
 
88
    const complete = () => {
89
      this._element.classList.remove(CLASS_NAME_SHOWING)
1441 ariadna 90
      EventHandler.trigger(this._element, EVENT_SHOWN)
1 efrain 91
 
1441 ariadna 92
      this._maybeScheduleHide()
1 efrain 93
    }
94
 
1441 ariadna 95
    this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
96
    reflow(this._element)
97
    this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_SHOWING)
1 efrain 98
 
1441 ariadna 99
    this._queueCallback(complete, this._element, this._config.animation)
1 efrain 100
  }
101
 
102
  hide() {
1441 ariadna 103
    if (!this.isShown()) {
1 efrain 104
      return
105
    }
106
 
1441 ariadna 107
    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
1 efrain 108
 
1441 ariadna 109
    if (hideEvent.defaultPrevented) {
1 efrain 110
      return
111
    }
112
 
1441 ariadna 113
    const complete = () => {
114
      this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
115
      this._element.classList.remove(CLASS_NAME_SHOWING, CLASS_NAME_SHOW)
116
      EventHandler.trigger(this._element, EVENT_HIDDEN)
117
    }
118
 
119
    this._element.classList.add(CLASS_NAME_SHOWING)
120
    this._queueCallback(complete, this._element, this._config.animation)
1 efrain 121
  }
122
 
123
  dispose() {
124
    this._clearTimeout()
125
 
1441 ariadna 126
    if (this.isShown()) {
1 efrain 127
      this._element.classList.remove(CLASS_NAME_SHOW)
128
    }
129
 
1441 ariadna 130
    super.dispose()
131
  }
1 efrain 132
 
1441 ariadna 133
  isShown() {
134
    return this._element.classList.contains(CLASS_NAME_SHOW)
1 efrain 135
  }
136
 
137
  // Private
1441 ariadna 138
 
139
  _maybeScheduleHide() {
140
    if (!this._config.autohide) {
141
      return
1 efrain 142
    }
143
 
1441 ariadna 144
    if (this._hasMouseInteraction || this._hasKeyboardInteraction) {
145
      return
146
    }
1 efrain 147
 
1441 ariadna 148
    this._timeout = setTimeout(() => {
149
      this.hide()
150
    }, this._config.delay)
1 efrain 151
  }
152
 
1441 ariadna 153
  _onInteraction(event, isInteracting) {
154
    switch (event.type) {
155
      case 'mouseover':
156
      case 'mouseout': {
157
        this._hasMouseInteraction = isInteracting
158
        break
159
      }
1 efrain 160
 
1441 ariadna 161
      case 'focusin':
162
      case 'focusout': {
163
        this._hasKeyboardInteraction = isInteracting
164
        break
165
      }
166
 
167
      default: {
168
        break
169
      }
1 efrain 170
    }
171
 
1441 ariadna 172
    if (isInteracting) {
173
      this._clearTimeout()
174
      return
175
    }
1 efrain 176
 
1441 ariadna 177
    const nextElement = event.relatedTarget
178
    if (this._element === nextElement || this._element.contains(nextElement)) {
179
      return
1 efrain 180
    }
1441 ariadna 181
 
182
    this._maybeScheduleHide()
1 efrain 183
  }
184
 
1441 ariadna 185
  _setListeners() {
186
    EventHandler.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true))
187
    EventHandler.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false))
188
    EventHandler.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true))
189
    EventHandler.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false))
190
  }
191
 
1 efrain 192
  _clearTimeout() {
193
    clearTimeout(this._timeout)
194
    this._timeout = null
195
  }
196
 
197
  // Static
1441 ariadna 198
  static jQueryInterface(config) {
1 efrain 199
    return this.each(function () {
1441 ariadna 200
      const data = Toast.getOrCreateInstance(this, config)
1 efrain 201
 
202
      if (typeof config === 'string') {
203
        if (typeof data[config] === 'undefined') {
204
          throw new TypeError(`No method named "${config}"`)
205
        }
206
 
207
        data[config](this)
208
      }
209
    })
210
  }
211
}
212
 
213
/**
1441 ariadna 214
 * Data API implementation
215
 */
216
 
217
enableDismissTrigger(Toast)
218
 
219
/**
1 efrain 220
 * jQuery
221
 */
222
 
1441 ariadna 223
defineJQueryPlugin(Toast)
1 efrain 224
 
225
export default Toast