Difference between revisions of "MediaWiki:Common.js"

From Innocent Witches
Jump to navigation Jump to search
Tag: Reverted
Tag: Reverted
Line 108: Line 108:
});
});


// JavaScript code to dynamically add table of contents at the bottom right corner
// JavaScript code
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener('load', function() {
     // Create the container for the TOC
     // Create a new div element for the dynamic table of contents
     var tocContainer = document.createElement("div");
     var tocDiv = document.createElement('div');
     tocContainer.setAttribute("id", "dynamic-toc");
     tocDiv.id = 'dynamic-toc';
    document.body.appendChild(tocContainer);


     // Style the container
     // Get all the headings on the page
    tocContainer.style.position = "fixed";
     var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
     tocContainer.style.bottom = "20px";
    tocContainer.style.right = "20px";
    tocContainer.style.backgroundColor = "#f8f9fa";
    tocContainer.style.border = "1px solid #e9ecef";
    tocContainer.style.padding = "10px";
    tocContainer.style.maxWidth = "200px";
    tocContainer.style.zIndex = "9999";


     // Find all headings in the page
     // Create an unordered list element
     var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
     var ul = document.createElement('ul');


     // Create a list inside the container
     // Iterate through each heading and create a table of contents
    var tocList = document.createElement("ul");
    headings.forEach(function (heading) {
    tocContainer.appendChild(tocList);
        // Create list item element
    tocList.style.listStyleType = "none";
        var li = document.createElement('li');
    tocList.style.padding = "0";
       
        // Create anchor element
        var a = document.createElement('a');
        a.textContent = heading.textContent;
        a.href = '#' + heading.id;


    // Loop through the headings and generate the TOC
        // Append anchor element to list item
    headings.forEach(function(heading) {
         li.appendChild(a);
         var headingText = heading.textContent;
        var headingLevel = parseInt(heading.tagName.substring(1));


         // Create list item for each heading
         // Append list item to unordered list
         var tocItem = document.createElement("li");
         ul.appendChild(li);
        tocList.appendChild(tocItem);
    });


        // Create anchor element with link to the heading
    // Append unordered list to the dynamic table of contents div
        var tocLink = document.createElement("a");
    tocDiv.appendChild(ul);
        tocLink.setAttribute("href", "#" + heading.id);
        tocLink.textContent = headingText;
        tocItem.appendChild(tocLink);


        // Add margin bottom to list item
    // Append the dynamic table of contents div to the body
        tocItem.style.marginBottom = "5px";
    document.body.appendChild(tocDiv);
    });
});
});

Revision as of 14:04, 13 February 2024

mw.loader.using('mediawiki.util').then(function() {
    
function zselector( $content ) {
    var ActiveID = '';
    $(function () {
        $('[class|="cc"]').click(function () {
            var cn = $(this).attr('class');
            if (typeof cn !== 'undefined') {
                ZContent(cn, '0');
            }
        });
        $('[class|="hh"]').mouseenter(function () {
            var cn = $(this).attr('class');
            if (typeof cn !== 'undefined') {
                ZContent(cn, '1');
            }
        });
        $('[class|="hh"]').mouseleave(function () {
            var cn = $(this).attr('class');
            if (typeof cn !== 'undefined') {
                ZContent(cn, '2');
            }
        });
        $('[class|="zz"]').each(function (i, elem) {
            if ($(this).css('display') == 'none') {
                $(this).css('opacity', 0);
            }
        });
    });
    function ZContent(classValue, effect) {
        if (classValue.split) {
            var ID = '';
            var elemClasses = classValue.split(' ');
            for (var i = 0; i < elemClasses.length; i++) {
                var elemClass = elemClasses[i];
                if (elemClass.substring(0, 3) == 'hh-' || elemClass.substring(0, 3) == 'cc-') {
                    ID = elemClass.substring(3);
                    if (effect == '0') {
                        ActiveID = ID;
                        ZEffect(ID);
                        SelectElem('cc', ID)
                        break;
                    } else if (effect == '1') {
                        ActiveID = ID;
                        ZEffect(ID);
                        SelectElem('hh', ID)
                        break;
                    } else if (effect == '2') {
                        ZEffect(ActiveID);
                        SelectElem('hh', ID);
                        break;
                    }
                }
            }
        }
    }
    function ZEffect(ID) {
        $('[class|="zz"]').each(function (i, elem) {
            if ($(this).hasClass('zz-' + ID)) {
                $(this).css('display', 'block');
                $(window).trigger('scroll');
                $(this).stop();
                $(this).animate({
                    opacity: 1,
                    queue: false
                }, 700);
            } else {
                $(this).css('display', 'none');
                $(this).stop();
                $(this).animate({
                    opacity: 0,
                    queue: false
                }, 0);
            }
        });
    }
    function SelectElem(type, ID) {
        $('[class|="cc"],[class|="hh"]').each(function (i, elem) {
            if ($(this).hasClass(type + '-' + ID)) {
                $(this).removeClass('sn');
                $(this).addClass('sy');
            } else {
                $(this).removeClass('sy');
                $(this).addClass('sn');
            }
        });
    }
}
    
    mw.hook( 'wikipage.content' ).add( zselector );
    zselector( mw.util.$content );
});

// Динамическая кнопка "back to top"
$(document).ready(function(){
    // Create the back to top button element
    var backButton = $('<button id="back-to-top" title="Back to top"> </button>');
    
    // Append the button to the body
    $('body').append(backButton);
    

    // Smooth scroll to top when the button is clicked
    backButton.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});

// JavaScript code
window.addEventListener('load', function() {
    // Create a new div element for the dynamic table of contents
    var tocDiv = document.createElement('div');
    tocDiv.id = 'dynamic-toc';

    // Get all the headings on the page
    var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

    // Create an unordered list element
    var ul = document.createElement('ul');

    // Iterate through each heading and create a table of contents
    headings.forEach(function (heading) {
        // Create list item element
        var li = document.createElement('li');
        
        // Create anchor element
        var a = document.createElement('a');
        a.textContent = heading.textContent;
        a.href = '#' + heading.id;

        // Append anchor element to list item
        li.appendChild(a);

        // Append list item to unordered list
        ul.appendChild(li);
    });

    // Append unordered list to the dynamic table of contents div
    tocDiv.appendChild(ul);

    // Append the dynamic table of contents div to the body
    document.body.appendChild(tocDiv);
});