corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 1 | import $ from 'jquery' |
2 | import Util from './util' |
||
3 | |||
4 | /** |
||
5 | * -------------------------------------------------------------------------- |
||
6 | * Bootstrap (v4.1.3): tab.js |
||
7 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) |
||
8 | * -------------------------------------------------------------------------- |
||
9 | */ |
||
10 | |||
11 | const Tab = (($) => { |
||
12 | /** |
||
13 | * ------------------------------------------------------------------------ |
||
14 | * Constants |
||
15 | * ------------------------------------------------------------------------ |
||
16 | */ |
||
17 | |||
18 | const NAME = 'tab' |
||
19 | const VERSION = '4.1.3' |
||
20 | const DATA_KEY = 'bs.tab' |
||
21 | const EVENT_KEY = `.${DATA_KEY}` |
||
22 | const DATA_API_KEY = '.data-api' |
||
23 | const JQUERY_NO_CONFLICT = $.fn[NAME] |
||
24 | |||
25 | const Event = { |
||
26 | HIDE : `hide${EVENT_KEY}`, |
||
27 | HIDDEN : `hidden${EVENT_KEY}`, |
||
28 | SHOW : `show${EVENT_KEY}`, |
||
29 | SHOWN : `shown${EVENT_KEY}`, |
||
30 | CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` |
||
31 | } |
||
32 | |||
33 | const ClassName = { |
||
34 | DROPDOWN_MENU : 'dropdown-menu', |
||
35 | ACTIVE : 'active', |
||
36 | DISABLED : 'disabled', |
||
37 | FADE : 'fade', |
||
38 | SHOW : 'show' |
||
39 | } |
||
40 | |||
41 | const Selector = { |
||
42 | DROPDOWN : '.dropdown', |
||
43 | NAV_LIST_GROUP : '.nav, .list-group', |
||
44 | ACTIVE : '.active', |
||
45 | ACTIVE_UL : '> li > .active', |
||
46 | DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', |
||
47 | DROPDOWN_TOGGLE : '.dropdown-toggle', |
||
48 | DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' |
||
49 | } |
||
50 | |||
51 | /** |
||
52 | * ------------------------------------------------------------------------ |
||
53 | * Class Definition |
||
54 | * ------------------------------------------------------------------------ |
||
55 | */ |
||
56 | |||
57 | class Tab { |
||
58 | constructor(element) { |
||
59 | this._element = element |
||
60 | } |
||
61 | |||
62 | // Getters |
||
63 | |||
64 | static get VERSION() { |
||
65 | return VERSION |
||
66 | } |
||
67 | |||
68 | // Public |
||
69 | |||
70 | show() { |
||
71 | if (this._element.parentNode && |
||
72 | this._element.parentNode.nodeType === Node.ELEMENT_NODE && |
||
73 | $(this._element).hasClass(ClassName.ACTIVE) || |
||
74 | $(this._element).hasClass(ClassName.DISABLED)) { |
||
75 | return |
||
76 | } |
||
77 | |||
78 | let target |
||
79 | let previous |
||
80 | const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0] |
||
81 | const selector = Util.getSelectorFromElement(this._element) |
||
82 | |||
83 | if (listElement) { |
||
84 | const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE |
||
85 | previous = $.makeArray($(listElement).find(itemSelector)) |
||
86 | previous = previous[previous.length - 1] |
||
87 | } |
||
88 | |||
89 | const hideEvent = $.Event(Event.HIDE, { |
||
90 | relatedTarget: this._element |
||
91 | }) |
||
92 | |||
93 | const showEvent = $.Event(Event.SHOW, { |
||
94 | relatedTarget: previous |
||
95 | }) |
||
96 | |||
97 | if (previous) { |
||
98 | $(previous).trigger(hideEvent) |
||
99 | } |
||
100 | |||
101 | $(this._element).trigger(showEvent) |
||
102 | |||
103 | if (showEvent.isDefaultPrevented() || |
||
104 | hideEvent.isDefaultPrevented()) { |
||
105 | return |
||
106 | } |
||
107 | |||
108 | if (selector) { |
||
109 | target = document.querySelector(selector) |
||
110 | } |
||
111 | |||
112 | this._activate( |
||
113 | this._element, |
||
114 | listElement |
||
115 | ) |
||
116 | |||
117 | const complete = () => { |
||
118 | const hiddenEvent = $.Event(Event.HIDDEN, { |
||
119 | relatedTarget: this._element |
||
120 | }) |
||
121 | |||
122 | const shownEvent = $.Event(Event.SHOWN, { |
||
123 | relatedTarget: previous |
||
124 | }) |
||
125 | |||
126 | $(previous).trigger(hiddenEvent) |
||
127 | $(this._element).trigger(shownEvent) |
||
128 | } |
||
129 | |||
130 | if (target) { |
||
131 | this._activate(target, target.parentNode, complete) |
||
132 | } else { |
||
133 | complete() |
||
134 | } |
||
135 | } |
||
136 | |||
137 | dispose() { |
||
138 | $.removeData(this._element, DATA_KEY) |
||
139 | this._element = null |
||
140 | } |
||
141 | |||
142 | // Private |
||
143 | |||
144 | _activate(element, container, callback) { |
||
145 | let activeElements |
||
146 | if (container.nodeName === 'UL') { |
||
147 | activeElements = $(container).find(Selector.ACTIVE_UL) |
||
148 | } else { |
||
149 | activeElements = $(container).children(Selector.ACTIVE) |
||
150 | } |
||
151 | |||
152 | const active = activeElements[0] |
||
153 | const isTransitioning = callback && |
||
154 | (active && $(active).hasClass(ClassName.FADE)) |
||
155 | |||
156 | const complete = () => this._transitionComplete( |
||
157 | element, |
||
158 | active, |
||
159 | callback |
||
160 | ) |
||
161 | |||
162 | if (active && isTransitioning) { |
||
163 | const transitionDuration = Util.getTransitionDurationFromElement(active) |
||
164 | |||
165 | $(active) |
||
166 | .one(Util.TRANSITION_END, complete) |
||
167 | .emulateTransitionEnd(transitionDuration) |
||
168 | } else { |
||
169 | complete() |
||
170 | } |
||
171 | } |
||
172 | |||
173 | _transitionComplete(element, active, callback) { |
||
174 | if (active) { |
||
175 | $(active).removeClass(`${ClassName.SHOW} ${ClassName.ACTIVE}`) |
||
176 | |||
177 | const dropdownChild = $(active.parentNode).find( |
||
178 | Selector.DROPDOWN_ACTIVE_CHILD |
||
179 | )[0] |
||
180 | |||
181 | if (dropdownChild) { |
||
182 | $(dropdownChild).removeClass(ClassName.ACTIVE) |
||
183 | } |
||
184 | |||
185 | if (active.getAttribute('role') === 'tab') { |
||
186 | active.setAttribute('aria-selected', false) |
||
187 | } |
||
188 | } |
||
189 | |||
190 | $(element).addClass(ClassName.ACTIVE) |
||
191 | if (element.getAttribute('role') === 'tab') { |
||
192 | element.setAttribute('aria-selected', true) |
||
193 | } |
||
194 | |||
195 | Util.reflow(element) |
||
196 | $(element).addClass(ClassName.SHOW) |
||
197 | |||
198 | if (element.parentNode && |
||
199 | $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { |
||
200 | const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] |
||
201 | if (dropdownElement) { |
||
202 | const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE)) |
||
203 | $(dropdownToggleList).addClass(ClassName.ACTIVE) |
||
204 | } |
||
205 | |||
206 | element.setAttribute('aria-expanded', true) |
||
207 | } |
||
208 | |||
209 | if (callback) { |
||
210 | callback() |
||
211 | } |
||
212 | } |
||
213 | |||
214 | // Static |
||
215 | |||
216 | static _jQueryInterface(config) { |
||
217 | return this.each(function () { |
||
218 | const $this = $(this) |
||
219 | let data = $this.data(DATA_KEY) |
||
220 | |||
221 | if (!data) { |
||
222 | data = new Tab(this) |
||
223 | $this.data(DATA_KEY, data) |
||
224 | } |
||
225 | |||
226 | if (typeof config === 'string') { |
||
227 | if (typeof data[config] === 'undefined') { |
||
228 | throw new TypeError(`No method named "${config}"`) |
||
229 | } |
||
230 | data[config]() |
||
231 | } |
||
232 | }) |
||
233 | } |
||
234 | } |
||
235 | |||
236 | /** |
||
237 | * ------------------------------------------------------------------------ |
||
238 | * Data Api implementation |
||
239 | * ------------------------------------------------------------------------ |
||
240 | */ |
||
241 | |||
242 | $(document) |
||
243 | .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { |
||
244 | event.preventDefault() |
||
245 | Tab._jQueryInterface.call($(this), 'show') |
||
246 | }) |
||
247 | |||
248 | /** |
||
249 | * ------------------------------------------------------------------------ |
||
250 | * jQuery |
||
251 | * ------------------------------------------------------------------------ |
||
252 | */ |
||
253 | |||
254 | $.fn[NAME] = Tab._jQueryInterface |
||
255 | $.fn[NAME].Constructor = Tab |
||
256 | $.fn[NAME].noConflict = function () { |
||
257 | $.fn[NAME] = JQUERY_NO_CONFLICT |
||
258 | return Tab._jQueryInterface |
||
259 | } |
||
260 | |||
261 | return Tab |
||
262 | })($) |
||
263 | |||
264 | export default Tab |