Use Parsoid's new Cite HTML and CSS

Starting with I21fbbd3247bf7801e5ef9bd5312f95777f4dd6ef, Parsoid
will emit a new HTML for its Cite extension, which enables CSS
styling. In I487095df8a7c4241a14f7b4480360f6774130bec the new
module 'ext.cite.style' is added to the Cite extension to style
this new HTML format.

This patch
* Loads the ext.cite.style module if the Cite extension is
  present.
* Uses the new HTML format for the internal structure of
  reference and reference list nodes, so they are correctly
  styled.

Backwards compatibility: Only new HTML is used internally in VE,
so as long as ext.cite.style can be loaded the new styles will be
used. It does not depend on which format Parsoid returns, so this
patch only depends on the Cite extension patch, not on the Parsoid
one.

Note: The only way I've found of adding a ext.cite.style dependency
only if Cite is present is to register the whole
ext.visualEditor.mwreference module in the
onResourceLoaderRegisterModules hook. Maybe someone can point to
a better way?

Bug: T86782
Change-Id: Ibf333a502d64d2ed6e029221458b7c606554e414
This commit is contained in:
Marc Ordinas i Llopis 2015-04-29 09:17:28 -07:00 committed by James D. Forrester
parent cfb378930f
commit 7a33613d23
5 changed files with 154 additions and 65 deletions

View file

@ -460,6 +460,71 @@ class VisualEditorHooks {
}
$resourceLoader->register( $addModules );
// Register ext.visualEditor.mwreference here, as it depends on the new
// Cite CSS style module ext.cite.style only if the Cite extension is
// present.
// This is a temporary hack, once the Cite extension uses the new CSS
// for everything (and it takes care of loading ext.cite.style itself),
// it can be removed from here and put back in extension.json.
$mwreferenceModule = $veResourceTemplate + array(
'scripts' => array(
'modules/ve-mw/ui/widgets/ve.ui.MWReferenceGroupInputWidget.js',
'modules/ve-mw/ui/widgets/ve.ui.MWReferenceSearchWidget.js',
'modules/ve-mw/ui/widgets/ve.ui.MWReferenceResultWidget.js',
'modules/ve-mw/ui/commands/ve.ui.MWUseExistingReferenceCommand.js',
'modules/ve-mw/ui/dialogs/ve.ui.MWCitationDialog.js',
'modules/ve-mw/ui/dialogs/ve.ui.MWReferencesListDialog.js',
'modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js',
'modules/ve-mw/ui/widgets/ve.ui.MWReferenceSourceSelectWidget.js',
'modules/ve-mw/ui/tools/ve.ui.MWReferenceDialogTool.js',
'modules/ve-mw/ui/tools/ve.ui.MWCitationDialogTool.js',
'modules/ve-mw/ui/contextitems/ve.ui.MWReferenceContextItem.js',
'modules/ve-mw/ui/contextitems/ve.ui.MWReferencesListContextItem.js',
'modules/ve-mw/ui/contextitems/ve.ui.MWCitationContextItem.js',
'modules/ve-mw/ui/actions/ve.ui.MWCitationAction.js',
),
'styles' => array(
'modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceGroupInputWidget.css',
'modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceResultWidget.css',
'modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceSearchWidget.css',
),
'dependencies' => array(
'ext.visualEditor.mwreference.core',
'ext.visualEditor.mwtransclusion',
'ext.visualEditor.mediawiki'
),
'messages' => array(
'visualeditor-dialog-reference-editing-reused',
'visualeditor-dialog-reference-options-group-label',
'visualeditor-dialog-reference-options-group-placeholder',
'visualeditor-dialog-reference-options-name-label',
'visualeditor-dialog-reference-options-section',
'visualeditor-dialog-reference-title',
'visualeditor-dialog-reference-useexisting-full-label',
'visualeditor-dialog-reference-useexisting-label',
'visualeditor-dialog-reference-useexisting-tool',
'visualeditor-dialog-referenceslist-contextitem-description-general',
'visualeditor-dialog-referenceslist-contextitem-description-named',
'visualeditor-dialog-referenceslist-title',
'visualeditor-dialogbutton-reference-full-label',
'visualeditor-dialogbutton-reference-tooltip',
'visualeditor-dialogbutton-referenceslist-tooltip',
'visualeditor-reference-input-placeholder',
),
'targets' => array( 'desktop', 'mobile' ),
);
if ( isset( $resourceModules['ext.cite.style'] ) ||
$resourceLoader->isModuleRegistered( 'ext.cite.style' ) ) {
$mwreferenceModule['dependencies'][] = 'ext.cite.style';
}
$resourceLoader->register( array( 'ext.visualEditor.mwreference' => $mwreferenceModule ) );
return true;
}

