Template:CollapseTOC: Difference between revisions

From Trek DB
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
__TOC__
<style>
<shtml hash="81d9176768e1fbeafb9c56c85e4a9fbfa4e3d1027f523e7bab5dc9e46d885999"><script>
.collapsing-toc-button {
window.onload = onPageLoad();
    border: none;
 
    background-color: transparent;
function onPageLoad() {
    color: #777;
  document.getElementById("toctogglecheckbox").checked = true;
    float: right;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}
.collapsing-toc-button.hiding {
    transform: rotateZ(-90deg);
}
.collapsing-toc-button:hover {
    text-decoration: none;
    color:black;
    outline:none;
}
}
.collapsing-toc-button:active, .collapsing-toc-button:focus {
</script></shtml>
    outline:none;
}
.toclevel-</html>{{{1|1}}}<html>:nth-last-of-type(n+2) {
    border-bottom: 1px dotted rgba(0,0,0,0.05);
}
.toclevel-</html>{{{1|1}}}<html> > ul > li {
    line-height: 1em;
    opacity: 1;
    overflow: hidden;
    max-height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.toclevel-</html>{{{1|1}}}<html> > ul.hidden > li {
    line-height: 0em;
    max-height: 0em;
    opacity: 0;
    margin: 0px;
}
</style>
<script charset="UTF-8">
/*
Returns the first direct child UL of the provided element, or false if there are none.
*/
function CTOC_hasChildUl(element) {
    for (var i = 0; i < element.children.length; i++) {
        var child = element.children[i];
        if (child.tagName === 'UL') {
            return child;
        }
    }
    return false;
};
 
function CTOC_Controller() {
 
    // Get all toc items of the corresponding level.
    var tocItems = document.getElementsByClassName("toclevel-</html>{{{1|1}}}<html>");
 
    // function to toggle visibility of sub uls
    function CTOC_hideHandler(event) {
        var ul = event.target.nextElementSibling;
        event.target.classList.toggle("hiding");
        ul.classList.toggle('hidden');
    }
 
    // hide the toc levels to start.
    for (var i = 0; i < tocItems.length; i++) {
        var ulItem = CTOC_hasChildUl(tocItems[i]);
        if (ulItem) {
            if (!(ulItem.classList.contains('prepped'))) {
                // create collapse button.
                var button = document.createElement("button");
                button.innerText = '▼';
                button.classList.add("collapsing-toc-button");
                button.classList.add("hiding");
 
                // add event listener to button.
                button.addEventListener('click', CTOC_hideHandler);
 
                ulItem.classList.toggle('hidden');
                ulItem.insertAdjacentElement('beforebegin',button);
                ulItem.classList.add('prepped');
            }
        }
    }
};
CTOC_Controller();
</script>
</html>

Latest revision as of 21:55, 17 July 2020

Retrieved from "http://www.mysidia.org/trek/index.php?title=Template:CollapseTOC&oldid=21361"