Pengguna:Ctify/vector-2022.js
Catatan: Setelah menyimpan, Anda harus memintas tembolok (cache) peramban Anda untuk melihat perubahannya. Google Chrome, Firefox, Microsoft Edge dan Safari: Tahan tombol ⇧ Shift dan klik Muat ulang (Reload) di tombol bilah alat. Untuk detail dan instruksi tentang peramban lain, lihat halaman menghapus singgahan (Inggris).
const SCROLL_HOOK = 'vector.page_title_scroll',
SCROLL_CONTEXT_ABOVE = 'scrolled-above-page-title',
SCROLL_CONTEXT_BELOW = 'scrolled-below-page-title',
SCROLL_ACTION = 'scroll-to-top';
function fireScrollHook(direction) {
if (direction === 'down') {
mw.hook(SCROLL_HOOK).fire({
context: SCROLL_CONTEXT_BELOW
});
} else {
mw.hook(SCROLL_HOOK).fire({
context: SCROLL_CONTEXT_ABOVE,
action: SCROLL_ACTION
});
}
}
function initScrollObserver(show, hide) {
return new IntersectionObserver(function(entries) {
if (!entries[0].isIntersecting && entries[0].boundingClientRect.top < 0) {
show();
} else {
hide();
}
});
}
module.exports = {
initScrollObserver,
fireScrollHook
};
const TOC_ID = 'mw-panel-toc',
BODY_CONTENT_ID = 'bodyContent',
HEADLINE_SELECTOR = '.mw-headline',
TOC_SECTION_ID_PREFIX = 'toc-';
const SCROLL_HOOK = 'vector.page_title_scroll',
SCROLL_CONTEXT_ABOVE = 'scrolled-above-page-title',
SCROLL_CONTEXT_BELOW = 'scrolled-below-page-title',
SCROLL_ACTION = 'scroll-to-top';
function fireScrollHook(direction) {
if (direction === 'down') {
mw.hook(SCROLL_HOOK).fire({
context: SCROLL_CONTEXT_BELOW
});
} else {
mw.hook(SCROLL_HOOK).fire({
context: SCROLL_CONTEXT_ABOVE,
action: SCROLL_ACTION
});
}
}
function initScrollObserver(show, hide) {
return new IntersectionObserver(function(entries) {
if (!entries[0].isIntersecting && entries[0].boundingClientRect.top < 0) {
show();
} else {
hide();
}
});
}
const searchToggleElement = document.querySelector('.mw-header .search-toggle');
if (searchToggleElement) {
searchToggle(searchToggleElement);
}
const FEATURE_TEST_GROUP = 'stickyHeaderEnabled',
testConfig = AB.getEnabledExperiment(),
stickyConfig = testConfig && testConfig.experimentName === stickyHeader.STICKY_HEADER_EXPERIMENT_NAME ? testConfig : null,
testGroup = stickyConfig ? stickyConfig.group : FEATURE_TEST_GROUP,
targetElement = stickyHeader.header,
targetIntersection = stickyHeader.stickyIntersection,
isStickyHeaderAllowed = stickyHeader.isStickyHeaderAllowed() && testGroup !== 'unsampled' && AB.isInTestGroup(testGroup, FEATURE_TEST_GROUP);
AB.initAB(testGroup);
const observer = initScrollObserver(() => {
if (targetElement && isStickyHeaderAllowed) {
stickyHeader.show();
}
fireScrollHook('down');
}, () => {
if (targetElement && isStickyHeaderAllowed) {
stickyHeader.hide();
}
fireScrollHook('up');
});
if (isStickyHeaderAllowed) {
stickyHeader.initStickyHeader(observer);
} else if (targetIntersection) {
observer.observe(targetIntersection);
}
const tocElement = document.getElementById(TOC_ID);
const bodyContent = document.getElementById(BODY_CONTENT_ID);
if (!(tocElement && bodyContent && window.IntersectionObserver && window.requestAnimationFrame)) {
return;
}
const tableOfContents = initTableOfContents({
container: tocElement,
onHeadingClick: (id) => {
sectionObserver.pause();
tableOfContents.expandSection(id);
tableOfContents.
changeActiveSection(id);
deferUntilFrame(() => sectionObserver.resume(), 3);
},
onToggleClick: (id) => {
tableOfContents.toggleExpandSection(id);
}
});
const sectionObserver = initSectionObserver({
elements: bodyContent.querySelectorAll('h1, h2, h3, h4, h5, h6'),
topMargin: targetElement ? targetElement.getBoundingClientRect().height : 0,
onIntersection: (section) => {
const headline = section.querySelector(HEADLINE_SELECTOR);
if (headline) {
tableOfContents.changeActiveSection(TOC_SECTION_ID_PREFIX + headline.id);
}
}
});
};