Emoji u1f384.svg
Merry Christmas from the IIWiki Team! Have a happy new year!

MediaWiki:Gadget-SidebarTOC.js: Difference between revisions

Jump to navigation Jump to search
mNo edit summary
(Undo revision 770615 by Makko Oko (talk))
Tag: Undo
 
(15 intermediate revisions by the same user not shown)
Line 8: Line 8:
     };
     };


     // Remove the existing TOC
     // Hide the existing TOC
     $('#toc').remove();
     $('#toc').hide();
   
    new ResizeObserver(function(entries) {
if (window.innerWidth <= 720) {
$('#mw-panel').css('height', '');
}
else {
$('#mw-panel').css('height', document.body.scrollHeight - 10);
}
}).observe($('#content')[0]);
var tocCollapsed = (localStorage.getItem("sidebar_vector_c_p-toc") !== "n");
$('<nav id="p-toc" class="vector-menu mw-portlet mw-portlet-toc vector-menu-portal portal" aria-labelledby="p-toc-label" role="navigation">').append(
    $('<h3 id="p-toc-label" class="vector-menu-heading" tabindex="0">').append(
        $('<span class="vector-menu-heading-label">').text(i18n.header)
    ).on("keypress", function(event) {
if (event.which == 13) {
$(this).trigger("click");
event.stopImmediatePropagation()
}
}).on("click", function(event) {
        var $el = $(this).parent();
event.stopPropagation();
        //$el.toggleClass("collapsed");
        if($el.hasClass("collapsed")){
localStorage.setItem("sidebar_vector_c_p-toc", "y");
            $el.find(".vector-menu-content").slideUp("fast");
            $el.css({'margin-right': '', 'margin-left': ''});
        }
        else{
localStorage.setItem("sidebar_vector_c_p-toc", "n");
            $el.find(".vector-menu-content").slideDown("fast");
            var $toc = $el.find(".vector-menu-content-list")[0];
            if ($toc.clientWidth < $toc.scrollWidth) {
        $el.css({'margin-right': '0', 'margin-left': '0'});
            }
if (window.innerWidth >= 982 && $toc.clientWidth < $toc.scrollWidth) {
        $el.css({'margin-right': '-0.5em', 'margin-left': '-0.5em'});
}
        }
}),
    $('<div class="vector-menu-content">').append(
        $('<ul class="vector-menu-content-list">').append(
        $('<li class="toclevel-1 tocsection-0">').append($('<a href="#">').append(
        $('<span class="toctext">').text(i18n.top)
        )),
            $('#toc > ul').children().clone()
        )
    ).addClass($('#toc').parent().prop('class').split(/\s+/).filter(function(classname) {
    return classname.startsWith('toc-');
    }).join(' ')).css('display', tocCollapsed ? 'none' : '')
).addClass(tocCollapsed ? 'collapsed' : '').appendTo('#mw-panel');


    // Create a new TOC
// Add scroll event to highlight current section
    var $tocList = $('<ul class="vector-menu-content-list">').append(
$(window).on('scroll', function() {
        $('<li class="toclevel-1 tocsection-0">').append($('<a href="#">').append(
    var scrollPosition = $(this).scrollTop();
            $('<span class="toctext">').text(i18n.top)
     var currentSection;
        )),
        $('#content > h2, #content > h3, #content > h4, #content > h5, #content > h6').map(function() {
            var $this = $(this);
            return $('<li class="toclevel-' + this.tagName.slice(1) + '">').append(
                $('<a href="#' + this.id + '">').text($this.text())
            );
        })
     );


     // Append the new TOC to the page
     // Find the current section based on scroll position
     $('<nav id="p-toc" class="vector-menu mw-portlet mw-portlet-toc vector-menu-portal portal" aria-labelledby="p-toc-label" role="navigation">').append(
     $('.mw-headline').each(function() {
        $('<h3 id="p-toc-label" class="vector-menu-heading" tabindex="0">').append(
         if ($(this).offset().top <= scrollPosition) {
            $('<span class="vector-menu-heading-label">').text(i18n.header)
             currentSection = $(this);
        ),
        $('<div class="vector-menu-content">').append($tocList)
    ).appendTo('#mw-panel');
 
    // Ensure that the "Contents" header still follows the user when scrolling
    var $pToc = $('#p-toc');
    $(window).on('scroll', function() {
         var scrollTop = $(this).scrollTop();
        if (scrollTop > 100) {
             $pToc.css('top', scrollTop - 100);
         } else {
         } else {
             $pToc.css('top', 0);
             return false;
         }
         }
     });
     });


     // Prevent the TOC from collapsing immediately after opening it
     // Remove existing tocsection-current class and add it to the current section
     $pToc.on('click', function(event) {
     $('#p-toc .tocsection-current').removeClass('tocsection-current');
         event.stopPropagation();
    if (currentSection) {
        $pToc.toggleClass('collapsed');
         $('#p-toc a[href="#' + currentSection.attr('id') + '"]').closest('li').addClass('tocsection-current');
     });
     }
});
});
});

