Updated dependencies

This commit is contained in:
Erik C. Thauvin 2022-04-28 22:04:12 -07:00
parent 453bb95617
commit 58c181de9b
78 changed files with 5246 additions and 3702 deletions

View file

@ -5,10 +5,15 @@ filteringContext = {
}
let highlightedAnchor;
let topNavbarOffset;
let instances = [];
let sourcesetNotification;
const samplesDarkThemeName = 'darcula'
const samplesLightThemeName = 'idea'
window.addEventListener('load', () => {
document.querySelectorAll("div[data-platform-hinted]")
.forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
.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')
@ -19,11 +24,8 @@ window.addEventListener('load', () => {
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')
darkModeSwitch()
})
const darkModeSwitch = () => {
@ -41,8 +43,7 @@ const darkModeSwitch = () => {
const darkModeEnabled = enabledClasses.contains("theme-dark")
if (darkModeEnabled) {
initPlayground(samplesDarkThemeName)
}
else {
} else {
initPlayground(samplesLightThemeName)
}
localStorage.setItem(localStorageKey, JSON.stringify(darkModeEnabled))
@ -50,7 +51,7 @@ const darkModeSwitch = () => {
}
const initPlayground = (theme) => {
if(!samplesAreEnabled()) return
if (!samplesAreEnabled()) return
instances.forEach(instance => instance.destroy())
instances = []
@ -80,7 +81,7 @@ const samplesAreEnabled = () => {
const initHidingLeftNavigation = () => {
document.getElementById("leftToggler").onclick = function(event) {
document.getElementById("leftToggler").onclick = function (event) {
//Events need to be prevented from bubbling since they will trigger next handler
event.preventDefault();
event.stopPropagation();
@ -97,12 +98,15 @@ const initHidingLeftNavigation = () => {
// 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"})
function scrollToElementInContent(element) {
const scrollToElement = () => document.getElementById('main').scrollTo({
top: element.offsetTop - topNavbarOffset.offsetHeight,
behavior: "smooth"
})
const waitAndScroll = () => {
setTimeout(() => {
if(topNavbarOffset){
if (topNavbarOffset) {
scrollToElement()
} else {
waitForScroll()
@ -110,7 +114,7 @@ function scrollToElementInContent(element){
}, 50)
}
if(topNavbarOffset){
if (topNavbarOffset) {
scrollToElement()
} else {
waitAndScroll()
@ -119,28 +123,28 @@ function scrollToElementInContent(element){
function handleAnchor() {
if(highlightedAnchor){
if (highlightedAnchor) {
highlightedAnchor.classList.remove('anchor-highlight')
highlightedAnchor = null;
}
let searchForTab = function(element) {
if(element && element.hasAttribute) {
if(element.hasAttribute("data-togglable")) return element;
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+'"]')
let element = document.querySelector('a[data-name="' + anchor + '"]')
if (element) {
let tab = searchForTab(element)
if (tab) {
toggleSections(tab)
}
const content = element.nextElementSibling
if(content){
if (content) {
content.classList.add('anchor-highlight')
highlightedAnchor = content
}
@ -150,7 +154,7 @@ function handleAnchor() {
}
}
function initTabs(){
function initTabs() {
document.querySelectorAll("div[tabs-section]")
.forEach(element => {
showCorrespondingTabBody(element)
@ -160,7 +164,7 @@ function initTabs(){
if (cached) {
let parsed = JSON.parse(cached)
let tab = document.querySelector('div[tabs-section] > button[data-togglable="' + parsed + '"]')
if(tab) {
if (tab) {
toggleSections(tab)
}
}
@ -177,14 +181,14 @@ function showCorrespondingTabBody(element) {
}
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)
}
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() {
@ -198,12 +202,8 @@ function initializeFiltering() {
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 )
.filter(q => parsed.indexOf(q) == -1)
} else {
filteringContext.activeFilters = filteringContext.restrictedDependencies
}
@ -217,7 +217,7 @@ function filterSourceset(sourceset) {
}
function unfilterSourceset(sourceset) {
if(filteringContext.activeFilters.length == 0) {
if (filteringContext.activeFilters.length == 0) {
filteringContext.activeFilters = filteringContext.dependencies[sourceset].concat([sourceset])
refreshFiltering()
filteringContext.dependencies[sourceset].concat([sourceset]).forEach(p => removeSourcesetFilterFromCache(p))
@ -250,9 +250,9 @@ function removeSourcesetFilterFromCache(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")){
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")
@ -265,8 +265,8 @@ function toggleSections(target) {
activateTabs("tabs-section-body")
}
function toggleSectionsEventHandler(evt){
if(!evt.target.getAttribute("data-togglable")) return
function toggleSectionsEventHandler(evt) {
if (!evt.target.getAttribute("data-togglable")) return
toggleSections(evt.target)
}
@ -275,20 +275,18 @@ function togglePlatformDependent(e, container) {
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) {
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 {
} else if (child.getAttribute('data-togglable') == index) {
child.setAttribute('data-active', "")
} else {
child.removeAttribute('data-active')
}
}
@ -303,11 +301,25 @@ function refreshFiltering() {
elem.setAttribute("data-filterable-current", platformList.join(' '))
}
)
const event = new CustomEvent('sourceset-filter-change', { detail: sourcesetList });
window.dispatchEvent(event);
refreshFilterButtons()
refreshPlatformTabs()
refreshNoContentNotification()
}
function refreshNoContentNotification() {
const element = document.getElementsByClassName("main-content")[0]
if(filteringContext.activeFilters.length === 0){
element.style.display = "none";
const appended = document.createElement("div")
appended.className = "filtered-message"
appended.innerText = "All documentation is filtered, please adjust your source set filters in top-right corner of the screen"
sourcesetNotification = appended
element.parentNode.prepend(appended)
} else {
if(sourcesetNotification) sourcesetNotification.remove()
element.style.display = "block"
}
}
function refreshPlatformTabs() {
@ -317,17 +329,17 @@ function refreshPlatformTabs() {
let firstAvailable = null
p.childNodes.forEach(
element => {
if(element.getAttribute("data-filterable-current") != ''){
if( firstAvailable == null) {
if (element.getAttribute("data-filterable-current") != '') {
if (firstAvailable == null) {
firstAvailable = element
}
if(element.hasAttribute("data-active")) {
if (element.hasAttribute("data-active")) {
active = true;
}
}
}
)
if( active == false && firstAvailable) {
if (active == false && firstAvailable) {
firstAvailable.click()
}
}
@ -337,8 +349,8 @@ function refreshPlatformTabs() {
function refreshFilterButtons() {
document.querySelectorAll("#filter-section > button")
.forEach(f => {
if(filteringContext.activeFilters.indexOf(f.getAttribute("data-filter")) != -1){
f.setAttribute("data-active","")
if (filteringContext.activeFilters.indexOf(f.getAttribute("data-filter")) != -1) {
f.setAttribute("data-active", "")
} else {
f.removeAttribute("data-active")
}