wikimedia/mediawiki-extensions-WikiEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor synced 2024-11-24 00:06:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change insert-link radio buttons to OOUI

Browse source 
Add new OOUI field for the link-type radio buttons in the
insert-link dialog.

Bug: T289214
Change-Id: Idf80c533e5a17de3e9a57051c0608524b6d45098
This commit is contained in:
Sam Wilson 2021-10-11 13:31:20 +08:00
parent e3e9ebb6cb
commit 0b14ae0666
7 changed files with 100 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
extension.json
View file

@ -46,6 +46,7 @@
"insertlink/TitleInputWidget.js",
"insertlink/TitleOptionWidget.js",
"insertlink/LinkTextField.js",
"insertlink/LinkTypeField.js",
"jquery.wikiEditor.js",
"jquery.wikiEditor.toolbar.js",
"jquery.wikiEditor.toolbar.config.js",
@ -59,7 +60,7 @@
],
"styles": [
"insertlink/TitleInputField.less",
"insertlink/LinkTextField.less",
"insertlink/LinkTypeField.less",
"jquery.wikiEditor.less",
"jquery.wikiEditor.toolbar.less",
"jquery.wikiEditor.dialogs.less",

5
modules/insertlink/LinkTextField.less
View file

@ -1,5 +0,0 @@
.ext-WikiEditor-InsertLink-LinkTextField {
// To match .oo-ui-fieldLayout.oo-ui-labelElement
// @TODO Remove after converting the field below this (the radio buttons) to OOUI.
margin-bottom: 12px;
}

66
modules/insertlink/LinkTypeField.js Normal file
View file

@ -0,0 +1,66 @@
/**
* @class
* @extends OO.ui.FieldLayout
* @mixes OO.EventEmitter
* @constructor
*/
function LinkTypeField() {
// Mixin constructor
OO.EventEmitter.call( this );
this.radioInt = new OO.ui.RadioOptionWidget( {
data: 'int',
label: mw.msg( 'wikieditor-toolbar-tool-link-int' )
} );
this.radioExt = new OO.ui.RadioOptionWidget( {
data: 'ext',
label: mw.msg( 'wikieditor-toolbar-tool-link-ext' )
} );
var radioSelect = new OO.ui.RadioSelectWidget( {
items: [
this.radioInt,
this.radioExt
]
} );
radioSelect.connect( this, {
choose: this.onRadioChoose
} );
var config = {
align: 'top',
classes: [ 'ext-WikiEditor-InsertLink-LinkTypeField' ]
};
LinkTypeField.super.call( this, radioSelect, config );
}
OO.inheritClass( LinkTypeField, OO.ui.FieldLayout );
OO.mixinClass( LinkTypeField, OO.EventEmitter );
/**
* Select the 'external link' radio.
*
* @param {boolean} isExternal
*/
LinkTypeField.prototype.setIsExternal = function ( isExternal ) {
this.getField().selectItem( isExternal ? this.radioExt : this.radioInt );
};
/**
* Is the 'internal link' radio currently selected?
*
* @return {boolean}
*/
LinkTypeField.prototype.isInternal = function () {
return this.radioInt.isSelected();
};
/**
* Emit a 'change' event when the radio selection changes.
*
* @private
*/
LinkTypeField.prototype.onRadioChoose = function () {
this.emit( 'change', this.radioExt.isSelected() );
};
module.exports = LinkTypeField;

10
modules/insertlink/LinkTypeField.less Normal file
View file

@ -0,0 +1,10 @@
.ext-WikiEditor-InsertLink-LinkTypeField {
.oo-ui-radioOptionWidget {
display: inline-block;
margin-left: 1em;
}
.oo-ui-radioOptionWidget:first-child {
margin-left: 0;
}
}

5
modules/insertlink/TitleInputField.js
View file

@ -10,6 +10,9 @@ var TitleOptionWidget = require( './TitleOptionWidget.js' );
* @constructor
*/
function TitleInputField() {
// Mixin constructor
OO.EventEmitter.call( this );
var input = new TitleInputWidget();
input.connect( this, {
change: this.onChange,
@ -29,8 +32,6 @@ function TitleInputField() {
classes: [ 'ext-WikiEditor-InsertLink-TitleInputField' ]
};
TitleInputField.super.call( this, input, config );
OO.EventEmitter.call( this );
}
OO.inheritClass( TitleInputField, OO.ui.FieldLayout );

41
modules/jquery.wikiEditor.dialogs.config.js
View file

@ -6,8 +6,10 @@
var toolbarModule = require( './jquery.wikiEditor.toolbar.js' ),
InsertLinkTitleInputField = require( './insertlink/TitleInputField.js' ),
LinkTextField = require( './insertlink/LinkTextField.js' ),
LinkTypeField = require( './insertlink/LinkTypeField.js' ),
insertLinkTitleInputField = new InsertLinkTitleInputField(),
insertLinkLinkTextField = new LinkTextField(),
insertLinkLinkTypeField = new LinkTypeField(),
configData = require( './data.json' );
function triggerButtonClick( element ) {
@ -108,22 +110,14 @@
init: function () {
$( '.wikieditor-toolbar-link-target' ).replaceWith( insertLinkTitleInputField.$element );
$( '.wikieditor-toolbar-link-text' ).replaceWith( insertLinkLinkTextField.$element );
$( '.wikieditor-toolbar-link-type' ).replaceWith( insertLinkLinkTypeField.$element );
// Set labels of tabs based on rel values
$( this ).find( '[rel]' ).each( function () {
// eslint-disable-next-line mediawiki/msg-doc
$( this ).text( mw.msg( $( this ).attr( 'rel' ) ) );
} );
// Automatically copy the value of the internal link page title field to the link text field unless the
// user has changed the link text field - this is a convenience thing since most link texts are going to
// be the same as the page title - Also change the internal/external radio button accordingly
insertLinkTitleInputField.connect( this, {
change: function ( val ) {
if ( insertLinkTitleInputField.getField().isExternalLink( val ) ) {
$( '#wikieditor-toolbar-link-type-ext' ).prop( 'checked', true );
} else {
$( '#wikieditor-toolbar-link-type-int' ).prop( 'checked', true );
}
insertLinkLinkTypeField.setIsExternal( insertLinkTitleInputField.getField().isExternalLink( val ) );
insertLinkLinkTextField.setValueIfUntouched( val );
// eslint-disable-next-line no-jquery/no-sizzle
$( '.ui-dialog:visible .ui-dialog-buttonpane button' )
@ -140,11 +134,13 @@
}
} );
// Tell the title input field when the internal/external radio changes.
$( 'input[name="wikieditor-toolbar-link-type"]' ).on( 'change', function ( event ) {
var urlMode = event.target.id === 'wikieditor-toolbar-link-type-ext' ?
insertLinkTitleInputField.urlModes.external :
insertLinkTitleInputField.urlModes.internal;
insertLinkTitleInputField.setUrlMode( urlMode );
insertLinkLinkTypeField.connect( this, {
change: function ( isExternal ) {
var urlMode = isExternal ?
insertLinkTitleInputField.urlModes.external :
insertLinkTitleInputField.urlModes.internal;
insertLinkTitleInputField.setUrlMode( urlMode );
}
} );
},
dialog: {
@ -180,7 +176,7 @@
text = '';
}
var insertText = '';
if ( $( '#wikieditor-toolbar-link-type-int' ).is( ':checked' ) ) {
if ( insertLinkLinkTypeField.isInternal() ) {
// FIXME: Exactly how fragile is this?
// eslint-disable-next-line no-jquery/no-sizzle
if ( $( '#wikieditor-toolbar-link-int-target-status-invalid' ).is( ':visible' ) ) {
@ -253,8 +249,7 @@
// Blank form
insertLinkTitleInputField.getField().setValue( '' );
insertLinkLinkTextField.getField().setValue( '' );
$( '#wikieditor-toolbar-link-type-int, #wikieditor-toolbar-link-type-ext' )
.prop( 'checked', false );
insertLinkLinkTypeField.getField().selectItem( null );
},
'wikieditor-toolbar-tool-link-cancel': function () {
$( this ).dialog( 'close' );
@ -277,19 +272,19 @@
insertLinkTitleInputField.getField().$input.trigger( 'change' );
$( '#wikieditor-toolbar-link-dialog' ).data( 'whitespace', [ '', '' ] );
if ( selection !== '' ) {
var matches, target, text, type;
var matches, target, text, isExternal;
if ( ( matches = selection.match( /^(\s*)\[\[([^\]|]+)(\|([^\]|]*))?\]\](\s*)$/ ) ) ) {
// [[foo|bar]] or [[foo]]
target = matches[ 2 ];
text = ( matches[ 4 ] ? matches[ 4 ] : matches[ 2 ] );
type = 'int';
isExternal = false;
// Preserve whitespace when replacing
$( '#wikieditor-toolbar-link-dialog' ).data( 'whitespace', [ matches[ 1 ], matches[ 5 ] ] );
} else if ( ( matches = selection.match( /^(\s*)\[([^\] ]+)( ([^\]]+))?\](\s*)$/ ) ) ) {
// [http://www.example.com foo] or [http://www.example.com]
target = matches[ 2 ];
text = ( matches[ 4 ] || '' );
type = 'ext';
isExternal = true;
// Preserve whitespace when replacing
$( '#wikieditor-toolbar-link-dialog' ).data( 'whitespace', [ matches[ 1 ], matches[ 5 ] ] );
} else {
@ -313,8 +308,8 @@
if ( typeof text !== 'undefined' ) {
insertLinkLinkTextField.getField().setValue( text );
}
if ( typeof type !== 'undefined' ) {
$( '#wikieditor-toolbar-link-' + type ).prop( 'checked', true );
if ( typeof isExternal !== 'undefined' ) {
insertLinkLinkTypeField.setIsExternal( isExternal );
}
}

11
modules/templates/dialogInsertLink.html
View file

@ -1,14 +1,5 @@
<fieldset>
<div class="wikieditor-toolbar-link-target"></div>
<div class="wikieditor-toolbar-link-text"></div>
<div class="wikieditor-toolbar-field-wrapper">
<div class="wikieditor-toolbar-floated-field-wrapper">
<input type="radio" id="wikieditor-toolbar-link-type-int" name="wikieditor-toolbar-link-type" selected/>
<label for="wikieditor-toolbar-link-type-int" rel="wikieditor-toolbar-tool-link-int"></label>
</div>
<div class="wikieditor-toolbar-floated-field-wrapper">
<input type="radio" id="wikieditor-toolbar-link-type-ext" name="wikieditor-toolbar-link-type"/>
<label for="wikieditor-toolbar-link-type-ext" rel="wikieditor-toolbar-tool-link-ext"></label>
</div>
</div>
<div class="wikieditor-toolbar-link-type"></div>
</fieldset>