Added table of contents js functions

This commit is contained in:
Georgy Litvinov 2021-03-04 16:01:50 +01:00
parent 7b55da81b3
commit 520ed8350b
2 changed files with 51 additions and 16 deletions

View file

@ -0,0 +1,34 @@
document.addEventListener('DOMContentLoaded', createTOC(), false);
function createTOC(){
var complexDocElement = document.getElementById("complexDocument");
var tocElement = document.getElementById("tocPlaceHolder");
if (complexDocElement === null || tocElement === null){
console.log("no complex document or no placeholder");
return;
}
addItemsToTOC(complexDocElement,tocElement)
}
function addItemsToTOC(docPart, tocElement){
var docPartChilds = docPart.childNodes;
for (var i = 0; i < docPartChilds.length; i++){
var docPartChild = docPartChilds[i];
if ( docPartChild.nodeType === Node.ELEMENT_NODE && docPartChild.classList.contains("documentPart")){
var tocElementChild = createTOCItem(docPartChild, tocElement);
addItemsToTOC(docPartChild,tocElementChild);
}
}
}
function createTOCItem(docPart, tocElement){
var newTOCElement = document.createElement("div");
var anchor = docPart.getAttribute('id');
var docPartButton = docPart.previousElementSibling;
var itemName = docPartButton.textContent;
var link = document.createElement("a");
link.setAttribute("href","#" + anchor);
link.innerText = itemName;
newTOCElement.appendChild(link);
tocElement.appendChild(newTOCElement);
return newTOCElement;
}

View file

