// Include iframeResizer to fix scrolling issue when displayed in admin-ui.
++++
<script type="text/javascript" src="../../webjars/iframe-resizer/2.6.2/js/iframeResizer.contentWindow.min.js"></script>
<script type="text/javascript" >
"use strict";

function makeTocExpandable() {
	var level = 1;

	while (level < 6) {
	const tocHeading = document.querySelectorAll(".sectlevel" + level + ">li");
		for (var i = tocHeading.length - 1; i >= 0; i--) {
			const childLevels = tocHeading[i].querySelector("ul li");
			if (childLevels) {
				tocHeading[i].innerHTML ='<a class="expandable">+ </a>' + tocHeading[i].innerHTML + '';
			}
		}
		const levelUp = level + 1
		const higherlevels = document.querySelectorAll(".sectlevel" + levelUp );

		for (var i = higherlevels.length - 1; i >= 0; i--) {
			higherlevels[i].classList.add("collapsed");
		}
		level++;
	}

}

function expandList(section) {
	const currentSection = section.target.parentNode;

	currentSection.querySelector("ul").classList.remove("collapsed");
	currentSection.querySelector(".expandable").innerHTML = "- ";
	currentSection.querySelector(".expandable").removeEventListener("click", expandList);
	currentSection.querySelector(".expandable").classList.add("expanded");
	currentSection.querySelector(".expanded").classList.remove("expandable");
	currentSection.querySelector(".expanded").addEventListener("click", collapseList);
}

function collapseList(section) {
	const currentSection = section.target.parentNode;

	currentSection.querySelector("ul").classList.add("collapsed");
	currentSection.querySelector(".expanded").innerHTML = "+ ";
	currentSection.querySelector(".expanded").removeEventListener("click", collapseList);
	currentSection.querySelector(".expanded").classList.add("expandable");
	currentSection.querySelector(".expandable").classList.remove("expanded");
	currentSection.querySelector(".expandable").addEventListener("click", expandList);
}

function addTocListeners() {
	const expandableSections = document.querySelectorAll(".expandable")
	const expandedSections = document.querySelectorAll(".expanded")

	for (var i = expandableSections.length - 1; i >= 0; i--) {
		expandableSections[i].addEventListener("click", expandList);
	}
	for (var i = expandedSections.length - 1; i >= 0; i--) {
		expandedSections[i].addEventListener("click", collapseList);
	}
}

function wrapScrollElements(selector) {
  document.querySelectorAll( selector ).forEach( elem => {
    const div = document.createElement( 'div' );
    div.className = "scroll-wrapper";
    elem.parentElement.insertBefore(div, elem);
    div.appendChild(elem);
  });
}

document.onreadystatechange = () => {
	if (document.readyState === 'complete') {
	  // The page is fully loaded
		makeTocExpandable();
		addTocListeners();
	    wrapScrollElements('table.tableblock');
	    wrapScrollElements('.CodeRay');
	    wrapScrollElements('.admonitionblock');
	}
};
</script>
<style>
.collapsed {display: none;}
.scroll-wrapper {overflow-x: auto;}
</style>
++++