Sticky header: Add a link to the 'subject' page when on talk pages

The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.

Something similar is done in VE.

Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe
This commit is contained in:
Ed Sanders 2022-07-22 22:21:51 +01:00
parent 95ce5900bf
commit c9a04099d0
3 changed files with 37 additions and 2 deletions

View file

@ -69,6 +69,15 @@ abstract class SkinVector extends SkinMustache {
'tabindex' => '-1',
'class' => 'sticky-header-icon'
];
private const SUBJECT_ICON = [
'href' => '#',
'id' => 'ca-subject-sticky-header',
'event' => 'subject-sticky-header',
'icon' => 'wikimedia-article',
'is-quiet' => true,
'tabindex' => '-1',
'class' => 'sticky-header-icon'
];
private const HISTORY_ICON = [
'href' => '#',
'id' => 'ca-history-sticky-header',
@ -378,6 +387,7 @@ abstract class SkinVector extends SkinMustache {
final protected function getStickyHeaderData( $searchBoxData, $includeEditIcons ): array {
$btns = [
self::TALK_ICON,
self::SUBJECT_ICON,
self::HISTORY_ICON,
self::WATCHSTAR_ICON,
];

View file

@ -183,14 +183,16 @@ function watchstarCallback( $link, isWatched, expiry ) {
* @param {Element} header
* @param {Element|null} history
* @param {Element|null} talk
* @param {Element|null} subject
* @param {Element|null} watch
*/
function prepareIcons( header, history, talk, watch ) {
function prepareIcons( header, history, talk, subject, watch ) {
const historySticky = header.querySelector( '#ca-history-sticky-header' ),
talkSticky = header.querySelector( '#ca-talk-sticky-header' ),
subjectSticky = header.querySelector( '#ca-subject-sticky-header' ),
watchSticky = header.querySelector( '#ca-watchstar-sticky-header' );
if ( !historySticky || !talkSticky || !watchSticky ) {
if ( !historySticky || !talkSticky || !subjectSticky || !watchSticky ) {
throw new Error( 'Sticky header has unexpected HTML' );
}
@ -199,11 +201,19 @@ function prepareIcons( header, history, talk, watch ) {
} else {
removeNode( historySticky );
}
if ( talk ) {
copyButtonAttributes( talk, talkSticky );
} else {
removeNode( talkSticky );
}
if ( subject ) {
copyButtonAttributes( subject, subjectSticky );
} else {
removeNode( subjectSticky );
}
if ( watch && watch.parentNode instanceof Element ) {
const watchContainer = watch.parentNode;
copyButtonAttributes( watch, watchSticky );
@ -410,9 +420,23 @@ function makeStickyHeaderFunctional(
userMenuStickyContainerInner.appendChild( prepareUserMenu( userMenu ) );
}
let namespaceName = mw.config.get( 'wgCanonicalNamespace' );
const namespaceNumber = mw.config.get( 'wgNamespaceNumber' );
if ( namespaceNumber >= 0 && namespaceNumber % 2 === 1 ) {
// Remove '_talk' to get subject namespace
namespaceName = namespaceName.slice( 0, -5 );
}
// Title::getNamespaceKey()
let namespaceKey = namespaceName.toLowerCase() || 'main';
if ( namespaceKey === 'file' ) {
namespaceKey = 'image';
}
const namespaceTabId = 'ca-nstab-' + namespaceKey;
prepareIcons( header,
document.querySelector( '#ca-history a' ),
document.querySelector( '#ca-talk:not( .selected ) a' ),
document.querySelector( '#' + namespaceTabId + ':not( .selected ) a' ),
document.querySelector( '#ca-watch a, #ca-unwatch a' )
);

View file

@ -261,6 +261,7 @@
"class": "ResourceLoaderOOUIIconPackModule",
"variants": [],
"icons": [
"article",
"edit",
"editLock",
"halfStar",