MicroUtils/scripts/platform-content-handler.js
2021-10-18 17:01:18 +00:00

347 lines
12 KiB
JavaScript

filteringContext = {
dependencies: {},
restrictedDependencies: [],
activeFilters: []
}
let highlightedAnchor;
let topNavbarOffset;
window.addEventListener('load', () => {
document.querySelectorAll("div[data-platform-hinted]")
.forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
document.querySelectorAll("div[tabs-section]")
.forEach(elem => elem.addEventListener('click', (event) => toggleSectionsEventHandler(event)))
const filterSection = document.getElementById('filter-section')
if (filterSection) {
filterSection.addEventListener('click', (event) => filterButtonHandler(event))
initializeFiltering()
}
initTabs()
handleAnchor()
initHidingLeftNavigation()
document.getElementById('main').addEventListener("scroll", (e) => {
document.getElementsByClassName("navigation-wrapper")[0].classList.toggle("sticky-navigation", e.target.scrollTop > 0)
})
topNavbarOffset = document.getElementById('navigation-wrapper')
})
const darkModeSwitch = () => {
const localStorageKey = "dokka-dark-mode"
const storage = localStorage.getItem(localStorageKey)
const savedDarkMode = storage ? JSON.parse(storage) : false
const element = document.getElementById("theme-toggle-button")
initPlayground(savedDarkMode ? samplesDarkThemeName : samplesLightThemeName)
element.addEventListener('click', () => {
const enabledClasses = document.getElementsByTagName("html")[0].classList
enabledClasses.toggle("theme-dark")
//if previously we had saved dark theme then we set it to light as this is what we save in local storage
const darkModeEnabled = enabledClasses.contains("theme-dark")
if (darkModeEnabled) {
initPlayground(samplesDarkThemeName)
}
else {
initPlayground(samplesLightThemeName)
}
localStorage.setItem(localStorageKey, JSON.stringify(darkModeEnabled))
})
}
const initPlayground = (theme) => {
if(!samplesAreEnabled()) return
instances.forEach(instance => instance.destroy())
instances = []
// Manually tag code fragments as not processed by playground since we also manually destroy all of its instances
document.querySelectorAll('code.runnablesample').forEach(node => {
node.removeAttribute("data-kotlin-playground-initialized");
})
KotlinPlayground('code.runnablesample', {
getInstance: playgroundInstance => {
instances.push(playgroundInstance)
},
theme: theme
});
}
// We check if type is accessible from the current scope to determine if samples script is present
// As an alternative we could extract this samples-specific script to new js file but then we would handle dark mode in 2 separate files which is not ideal
const samplesAreEnabled = () => {
try {
KotlinPlayground
return true
} catch (e) {
return false
}
}
const initHidingLeftNavigation = () => {
document.getElementById("leftToggler").onclick = function(event) {
//Events need to be prevented from bubbling since they will trigger next handler
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
document.getElementById("leftColumn").classList.toggle("open");
}
document.getElementById("main").onclick = () => {
document.getElementById("leftColumn").classList.remove("open");
}
}
// Hash change is needed in order to allow for linking inside the same page with anchors
// If this is not present user is forced to refresh the site in order to use an anchor
window.onhashchange = handleAnchor
function scrollToElementInContent(element){
const scrollToElement = () => document.getElementById('main').scrollTo({ top: element.offsetTop - topNavbarOffset.offsetHeight, behavior: "smooth"})
const waitAndScroll = () => {
setTimeout(() => {
if(topNavbarOffset){
scrollToElement()
} else {
waitForScroll()
}
}, 50)
}
if(topNavbarOffset){
scrollToElement()
} else {
waitAndScroll()
}
}
function handleAnchor() {
if(highlightedAnchor){
highlightedAnchor.classList.remove('anchor-highlight')
highlightedAnchor = null;
}
let searchForTab = function(element) {
if(element && element.hasAttribute) {
if(element.hasAttribute("data-togglable")) return element;
else return searchForTab(element.parentNode)
} else return null
}
let anchor = window.location.hash
if (anchor != "") {
anchor = anchor.substring(1)
let element = document.querySelector('a[data-name="' + anchor+'"]')
if (element) {
let tab = searchForTab(element)
if (tab) {
toggleSections(tab)
}
const content = element.nextElementSibling
if(content){
content.classList.add('anchor-highlight')
highlightedAnchor = content
}
scrollToElementInContent(element)
}
}
}
function initTabs(){
document.querySelectorAll("div[tabs-section]")
.forEach(element => {
showCorrespondingTabBody(element)
element.addEventListener('click', (event) => toggleSectionsEventHandler(event))
})
let cached = localStorage.getItem("active-tab")
if (cached) {
let parsed = JSON.parse(cached)
let tab = document.querySelector('div[tabs-section] > button[data-togglable="' + parsed + '"]')
if(tab) {
toggleSections(tab)
}
}
}
function showCorrespondingTabBody(element) {
const buttonWithKey = element.querySelector("button[data-active]")
if (buttonWithKey) {
const key = buttonWithKey.getAttribute("data-togglable")
document.querySelector(".tabs-section-body")
.querySelector("div[data-togglable='" + key + "']")
.setAttribute("data-active", "")
}
}
function filterButtonHandler(event) {
if(event.target.tagName == "BUTTON" && event.target.hasAttribute("data-filter")) {
let sourceset = event.target.getAttribute("data-filter")
if(filteringContext.activeFilters.indexOf(sourceset) != -1) {
filterSourceset(sourceset)
} else {
unfilterSourceset(sourceset)
}
}
}
function initializeFiltering() {
filteringContext.dependencies = JSON.parse(sourceset_dependencies)
document.querySelectorAll("#filter-section > button")
.forEach(p => filteringContext.restrictedDependencies.push(p.getAttribute("data-filter")))
Object.keys(filteringContext.dependencies).forEach(p => {
filteringContext.dependencies[p] = filteringContext.dependencies[p]
.filter(q => -1 !== filteringContext.restrictedDependencies.indexOf(q))
})
let cached = window.localStorage.getItem('inactive-filters')
if (cached) {
let parsed = JSON.parse(cached)
//Events are used by react to get values in 'on this page'
const event = new CustomEvent('sourceset-filter-change', { detail: parsed });
window.dispatchEvent(event);
filteringContext.activeFilters = filteringContext.restrictedDependencies
.filter(q => parsed.indexOf(q) == -1 )
} else {
filteringContext.activeFilters = filteringContext.restrictedDependencies
}
refreshFiltering()
}
function filterSourceset(sourceset) {
filteringContext.activeFilters = filteringContext.activeFilters.filter(p => p != sourceset)
refreshFiltering()
addSourcesetFilterToCache(sourceset)
}
function unfilterSourceset(sourceset) {
if(filteringContext.activeFilters.length == 0) {
filteringContext.activeFilters = filteringContext.dependencies[sourceset].concat([sourceset])
refreshFiltering()
filteringContext.dependencies[sourceset].concat([sourceset]).forEach(p => removeSourcesetFilterFromCache(p))
} else {
filteringContext.activeFilters.push(sourceset)
refreshFiltering()
removeSourcesetFilterFromCache(sourceset)
}
}
function addSourcesetFilterToCache(sourceset) {
let cached = localStorage.getItem('inactive-filters')
if (cached) {
let parsed = JSON.parse(cached)
localStorage.setItem('inactive-filters', JSON.stringify(parsed.concat([sourceset])))
} else {
localStorage.setItem('inactive-filters', JSON.stringify([sourceset]))
}
}
function removeSourcesetFilterFromCache(sourceset) {
let cached = localStorage.getItem('inactive-filters')
if (cached) {
let parsed = JSON.parse(cached)
localStorage.setItem('inactive-filters', JSON.stringify(parsed.filter(p => p != sourceset)))
}
}
function toggleSections(target) {
localStorage.setItem('active-tab', JSON.stringify(target.getAttribute("data-togglable")))
const activateTabs = (containerClass) => {
for(const element of document.getElementsByClassName(containerClass)){
for(const child of element.children){
if(child.getAttribute("data-togglable") === target.getAttribute("data-togglable")){
child.setAttribute("data-active", "")
} else {
child.removeAttribute("data-active")
}
}
}
}
activateTabs("tabs-section")
activateTabs("tabs-section-body")
}
function toggleSectionsEventHandler(evt){
if(!evt.target.getAttribute("data-togglable")) return
toggleSections(evt.target)
}
function togglePlatformDependent(e, container) {
let target = e.target
if (target.tagName != 'BUTTON') return;
let index = target.getAttribute('data-toggle')
for(let child of container.children){
if(child.hasAttribute('data-toggle-list')){
for(let bm of child.children){
if(bm == target){
bm.setAttribute('data-active',"")
} else if(bm != target) {
bm.removeAttribute('data-active')
}
}
}
else if(child.getAttribute('data-togglable') == index) {
child.setAttribute('data-active',"")
}
else {
child.removeAttribute('data-active')
}
}
}
function refreshFiltering() {
let sourcesetList = filteringContext.activeFilters
document.querySelectorAll("[data-filterable-set]")
.forEach(
elem => {
let platformList = elem.getAttribute("data-filterable-set").split(' ').filter(v => -1 !== sourcesetList.indexOf(v))
elem.setAttribute("data-filterable-current", platformList.join(' '))
}
)
const event = new CustomEvent('sourceset-filter-change', { detail: sourcesetList });
window.dispatchEvent(event);
refreshFilterButtons()
refreshPlatformTabs()
}
function refreshPlatformTabs() {
document.querySelectorAll(".platform-hinted > .platform-bookmarks-row").forEach(
p => {
let active = false;
let firstAvailable = null
p.childNodes.forEach(
element => {
if(element.getAttribute("data-filterable-current") != ''){
if( firstAvailable == null) {
firstAvailable = element
}
if(element.hasAttribute("data-active")) {
active = true;
}
}
}
)
if( active == false && firstAvailable) {
firstAvailable.click()
}
}
)
}
function refreshFilterButtons() {
document.querySelectorAll("#filter-section > button")
.forEach(f => {
if(filteringContext.activeFilters.indexOf(f.getAttribute("data-filter")) != -1){
f.setAttribute("data-active","")
} else {
f.removeAttribute("data-active")
}
})
}