MediaWiki:Gadget-stickyToc.js

In other languages

Note: After saving, you have to bypass your browser's cache to see the changes.

Google Chrome, Firefox, Microsoft Edge, and Safari: Hold down the key and click the Reload toolbar button.
For details and instructions about other browsers, see Wikipedia:Bypass your cache.

mw.loader.using([
'mediawiki.util',
'ext.gadget.global-utils'
]).then(()=>{
constinitSectionObserver=require('./sectionObserver.js');
constglobalUtils=require('ext.gadget.global-utils');
if(!$('#toc').length){
return;
}
consti18n={
en:{
header:'Contents',
top:'(Top)'
},
de:{
header:'Inhaltsverzeichnis',
top:'(Oben)'
},
es:{
header:'Contenidos',
top:'(Arriba)'
},
fr:{
header:'Contenu',
top:'(Haut)'
},
it:{
header:'Contenuti',
top:'(Inizio)'
},
ja:{
header:'目次',
top:'（トップ）'
},
ko:{
header:'목차',
top:'(처음 위치)'
},
nl:{
header:'Inhoud',
top:'(Boven)'
},
pt:{
header:'Conteúdos',
top:'(Topo)'
},
ru:{
header:'Содержание',
top:'(Начало)'
},
th:{
header:'เนื้อหา',
top:'(บนสุด)'
},
uk:{
header:'Зміст',
top:'(Верх)'
},
'zh-hans':{
header:'目录',
top:'（顶部）'
},
'zh-hant':{
header:'目次',
top:'（頂部）'
}
};
consti18nLang=newglobalUtils.MessageParser(i18n);
newResizeObserver(entries=>{
if(window.innerWidth<=720){
$('#mw-panel').css('height','');
}else{
$('#mw-panel').css('height',document.body.scrollHeight-10);
}
}).observe($('#content')[0]);
const$portlet=$(mw.util.addPortlet('p-toc',i18nLang.message('header')));
$portlet.addClass('vector-menu-portal');
$portlet.find('.vector-menu-content-list').append(
$('<li>').addClass(['toclevel-1','tocsection-0']).append(
$('<a>',{'href':'#'}).append(
$('<span>').addClass('toctext').text(i18nLang.message('top'))
)
),
...$('#toc > ul').children().clone()
);
$portlet.removeClass('emptyPortlet');
consttocClasses=$('#toc').parent().prop('class')
.split(/\s+/)
.filter(classname=>classname.startsWith('toc-'))
.join(' ');
$portlet.appendTo('#mw-panel')
.find('.vector-menu-content').addClass(tocClasses);
mw.hook('mcw.makeSidebarPortletCollapsible').fire($portlet[0]);
mw.hook('mcw.toggleCollapsibleSidebarPortlet').add((portlet,gotCollapsed)=>{
if(!$portlet.is(portlet))return;
if(gotCollapsed){
$portlet.css({'margin-right':'','margin-left':''});
}else{
const$toc=$portlet.find('.vector-menu-content-list')[0];
if($toc.clientWidth<$toc.scrollWidth){
constmargin=window.innerWidth>=982?'-0.5em':'0';
$portlet.css({'margin-right':margin,'margin-left':margin});
}
}
});
// Update section highlight when scrolling
const$sections=document.querySelectorAll('#firstHeading, .mw-heading');
constsectionObserver=initSectionObserver({topMargin:20,onIntersection:onIntersection});
sectionObserver.setElements($sections);
sectionObserver.calcIntersection();
constsections=Array.from($sections);
consttocList=$('#p-toc .vector-menu-content-list')[0];
consttocSections=$('#p-toc .vector-menu-content-list li');
constbaseOffset=$('#p-toc .tocsection-0 .toctext')[0].offsetTop;
functiononIntersection(section){
constindex=sections.indexOf(section);
$('#p-toc .tocsection-current').removeClass('tocsection-current');
consttocSection=tocSections.eq(index).addClass('tocsection-current');
consttocSectionPos=tocSection[0].offsetTop-baseOffset;
if(tocSectionPos<tocList.scrollTop+(tocList.clientHeight*0.15)){
tocList.scrollTo({top:tocSectionPos-(tocList.clientHeight*0.3)});
}elseif(tocSectionPos>tocList.scrollTop+(tocList.clientHeight*0.85)){
tocList.scrollTo({top:tocSectionPos-(tocList.clientHeight*0.7)});
}
}
});