Skip to content

Commit ad60db8

Browse files
ihostageihostage
committed
Toggling external content by tabs switching
1 parent 9ad4514 commit ad60db8

File tree

2 files changed

+155
-1
lines changed

2 files changed

+155
-1
lines changed

‎preview-src/index.adoc

+8
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,14 @@ Tab C::
144144

145145
There you have it.
146146

147+
The module file is generated in ... for [.lang-java]#Java# [.lang-scala]#Scala#
148+
149+
[tabs%sync,sync-group-id=lang]
150+
====
151+
Java:: Java
152+
Scala:: Scala
153+
====
154+
147155
=== Some Code
148156

149157
How about some code?

‎src/js/vendor/tabs.bundle.js

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

0 commit comments

Comments
 (0)