wikimedia/mediawiki-extensions-Cite
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Cite synced 2024-11-23 14:36:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] Move result items rendering to ReferenceResultWidget

Browse source 
The exact rendering of each item should be part of the widget.
This also allows a better application of the sub-ref indent.

Bug: T375841
Change-Id: Ic2c24f40d59f41b316c6d6f362726c1ee68f2102
This commit is contained in:
WMDE-Fisch 2024-09-28 00:01:15 +02:00
parent 805f691188
commit 73917d493b
7 changed files with 77 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
extension.json
View file

@ -134,7 +134,6 @@
"ve.ui.MWReferenceDialog.less",
"ve.ui.MWReferenceContextItem.less",
"ve.ui.MWReferenceResultWidget.less",
"ve.ui.MWReferenceSearchWidget.less",
"ve.ui.MWCitationDialogTool.less",
"ve.ui.MWSetExtendsContentDialog.less"
],

22
modules/ve-cite/ve.ui.MWReferenceResultWidget.js
View file

@ -12,15 +12,33 @@
*
* @constructor
* @extends OO.ui.OptionWidget
* @param {Object} [config] Configuration options
* @param {Object} config Configuration options
* @param {Object} config.item Result item
*/
ve.ui.MWReferenceResultWidget = function VeUiMWReferenceResultWidget() {
ve.ui.MWReferenceResultWidget = function VeUiMWReferenceResultWidget( config ) {
// Parent constructor
ve.ui.MWReferenceResultWidget.super.apply( this, arguments );
// Initialization
const item = config.item;
this.$element
.addClass( 've-ui-mwReferenceResultWidget' );
if ( item.reference.extendsRef !== undefined ) {
this.$element.addClass( 've-ui-mwReferenceResultWidget-sub' );
}
const $footnoteLabel = $( '<div>' )
.addClass( 've-ui-mwReferenceResultWidget-footnote' )
.text( '[' + item.footnoteLabel + ']' );
const $name = $( '<div>' )
.addClass( 've-ui-mwReferenceResultWidget-name' )
.toggleClass( 've-ui-mwReferenceResultWidget-name-autogenerated', /^:\d+$/.test( item.name ) )
.text( item.name );
this.setLabel( $footnoteLabel.add( $name ).add( item.$refContent ) );
this.setData( item.reference );
};
/* Inheritance */

33
modules/ve-cite/ve.ui.MWReferenceResultWidget.less
View file

@ -14,6 +14,11 @@
overflow: hidden;
border-bottom: @border-width-base @border-style-base @border-color-muted;
// Class applied only to subrefs
&-sub .oo-ui-labelElement-label {
margin-left: 2em;
}
&:last-child {
border-bottom: 0;
}
@ -30,4 +35,32 @@
pointer-events: none;
word-wrap: break-word;
}
// How the footnote marker appears in the text, e.g. [1]
&-footnote {
float: left;
margin-right: 0.75em;
}
// A reference's unique identifier as provided via the name="…" attribute
&-name {
opacity: @opacity-medium;
float: right;
margin-left: 0.75em;
margin-bottom: 0.05em;
// Limit overly long names and push them to the side
max-width: 40%;
text-align: right;
// Names like ":0" are less meaningful, still useful esp. when switching to wikitext
&-autogenerated {
opacity: @opacity-low;
}
}
// Preview the reference's content with less whitespace, relevant when it contains e.g. tables
.ve-ui-mwPreviewElement * {
margin-bottom: 0;
margin-top: 0;
}
}

21
modules/ve-cite/ve.ui.MWReferenceSearchWidget.js
View file

@ -186,7 +186,7 @@ ve.ui.MWReferenceSearchWidget.prototype.isIndexEmpty = function () {
*/
ve.ui.MWReferenceSearchWidget.prototype.buildSearchResults = function ( query ) {
query = query.trim().toLowerCase();
const items = [];
const results = [];
if ( !this.index ) {
this.index = this.buildSearchIndex();
@ -195,24 +195,9 @@ ve.ui.MWReferenceSearchWidget.prototype.buildSearchResults = function ( query )
for ( let i = 0; i < this.index.length; i++ ) {
const item = this.index[ i ];
if ( item.searchableText.indexOf( query ) >= 0 ) {
const $footnoteLabel = $( '<div>' )
.addClass( 've-ui-mwReferenceSearchWidget-footnote' )
.text( '[' + item.footnoteLabel + ']' );
if ( item.reference.extendsRef !== undefined ) {
$footnoteLabel.addClass( 've-ui-mwReferenceSearchWidget-footnote-sub' );
}
const $name = $( '<div>' )
.addClass( 've-ui-mwReferenceSearchWidget-name' )
.toggleClass( 've-ui-mwReferenceSearchWidget-name-autogenerated', /^:\d+$/.test( item.name ) )
.text( item.name );
items.push(
new ve.ui.MWReferenceResultWidget( {
data: item.reference,
label: $footnoteLabel.add( $name ).add( item.$refContent )
} )
);
results.push( new ve.ui.MWReferenceResultWidget( { item: item } ) );
}
}
return items;
return results;
};

43
modules/ve-cite/ve.ui.MWReferenceSearchWidget.less
View file

@ -1,43 +0,0 @@
/*!
* VisualEditor MediaWiki UserInterface MWReferenceSearchWidget styles.
*
* @copyright 2011-2018 VisualEditor Team's Cite sub-team and others; see AUTHORS.txt
* @license MIT
*/
@import 'mediawiki.skin.variables.less';
.ve-ui-mwReferenceSearchWidget {
// How the footnote marker appears in the text, e.g. [1]
&-footnote {
float: left;
margin-right: 0.75em;
// Class applied only to subrefs
&-sub {
margin-left: 2em;
}
}
// A reference's unique identifier as provided via the name="…" attribute
&-name {
opacity: @opacity-medium;
float: right;
margin-left: 0.75em;
margin-bottom: 0.05em;
// Limit overly long names and push them to the side
max-width: 40%;
text-align: right;
// Names like ":0" are less meaningful, still useful esp. when switching to wikitext
&-autogenerated {
opacity: @opacity-low;
}
}
// Preview the reference's content with less whitespace, relevant when it contains e.g. tables
.ve-ui-mwPreviewElement * {
margin-bottom: 0;
margin-top: 0;
}
}

4
tests/cypress/e2e/utils/ve.helper.js
View file

@ -82,12 +82,12 @@ export function getCiteReuseDialogRefResult( rowNumber ) {
}
export function getCiteReuseDialogRefResultName( rowNumber ) {
return cy.get( '.ve-ui-mwReferenceSearchWidget .ve-ui-mwReferenceResultWidget .ve-ui-mwReferenceSearchWidget-name' )
return cy.get( '.ve-ui-mwReferenceSearchWidget .ve-ui-mwReferenceResultWidget .ve-ui-mwReferenceResultWidget-name' )
.eq( rowNumber - 1 );
}
export function getCiteReuseDialogRefResultCitation( rowNumber ) {
return cy.get( '.ve-ui-mwReferenceSearchWidget .ve-ui-mwReferenceResultWidget .ve-ui-mwReferenceSearchWidget-footnote' )
return cy.get( '.ve-ui-mwReferenceSearchWidget .ve-ui-mwReferenceResultWidget .ve-ui-mwReferenceResultWidget-footnote' )
.eq( rowNumber - 1 );
}

25
tests/qunit/ve-cite/ve.ui.MWReferenceResultWidget.test.js
View file

@ -1,9 +1,22 @@
'use strict';
QUnit.module( 've.ui.MWReferenceResultWidget (Cite)', ve.test.utils.newMwEnvironment() );
( function () {
QUnit.module( 've.ui.MWReferenceResultWidget (Cite)', ve.test.utils.newMwEnvironment() );
QUnit.test( 'Initialization', ( assert ) => {
const widget = new ve.ui.MWReferenceResultWidget();
assert.true( widget instanceof OO.ui.OptionWidget );
assert.strictEqual( widget.$element.children( '.ve-ui-mwReferenceResultWidget-shield' ).length, 0 );
} );
function getConfigMock() {
return {
item: {
$refContent: '',
reference: {},
footnoteLabel: '',
name: ''
}
};
}
QUnit.test( 'Initialization', ( assert ) => {
const widget = new ve.ui.MWReferenceResultWidget( getConfigMock() );
assert.true( widget instanceof OO.ui.OptionWidget );
assert.strictEqual( widget.$element.children( '.ve-ui-mwReferenceResultWidget-shield' ).length, 0 );
} );
}() );