Page History

<!-- JS: Alexandr Petrunin-->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle collapse functionality
        document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
            trigger.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('data-bs-target'));

                // If there's a parent accordion, hide other panels
                const parent = document.querySelector(target.getAttribute('data-bs-parent'));
                if (parent) {
                    parent.querySelectorAll('.collapse.show').forEach(el => {
                        if (el !== target) {
                            el.classList.remove('show');
                        }
                    });
                }

                // Toggle target panel
                target.classList.toggle('show');
            });
        });

        // Handle list/tab functionality
        document.querySelectorAll('[data-bs-toggle="list"]').forEach(trigger => {
            trigger.addEventListener('click', function(e) {
                e.preventDefault();

                // Remove active class from all tabs in group
                const listGroup = this.closest('.list-group');
                listGroup.querySelectorAll('.active').forEach(el => {
                    el.classList.remove('active');
                });

                // Add active class to clicked tab
                this.classList.add('active');

                // Show corresponding content
                const target = document.querySelector(this.getAttribute('href'));
                const tabContent = target.closest('.tab-content');

                tabContent.querySelectorAll('.tab-pane').forEach(pane => {
                    pane.classList.remove('show', 'active');
                });

                target.classList.add('show', 'active');
            });
        });
    });

    // Add required CSS if not already present
    const style = document.createElement('style');
    style.textContent = `
    .collapse:not(.show) {
        display: none;
    }
    .collapse.show {
        display: block;
    }
    .tab-content > .tab-pane {
        display: none;
    }
    .tab-content > .active {
        display: block;
    }
`;
    document.head.appendChild(style);
</script>

<!-- Activate tooltips -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Find all elements with tooltip
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
            const title = element.getAttribute('title');

            // Create tooltip element
            const tooltip = document.createElement('div');
            tooltip.className = 'custom-tooltip';
            tooltip.textContent = title;
            document.body.appendChild(tooltip);

            // Show tooltip
            element.addEventListener('mouseenter', e => {
                const bounds = element.getBoundingClientRect();
                tooltip.style.display = 'block';

                // Position tooltip above the element
                tooltip.style.left = bounds.left + (bounds.width - tooltip.offsetWidth) / 2 + 'px';
                tooltip.style.top = bounds.top - tooltip.offsetHeight - 5 + 'px';
            });

            // Hide tooltip
            element.addEventListener('mouseleave', () => {
                tooltip.style.display = 'none';
            });

            // Remove title attribute to prevent default browser tooltip
            element.removeAttribute('title');
        });
    });

    // Add required CSS
    const tooltipStyle = document.createElement('style');
    tooltipStyle.textContent = `
    .custom-tooltip {
        display: none;
        position: fixed;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 1000;
        pointer-events: none;
    }

    .custom-tooltip::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px 5px 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.8) transparent transparent;
    }
`;
    document.head.appendChild(tooltipStyle);
</script>

<!-- Filter bar -->
<script>
    function searchActivities() {
        const cardContainer = document.getElementById('card-grid');
        const cards = cardContainer.getElementsByClassName('card');

        let filter = [];
        filter[0] = document.getElementById('card-filter-text').value.toUpperCase();
        filter[1] = document.getElementById('card-filter-topic').value;
        filter[2] = document.getElementById('card-filter-cycle').value;
        filter[3] = document.getElementById('card-filter-deliverable').value;

        for (let i = 0; i < cards.length; i++) {
            let card = cards[i];
            let text = card.querySelector('.card-body h2.card-title').innerText;
            let tags = card.querySelector('.card-body .tags').innerText;

            if (
                text.toUpperCase().indexOf(filter[0]) > -1 &&
                tags.indexOf(filter[1]) > -1 &&
                tags.indexOf(filter[2]) > -1 &&
                tags.indexOf(filter[3]) > -1
            ) {
                cards[i].style.display = '';
            } else {
                cards[i].style.display = 'none';
            }
        }
    }
</script>