|
|
|
@ -1,6 +1,17 @@
|
|
|
|
|
import { inBrowser } from 'vitepress'
|
|
|
|
|
import { inBrowser, onContentUpdated } from 'vitepress'
|
|
|
|
|
|
|
|
|
|
export function useCodeGroups() {
|
|
|
|
|
if (import.meta.env.DEV) {
|
|
|
|
|
onContentUpdated(() => {
|
|
|
|
|
document.querySelectorAll('.vp-code-group > .blocks').forEach((el) => {
|
|
|
|
|
Array.from(el.children).forEach((child) => {
|
|
|
|
|
child.classList.remove('active')
|
|
|
|
|
})
|
|
|
|
|
el.children[0].classList.add('active')
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (inBrowser) {
|
|
|
|
|
window.addEventListener('click', (e) => {
|
|
|
|
|
const el = e.target as HTMLInputElement
|
|
|
|
@ -8,17 +19,24 @@ export function useCodeGroups() {
|
|
|
|
|
if (el.matches('.vp-code-group input')) {
|
|
|
|
|
// input <- .tabs <- .vp-code-group
|
|
|
|
|
const group = el.parentElement?.parentElement
|
|
|
|
|
const i = Array.from(group?.querySelectorAll('input') || []).indexOf(el)
|
|
|
|
|
if (!group) return
|
|
|
|
|
|
|
|
|
|
const i = Array.from(group.querySelectorAll('input')).indexOf(el)
|
|
|
|
|
if (i < 0) return
|
|
|
|
|
|
|
|
|
|
const blocks = group.querySelector('.blocks')
|
|
|
|
|
if (!blocks) return
|
|
|
|
|
|
|
|
|
|
const current = Array.from(blocks.children).find((child) =>
|
|
|
|
|
child.classList.contains('active')
|
|
|
|
|
)
|
|
|
|
|
if (!current) return
|
|
|
|
|
|
|
|
|
|
const current = group?.querySelector('div[class*="language-"].active')
|
|
|
|
|
const next = group?.querySelectorAll(
|
|
|
|
|
'div[class*="language-"]:not(.language-id)'
|
|
|
|
|
)?.[i]
|
|
|
|
|
const next = blocks.children[i]
|
|
|
|
|
if (!next || current === next) return
|
|
|
|
|
|
|
|
|
|
if (current && next && current !== next) {
|
|
|
|
|
current.classList.remove('active')
|
|
|
|
|
next.classList.add('active')
|
|
|
|
|
}
|
|
|
|
|
current.classList.remove('active')
|
|
|
|
|
next.classList.add('active')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|