View source for Template:RidgeRun NVIDIA PVA Development/TOC

<noinclude>
RidgeRun NVIDIA PVA Development Table of contents. 

== Usage == 

<pre>
{{RidgeRun NVIDIA PVA Development/TOC
|BaseUrl=https://developer.ridgerun.com/wiki/index.php/RidgeRun NVIDIA PVA Development
}}
</pre>

'''NOTE''': BaseUrl is a mandatory argument since it is used by the template as the base for all URLs.

Optional arguments:

<pre>
{{RidgeRun NVIDIA PVA Development/TOC|logo=1|title=1|expanded=1}}
</pre>
{{RidgeRun NVIDIA PVA Development/TOC|logo=1|title=1|expanded=1}}

* '''logo''': If given, the logo is shown. If not, it is hidden ('''default''').
* '''title''': If given, the title is shown. If not, it is hidden ('''default''').
* '''expanded''': If given the TOC starts with all elements expanded. If not it starts collapsed ('''default'''). 
 
</noinclude>

<templatestyles src="RidgeRun NVIDIA PVA Development/styles.css" />
{{#tag:html|
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .toc-sub-list {
            display: {{#if:{{{expanded|}}}|block|none}} !important; /* Display sub-lists by default block/none */
        }
    </style>
</head>
<body>
    <div class="wiki-toc hide-on-mobile" id="toc-div">
        {{#if:{{{logo|}}}|
        <div class="wiki-toc-logo">
            <img src="https://developer.ridgerun.com/wiki/images/thumb/f/f3/Ridgerun-logo.svg/200px-Ridgerun-logo.svg.png"
                alt="Logo">
        </div>
        }}
        {{#if:{{{title|}}}|
        <div class="wiki-toc-title">
            <a href="https://developer.ridgerun.com/wiki/index.php/RidgeRun NVIDIA PVA Development">
                RidgeRun NVIDIA PVA Development</a>
        </div>
        }}
        <div class="wiki-toc-header">
            Table of Contents
            <span class="toc-toggle">[Sticky]</span>
            <span class="collapse-all">
                <i class="fas  {{#if:{{{expanded|}}}|fa-minus|fa-plus}}" id="collapseAllIcon"></i>
            </span>
        </div>
        <div class="wiki-search-bar">
            <input type="text" class="wiki-search-input" id="tocSearchInput" placeholder="Search TOC...">
        </div>
        <ul class="wiki-toc-list">
            <li>
                <a class="toc-section-header" href="{{{BaseUrl}}}/Introduction">
                    Introduction
                    <i class="fas fa-chevron-right icon-toggle {{#if:{{{expanded|}}}|expanded|collapsed}}"></i>
                </a>
                <ul class="toc-sub-list">
                    <li><a href="{{{BaseUrl}}}/Introduction#What is the PVA?">What is the PVA?</a></li>
                    <li><a href="{{{BaseUrl}}}/Introduction#When to Use the PVA?">When to Use the PVA?</a></li>
                    <li><a href="{{{BaseUrl}}}/Introduction#Development Workflow">Development Workflow</a></li>
                    <li><a href="{{{BaseUrl}}}/Introduction#Services">Services</a></li>
                </ul>
            </li>
            <li>
                <a class="toc-section-header" href="{{{BaseUrl}}}/Getting Access to the PVA">
                    Getting Access to the PVA
                    <i class="fas fa-chevron-right icon-toggle {{#if:{{{expanded|}}}|expanded|collapsed}}"></i>
                </a>
                <ul class="toc-sub-list">
                    <li><a href="{{{BaseUrl}}}/Getting Access to the PVA#Vision Programming Interface(VPI)">Vision Programming Interface(VPI)</a> 
                    </li>
                    <li><a href="{{{BaseUrl}}}/Getting Access to the PVA#GStreamer VPI Plug-In">GStreamer VPI Plug-In</a></li>
                    <li><a href="{{{BaseUrl}}}/Getting Access to the PVA#Custom Applications">Custom Applications</a></li>
                </ul>
            </li>
            <li>
                <a class="toc-section-header" href="{{{BaseUrl}}}/Algorithms">
                    Algorithms
                    <i class="fas fa-chevron-right icon-toggle {{#if:{{{expanded|}}}|expanded|collapsed}}"></i>
                </a>
                <ul class="toc-sub-list">
                    <li><a href="{{{BaseUrl}}}/Algorithms#General Considerations">General Considerations</a> 
                    </li>
                    <li><a href="{{{BaseUrl}}}/Algorithms#Algo A">Algo A</a></li>
                    <li><a href="{{{BaseUrl}}}/Algorithms#Algo B">Algo B</a></li>
                    <li><a href="{{{BaseUrl}}}/Algorithms#Algo C">Algo C</a></li>
                    <li><a href="{{{BaseUrl}}}/Algorithms#Algo D">Algo D</a></li>
                </ul>
            </li>
            <li>
                <a class="toc-section-header" href="https://www.ridgerun.com/contact">
                    Contact Us
                </a>
           </li>
           <li>
                <a class="toc-section-header" href="https://developer.ridgerun.com/wiki/index.php/Sponsor_Projects">
                    Sponsor your Favorite Feature
                </a>
           </li>
        </ul>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            var icons = document.querySelectorAll('.icon-toggle');
            var toc = document.querySelector('.wiki-toc');
            var tocToggle = document.querySelector('.toc-toggle');
            var collapseAllToggle = document.querySelector('.collapse-all');
            var collapseAllIcon = document.querySelector('#collapseAllIcon');

            // Initialize state of sub-lists
            var isExpanded = collapseAllIcon.classList.contains('fa-minus');
            document.querySelectorAll('.toc-sub-list').forEach(function (subList) {
                if (subList) {
                    subList.style.setProperty('display', isExpanded ? 'block' : 'none', 'important');
                }
            });

            document.querySelectorAll('.icon-toggle').forEach(function (icon) {
                var subList = icon.parentElement.nextElementSibling;
                if (subList) {
                    icon.classList.toggle('expanded', subList.style.display === 'block');
                    icon.classList.toggle('collapsed', subList.style.display !== 'block');
                }
            });

            icons.forEach(function (icon) {
                icon.addEventListener('click', function (event) {
                    event.preventDefault(); // Prevent default link behavior

                    var subList = this.parentElement.nextElementSibling; // Get the sub-list related to this icon

                    if (subList) {
                        if (subList.style.display === 'block') {
                            // subList.style.display = 'none';
                            subList.style.setProperty('display', 'none', 'important');
                            this.classList.remove('expanded');
                            this.classList.add('collapsed');
                        } else {
                            // subList.style.display = 'block';
                            subList.style.setProperty('display', 'block', 'important');
                            this.classList.remove('collapsed');
                            this.classList.add('expanded');
                        }
                    }
                });
            });

            tocToggle.addEventListener('click', function () {
                var isSticky = toc.classList.toggle('sticky');
                tocToggle.textContent = '[' + (isSticky ? 'Floating' : 'Sticky') + ']';
            });

            collapseAllToggle.addEventListener('click', function () {
                isExpanded = !isExpanded; // Toggle state

                document.querySelectorAll('.toc-sub-list').forEach(function (subList) {
                    if (subList) {
                        subList.style.setProperty('display', isExpanded ? 'block' : 'none', 'important');
                    }
                });

                document.querySelectorAll('.icon-toggle').forEach(function (icon) {
                    icon.classList.toggle('expanded', isExpanded);
                    icon.classList.toggle('collapsed', !isExpanded);
                });

                collapseAllIcon.classList.toggle('fa-minus', isExpanded);
                collapseAllIcon.classList.toggle('fa-plus', !isExpanded);
            });

            // Function to highlight the current page
            function highlightCurrentPage() {
                var currentPage = window.location.pathname.split('/').pop(); // Get the current page name
                var links = document.querySelectorAll('.wiki-toc-list a');

                links.forEach(function (link) {
                    var linkPage = link.href.split('/').pop(); // Extract page name from link
                    linkPage = linkPage.replace(/%20/g, '_');
                    linkPage = linkPage.replace(/ /g, '_');
                    if (linkPage === currentPage) {
                        link.classList.add('current-page');
                        var parentLi = link.closest('ul').previousElementSibling;
                        //if (parentLi && parentLi.classList.contains('toc-section-header')) {
                        //parentLi.classList.add('current-section');
                        //}
                    }
                });
            }

            highlightCurrentPage();

            // Search functionality
            var tocSearchInput = document.getElementById('tocSearchInput');
            var tocItems = document.querySelectorAll('.wiki-toc-list > li');

            tocSearchInput.addEventListener('input', function () {
                var searchText = tocSearchInput.value.toLowerCase();

                tocItems.forEach(function (item) {
                    var links = item.querySelectorAll('a');
                    var matchFound = false;

                    links.forEach(function (link) {
                        if (link.textContent.toLowerCase().includes(searchText)) {
                            matchFound = true;
                        }
                    });

                    if (matchFound) {
                        item.style.display = ''; // Show item
                    } else {
                        item.style.display = 'none'; // Hide item
                    }
                });
            });
        });
    </script>
</body>
}}

<noinclude>
[[Category:RidgeRun NVIDIA PVA Development Templates]]
</noinclude>