Updated dependencies
This commit is contained in:
parent
453bb95617
commit
58c181de9b
78 changed files with 5246 additions and 3702 deletions
|
@ -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")
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue