var STICKY_HEADER_ID = 'vector-sticky-header', STICKY_HEADER_APPENDED_ID = '-sticky-header', STICKY_HEADER_VISIBLE_CLASS = 'vector-sticky-header-visible', STICKY_HEADER_USER_MENU_CONTAINER_CLASS = 'vector-sticky-header-icon-end', FIRST_HEADING_ID = 'firstHeading', USER_MENU_ID = 'p-personal', VECTOR_USER_LINKS_SELECTOR = '.vector-user-links', VECTOR_MENU_CONTENT_LIST_SELECTOR = '.vector-menu-content-list', SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle'; /** * Copies attribute from an element to another. * * @param {Element} from * @param {Element} to * @param {string} attribute */ function copyAttribute( from, to, attribute ) { var fromAttr = from.getAttribute( attribute ); if ( fromAttr ) { to.setAttribute( attribute, fromAttr ); } } /** * Suffixes an attribute with a value that indicates it * relates to the sticky header to support click tracking instrumentation. * * @param {Element} node * @param {string} attribute */ function suffixStickyAttribute( node, attribute ) { var value = node.getAttribute( attribute ); if ( value ) { node.setAttribute( attribute, value + STICKY_HEADER_APPENDED_ID ); } } /** * Makes a node trackable by our click tracking instrumentation. * * @param {Element} node */ function makeNodeTrackable( node ) { suffixStickyAttribute( node, 'id' ); suffixStickyAttribute( node, 'data-event-name' ); } /** * Makes sticky header icons functional for modern Vector. * * @param {HTMLElement} header * @param {HTMLElement|null} history * @param {HTMLElement|null} talk */ function prepareIcons( header, history, talk ) { var historySticky = header.querySelector( '#ca-history-sticky-header' ), talkSticky = header.querySelector( '#ca-talk-sticky-header' ); if ( !historySticky || !talkSticky ) { throw new Error( 'Sticky header has unexpected HTML' ); } if ( history ) { copyAttribute( history, historySticky, 'href' ); } else { // @ts-ignore historySticky.parentNode.removeChild( historySticky ); } if ( talk ) { copyAttribute( talk, talkSticky, 'href' ); } else { // @ts-ignore talkSticky.parentNode.removeChild( talkSticky ); } } /** * Makes sticky header functional for modern Vector. * * @param {HTMLElement} header * @param {HTMLElement} stickyIntersection * @param {HTMLElement} userMenu * @param {Element} userMenuStickyContainer */ function makeStickyHeaderFunctional( header, stickyIntersection, userMenu, userMenuStickyContainer ) { /* eslint-disable-next-line compat/compat */ var stickyObserver = new IntersectionObserver( function ( entries ) { if ( !entries[ 0 ].isIntersecting && entries[ 0 ].boundingClientRect.top < 0 ) { // Viewport has crossed the bottom edge of firstHeading so show sticky header. // eslint-disable-next-line mediawiki/class-doc header.classList.add( STICKY_HEADER_VISIBLE_CLASS ); } else { // Viewport is above the bottom edge of firstHeading so hide sticky header. // eslint-disable-next-line mediawiki/class-doc header.classList.remove( STICKY_HEADER_VISIBLE_CLASS ); } } ), // Type declaration needed because of https://github.com/Microsoft/TypeScript/issues/3734#issuecomment-118934518 userMenuClone = /** @type {HTMLElement} */( userMenu.cloneNode( true ) ), userMenuStickyElementsWithIds = userMenuClone.querySelectorAll( '[ id ], [ data-event-name ]' ), userMenuStickyContainerInner = userMenuStickyContainer.querySelector( VECTOR_USER_LINKS_SELECTOR ); // Update all ids of the cloned user menu to make them unique. makeNodeTrackable( userMenuClone ); userMenuStickyElementsWithIds.forEach( makeNodeTrackable ); // Add gadget-injected items of the fixed user menu into the sticky header user menu. // Only applies to gadgets running after the code above and won't apply to existing items. mw.hook( 'util.addPortletLink' ).add( function ( /** @type {HTMLElement} */ item ) { // Get the nav tag parent of the gadget-injected menu item. We verify that .closest is // available for use because of feature detection in init function. var parentNav = item.closest( 'nav' ); // Check if a gadget is injecting an item into the user menu. if ( parentNav && parentNav.getAttribute( 'id' ) === 'p-personal' ) { var itemClone = /** @type {HTMLElement} */ ( item.cloneNode( true ) ), userMenuCloneUl = userMenuClone.querySelector( VECTOR_MENU_CONTENT_LIST_SELECTOR ); if ( userMenuCloneUl ) { makeNodeTrackable( itemClone ); userMenuCloneUl.appendChild( itemClone ); } } } ); // Clone the updated user menu to the sticky header. if ( userMenuStickyContainerInner ) { userMenuStickyContainerInner.appendChild( userMenuClone ); } prepareIcons( header, document.querySelector( '#ca-history a' ), document.querySelector( '#ca-talk a' ) ); stickyObserver.observe( stickyIntersection ); } /** * @param {HTMLElement} header */ function setupSearchIfNeeded( header ) { var searchToggle = header.querySelector( SEARCH_TOGGLE_SELECTOR ); if ( !( searchToggle && window.fetch && document.body.classList.contains( 'skin-vector-search-vue' ) ) ) { return; } // Load the `skins.vector.search` module here or setup an event handler to // load it depending on the outcome of T289718. After it loads, initialize the // search toggle. // // Example: // mw.loader.using( 'skins.vector.search', function () { // initSearchToggle( searchToggle ); // } ); } module.exports = function initStickyHeader() { var header = document.getElementById( STICKY_HEADER_ID ), stickyIntersection = document.getElementById( FIRST_HEADING_ID ), userMenu = document.getElementById( USER_MENU_ID ), userMenuStickyContainer = document.getElementsByClassName( STICKY_HEADER_USER_MENU_CONTAINER_CLASS )[ 0 ]; if ( !( header && header.closest && stickyIntersection && userMenu && userMenuStickyContainer && 'IntersectionObserver' in window ) ) { return; } makeStickyHeaderFunctional( header, stickyIntersection, userMenu, userMenuStickyContainer ); setupSearchIfNeeded( header ); };