litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added TOC collapse/expand scripts

Browse source
This commit is contained in:
Georgy Litvinov 2021-03-09 15:09:53 +01:00
parent 5e74856b2b
commit 05959802f1
2 changed files with 118 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
webapp/src/main/webapp/themes/iph/js/toc.js
View file

@ -8,8 +8,13 @@
console.log("no complex document or no placeholder");
return;
}
addItemsToTOC(complexDocElement,tocElement)
addItemsToTOC(complexDocElement,tocElement);
collapseAllTOCElements("tocPlaceHolder");
//show created TOC
tocElement.style.display = "block";
}
function addItemsToTOC(docPart, tocElement){
var docPartChilds = docPart.childNodes;
for (var i = 0; i < docPartChilds.length; i++){
@ -17,13 +22,124 @@
if ( docPartChild.nodeType === Node.ELEMENT_NODE && docPartChild.classList.contains("documentPart")){
var tocElementChild = createTOCItem(docPartChild, tocElement);
addItemsToTOC(docPartChild,tocElementChild);
addElementControls(tocElementChild);
}
}
}
function addElementControls(tocElement){
var elementChild = tocElement.querySelector('.tocElement');
if (elementChild === null){
//no controls need as no childs appear.
return;
}
var nameContainer = tocElement.querySelector('.tocElementName');
if (nameContainer === null){
console.log("no nameContainer found");
return;
}
if (tocElement.id === null){
console.log("no tocElement id found");
return;
}
//var elementSwitchButton = document.createElement("button");
//elementSwitchButton.className = "tocElementSwitchButton";
var switchImage = document.createElement("img");
switchImage.onclick = function() {switchTOCElement(tocElement.id);};
switchImage.className = "tocElementSwitchImage";
nameContainer.prepend(switchImage);
//elementSwitchButton.appendChild(switchImage);
}
function switchTOCElement(id){
var tocElement = document.getElementById(id);
var elementChild = tocElement.querySelector('.tocElement');
if (elementChild.style.display === "none"){
expandTOCElementChilds(id);
setCollapseImageToElement(id);
} else {
collapseTOCElementDescendants(id);
setExpandImageToElement(id);
}
}
function setCollapseImageToElement(id){
var tocElement = document.getElementById(id);
var nameContainer = tocElement.querySelector('.tocElementName');
if (nameContainer === null){
console.log("no nameContainer found");
return;
}
$.extend(this, urlsBase);
var imgElement = nameContainer.firstElementChild;
imgElement.src = urlsBase + "/themes/iph/images/save.svg";
}
function setExpandImageToElement(id){
var tocElement = document.getElementById(id);
var nameContainer = tocElement.querySelector('.tocElementName');
if (nameContainer === null){
console.log("no nameContainer found");
return;
}
$.extend(this, urlsBase);
var imgElement = nameContainer.firstElementChild;
imgElement.src = urlsBase + "/themes/iph/images/print.svg";
}
function expandTOCElementChilds(id){
var tocElement = document.getElementById(id);
var elementChilds = tocElement.querySelectorAll(':scope > .tocElement');
for (let i = 0; i < elementChilds.length; i++) {
elementChilds[i].style.display = "block";
setExpandImageToElement(elementChilds[i].id);
}
}
function expandTOCElementDescendants(id){
var tocElement = document.getElementById(id);
var elementChilds = tocElement.querySelectorAll('.tocElement');
for (let i = 0; i < elementChilds.length; i++) {
elementChilds[i].style.display = "block";
setExpandImageToElement(elementChilds[i].id);
}
}
function collapseAllTOCElements(placeHolderId){
var tocRoot = document.getElementById(placeHolderId);
var elementChilds = tocRoot.querySelectorAll('.tocElement');
for (let i = 0; i < elementChilds.length; i++) {
collapseTOCElementDescendants(elementChilds[i].id);
setExpandImageToElement(elementChilds[i].id);
}
}
function expandAllTOCElements(placeHolderId){
var tocRoot = document.getElementById(placeHolderId);
var elementChilds = tocRoot.querySelectorAll('.tocElement');
for (let i = 0; i < elementChilds.length; i++) {
expandTOCElementDescendants(elementChilds[i].id);
setCollapseImageToElement(elementChilds[i].id);
}
}
function collapseTOCElementDescendants(id){
var tocElement = document.getElementById(id);
var elementChilds = tocElement.querySelectorAll('.tocElement');
for (let i = 0; i < elementChilds.length; i++) {
elementChilds[i].style.display = "none";
setCollapseImageToElement(elementChilds[i].id);
}
}
function createTOCItem(docPart, tocElement){
var newTOCElement = document.createElement("div");
var newTOCElementName = document.createElement("div");
var anchor = docPart.getAttribute('id');
var tocElementID = "toc-" + anchor;
newTOCElement.id = tocElementID;
var docPartButton = docPart.previousElementSibling;
var itemName = docPartButton.textContent;
var link = document.createElement("a");

2
webapp/src/main/webapp/themes/iph/templates/page.ftl
View file

@ -7,7 +7,7 @@
<head>
<#include "head.ftl">
</head>
<script>var urlsBase = "${urls.base}";</script>
<body class="${bodyClasses!}" onload="${bodyOnload!}">
<#include "identity.ftl">
<#include "menu.ftl">