https://sonataflow.org/_/js/tabsBehavior.js

1/*
2 * Licensed to the Apache Software Foundation (ASF) under one
3 * or more contributor license agreements.  See the NOTICE file
4 * distributed with this work for additional information
5 * regarding copyright ownership.  The ASF licenses this file
6 * to you under the Apache License, Version 2.0 (the
7 * "License"); you may not use this file except in compliance
8 * with the License.  You may obtain a copy of the License at
9 *
10 *   http://www.apache.org/licenses/LICENSE-2.0
11 *
12 * Unless required by applicable law or agreed to in writing,
13 * software distributed under the License is distributed on an
14 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15 * KIND, either express or implied.  See the License for the
16 * specific language governing permissions and limitations
17 * under the License.
18 */
19
20;(function () {
21  'use strict'
22
23  var hash = window.location.hash
24  find('.tabset').forEach(function (tabset) {
25    var active
26    var tabs = tabset.querySelector('.tabs')
27    if (tabs) {
28      var first
29      find('li', tabs).forEach(function (tab, idx) {
30        var id = (tab.querySelector('a[id]') || tab).id
31        if (!id) return
32        var pane = getPane(id, tabset)
33        if (!idx) first = { tab: tab, pane: pane }
34        if (!active && hash === '#' + id && (active = true)) {
35          tab.classList.add('is-active')
36          if (pane) pane.classList.add('is-active')
37        } else if (!idx) {
38          tab.classList.remove('is-active')
39          if (pane) pane.classList.remove('is-active')
40        }
41        tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane }))
42      })
43      if (!active && first) {
44        first.tab.classList.add('is-active')
45        if (first.pane) first.pane.classList.add('is-active')
46      }
47    }
48    tabset.classList.remove('is-loading')
49  })
50
51  function activateTab (e) {
52    var tab = this.tab
53    var pane = this.pane
54    find('.tabs li, .tab-pane', this.tabset).forEach(function (it) {
55      it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
56    })
57    e.preventDefault()
58  }
59
60  function find (selector, from) {
61    return Array.prototype.slice.call((from || document).querySelectorAll(selector))
62  }
63
64  function getPane (id, tabset) {
65    return find('.tab-pane', tabset).find(function (it) {
66      return it.getAttribute('aria-labelledby') === id
67    })
68  }
69})()