talos

tab.js
248 строк · 6.0 Кб
Перенос по словам
1
/**
2
 * --------------------------------------------------------------------------
3
 * Bootstrap (v4.6.1): tab.js
4
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
 * --------------------------------------------------------------------------
6
 */
7

8
import $ from 'jquery'
9
import Util from './util'
10

11
/**
12
 * Constants
13
 */
14

15
const NAME = 'tab'
16
const VERSION = '4.6.1'
17
const DATA_KEY = 'bs.tab'
18
const EVENT_KEY = `.${DATA_KEY}`
19
const DATA_API_KEY = '.data-api'
20
const JQUERY_NO_CONFLICT = $.fn[NAME]
21

22
const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'
23
const CLASS_NAME_ACTIVE = 'active'
24
const CLASS_NAME_DISABLED = 'disabled'
25
const CLASS_NAME_FADE = 'fade'
26
const CLASS_NAME_SHOW = 'show'
27

28
const EVENT_HIDE = `hide${EVENT_KEY}`
29
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
30
const EVENT_SHOW = `show${EVENT_KEY}`
31
const EVENT_SHOWN = `shown${EVENT_KEY}`
32
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
33

34
const SELECTOR_DROPDOWN = '.dropdown'
35
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
36
const SELECTOR_ACTIVE = '.active'
37
const SELECTOR_ACTIVE_UL = '> li > .active'
38
const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]'
39
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
40
const SELECTOR_DROPDOWN_ACTIVE_CHILD = '> .dropdown-menu .active'
41

42
/**
43
 * Class definition
44
 */
45

46
class Tab {
47
  constructor(element) {
48
    this._element = element
49
  }
50

51
  // Getters
52
  static get VERSION() {
53
    return VERSION
54
  }
55

56
  // Public
57
  show() {
58
    if (this._element.parentNode &&
59
        this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
60
        $(this._element).hasClass(CLASS_NAME_ACTIVE) ||
61
        $(this._element).hasClass(CLASS_NAME_DISABLED)) {
62
      return
63
    }
64

65
    let target
66
    let previous
67
    const listElement = $(this._element).closest(SELECTOR_NAV_LIST_GROUP)[0]
68
    const selector = Util.getSelectorFromElement(this._element)
69

70
    if (listElement) {
71
      const itemSelector = listElement.nodeName === 'UL' || listElement.nodeName === 'OL' ? SELECTOR_ACTIVE_UL : SELECTOR_ACTIVE
72
      previous = $.makeArray($(listElement).find(itemSelector))
73
      previous = previous[previous.length - 1]
74
    }
75

76
    const hideEvent = $.Event(EVENT_HIDE, {
77
      relatedTarget: this._element
78
    })
79

80
    const showEvent = $.Event(EVENT_SHOW, {
81
      relatedTarget: previous
82
    })
83

84
    if (previous) {
85
      $(previous).trigger(hideEvent)
86
    }
87

88
    $(this._element).trigger(showEvent)
89

90
    if (showEvent.isDefaultPrevented() ||
91
        hideEvent.isDefaultPrevented()) {
92
      return
93
    }
94

95
    if (selector) {
96
      target = document.querySelector(selector)
97
    }
98

99
    this._activate(
100
      this._element,
101
      listElement
102
    )
103

104
    const complete = () => {
105
      const hiddenEvent = $.Event(EVENT_HIDDEN, {
106
        relatedTarget: this._element
107
      })
108

109
      const shownEvent = $.Event(EVENT_SHOWN, {
110
        relatedTarget: previous
111
      })
112

113
      $(previous).trigger(hiddenEvent)
114
      $(this._element).trigger(shownEvent)
115
    }
116

117
    if (target) {
118
      this._activate(target, target.parentNode, complete)
119
    } else {
120
      complete()
121
    }
122
  }
123

124
  dispose() {
125
    $.removeData(this._element, DATA_KEY)
126
    this._element = null
127
  }
128

129
  // Private
130
  _activate(element, container, callback) {
131
    const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ?
132
      $(container).find(SELECTOR_ACTIVE_UL) :
133
      $(container).children(SELECTOR_ACTIVE)
134

135
    const active = activeElements[0]
136
    const isTransitioning = callback && (active && $(active).hasClass(CLASS_NAME_FADE))
137
    const complete = () => this._transitionComplete(
138
      element,
139
      active,
140
      callback
141
    )
142

143
    if (active && isTransitioning) {
144
      const transitionDuration = Util.getTransitionDurationFromElement(active)
145

146
      $(active)
147
        .removeClass(CLASS_NAME_SHOW)
148
        .one(Util.TRANSITION_END, complete)
149
        .emulateTransitionEnd(transitionDuration)
150
    } else {
151
      complete()
152
    }
153
  }
154

155
  _transitionComplete(element, active, callback) {
156
    if (active) {
157
      $(active).removeClass(CLASS_NAME_ACTIVE)
158

159
      const dropdownChild = $(active.parentNode).find(
160
        SELECTOR_DROPDOWN_ACTIVE_CHILD
161
      )[0]
162

163
      if (dropdownChild) {
164
        $(dropdownChild).removeClass(CLASS_NAME_ACTIVE)
165
      }
166

167
      if (active.getAttribute('role') === 'tab') {
168
        active.setAttribute('aria-selected', false)
169
      }
170
    }
171

172
    $(element).addClass(CLASS_NAME_ACTIVE)
173
    if (element.getAttribute('role') === 'tab') {
174
      element.setAttribute('aria-selected', true)
175
    }
176

177
    Util.reflow(element)
178

179
    if (element.classList.contains(CLASS_NAME_FADE)) {
180
      element.classList.add(CLASS_NAME_SHOW)
181
    }
182

183
    let parent = element.parentNode
184
    if (parent && parent.nodeName === 'LI') {
185
      parent = parent.parentNode
186
    }
187

188
    if (parent && $(parent).hasClass(CLASS_NAME_DROPDOWN_MENU)) {
189
      const dropdownElement = $(element).closest(SELECTOR_DROPDOWN)[0]
190

191
      if (dropdownElement) {
192
        const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(SELECTOR_DROPDOWN_TOGGLE))
193

194
        $(dropdownToggleList).addClass(CLASS_NAME_ACTIVE)
195
      }
196

197
      element.setAttribute('aria-expanded', true)
198
    }
199

200
    if (callback) {
201
      callback()
202
    }
203
  }
204

205
  // Static
206
  static _jQueryInterface(config) {
207
    return this.each(function () {
208
      const $this = $(this)
209
      let data = $this.data(DATA_KEY)
210

211
      if (!data) {
212
        data = new Tab(this)
213
        $this.data(DATA_KEY, data)
214
      }
215

216
      if (typeof config === 'string') {
217
        if (typeof data[config] === 'undefined') {
218
          throw new TypeError(`No method named "${config}"`)
219
        }
220

221
        data[config]()
222
      }
223
    })
224
  }
225
}
226

227
/**
228
 * Data API implementation
229
 */
230

231
$(document)
232
  .on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
233
    event.preventDefault()
234
    Tab._jQueryInterface.call($(this), 'show')
235
  })
236

237
/**
238
 * jQuery
239
 */
240

241
$.fn[NAME] = Tab._jQueryInterface
242
$.fn[NAME].Constructor = Tab
243
$.fn[NAME].noConflict = () => {
244
  $.fn[NAME] = JQUERY_NO_CONFLICT
245
  return Tab._jQueryInterface
246
}
247

248
export default Tab
249
talos

Использование cookies
