index.js 4.72 KB
Newer Older
1
2
/**
 * --------------------------------------------------------------------------
3
 * Bootstrap (v5.0.0-alpha1): util/index.js
4
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
6
7
8
9
10
11
12
 * --------------------------------------------------------------------------
 */

const MAX_UID = 1000000
const MILLISECONDS_MULTIPLIER = 1000
const TRANSITION_END = 'transitionend'

// Shoutout AngusCroll (https://goo.gl/pxwQGp)
13
14
15
16
17
18
19
const toType = obj => {
  if (obj === null || obj === undefined) {
    return `${obj}`
  }

  return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
}
20
21
22
23
24
25
26

/**
 * --------------------------------------------------------------------------
 * Public Util Api
 * --------------------------------------------------------------------------
 */

XhmikosR's avatar
XhmikosR committed
27
const getUID = prefix => {
28
  do {
29
    prefix += Math.floor(Math.random() * MAX_UID)
30
  } while (document.getElementById(prefix))
XhmikosR's avatar
XhmikosR committed
31

32
33
34
  return prefix
}

35
const getSelector = element => {
36
37
38
39
40
  let selector = element.getAttribute('data-target')

  if (!selector || selector === '#') {
    const hrefAttr = element.getAttribute('href')

41
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
42
43
  }

44
45
46
47
48
49
50
  return selector
}

const getSelectorFromElement = element => {
  const selector = getSelector(element)

  if (selector) {
51
52
    return document.querySelector(selector) ? selector : null
  }
53
54
55
56
57
58
59
60

  return null
}

const getElementFromSelector = element => {
  const selector = getSelector(element)

  return selector ? document.querySelector(selector) : null
61
62
}

XhmikosR's avatar
XhmikosR committed
63
const getTransitionDurationFromElement = element => {
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
  if (!element) {
    return 0
  }

  // Get transition-duration of the element
  let {
    transitionDuration,
    transitionDelay
  } = window.getComputedStyle(element)

  const floatTransitionDuration = parseFloat(transitionDuration)
  const floatTransitionDelay = parseFloat(transitionDelay)

  // Return 0 if element or transition duration is not found
  if (!floatTransitionDuration && !floatTransitionDelay) {
    return 0
  }

  // If multiple durations are defined, take the first
  transitionDuration = transitionDuration.split(',')[0]
  transitionDelay = transitionDelay.split(',')[0]

  return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER
}

XhmikosR's avatar
XhmikosR committed
89
const triggerTransitionEnd = element => {
Johann-S's avatar
Johann-S committed
90
  element.dispatchEvent(new Event(TRANSITION_END))
91
92
}

XhmikosR's avatar
XhmikosR committed
93
const isElement = obj => (obj[0] || obj).nodeType
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

const emulateTransitionEnd = (element, duration) => {
  let called = false
  const durationPadding = 5
  const emulatedDuration = duration + durationPadding
  function listener() {
    called = true
    element.removeEventListener(TRANSITION_END, listener)
  }

  element.addEventListener(TRANSITION_END, listener)
  setTimeout(() => {
    if (!called) {
      triggerTransitionEnd(element)
    }
  }, emulatedDuration)
}

const typeCheckConfig = (componentName, config, configTypes) => {
XhmikosR's avatar
XhmikosR committed
113
114
115
116
117
118
119
120
121
122
123
124
125
126
  Object.keys(configTypes).forEach(property => {
    const expectedTypes = configTypes[property]
    const value = config[property]
    const valueType = value && isElement(value) ?
      'element' :
      toType(value)

    if (!new RegExp(expectedTypes).test(valueType)) {
      throw new Error(
        `${componentName.toUpperCase()}: ` +
        `Option "${property}" provided type "${valueType}" ` +
        `but expected type "${expectedTypes}".`)
    }
  })
127
128
}

XhmikosR's avatar
XhmikosR committed
129
const isVisible = element => {
130
131
132
133
134
  if (!element) {
    return false
  }

  if (element.style && element.parentNode && element.parentNode.style) {
135
136
137
138
139
140
    const elementStyle = getComputedStyle(element)
    const parentNodeStyle = getComputedStyle(element.parentNode)

    return elementStyle.display !== 'none' &&
      parentNodeStyle.display !== 'none' &&
      elementStyle.visibility !== 'hidden'
141
142
143
144
145
  }

  return false
}

XhmikosR's avatar
XhmikosR committed
146
const findShadowRoot = element => {
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
  if (!document.documentElement.attachShadow) {
    return null
  }

  // Can find the shadow root otherwise it'll return the document
  if (typeof element.getRootNode === 'function') {
    const root = element.getRootNode()
    return root instanceof ShadowRoot ? root : null
  }

  if (element instanceof ShadowRoot) {
    return element
  }

  // when we don't find a shadow root
  if (!element.parentNode) {
    return null
  }

  return findShadowRoot(element.parentNode)
}

const noop = () => function () {}

XhmikosR's avatar
XhmikosR committed
171
const reflow = element => element.offsetHeight
172

173
174
175
176
177
178
179
180
181
182
const getjQuery = () => {
  const { jQuery } = window

  if (jQuery && !document.body.hasAttribute('data-no-jquery')) {
    return jQuery
  }

  return null
}

183
export {
184
  getjQuery,
185
186
187
  TRANSITION_END,
  getUID,
  getSelectorFromElement,
188
  getElementFromSelector,
189
190
191
192
193
194
195
196
197
198
  getTransitionDurationFromElement,
  triggerTransitionEnd,
  isElement,
  emulateTransitionEnd,
  typeCheckConfig,
  isVisible,
  findShadowRoot,
  noop,
  reflow
}