Latest revision as of 07:12, 23 February 2024

$(function(){
    if (!$('#toc').length) {
        return;
    }
    var i18n = {
        header: 'Contents',
        top: '(Top)'
    };

    // Hide the existing TOC
    $('#toc').hide();
    
    new ResizeObserver(function(entries) {
		if (window.innerWidth <= 720) {
			$('#mw-panel').css('height', '');
		}
		else {
			$('#mw-panel').css('height', document.body.scrollHeight - 10);
		}
	}).observe($('#content')[0]);
	var tocCollapsed = (localStorage.getItem("sidebar_vector_c_p-toc") !== "n");
	$('<nav id="p-toc" class="vector-menu mw-portlet mw-portlet-toc vector-menu-portal portal" aria-labelledby="p-toc-label" role="navigation">').append(
	    $('<h3 id="p-toc-label" class="vector-menu-heading" tabindex="0">').append(
	        $('<span class="vector-menu-heading-label">').text(i18n.header)
	    ).on("keypress", function(event) {
			if (event.which == 13) {
				$(this).trigger("click");
				event.stopImmediatePropagation()
			}
		}).on("click", function(event) {
	        var $el = $(this).parent();
			event.stopPropagation();
	        //$el.toggleClass("collapsed");
	        if($el.hasClass("collapsed")){
				localStorage.setItem("sidebar_vector_c_p-toc", "y");
	            $el.find(".vector-menu-content").slideUp("fast");
	            $el.css({'margin-right': '', 'margin-left': ''});
	        }
	        else{
				localStorage.setItem("sidebar_vector_c_p-toc", "n");
	            $el.find(".vector-menu-content").slideDown("fast");
	            var $toc = $el.find(".vector-menu-content-list")[0];
	            if ($toc.clientWidth < $toc.scrollWidth) {
	        		$el.css({'margin-right': '0', 'margin-left': '0'});
	            }
				if (window.innerWidth >= 982 && $toc.clientWidth < $toc.scrollWidth) {
	        		$el.css({'margin-right': '-0.5em', 'margin-left': '-0.5em'});
				}
	        }
		}),
	    $('<div class="vector-menu-content">').append(
	        $('<ul class="vector-menu-content-list">').append(
	        	$('<li class="toclevel-1 tocsection-0">').append($('<a href="#">').append(
	        		$('<span class="toctext">').text(i18n.top)
	        	)),
	            $('#toc > ul').children().clone()
	        )
	    ).addClass($('#toc').parent().prop('class').split(/\s+/).filter(function(classname) {
	    	return classname.startsWith('toc-');
	    }).join(' ')).css('display', tocCollapsed ? 'none' : '')
	).addClass(tocCollapsed ? 'collapsed' : '').appendTo('#mw-panel');

	// Add scroll event to highlight current section
$(window).on('scroll', function() {
    var scrollPosition = $(this).scrollTop();
    var currentSection;

    // Find the current section based on scroll position
    $('.mw-headline').each(function() {
        if ($(this).offset().top <= scrollPosition) {
            currentSection = $(this);
        } else {
            return false;
        }
    });

    // Remove existing tocsection-current class and add it to the current section
    $('#p-toc .tocsection-current').removeClass('tocsection-current');
    if (currentSection) {
        $('#p-toc a[href="#' + currentSection.attr('id') + '"]').closest('li').addClass('tocsection-current');
    }
});
});