|
| 1 | +;(function () { /*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License */ |
| 2 | + 'use strict' |
| 3 | + |
| 4 | + var config = (document.currentScript || {}).dataset || {} |
| 5 | + var forEach = Array.prototype.forEach |
| 6 | + |
| 7 | + init(document.querySelectorAll('.tabs')) |
| 8 | + |
| 9 | + function init (tabsBlocks) { |
| 10 | + if (!tabsBlocks.length) return |
| 11 | + forEach.call(tabsBlocks, function (tabs) { |
| 12 | + var syncIds = tabs.classList.contains('is-sync') ? {} : undefined |
| 13 | + var tablist = tabs.querySelector('.tablist ul') |
| 14 | + tablist.setAttribute('role', 'tablist') |
| 15 | + var start |
| 16 | + forEach.call(tablist.querySelectorAll('li'), function (tab, idx) { |
| 17 | + tab.tabIndex = -1 |
| 18 | + tab.setAttribute('role', tab.classList.add('tab') || 'tab') |
| 19 | + var id, anchor, syncId |
| 20 | + if (!(id = tab.id) && (anchor = tab.querySelector('a[id]'))) { |
| 21 | + id = tab.id = anchor.parentNode.removeChild(anchor).id |
| 22 | + } |
| 23 | + var panel = id && tabs.querySelector('.tabpanel[aria-labelledby~="' + id + '"]') |
| 24 | + if (!panel) return idx ? undefined : toggleSelected(tab, true) // invalid state |
| 25 | + syncIds && (((syncId = tab.textContent.trim()) in syncIds) ? (syncId = undefined) : true) && |
| 26 | + (syncIds[(tab.dataset.syncId = syncId)] = tab) |
| 27 | + idx || (syncIds && (start = { tab: tab, panel: panel })) ? toggleHidden(panel, true) : toggleSelected(tab, true) |
| 28 | + tab.setAttribute('aria-controls', panel.id) |
| 29 | + panel.setAttribute('role', 'tabpanel') |
| 30 | + var onClick = syncId === undefined ? activateTab : activateTabSync |
| 31 | + tab.addEventListener('click', onClick.bind({ tabs: tabs, tab: tab, panel: panel })) |
| 32 | + }) |
| 33 | + if (!tabs.closest('.tabpanel')) { |
| 34 | + forEach.call(tabs.querySelectorAll('.tabpanel table.tableblock'), function (table) { |
| 35 | + var container = Object.assign(document.createElement('div'), { className: 'tablecontainer' }) |
| 36 | + table.parentNode.insertBefore(container, table).appendChild(table) |
| 37 | + }) |
| 38 | + } |
| 39 | + if (start) { |
| 40 | + var syncGroupId |
| 41 | + for (var i = 0, lst = tabs.classList, len = lst.length, className; i !== len; i++) { |
| 42 | + if (!(className = lst.item(i)).startsWith('data-sync-group-id=')) continue |
| 43 | + tabs.dataset.syncGroupId = syncGroupId = lst.remove(className) || className.slice(19).replace(/\u00a0/g, ' ') |
| 44 | + break |
| 45 | + } |
| 46 | + if (syncGroupId === undefined) tabs.dataset.syncGroupId = syncGroupId = Object.keys(syncIds).sort().join('|') |
| 47 | + var preferredSyncId = 'syncStorageKey' in config && |
| 48 | + window[(config.syncStorageScope || 'local') + 'Storage'].getItem(config.syncStorageKey + '-' + syncGroupId) |
| 49 | + var tab = preferredSyncId && syncIds[preferredSyncId] |
| 50 | + tab && Object.assign(start, { tab: tab, panel: document.getElementById(tab.getAttribute('aria-controls')) }) |
| 51 | + toggleSelected(start.tab, true) || toggleHidden(start.panel, false) |
| 52 | + } |
| 53 | + }) |
| 54 | + onHashChange() |
| 55 | + toggleClassOnEach(tabsBlocks, 'is-loading', 'remove') |
| 56 | + window.setTimeout(toggleClassOnEach.bind(null, tabsBlocks, 'is-loaded', 'add'), 0) |
| 57 | + window.addEventListener('hashchange', onHashChange) |
| 58 | + } |
| 59 | + |
| 60 | + function activateTab (e) { |
| 61 | + var tab = this.tab |
| 62 | + var tabs = this.tabs || (this.tabs = tab.closest('.tabs')) |
| 63 | + var panel = this.panel || (this.panel = document.getElementById(tab.getAttribute('aria-controls'))) |
| 64 | + querySelectorWithSiblings(tabs, '.tablist .tab', 'tab').forEach(function (el) { |
| 65 | + toggleSelected(el, el === tab) |
| 66 | + }) |
| 67 | + querySelectorWithSiblings(tabs, '.tabpanel', 'tabpanel').forEach(function (el) { |
| 68 | + toggleHidden(el, el !== panel) |
| 69 | + }) |
| 70 | + if (!this.isSync && 'syncStorageKey' in config && 'syncGroupId' in tabs.dataset) { |
| 71 | + var storageKey = config.syncStorageKey + '-' + tabs.dataset.syncGroupId |
| 72 | + window[(config.syncStorageScope || 'local') + 'Storage'].setItem(storageKey, tab.dataset.syncId) |
| 73 | + } |
| 74 | + if (!e) return |
| 75 | + var loc = window.location |
| 76 | + var hashIdx = loc.hash ? loc.href.indexOf('#') : -1 |
| 77 | + if (~hashIdx) window.history.replaceState(null, '', loc.href.slice(0, hashIdx)) |
| 78 | + e.preventDefault() |
| 79 | + } |
| 80 | + |
| 81 | + function activateTabSync (e) { |
| 82 | + activateTab.call(this, e) |
| 83 | + var thisTabs = this.tabs |
| 84 | + var thisTab = this.tab |
| 85 | + var initialY = thisTabs.getBoundingClientRect().y |
| 86 | + forEach.call(document.querySelectorAll('.tabs'), function (tabs) { |
| 87 | + if (tabs === thisTabs || tabs.dataset.syncGroupId !== thisTabs.dataset.syncGroupId) return |
| 88 | + querySelectorWithSiblings(tabs, '.tablist .tab', 'tab').forEach(function (tab) { |
| 89 | + if (tab.dataset.syncId === thisTab.dataset.syncId) activateTab.call({ tabs: tabs, tab: tab, isSync: true }) |
| 90 | + }) |
| 91 | + }) |
| 92 | + var shiftedBy = thisTabs.getBoundingClientRect().y - initialY |
| 93 | + if (shiftedBy && (shiftedBy = Math.round(shiftedBy))) window.scrollBy({ top: shiftedBy, behavior: 'instant' }) |
| 94 | + } |
| 95 | + |
| 96 | + function querySelectorWithSiblings (scope, selector, siblingClass) { |
| 97 | + var el = scope.querySelector(selector) |
| 98 | + if (!el) return [] |
| 99 | + var result = [el] |
| 100 | + while ((el = el.nextElementSibling) && el.classList.contains(siblingClass)) result.push(el) |
| 101 | + return result |
| 102 | + } |
| 103 | + |
| 104 | + function toggleClassOnEach (elements, className, method) { |
| 105 | + forEach.call(elements, function (el) { |
| 106 | + el.classList[method](className) |
| 107 | + }) |
| 108 | + } |
| 109 | + |
| 110 | + function toggleHidden (el, state) { |
| 111 | + el.classList[(el.hidden = state) ? 'add' : 'remove']('is-hidden') |
| 112 | + } |
| 113 | + |
| 114 | + function toggleSelected (el, state) { |
| 115 | + el.setAttribute('aria-selected', '' + state) |
| 116 | + el.classList[state ? 'add' : 'remove']('is-selected') |
| 117 | + el.tabIndex = state ? 0 : -1 |
| 118 | + } |
| 119 | + |
| 120 | + function onHashChange () { |
| 121 | + var id = window.location.hash.slice(1) |
| 122 | + if (!id) return |
| 123 | + var tab = document.getElementById(~id.indexOf('%') ? decodeURIComponent(id) : id) |
| 124 | + if (!(tab && tab.classList.contains('tab'))) return |
| 125 | + 'syncId' in tab.dataset ? activateTabSync.call({ tab: tab }) : activateTab.call({ tab: tab }) |
| 126 | + } |
| 127 | +})() |
0 commit comments