diff --git a/extension.json b/extension.json index 8f10b1ced..11aea9260 100644 --- a/extension.json +++ b/extension.json @@ -77,6 +77,20 @@ "cite_references_link_many_accessibility_label" ] }, + "ext.cite.ux-enhancements": { + "scripts": [ + "ext.cite.a11y.js", + "ext.cite.highlighting.js" + ], + "styles": [ + "ext.cite.a11y.css", + "ext.cite.highlighting.css" + ], + "messages": [ + "cite_references_link_accessibility_label", + "cite_references_link_many_accessibility_label" + ] + }, "ext.cite.style": { "class": "CiteCSSFileModule", "styles": "ext.cite.style.css", diff --git a/includes/Cite.php b/includes/Cite.php index 1d091a1ec..48759b9df 100644 --- a/includes/Cite.php +++ b/includes/Cite.php @@ -218,7 +218,7 @@ class Cite { $this->mInCite = false; $parserOutput = $parser->getOutput(); - $parserOutput->addModules( 'ext.cite.a11y' ); + $parserOutput->addModules( 'ext.cite.ux-enhancements' ); $parserOutput->addModuleStyles( 'ext.cite.styles' ); $frame->setVolatile(); diff --git a/modules/ext.cite.highlighting.css b/modules/ext.cite.highlighting.css new file mode 100644 index 000000000..2b2dde9ca --- /dev/null +++ b/modules/ext.cite.highlighting.css @@ -0,0 +1,3 @@ +:target .mw-cite-targeted-backlink { + font-weight: bold; +} diff --git a/modules/ext.cite.highlighting.js b/modules/ext.cite.highlighting.js new file mode 100644 index 000000000..703c4cf3f --- /dev/null +++ b/modules/ext.cite.highlighting.js @@ -0,0 +1,18 @@ +/** + * @author Thiemo Kreuz + */ +( function () { + 'use strict'; + + 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' ), + 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 ); + } ); + } ); +}() );