Make arrows/carets links whenever we know where the user came from

I tried to arrange the new code in a way that it is compact, but still
readable. I think it's possible to arrange it even better, but browser
tests should be added first, in my opinion.

Bug: T205271
Change-Id: I1d579ef9d2787fc43c0a8bbf61c583f602dca5d4
This commit is contained in:
Thiemo Kreuz (WMDE) 2018-11-19 10:25:21 +01:00 committed by WMDE-Fisch
parent 9c4620966f
commit 2b3a62c26b
2 changed files with 50 additions and 2 deletions

View file

@ -1,3 +1,15 @@
:target .mw-cite-targeted-backlink {
font-weight: bold;
}
.mw-cite-up-arrow-backlink {
display: none;
}
:target .mw-cite-up-arrow-backlink {
display: inline;
}
:target .mw-cite-up-arrow {
display: none;
}

View file

@ -7,12 +7,48 @@
mw.hook( 'wikipage.content' ).add( function ( $content ) {
// We are going to use the ID in the code below, so better be sure one is there.
$content.find( '.reference[id] > a' ).click( function () {
var id = $( this ).parent().attr( 'id' ),
var $backlink, $backlinkWrapper, $upArrowLink, textNode, upArrow,
id = $( this ).parent().attr( 'id' ),
className = 'mw-cite-targeted-backlink';
$content.find( '.' + className ).removeClass( className );
// The additional "*" avoids the "↑" (when there is only one backlink) becoming bold.
$content.find( '.mw-cite-backlink * a[href="#' + id + '"]' ).addClass( className );
$backlink = $content.find( '.mw-cite-backlink * a[href="#' + id + '"]' )
.addClass( className );
if ( !$backlink.length ) {
return;
}
$backlinkWrapper = $backlink.closest( '.mw-cite-backlink' );
$upArrowLink = $backlinkWrapper.find( '.mw-cite-up-arrow-backlink' );
if ( !$upArrowLink.length ) {
textNode = $backlinkWrapper[ 0 ].firstChild;
if ( textNode &&
textNode.nodeType === Node.TEXT_NODE &&
textNode.data.trim() !== ''
) {
upArrow = textNode.data.trim();
// The text node typically contains "↑ ", and we need to keep the space.
textNode.data = textNode.data.replace( upArrow, '' );
// Create a plain text and a clickable "↑". CSS :target selectors make sure only
// one is visible at a time.
$upArrowLink = $( '<a>' )
.addClass( 'mw-cite-up-arrow-backlink' )
.text( upArrow );
$backlinkWrapper.prepend(
$( '<span>' )
.addClass( 'mw-cite-up-arrow' )
.text( upArrow ),
$upArrowLink
);
}
}
$upArrowLink.attr( 'href', $backlink.attr( 'href' ) );
} );
} );
}() );