<!--вкладки, (c) EMERAEL 2024 -->
<script>
(() => {
    const posts = document.querySelectorAll('.post-content');
    const processedPosts = new Set();
    const processPost = (post) => {
        if(processedPosts.has(post)) return;
        const postTabs = post.querySelectorAll('.custom_tag_tab');
        const actualizeTabsDisplay = () => postTabs.forEach(tab => tab.querySelector('.custom_tag_tabdefault') ? tab.classList.remove('hidden') : tab.classList.add('hidden'));
        const postTabtitles = post.querySelectorAll('.custom_tag_tabtitle');
        if(!postTabs.length) return;
    
        const defaultTabElement = post.querySelector('.custom_tag_tabdefault');
        const openTabMarker = defaultTabElement ? defaultTabElement : document.createElement('div');
        if (!defaultTabElement) {
            openTabMarker.classList.add('custom_tag_tabdefault');
            postTabs[0].prepend(openTabMarker);
            // Добавляем класс "active" для первой вкладки по умолчанию
            postTabtitles[0].classList.add('active');
        }
        const tabnamesToTab = new Map();
        postTabs.forEach((tab) => tabnamesToTab.set(tab.dataset.tabname, tab));
        const tabnamesToTabtitle = new Map();
        postTabtitles.forEach((tabtitle) => {
            const tabname = tabtitle.dataset.tabname;
            tabnamesToTabtitle.set(tabname, tabtitle);
            tabtitle.addEventListener('click', () => {
                const triggeredTab = tabnamesToTab.get(tabname);
                if(!triggeredTab || triggeredTab.querySelector('.custom_tag_tabdefault')){
                    return;
                }
                triggeredTab.prepend(openTabMarker);
                actualizeTabsDisplay();
                // Добавляем класс "active" для открытой вкладки
                postTabtitles.forEach((tab) => tab.classList.remove('active'));
                tabtitle.classList.add('active');
            });
        });
        actualizeTabsDisplay();
        processedPosts.add(post)
    };
    posts.forEach((el) => processPost(el));
    $(document).on('pun_post', () =>  document.querySelectorAll('.post-content').forEach((el) => processPost(el)));
    $(document).on('pun_preview', () => document.querySelectorAll('.post-content').forEach((el) => processPost(el)));
    $(document).on('pun_edit', () => document.querySelectorAll('.post-content').forEach((el) => processPost(el)));
})()


</script>

tabtitle[/data-tabname]:a
tab[/data-tabname]:a
tabdefault:s

<style type="text/css">
.custom_tag.custom_tag_tabtitle {
    display: inline-grid;
    cursor: pointer;
    margin: 2px 10px;
    padding: 5px;
    background: #6aae69;
    color: #f0f0f0;
}

.custom_tag.custom_tag_tabtitle p {padding: 0;}

.custom_tag.custom_tag_tabtitle.active {
    background: #f0f0f0;
    color: #6aae69;
    border: 3px solid;
}

.custom_tag.custom_tag_tab {
    margin: 10px;
    padding: 10px;
    border: 3px solid #6aae69;
}
</style>