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
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
mw.loader.using( 'mediawiki.toc', function () {
$(function(){
$( function () {
    if (!$('#toc').length) {
var $window, $mwPanel, $floatTOC, scrollHandler,
        return;
tocLimit, headingOffsets, headingThreshold,
    }
$toc = $( '.toc' );
    var i18n = {
        header: 'Contents',
        top: '(Top)'
    };


if ( !$toc.length ) {
    // Hide the existing TOC
return;
    $('#toc').hide();
   
    new ResizeObserver(function(entries) {
if (window.innerWidth <= 720) {
$('#mw-panel').css('height', '');
}
}
 
else {
$window = $( window );
$('#mw-panel').css('height', document.body.scrollHeight - 10);
$mwPanel = $( '#mw-panel' );
}
headingThreshold = $window.height() / 5.0;
}).observe($('#content')[0]);
$floatTOC = $toc
var tocCollapsed = (localStorage.getItem("sidebar_vector_c_p-toc") !== "n");
.clone()
$('<nav id="p-toc" class="vector-menu mw-portlet mw-portlet-toc vector-menu-portal portal" aria-labelledby="p-toc-label" role="navigation">').append(
.removeAttr( 'id' )
    $('<h3 id="p-toc-label" class="vector-menu-heading" tabindex="0">').append(
.addClass( 'floatTOC' )
        $('<span class="vector-menu-heading-label">').text(i18n.header)
.appendTo( 'body' )
    ).on("keypress", function(event) {
.css( {
if (event.which == 13) {
visibility: 'hidden',
$(this).trigger("click");
opacity: 0
event.stopImmediatePropagation()
} );
 
// Show the ToC ul even if it's hidden
$floatTOC.find( 'ul' ).show();
 
// Hijack links so that we can scroll to the content
$floatTOC.find( 'a' ).click( function ( e ) {
var target = $( this.hash.replace( /\./g, '\\.' ));
if (target.length) {
$( 'html, body' ).animate( {
scrollTop: target.offset().top - headingThreshold
} );
}
}
return false;
}).on("click", function(event) {
} );
        var $el = $(this).parent();
 
event.stopPropagation();
 
        //$el.toggleClass("collapsed");
        tocLimit = $toc.offset().top + $toc.height();
        if($el.hasClass("collapsed")){
        headingOffsets = [];
localStorage.setItem("sidebar_vector_c_p-toc", "y");
 
            $el.find(".vector-menu-content").slideUp("fast");
        // Get all heading positions
            $el.css({'margin-right': '', 'margin-left': ''});
        $toc.find('a').each(function () {
        }
            var id = $(this).attr('href').substring(1);
        else{
            var $heading = $('#' + id);
localStorage.setItem("sidebar_vector_c_p-toc", "n");
            if ($heading.length) {
            $el.find(".vector-menu-content").slideDown("fast");
                headingOffsets.push([id, $heading.offset().top]);
            var $toc = $el.find(".vector-menu-content-list")[0];
            }
            if ($toc.clientWidth < $toc.scrollWidth) {
        });
        $el.css({'margin-right': '0', 'margin-left': '0'});
 
            }
        // For the window scroll event
if (window.innerWidth >= 982 && $toc.clientWidth < $toc.scrollWidth) {
        scrollHandler = function () {
        $el.css({'margin-right': '-0.5em', 'margin-left': '-0.5em'});
            var $current,
}
                scrollTop = $window.scrollTop();
        }
 
}),
            if (scrollTop > tocLimit) {
    $('<div class="vector-menu-content">').append(
                $floatTOC.css({
        $('<ul class="vector-menu-content-list">').append(
                    visibility: 'visible',
        $('<li class="toclevel-1 tocsection-0">').append($('<a href="#">').append(
                    opacity: 1
        $('<span class="toctext">').text(i18n.top)
                });
        )),
                $mwPanel.hide();
            $('#toc > ul').children().clone()
 
        )
                // Highlight current
    ).addClass($('#toc').parent().prop('class').split(/\s+/).filter(function(classname) {
                var highlight = false;
    return classname.startsWith('toc-');
                // Current section is above the first heading below the top of the screen
    }).join(' ')).css('display', tocCollapsed ? 'none' : '')
                $.each(headingOffsets, function (i, v) {
).addClass(tocCollapsed ? 'collapsed' : '').appendTo('#mw-panel');
                    // Skip first as there's no previous heading before the first
                    if (i !== 0 && (scrollTop + headingThreshold) < v[1]) {
                        highlight = headingOffsets[i - 1][0];
                        return false;
                    }
                });


                if (highlight) {
// Add scroll event to highlight current section
                    $current = $floatTOC.find('a[href="#' + highlight + '"]');
$(window).on('scroll', function() {
                    $floatTOC.find('a').not($current).css('font-weight', '');
    var scrollPosition = $(this).scrollTop();
                    $current.css('font-weight', 'bold');
    var currentSection;
                }


            } else {
    // Find the current section based on scroll position
                $floatTOC.css({
    $('.mw-headline').each(function() {
                    visibility: 'hidden',
        if ($(this).offset().top <= scrollPosition) {
                    opacity: 0
            currentSection = $(this);
                });
        } else {
                $mwPanel.show();
             return false;
             }
         }
         }
    });


         $window.on('scroll', $.throttle(250, scrollHandler));
    // 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');
     }
});
});
});

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');
    }
});
});