View file

@ -1315,56 +1315,6 @@
"mobile"
]
},
"ext.visualEditor.mwreference": {
"scripts": [
"modules/ve-mw/ui/widgets/ve.ui.MWReferenceGroupInputWidget.js",
"modules/ve-mw/ui/widgets/ve.ui.MWReferenceSearchWidget.js",
"modules/ve-mw/ui/widgets/ve.ui.MWReferenceResultWidget.js",
"modules/ve-mw/ui/commands/ve.ui.MWUseExistingReferenceCommand.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWCitationDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWReferencesListDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js",
"modules/ve-mw/ui/widgets/ve.ui.MWReferenceSourceSelectWidget.js",
"modules/ve-mw/ui/tools/ve.ui.MWReferenceDialogTool.js",
"modules/ve-mw/ui/tools/ve.ui.MWCitationDialogTool.js",
"modules/ve-mw/ui/contextitems/ve.ui.MWReferenceContextItem.js",
"modules/ve-mw/ui/contextitems/ve.ui.MWReferencesListContextItem.js",
"modules/ve-mw/ui/contextitems/ve.ui.MWCitationContextItem.js",
"modules/ve-mw/ui/actions/ve.ui.MWCitationAction.js"
],
"styles": [
"modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceGroupInputWidget.css",
"modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceResultWidget.css",
"modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceSearchWidget.css"
],
"dependencies": [
"ext.visualEditor.mwreference.core",
"ext.visualEditor.mwtransclusion",
"ext.visualEditor.mediawiki"
],
"messages": [
"visualeditor-dialog-reference-editing-reused",
"visualeditor-dialog-reference-options-group-label",
"visualeditor-dialog-reference-options-group-placeholder",
"visualeditor-dialog-reference-options-name-label",
"visualeditor-dialog-reference-options-section",
"visualeditor-dialog-reference-title",
"visualeditor-dialog-reference-useexisting-full-label",
"visualeditor-dialog-reference-useexisting-label",
"visualeditor-dialog-reference-useexisting-tool",
"visualeditor-dialog-referenceslist-contextitem-description-general",
"visualeditor-dialog-referenceslist-contextitem-description-named",
"visualeditor-dialog-referenceslist-title",
"visualeditor-dialogbutton-reference-full-label",
"visualeditor-dialogbutton-reference-tooltip",
"visualeditor-dialogbutton-referenceslist-tooltip",
"visualeditor-reference-input-placeholder"
],
"targets": [
"desktop",
"mobile"
]
},
"ext.visualEditor.mwtransclusion.core": {
"scripts": [
"modules/ve-mw/dm/nodes/ve.dm.MWTransclusionNode.js",

View file

@ -25,7 +25,13 @@ ve.ce.MWReferenceNode = function VeCeMWReferenceNode( model, config ) {
// DOM changes
this.$link = $( '<a>' ).attr( 'href', '#' );
this.$element.addClass( 've-ce-mwReferenceNode reference' ).append( this.$link );
this.$element.addClass( 've-ce-mwReferenceNode mw-ref' ).append( this.$link )
// In case we have received a version with old-style Cite HTML, remove the
// old reference class
.removeClass( 'reference' );
// Add a backwards-compatible text for browsers that don't support counters
this.$text = $( '<span>' ).addClass( 'mw-reflink-text' );
this.$link.append( this.$text );
this.index = '';
this.internalList = this.model.getDocument().internalList;
@ -96,7 +102,14 @@ ve.ce.MWReferenceNode.prototype.onInternalListUpdate = function ( groupsChanged
* @method
*/
ve.ce.MWReferenceNode.prototype.update = function () {
this.$link.text( this.model.getIndexLabel() );
var group = this.model.getGroup();
this.$text.text( this.model.getIndexLabel() );
this.$link.css( 'counterReset', 'mw-Ref ' + this.model.getIndex() );
if ( group ) {
this.$link.attr( 'data-mw-group', group );
} else {
this.$link.removeAttr( 'data-mw-group' );
}
};
/** */

View file

@ -28,8 +28,8 @@ ve.ce.MWReferencesListNode = function VeCeMWReferencesListNode( model, config )
this.listNode = null;
// DOM changes
this.$element.addClass( 've-ce-mwReferencesListNode references' );
this.$reflist = $( '<ol class="references"></ol>' );
this.$element.addClass( 've-ce-mwReferencesListNode' );
this.$reflist = $( '<ol class="mw-references"></ol>' );
this.$refmsg = $( '<p>' )
.addClass( 've-ce-mwReferencesListNode-muted' );
@ -143,7 +143,8 @@ ve.ce.MWReferencesListNode.prototype.onListNodeUpdate = function () {
* Update the references list.
*/
ve.ce.MWReferencesListNode.prototype.update = function () {
var i, j, n, iLen, jLen, index, firstNode, key, keyedNodes, $li, modelNode, viewNode,
var i, j, n, iLen, jLen, index, firstNode, key, keyedNodes, modelNode, viewNode,
$li, $refSpan, $link,
internalList = this.model.getDocument().internalList,
refGroup = this.model.getAttribute( 'refGroup' ),
listGroup = this.model.getAttribute( 'listGroup' ),
@ -152,6 +153,12 @@ ve.ce.MWReferencesListNode.prototype.update = function () {
this.$reflist.detach().empty();
this.$refmsg.detach();
if ( refGroup !== '' ) {
this.$reflist.attr( 'data-mw-group', refGroup );
} else {
this.$reflist.removeAttr( 'data-mw-group' );
}
if ( !nodes || !nodes.indexOrder.length ) {
if ( refGroup !== '' ) {
this.$refmsg.text( ve.msg( 'visualeditor-referenceslist-isempty', refGroup ) );
@ -191,13 +198,26 @@ ve.ce.MWReferencesListNode.prototype.update = function () {
$li = $( '<li>' );
if ( keyedNodes.length > 1 ) {
$refSpan = $( '<span rel="mw:referencedBy">' );
for ( j = 0, jLen = keyedNodes.length; j < jLen; j++ ) {
$li.append(
$( '<sup>' ).append(
$( '<a>' ).text( n + '.' + j )
)
).append( ' ' );
$link = $( '<a>' ).append(
$( '<span class="mw-linkback-text">' )
.text( ( j + 1 ) + ' ' )
);
if ( refGroup !== '' ) {
$link.attr( 'data-mw-group', refGroup );
}
$refSpan.append( $link );
}
$li.append( $refSpan );
} else {
$link = $( '<a rel="mw:referencedBy">' ).append(
$( '<span class="mw-linkback-text">' ).text( '↑ ' )
);
if ( refGroup !== '' ) {
$link.attr( 'data-mw-group', refGroup );
}
$li.append( $link );
}
// Generate reference HTML from first item in key

View file

@ -243,6 +243,31 @@ ve.dm.MWReferenceNode.static.remapInternalListKeys = function ( dataElement, int
}
};
/**
* Gets the index for the reference
* @static
* @param {Object} dataElement Element data
* @param {ve.dm.InternalList} internalList Internal list
* @return {Number} Index
*/
ve.dm.MWReferenceNode.static.getIndex = function ( dataElement, internalList ) {
var listIndex = dataElement.attributes.listIndex,
listGroup = dataElement.attributes.listGroup,
position = internalList.getIndexPosition( listGroup, listIndex );
return position + 1;
};
/**
* Gets the group for the reference
* @static
* @param {Object} dataElement Element data
* @return {string} Group
*/
ve.dm.MWReferenceNode.static.getGroup = function ( dataElement ) {
return dataElement.attributes.refGroup;
};
/**
* Gets the index label for the reference
* @static
@ -251,12 +276,10 @@ ve.dm.MWReferenceNode.static.remapInternalListKeys = function ( dataElement, int
* @return {string} Reference label
*/
ve.dm.MWReferenceNode.static.getIndexLabel = function ( dataElement, internalList ) {
var listIndex = dataElement.attributes.listIndex,
listGroup = dataElement.attributes.listGroup,
refGroup = dataElement.attributes.refGroup,
position = internalList.getIndexPosition( listGroup, listIndex );
var refGroup = dataElement.attributes.refGroup,
index = ve.dm.MWReferenceNode.static.getIndex( dataElement, internalList );
return '[' + ( refGroup ? refGroup + ' ' : '' ) + ( position + 1 ) + ']';
return '[' + ( refGroup ? refGroup + ' ' : '' ) + index + ']';
};
/* Methods */
@ -280,6 +303,24 @@ ve.dm.MWReferenceNode.prototype.getInternalItem = function () {
return this.getDocument().getInternalList().getItemNode( this.getAttribute( 'listIndex' ) );
};
/**
* Gets the index for the reference
*
* @return {Number} Index
*/
ve.dm.MWReferenceNode.prototype.getIndex = function () {
return this.constructor.static.getIndex( this.element, this.getDocument().getInternalList() );
};
/**
* Gets the group for the reference
*
* @return {string} Group
*/
ve.dm.MWReferenceNode.prototype.getGroup = function () {
return this.constructor.static.getGroup( this.element );
};
/**
* Gets the index label for the reference
*