Matching pages from suggestions in link dialog now actually work as links

* A subclass of MenuItemWidget from OOUI, MWLinkMenuItemWidget, is introduced that, when used in MWLinkTargetInputWidget for both
external and internal links, returns actual page links.

* MWInternalLinkMenuItemWidget is extended from MWLinkMenuItemWidget to support the internal links.

* LinkCache is being used in MWInternalLinkMenuItemWidet to stylize the links. Thus, getting rid of some old css classes.

Bug: 51205
Change-Id: I3ac18dabd514ca539fff1db3c67ae97931c3d4fc
This commit is contained in:
suchetag 2014-11-05 17:18:37 -08:00
parent 0f58940c4d
commit cb704dee84
5 changed files with 78 additions and 20 deletions

View file

@ -968,6 +968,8 @@ $wgResourceModules += array(
'modules/ve-mw/ce/annotations/ve.ce.MWInternalLinkAnnotation.js',
'modules/ve-mw/ui/widgets/ve.ui.MWLinkTargetInputWidget.js',
'modules/ve-mw/ui/widgets/ve.ui.MWLinkMenuItemWidget.js',
'modules/ve-mw/ui/widgets/ve.ui.MWInternalLinkMenuItemWidget.js',
'modules/ve-mw/ui/inspectors/ve.ui.MWLinkAnnotationInspector.js',
'modules/ve-mw/ui/inspectors/ve.ui.MWLinkNodeInspector.js',

View file

@ -15,17 +15,6 @@
color: #0645AD;
}
.ve-ui-mwLinkTargetInputWidget-menu .oo-ui-menuItemWidget[rel=newPage] {
color: #BA0000;
}
.ve-ui-mwLinkTargetInputWidget-menu .oo-ui-menuItemWidget[rel=externalLink] {
.ve-ui-mwLinkTargetInputWidget-extlink {
color: #36b;
}
.ve-ui-mwLinkTargetInputWidget-menu .oo-ui-menuItemWidget[rel=existingPage],
.ve-ui-mwLinkTargetInputWidget-menu .oo-ui-menuItemWidget[rel=matchingPage],
.ve-ui-mwLinkTargetInputWidget-menu .oo-ui-menuItemWidget[rel=disambigPage],
.ve-ui-mwLinkTargetInputWidget-menu .oo-ui-menuItemWidget[rel=redirectPage] {
color: #0645AD;
}

View file

@ -0,0 +1,34 @@
/*!
* VisualEditor UserInterface MWLinkMenuItemWidget class
*
* @copyright 2011-2014 VisualEditor Team and others; see http://ve.mit-license.org
*/
/**
* Creates a ve.ui.MWInternalLinkMenuItemWidget object.
*
* @class
* @extends ve.ui.MWLinkMenuItemWidget
*
* @constructor
* @param {Mixed} data Item data
* @param {Object} [config] Configuration options
* @cfg {string} [pagename] Pagename to return the names of internal pages
*/
ve.ui.MWInternalLinkMenuItemWidget = function VeUiMWInternalLinkMenuItemWidget( data, config ) {
// Config intialization
config = config || {};
// Properties
this.pagename = config.pagename;
// Parent constructor
ve.ui.MWLinkMenuItemWidget.call( this, data, $.extend( { label: this.pagename, href: mw.util.getUrl( this.pagename ) }, config ) );
// Style based on link cache information
ve.init.platform.linkCache.styleElement( this.pagename, this.$link );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWInternalLinkMenuItemWidget, ve.ui.MWLinkMenuItemWidget );

View file

@ -0,0 +1,33 @@
/*!
* VisualEditor UserInterface MWLinkMenuItemWidget class
*
* @copyright 2011-2014 VisualEditor Team and others; see http://ve.mit-license.org
*/
/**
* Creates a ve.ui.MWLinkMenuItemWidget object.
*
* @class
* @extends OO.ui.MenuItemWidget
*
* @constructor
* @param {Mixed} data Item data
* @param {Object} [config] Configuration options
* @cfg {string} [href] href to point to pages from link suggestions
*/
ve.ui.MWLinkMenuItemWidget = function VeUiMWLinkMenuItemWidget( data, config ) {
// Config intialization
config = config || {};
// Parent constructor
ve.ui.MWLinkMenuItemWidget.super.call( this, data, config );
// Intialization
this.$label.wrap( '<a>' );
this.$link = this.$label.parent();
this.$link.attr( 'href', config.href );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWLinkMenuItemWidget, OO.ui.MenuItemWidget );

View file

@ -182,9 +182,9 @@ ve.ui.MWLinkTargetInputWidget.prototype.getLookupMenuItemsFromData = function (
'externalLink',
{ $: menu$, label: ve.msg( 'visualeditor-linkinspector-suggest-external-link' ) }
) );
items.push( new OO.ui.MenuItemWidget(
items.push( new ve.ui.MWLinkMenuItemWidget(
this.getExternalLinkAnnotationFromUrl( this.value ),
{ $: menu$, rel: 'externalLink', label: this.value }
{ $: menu$, classes: [ 've-ui-mwLinkTargetInputWidget-extlink' ], label: this.value, href: this.value }
) );
}
@ -195,9 +195,9 @@ ve.ui.MWLinkTargetInputWidget.prototype.getLookupMenuItemsFromData = function (
'newPage',
{ $: menu$, label: ve.msg( 'visualeditor-linkinspector-suggest-new-page' ) }
) );
items.push( new OO.ui.MenuItemWidget(
items.push( new ve.ui.MWInternalLinkMenuItemWidget(
this.getInternalLinkAnnotationFromTitle( this.value ),
{ $: menu$, rel: 'newPage', label: this.value }
{ $: menu$, pagename: this.value }
) );
} else {
// If no title object could be created, it means the title is illegal
@ -221,9 +221,9 @@ ve.ui.MWLinkTargetInputWidget.prototype.getLookupMenuItemsFromData = function (
matchingPages.unshift( this.value );
}
for ( i = 0, len = matchingPages.length; i < len; i++ ) {
items.push( new OO.ui.MenuItemWidget(
items.push( new ve.ui.MWInternalLinkMenuItemWidget(
this.getInternalLinkAnnotationFromTitle( matchingPages[i] ),
{ $: menu$, rel: 'matchingPage', label: matchingPages[i] }
{ $: menu$, pagename: matchingPages[i] }
) );
}
}
@ -235,9 +235,9 @@ ve.ui.MWLinkTargetInputWidget.prototype.getLookupMenuItemsFromData = function (
{ $: menu$, label: ve.msg( 'visualeditor-linkinspector-suggest-disambig-page', disambigPages.length ) }
) );
for ( i = 0, len = disambigPages.length; i < len; i++ ) {
items.push( new OO.ui.MenuItemWidget(
items.push( new ve.ui.MWInternalLinkMenuItemWidget(
this.getInternalLinkAnnotationFromTitle( disambigPages[i] ),
{ $: menu$, rel: 'disambigPage', label: disambigPages[i] }
{ $: menu$, pagename: disambigPages[i] }
) );
}
}