1
0
Fork 0
platypush/docs/source/_static/scripts/custom.js

196 lines
5.1 KiB
JavaScript

const processList = (list, level, addTitle) => {
const title = list.parentElement.querySelector('a')
list.classList.add('grid')
if (addTitle)
title.classList.add('grid-title')
list.querySelectorAll(`li.toctree-l${level}`).forEach((item) => {
const link = item.querySelector('a')
if (link) {
item.style.cursor = 'pointer'
item.addEventListener('click', () => link.click())
}
const name = item.querySelector('a').innerText
const img = document.createElement('img')
img.src = `https://static.platypush.tech/icons/${name.toLowerCase()}-64.png`
img.alt = ' '
item.prepend(img)
})
}
const addClipboard = (parent) => {
const pre = parent.tagName === 'PRE' ? parent : parent.querySelector('pre')
if (!pre)
return
const clipboard = document.createElement('i')
const setClipboard = (img, text) => {
clipboard.innerHTML = `<img src="https://static.platypush.tech/icons/${img}-64.png" alt="${text}">`
}
clipboard.classList.add('clipboard')
setClipboard('clipboard-bw', 'Copy')
clipboard.onclick = () => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
setClipboard('ok', 'Copied!')
setTimeout(() => setClipboard('clipboard-bw', 'Copy'), 2000)
return navigator.clipboard.writeText(pre.innerText.trim())
}
return Promise.reject('The Clipboard API is not available.');
}
pre.style.position = 'relative'
pre.appendChild(clipboard)
}
const Tabs = () => {
let selectedTab = null
let parent = null
let data = {}
const init = (obj) => {
data = obj
if (Object.keys(data).length && selectedTab == null)
selectedTab = Object.keys(data)[0]
}
const select = (name) => {
if (!parent) {
console.warn('Cannot select tab: parent not set')
return
}
if (!data[name]) {
console.warn(`Cannot select tab: invalid name: ${name}`)
return
}
const tabsBody = parent.querySelector('.body')
selectedTab = name
tabsBody.innerHTML = data[selectedTab]
parent.querySelectorAll('.tabs li').forEach(
(tab) => tab.classList.remove('selected')
)
const tab = [...parent.querySelectorAll('.tabs li')].find(
(t) => t.innerText === name
)
if (!tab) {
console.warn(`Cannot select tab: invalid name: ${name}`)
return
}
addClipboard(tabsBody)
tab.classList.add('selected')
}
const mount = (p) => {
const tabs = document.createElement('div')
tabs.classList.add('tabs')
parent = p
const tabsList = document.createElement('ul')
Object.keys(data).forEach((title) => {
const tab = document.createElement('li')
tab.innerText = title
tab.onclick = (event) => {
event.stopPropagation()
select(title)
},
tabsList.appendChild(tab)
})
const tabsBody = document.createElement('div')
tabsBody.classList.add('body')
tabs.appendChild(tabsList)
tabs.appendChild(tabsBody)
parent.innerHTML = ''
parent.appendChild(tabs)
select(selectedTab)
}
return {
init,
select,
mount,
}
}
const depsTabs = Tabs()
const convertDepsToTabs = () => {
const depsContainer = document.getElementById('dependencies')
if (!depsContainer)
return
const blocks = [...depsContainer.querySelectorAll('.highlight-bash')].map((block) => block.outerHTML)
const titles = [...depsContainer.querySelectorAll('p strong')].map((title) => title.innerText)
if (!(blocks.length && titles.length && blocks.length === titles.length))
return
const title = depsContainer.querySelector('h2')
const tabsData = titles.reduce((obj, title, i) => {
obj[title] = blocks[i]
return obj
}, {})
depsTabs.init(tabsData)
depsTabs.mount(depsContainer)
depsContainer.prepend(title)
}
const generateComponentsGrid = () => {
const tocWrappers = document.querySelectorAll('.toctree-wrapper.compound')
if (!tocWrappers.length) {
return
}
if (window.location.pathname.endsWith('/index.html')) {
if (tocWrappers.length < 2) {
return
}
const referenceLists = [
...tocWrappers[1].querySelectorAll('ul li.toctree-l1 ul')
].slice(0, 4)
referenceLists.forEach((list) => processList(list, 2, true))
} else if (window.location.pathname.endsWith('/plugins.html') || window.location.pathname.endsWith('/backends.html')) {
if (tocWrappers.length < 1) {
return
}
const list = tocWrappers[0].querySelector('ul')
if (list)
processList(list, 1, false)
}
}
const addClipboardToCodeBlocks = () => {
document.querySelectorAll('pre').forEach((pre) => addClipboard(pre))
}
const renderActionsList = () => {
const actionsList = document.getElementById('actions')?.querySelector('ul')
if (!actionsList)
return
[...actionsList.querySelectorAll('li')].forEach((li) => {
const link = li.querySelector('a')
link.innerHTML = `<code class="docutils literal notranslate"><span class="pre">${link.innerText}</span></code>`
})
}
document.addEventListener("DOMContentLoaded", function() {
generateComponentsGrid()
convertDepsToTabs()
addClipboardToCodeBlocks()
renderActionsList()
})