aboutsummaryrefslogtreecommitdiff
path: root/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js')
-rw-r--r--plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js148
1 files changed, 97 insertions, 51 deletions
diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
index ae838d6f..ff1bf3d9 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
@@ -5,10 +5,14 @@ filteringContext = {
}
let highlightedAnchor;
let topNavbarOffset;
+let instances = [];
+
+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')
@@ -28,15 +32,56 @@ const darkModeSwitch = () => {
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', () => {
- document.getElementsByTagName("html")[0].classList.toggle("theme-dark")
- localStorage.setItem(localStorageKey, JSON.stringify(!savedDarkMode))
+ 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) {
+ document.getElementById("leftToggler").onclick = function (event) {
//Events need to be prevented from bubbling since they will trigger next handler
event.preventDefault();
event.stopPropagation();
@@ -53,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()
@@ -66,7 +114,7 @@ function scrollToElementInContent(element){
}, 50)
}
- if(topNavbarOffset){
+ if (topNavbarOffset) {
scrollToElement()
} else {
waitAndScroll()
@@ -75,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
}
@@ -106,7 +154,7 @@ function handleAnchor() {
}
}
-function initTabs(){
+function initTabs() {
document.querySelectorAll("div[tabs-section]")
.forEach(element => {
showCorrespondingTabBody(element)
@@ -116,13 +164,13 @@ 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)
}
}
}
-function showCorrespondingTabBody(element){
+function showCorrespondingTabBody(element) {
const key = element.querySelector("button[data-active]").getAttribute("data-togglable")
document.querySelector(".tabs-section-body")
.querySelector("div[data-togglable='" + key + "']")
@@ -130,14 +178,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() {
@@ -152,11 +200,11 @@ function initializeFiltering() {
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 });
+ 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
}
@@ -170,7 +218,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))
@@ -203,9 +251,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")
@@ -218,8 +266,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)
}
@@ -228,20 +276,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')
}
}
@@ -256,9 +302,9 @@ function refreshFiltering() {
elem.setAttribute("data-filterable-current", platformList.join(' '))
}
)
- const event = new CustomEvent('sourceset-filter-change', { detail: sourcesetList });
+ const event = new CustomEvent('sourceset-filter-change', {detail: sourcesetList});
window.dispatchEvent(event);
-
+
refreshFilterButtons()
refreshPlatformTabs()
}
@@ -270,17 +316,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()
}
}
@@ -290,8 +336,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")
}
generated by cgit (git 2.46.0) at 2024-11-24 07:50:38 +0000