@ -53,7 +53,7 @@
</#macro> </#macro>
<#macro arrangeDocumentParts > <#macro arrangeDocumentParts >
<div class="complexDocument articleParts" style="display:block;"> <div id="complexDocument" class="complexDocument articleParts" style="display:block;">
<#assign lastLevel = 0 > <#assign lastLevel = 0 >
<#list paths as order> <#list paths as order>
<#-- ${order.path} --> <#-- ${order.path} -->
@ -65,32 +65,33 @@
<#assign bibliographyCounter = excerptProperties.bibliographyCounter > <#assign bibliographyCounter = excerptProperties.bibliographyCounter >
</#if> </#if>
</#list> </#list>
<@startDocumentPart order.level?number lastLevel/> <@startDocumentPart order.level?number order.path lastLevel/>
<#if excerptText?? && excerptTextName?? && excerptTextName?has_content && excerptText?has_content> <#if excerptText?? && excerptTextName?? && excerptTextName?has_content && excerptText?has_content>
<div class="htmlExcerpt" style="list-style:none;"> <div class="htmlExcerpt" style="list-style:none;">
${excerptText} ${excerptText}
<@arrangeSources works worksCounter?number order.elenphExcerpt />
<@arrangeLiterature bibliography bibliographyCounter?number order.elenphExcerpt />
</div> </div>
<@arrangeSources works worksCounter?number order.path order.elenphExcerpt />
<@arrangeLiterature bibliography bibliographyCounter?number order.path order.elenphExcerpt />
</#if> </#if>
<#assign lastLevel = order.level?number > <#assign lastLevel = order.level?number >
</#list> </#list>
<@endDocumentPart lastLevel /> <@endDocumentPart lastLevel />
<@arrangeSources works works?size "anchor-all-sources" />
<@arrangeLiterature bibliography bibliography?size "anchor-all-literature" />
</div> </div>
<@arrangeSources works works?size />
<@arrangeLiterature bibliography bibliography?size />
</#macro> </#macro>
<#macro startDocumentPart newLevel lastLevel=0 > <#macro startDocumentPart newLevel path lastLevel=0 >
<#assign depth = newLevel - lastLevel > <#assign depth = newLevel - lastLevel >
<#if depth == 0> <#if depth == 0>
<@closeDocPart 1 /> <@closeDocPart 1 />
<@openDocPart 1 /> <@openDocPart 1 path />
<#elseif depth &gt; 0> <#elseif depth &gt; 0>
<@openDocPart depth /> <@openDocPart depth path />
<#else > <#else >
<@closeDocPart -depth+1 /> <@closeDocPart -depth+1 />
<@openDocPart 1 /> <@openDocPart 1 path />
</#if> </#if>
</#macro> </#macro>
@ -107,17 +108,17 @@
</#list> </#list>
</#macro> </#macro>
<#macro openDocPart count> <#macro openDocPart count path >
<#list 1..count as x> <#list 1..count as x>
<button type="button" style="border:none;padding: 18px;width: 100%; text-align:left;" class="collapsible">${excerptTextName}</button> <button type="button" style="border:none;padding: 18px;width: 100%; text-align:left;" class="collapsible">${excerptTextName}</button>
<div class = "documentPart autoExpand articleExcerpt" style="display:block;"> <div class="documentPart autoExpand articleExcerpt" id="anchor-${path}" style="display:block;">
</#list> </#list>
</#macro> </#macro>
<#macro arrangeSources sources counter filter="none"> <#macro arrangeSources sources counter identifier filter="none">
<#if sources?? && sources?has_content && counter &gt; 0> <#if sources?? && sources?has_content && counter &gt; 0>
<button type="button" class="collapsible" style="border: none; color: #8B4513; padding: 18px;width: 100%;text-align:left; background-color: #ffffff; background-image: url(${urls.base}/themes/iph/images/book_icon.png); background-repeat: no-repeat; background-position: left center;">Источники</button> <button type="button" class="collapsible" style="border: none; color: #8B4513; padding: 18px;width: 100%;text-align:left; background-color: #ffffff; background-image: url(${urls.base}/themes/iph/images/book_icon.png); background-repeat: no-repeat; background-position: left center;">Источники</button>
<div class="autoExpand works" style="display:block;"> <div class="autoExpand documentPart works" id="anchor-${identifier}-sources" style="display:block;">
<#list sources as source> <#list sources as source>
<#if filter == "none" || source.excerpt == filter > <#if filter == "none" || source.excerpt == filter >
<div class="work" style="display:list-item;list-style-image:url(${urls.base}/themes/iph/images/bullet_icon.png); font-style: italic; font-family: PT Serif;"> <div class="work" style="display:list-item;list-style-image:url(${urls.base}/themes/iph/images/bullet_icon.png); font-style: italic; font-family: PT Serif;">
@ -129,10 +130,10 @@
</#if> </#if>
</#macro> </#macro>
<#macro arrangeLiterature literature counter filter="none"> <#macro arrangeLiterature literature counter identifier filter="none">
<#if literature?? && literature?has_content && counter &gt; 0> <#if literature?? && literature?has_content && counter &gt; 0>
<button type="button" class="collapsible" style="border:none; color: #8B4513; padding: 18px;width: 100%; text-align: left; background-color: #ffffff; background-image: url(${urls.base}/themes/iph/images/book_icon.png); background-repeat: no-repeat; background-position: left center;">Литература</button> <button type="button" class="collapsible" style="border:none; color: #8B4513; padding: 18px;width: 100%; text-align: left; background-color: #ffffff; background-image: url(${urls.base}/themes/iph/images/book_icon.png); background-repeat: no-repeat; background-position: left center;">Литература</button>
<div class="autoExpand bibliography" style="display:block;"> <div class="autoExpand documentPart bibliography" id="anchor-${identifier}-literature" style="display:block;">
<#list literature as literatureItem> <#list literature as literatureItem>
<#if filter == "none" || literatureItem.excerpt == filter > <#if filter == "none" || literatureItem.excerpt == filter >
<div class="bibliography_entry" style="display:list-item;list-style-image:url(${urls.base}/themes/iph/images/bullet_icon.png); font-style: italic; font-family: PT Serif;"> <div class="bibliography_entry" style="display:list-item;list-style-image:url(${urls.base}/themes/iph/images/bullet_icon.png); font-style: italic; font-family: PT Serif;">