mediawiki-extensions-Tabber.../modules/ext.tabberNeue.legacy/ext.tabberNeue.legacy.js

484 lines
14 KiB
JavaScript
Raw Normal View History

2021-06-21 17:49:47 +00:00
/**
2021-06-21 21:14:33 +00:00
* Initialize Tabber
*
* @param {HTMLElement} tabber
* @param {number} count
2021-06-21 17:49:47 +00:00
*/
function initTabber( tabber, count ) {
2023-07-05 21:43:41 +00:00
const
ACTIVETAB_SELECTOR = '[aria-selected="true"]',
ACTIVEPANEL_SELECTOR = '[aria-hidden="false"]';
2023-07-05 21:43:41 +00:00
const
config = require( './config.json' ),
2023-07-06 02:09:39 +00:00
header = tabber.querySelector( ':scope > .tabber__header' ),
2021-06-21 23:32:15 +00:00
tabList = document.createElement( 'nav' ),
2021-06-21 21:14:33 +00:00
prevButton = document.createElement( 'div' ),
nextButton = document.createElement( 'div' ),
indicator = document.createElement( 'div' );
2021-06-21 21:14:33 +00:00
2023-07-05 21:43:41 +00:00
const buildTabs = function () {
const
tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ),
2022-10-23 21:33:39 +00:00
fragment = new DocumentFragment(),
hashList = [];
2021-06-21 21:14:33 +00:00
Array.prototype.forEach.call( tabPanels, function ( tabPanel ) {
2023-07-05 21:43:41 +00:00
const
title = tabPanel.getAttribute( 'data-title' ),
2021-06-21 21:14:33 +00:00
tab = document.createElement( 'a' );
2023-07-05 21:43:41 +00:00
let hash = mw.util.escapeIdForAttribute( title ) + '-' + count;
// add to list of already used hash
hashList.push( hash );
// check if the hash is already used before
2023-07-05 21:43:41 +00:00
let hashCount = 0;
hashList.forEach(
function ( h ) {
hashCount += ( h === hash ) ? 1 : 0;
}
);
// append counter if the same hash already used
hash += ( hashCount === 1 ) ? '' : ( '-' + hashCount );
2021-06-21 21:14:33 +00:00
tabPanel.setAttribute( 'id', hash );
tabPanel.setAttribute( 'role', 'tabpanel' );
tabPanel.setAttribute( 'aria-labelledby', 'tab-' + hash );
tabPanel.setAttribute( 'aria-hidden', true );
2021-06-21 21:14:33 +00:00
tab.innerText = title;
tab.classList.add( 'tabber__tab' );
2021-06-21 21:14:33 +00:00
tab.setAttribute( 'role', 'tab' );
tab.setAttribute( 'href', '#' + hash );
tab.setAttribute( 'id', 'tab-' + hash );
2022-04-30 21:14:44 +00:00
tab.setAttribute( 'aria-selected', false );
2021-06-21 21:14:33 +00:00
tab.setAttribute( 'aria-controls', hash );
fragment.append( tab );
2021-06-21 21:14:33 +00:00
} );
2021-06-21 23:32:15 +00:00
tabList.append( fragment );
tabList.classList.add( 'tabber__tabs' );
2021-06-21 23:32:15 +00:00
tabList.setAttribute( 'role', 'tablist' );
prevButton.classList.add( 'tabber__header__prev' );
nextButton.classList.add( 'tabber__header__next' );
indicator.classList.add( 'tabber__indicator' );
header.append( prevButton, tabList, nextButton, indicator );
2021-06-21 21:14:33 +00:00
};
2021-06-21 17:49:47 +00:00
// There is probably a smarter way to do this
2023-07-05 21:43:41 +00:00
const getActualSize = function ( element, type ) {
let value;
switch ( type ) {
case 'width':
value = element.offsetWidth;
break;
case 'height':
value = element.offsetHeight;
break;
}
if ( value === 0 ) {
// Sometimes the tab is hidden by one of its parent elements
// and you can only get the actual size by cloning the element
2023-07-05 21:43:41 +00:00
const clone = element.cloneNode( true );
// Hide the cloned element
clone.style.cssText = 'position:absolute;visibility:hidden;';
// Add cloned element to body
document.body.appendChild( clone );
// Measure the size of the clone
switch ( type ) {
case 'width':
2022-10-22 03:10:38 +00:00
value = clone.offsetWidth;
break;
case 'height':
2022-10-22 03:10:38 +00:00
value = clone.offsetHeight;
break;
}
// Remove the cloned element
clone.parentNode.removeChild( clone );
}
return value;
};
2023-07-05 21:43:41 +00:00
const updateSectionHeight = function ( section, activePanel ) {
const height = getActualSize( activePanel, 'height' );
section.style.height = height + 'px';
// Scroll to tab
section.scrollLeft = activePanel.offsetLeft;
};
2023-07-05 21:43:41 +00:00
const onElementResize = function ( entries ) {
if ( entries && entries.length > 0 ) {
2023-07-05 21:43:41 +00:00
const targetPanel = entries[ 0 ].target;
const section = targetPanel.parentNode;
updateSectionHeight( section, targetPanel );
}
};
2023-07-05 21:43:41 +00:00
const updateIndicator = function ( showTransition ) {
const
activeTab = tabList.querySelector( ACTIVETAB_SELECTOR ),
width = getActualSize( activeTab, 'width' );
indicator.style.width = width + 'px';
indicator.style.transform = 'translateX(' + ( activeTab.offsetLeft - tabList.scrollLeft ) + 'px)';
indicator.style.transition = '';
// Do not animate when user prefers reduced motion
if ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
return;
}
if ( showTransition ) {
indicator.style.transition = 'transform 250ms ease, width 250ms ease';
}
};
2023-07-05 21:43:41 +00:00
let resizeObserver = null;
if ( window.ResizeObserver ) {
resizeObserver = new ResizeObserver( mw.util.debounce( 250, onElementResize ) );
}
2021-06-21 21:14:33 +00:00
buildTabs();
tabber.prepend( header );
2021-06-21 21:14:33 +00:00
// Initalize previous and next buttons
2023-07-05 21:43:41 +00:00
const initButtons = function () {
const
PREVCLASS = 'tabber__header--prev-visible',
2021-06-21 21:14:33 +00:00
NEXTCLASS = 'tabber__header--next-visible';
/* eslint-disable mediawiki/class-doc */
2023-07-05 21:43:41 +00:00
const scrollTabs = function ( offset ) {
const scrollLeft = tabList.scrollLeft + offset;
2021-06-21 21:14:33 +00:00
// Scroll to the start
if ( scrollLeft <= 0 ) {
2021-06-21 23:32:15 +00:00
tabList.scrollLeft = 0;
} else {
tabList.scrollLeft = scrollLeft;
}
};
2023-07-05 21:43:41 +00:00
const updateButtons = function () {
const scrollLeft = tabList.scrollLeft;
// Scroll to the start
if ( scrollLeft <= 0 ) {
header.classList.remove( PREVCLASS );
header.classList.add( NEXTCLASS );
2021-06-21 21:14:33 +00:00
} else {
// Scroll to the end
2021-06-21 23:32:15 +00:00
if ( scrollLeft + tabList.offsetWidth >= tabList.scrollWidth ) {
header.classList.remove( NEXTCLASS );
header.classList.add( PREVCLASS );
2021-06-21 17:49:47 +00:00
} else {
header.classList.add( NEXTCLASS );
header.classList.add( PREVCLASS );
}
}
2021-06-21 21:14:33 +00:00
};
2023-07-05 21:43:41 +00:00
const setupButtons = function () {
const isScrollable = ( tabList.scrollWidth > header.offsetWidth );
2021-06-21 21:14:33 +00:00
if ( isScrollable ) {
2023-07-05 21:43:41 +00:00
const scrollOffset = header.offsetWidth / 2;
2021-06-21 21:14:33 +00:00
// Just to add the right classes
updateButtons();
2021-06-21 21:14:33 +00:00
// Button only shows on pointer devices
if ( matchMedia( '(hover: hover)' ).matches ) {
prevButton.addEventListener( 'click', function () {
scrollTabs( -scrollOffset );
}, false );
nextButton.addEventListener( 'click', function () {
scrollTabs( scrollOffset );
}, false );
}
2021-06-21 21:14:33 +00:00
} else {
header.classList.remove( NEXTCLASS );
header.classList.remove( PREVCLASS );
2021-06-21 21:14:33 +00:00
}
};
/* eslint-enable mediawiki/class-doc */
2021-06-21 21:14:33 +00:00
setupButtons();
// Listen for scroll event on header
// Also triggered by side-scrolling using other means other than the buttons
tabList.addEventListener( 'scroll', function () {
window.requestAnimationFrame( function () {
updateButtons();
updateIndicator( false );
} );
} );
// Add class to enable animation
// TODO: Change default to true when Safari bug is resolved
//
// Safari does not scroll when scroll-behavior: smooth and overflow: hidden
// Therefore the default is set to false now until it gets resolved
// https://bugs.webkit.org/show_bug.cgi?id=238497
if ( !config || config.enableAnimation ) {
tabber.classList.add( 'tabber--animate' );
}
// Listen for element resize
if ( window.ResizeObserver ) {
2023-07-05 21:43:41 +00:00
const tabListResizeObserver = new ResizeObserver(
mw.util.debounce( 250, setupButtons )
);
tabListResizeObserver.observe( tabList );
}
2021-06-21 21:14:33 +00:00
};
// NOTE: Are there better ways to scope them?
2023-07-05 21:43:41 +00:00
const xhr = new XMLHttpRequest();
let currentRequest = null, nextRequest = null;
/**
* Loads page contents into tab
*
* @param {HTMLElement} targetPanel
* @param {string} url
*/
function loadPage( targetPanel, url ) {
2023-07-05 21:43:41 +00:00
const requestData = {
url: url,
targetPanel: targetPanel
};
if ( currentRequest ) {
if ( currentRequest.url !== requestData.url ) {
nextRequest = requestData;
}
// busy
return;
}
xhr.open( 'GET', url );
currentRequest = requestData;
xhr.send( null );
}
2021-06-21 21:14:33 +00:00
/**
* Show panel based on target hash
*
* @param {string} targetHash
* @param {boolean} allowRemoteLoad
* @param {boolean} scrollIntoView
2021-06-21 21:14:33 +00:00
*/
function showPanel( targetHash, allowRemoteLoad, scrollIntoView ) {
2023-07-05 21:43:41 +00:00
const
targetPanel = document.getElementById( targetHash ),
2021-06-21 21:14:33 +00:00
targetTab = document.getElementById( 'tab-' + targetHash ),
section = targetPanel.parentNode,
2023-07-05 21:43:41 +00:00
activePanel = section.querySelector( ':scope > ' + ACTIVEPANEL_SELECTOR );
let parentPanel, parentSection;
2023-07-05 21:43:41 +00:00
const loadTransclusion = function () {
const
loading = document.createElement( 'div' ),
loadingIndicator = document.createElement( 'div' );
targetPanel.setAttribute( 'aria-live', 'polite' );
targetPanel.setAttribute( 'aria-busy', 'true' );
loading.setAttribute( 'class', 'tabber__transclusion--loading' );
loadingIndicator.setAttribute( 'class', 'tabber__loading-indicator' );
loading.appendChild( loadingIndicator );
targetPanel.textContent = '';
targetPanel.appendChild( loading );
loadPage( targetPanel, targetPanel.dataset.tabberLoadUrl );
};
2021-06-21 21:14:33 +00:00
if ( activePanel ) {
// Just to be safe since there can be multiple active tabs
// even if there shouldn't be
2023-07-05 21:43:41 +00:00
const activeTabs = tabList.querySelectorAll( ACTIVETAB_SELECTOR );
if ( activeTabs.length > 0 ) {
Array.prototype.forEach.call( activeTabs, function ( activeTab ) {
activeTab.setAttribute( 'aria-selected', false );
} );
2021-06-21 17:49:47 +00:00
}
if ( resizeObserver ) {
resizeObserver.unobserve( activePanel );
}
activePanel.setAttribute( 'aria-hidden', true );
2021-06-21 21:14:33 +00:00
}
// Add active class to the tab
targetTab.setAttribute( 'aria-selected', true );
targetPanel.setAttribute( 'aria-hidden', false );
2021-06-21 21:14:33 +00:00
updateIndicator( true );
// Lazyload transclusion if needed
if ( allowRemoteLoad &&
targetPanel.dataset.tabberPendingLoad &&
targetPanel.dataset.tabberLoadUrl
) {
loadTransclusion();
}
updateSectionHeight( section, targetPanel );
// If we're inside another tab, trigger its logic to recalc its height
parentSection = section;
// ResizeObserver should take care of the recursivity already
/* eslint-disable-next-line no-unmodified-loop-condition */
while ( !resizeObserver ) {
parentPanel = parentSection.closest( ACTIVEPANEL_SELECTOR );
if ( !parentPanel ) {
break;
}
parentSection = parentPanel.parentNode;
updateSectionHeight( parentSection, parentPanel );
}
if ( resizeObserver ) {
resizeObserver.observe( targetPanel );
}
2021-06-21 21:14:33 +00:00
/* eslint-enable mediawiki/class-doc */
// If requested, scroll the tabber into view (browser fails to do that
// on its own as it tries to look up the anchor before we add it to the
// DOM)
if ( scrollIntoView ) {
targetTab.scrollIntoView();
}
2021-06-21 21:14:33 +00:00
}
/**
* Event handler for XMLHttpRequest where ends loading
*/
function onLoadEndPage() {
2023-07-05 21:43:41 +00:00
const targetPanel = currentRequest.targetPanel;
if ( xhr.status !== 200 ) {
2023-07-05 21:43:41 +00:00
const err = document.createElement( 'div' ),
errMsg = mw.message( 'error' ).text() + ': HTTP ' + xhr.status;
err.setAttribute( 'class', 'tabber__transclusion--error error' );
err.appendChild( document.createTextNode( errMsg ) );
targetPanel.textContent = '';
targetPanel.appendChild( err );
} else {
2023-07-05 21:43:41 +00:00
const result = JSON.parse( xhr.responseText );
targetPanel.innerHTML = result.parse.text;
// wikipage.content hook requires a jQuery object
/* eslint-disable-next-line no-undef */
mw.hook( 'wikipage.content' ).fire( $( targetPanel ) );
delete targetPanel.dataset.tabberPendingLoad;
delete targetPanel.dataset.tabberLoadUrl;
targetPanel.setAttribute( 'aria-busy', 'false' );
}
2023-07-05 21:43:41 +00:00
const targetHash = targetPanel.getAttribute( 'id' ),
section = targetPanel.parentNode,
activePanel = section.querySelector( ':scope > ' + ACTIVEPANEL_SELECTOR );
if ( nextRequest ) {
currentRequest = nextRequest;
nextRequest = null;
xhr.open( 'GET', currentRequest.url );
xhr.send( null );
} else {
currentRequest = null;
}
if ( activePanel ) {
// Refresh height
showPanel( targetHash, false );
}
}
xhr.timeout = 20000;
xhr.addEventListener( 'loadend', onLoadEndPage );
2021-06-21 21:14:33 +00:00
/**
* Retrieve target hash and trigger show panel
* If no targetHash is invalid, use the first panel
*
* @param {boolean} scrollIntoView
2021-06-21 21:14:33 +00:00
*/
function switchTab( scrollIntoView ) {
2023-07-05 21:43:41 +00:00
let targetHash = new mw.Uri( location.href ).fragment;
2021-06-21 21:14:33 +00:00
// Switch to the first tab if no targetHash or no tab is detected and do not scroll to it
// TODO: Remove the polyfill with CSS.escape when we are dropping IE support
if ( !targetHash || !tabList.querySelector( '#tab-' + targetHash.replace( /[^a-zA-Z0-9-_]/g, '\\$&' ) ) ) {
targetHash = tabList.firstElementChild.getAttribute( 'id' ).slice( 4 );
scrollIntoView = false;
2021-06-21 21:14:33 +00:00
}
showPanel( targetHash, false, scrollIntoView );
2021-06-21 21:14:33 +00:00
}
switchTab( true );
2021-06-21 21:14:33 +00:00
initButtons();
2021-06-21 21:14:33 +00:00
// window.addEventListener( 'hashchange', switchTab, false );
// Respond to clicks on the nav tabs
Array.prototype.forEach.call( tabList.children, function ( tab ) {
tab.addEventListener( 'click', function ( event ) {
2023-07-05 21:43:41 +00:00
const targetHash = tab.getAttribute( 'href' ).slice( 1 );
2021-06-21 21:14:33 +00:00
event.preventDefault();
if ( !config || config.updateLocationOnTabChange ) {
// Add hash to the end of the URL
history.replaceState( null, null, '#' + targetHash );
}
showPanel( targetHash, true );
2021-06-21 21:14:33 +00:00
} );
} );
2021-06-21 17:49:47 +00:00
2021-06-21 21:14:33 +00:00
tabber.classList.add( 'tabber--live' );
}
2021-06-21 17:49:47 +00:00
2021-06-21 21:14:33 +00:00
function main() {
2023-07-06 02:09:39 +00:00
const
tabbers = document.querySelectorAll( '.tabber:not( .tabber--live )' ),
style = document.getElementById( 'tabber-style' );
2021-06-21 17:49:47 +00:00
2021-06-21 21:14:33 +00:00
if ( tabbers ) {
2023-07-05 21:43:41 +00:00
let count = 0;
2021-06-21 21:14:33 +00:00
mw.loader.load( 'ext.tabberNeue.icons' );
Array.prototype.forEach.call( tabbers, function ( tabber ) {
initTabber( tabber, count );
count++;
2021-06-21 17:49:47 +00:00
} );
// Remove critical render styles after done
// IE compatiblity
style.parentNode.removeChild( style );
2021-06-21 21:14:33 +00:00
}
}
2021-06-21 17:49:47 +00:00
if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
main();
} else {
document.addEventListener( 'DOMContentLoaded', function () {
main();
} );
}
2023-07-06 02:09:39 +00:00
/*
* Add hooks for Tabber when Visual Editor is used.
*/
mw.loader.using( 'ext.visualEditor.desktopArticleTarget.init', function () {
// After saving edits
mw.hook( 'postEdit.afterRemoval' ).add( () => {
main();
} );
} );