Difference between revisions of "MediaWiki:Common.js"
Jump to navigation
Jump to search
Tag: Reverted |
Tag: Reverted |
||
Line 108: | Line 108: | ||
}); | }); | ||
// Create | // JavaScript code to dynamically add table of contents at the bottom right corner | ||
var | document.addEventListener("DOMContentLoaded", function() { | ||
// Create the container for the TOC | |||
var tocContainer = document.createElement("div"); | |||
document.body.appendChild( | tocContainer.setAttribute("id", "dynamic-toc"); | ||
document.body.appendChild(tocContainer); | |||
// | // Style the container | ||
tocContainer.style.position = "fixed"; | |||
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 | ||
var | var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); | ||
document. | |||
// Create a list inside the container | |||
var tocList = document.createElement("ul"); | |||
tocContainer.appendChild(tocList); | |||
tocList.style.listStyleType = "none"; | |||
tocList.style.padding = "0"; | |||
// Loop through the headings and generate the TOC | |||
headings.forEach(function(heading) { | |||
var headingText = heading.textContent; | |||
var headingLevel = parseInt(heading.tagName.substring(1)); | |||
// Create list item for each heading | |||
var tocItem = document.createElement("li"); | |||
tocList.appendChild(tocItem); | |||
// Create anchor element with link to the heading | |||
var tocLink = document.createElement("a"); | |||
tocLink.setAttribute("href", "#" + heading.id); | |||
tocLink.textContent = headingText; | |||
tocItem.appendChild(tocLink); | |||
// Add margin bottom to list item | |||
tocItem.style.marginBottom = "5px"; | |||
}); | |||
}); |
Revision as of 14:00, 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 to dynamically add table of contents at the bottom right corner document.addEventListener("DOMContentLoaded", function() { // Create the container for the TOC var tocContainer = document.createElement("div"); tocContainer.setAttribute("id", "dynamic-toc"); document.body.appendChild(tocContainer); // Style the container tocContainer.style.position = "fixed"; 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 var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); // Create a list inside the container var tocList = document.createElement("ul"); tocContainer.appendChild(tocList); tocList.style.listStyleType = "none"; tocList.style.padding = "0"; // Loop through the headings and generate the TOC headings.forEach(function(heading) { var headingText = heading.textContent; var headingLevel = parseInt(heading.tagName.substring(1)); // Create list item for each heading var tocItem = document.createElement("li"); tocList.appendChild(tocItem); // Create anchor element with link to the heading var tocLink = document.createElement("a"); tocLink.setAttribute("href", "#" + heading.id); tocLink.textContent = headingText; tocItem.appendChild(tocLink); // Add margin bottom to list item tocItem.style.marginBottom = "5px"; }); });