mediawiki-extensions-Visual.../modules/ve-mw/ui/dialogs/ve.ui.MWReferenceListDialog.js

172 lines
4.1 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor user interface MWReferenceListDialog class.
*
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
Single-click insertion Objectives: * Reduce the number of clicks and mouse maneuvers required to insert media, references or template parameters * Make use of highlighting with mouse movement or arrow key presses, similar to menus, to suggest action when clicked * Improve the way media search results look and feel Changes: ve.ui.SelectWidget.js * Add mouseleave handler to un-highlight when the mouse exits the widget * Document highlight events (already being emitted) ve.ui.SearchWidget.js * Propagate both select and highlight events from results widget * Make arrow keys change highlight instead of selection * Get rid of enter event, make enter key select highlighted item instead * Provide direct access to results widget through getResults method ve.ui.MenuWidget.js * Use the selected item as a starting point if nothing is currently highlighted when adjusting the highlight position ve.ui.Dialog.js * Add footless option to hide the foot element and make the body extend all the way down to the bottom * Remove applyButton, which only some dialogs need, and should be creating themselves, along with other buttons as needed ve.ui.Widget.css * Change highlight and selected colors of option widgets to match other selection colors used elsewhere * Leave selected and highlighted widget looking selected ve.ui.Frame.css * Add background color to combat any color that might have been applied to the frame body in the imported CSS from the parent frame ve.ui.Dialog.css * Add rules for footless mode ve.ui.MWReferenceResultWidget.js, ve.ui.MWParameterResultWidget.js, ve.ui.MWMediaResultWidget.js * Allow highlighting ve.ui.MWParamterSearchWidget.js * Switch from selecting the first item when filtering to highlighting ve-mw/ve.ui.Widget.js * Adjust media result widget styling to better match other elements ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceListDialog.js, ve.ui.MWReferenceEditDialog.js, ve.ui.MWMetaDialog.js ve.ui.MWMediaEditDialog.js * Add apply button, as per it being removed from parent class ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceInsertDialog.js, ve.ui.MWMediaInsertDialog.js * Insert parameter/reference/media on select, instead of clicking an insert button * Use 'insert' instead of 'apply' as argument for close method Bug: 50774 Bug: 51143 Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
2013-07-15 21:07:53 +00:00
* Dialog for inserting and editing MediaWiki reference lists.
*
* @class
* @extends ve.ui.Dialog
*
* @constructor
* @param {Object} [config] Configuration options
*/
ve.ui.MWReferenceListDialog = function VeUiMWReferenceListDialog( config ) {
// Configuration initialization
config = ve.extendObject( { 'size': 'small' }, config );
// Parent constructor
ve.ui.Dialog.call( this, config );
// Properties
this.inserting = false;
};
/* Inheritance */
OO.inheritClass( ve.ui.MWReferenceListDialog, ve.ui.Dialog );
/* Static Properties */
ve.ui.MWReferenceListDialog.static.name = 'referenceList';
ve.ui.MWReferenceListDialog.static.title =
OO.ui.deferMsg( 'visualeditor-dialog-referencelist-title' );
ve.ui.MWReferenceListDialog.static.icon = 'references';
/* Methods */
/**
* @inheritdoc
*/
ve.ui.MWReferenceListDialog.prototype.initialize = function () {
// Parent method
ve.ui.Dialog.prototype.initialize.call( this );
// Properties
this.editPanel = new OO.ui.PanelLayout( {
'$': this.$, 'scrollable': true, 'padded': true
} );
this.optionsFieldset = new OO.ui.FieldsetLayout( {
'$': this.$
} );
this.groupInput = new OO.ui.TextInputWidget( {
'$': this.$,
'placeholder': ve.msg( 'visualeditor-dialog-reference-options-group-placeholder' )
} );
this.groupField = new OO.ui.FieldLayout( this.groupInput, {
'$': this.$,
'align': 'top',
'label': ve.msg( 'visualeditor-dialog-reference-options-group-label' )
} );
this.applyButton = new OO.ui.ButtonWidget( {
'$': this.$,
'flags': ['primary']
Single-click insertion Objectives: * Reduce the number of clicks and mouse maneuvers required to insert media, references or template parameters * Make use of highlighting with mouse movement or arrow key presses, similar to menus, to suggest action when clicked * Improve the way media search results look and feel Changes: ve.ui.SelectWidget.js * Add mouseleave handler to un-highlight when the mouse exits the widget * Document highlight events (already being emitted) ve.ui.SearchWidget.js * Propagate both select and highlight events from results widget * Make arrow keys change highlight instead of selection * Get rid of enter event, make enter key select highlighted item instead * Provide direct access to results widget through getResults method ve.ui.MenuWidget.js * Use the selected item as a starting point if nothing is currently highlighted when adjusting the highlight position ve.ui.Dialog.js * Add footless option to hide the foot element and make the body extend all the way down to the bottom * Remove applyButton, which only some dialogs need, and should be creating themselves, along with other buttons as needed ve.ui.Widget.css * Change highlight and selected colors of option widgets to match other selection colors used elsewhere * Leave selected and highlighted widget looking selected ve.ui.Frame.css * Add background color to combat any color that might have been applied to the frame body in the imported CSS from the parent frame ve.ui.Dialog.css * Add rules for footless mode ve.ui.MWReferenceResultWidget.js, ve.ui.MWParameterResultWidget.js, ve.ui.MWMediaResultWidget.js * Allow highlighting ve.ui.MWParamterSearchWidget.js * Switch from selecting the first item when filtering to highlighting ve-mw/ve.ui.Widget.js * Adjust media result widget styling to better match other elements ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceListDialog.js, ve.ui.MWReferenceEditDialog.js, ve.ui.MWMetaDialog.js ve.ui.MWMediaEditDialog.js * Add apply button, as per it being removed from parent class ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceInsertDialog.js, ve.ui.MWMediaInsertDialog.js * Insert parameter/reference/media on select, instead of clicking an insert button * Use 'insert' instead of 'apply' as argument for close method Bug: 50774 Bug: 51143 Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
2013-07-15 21:07:53 +00:00
} );
// Events
this.applyButton.connect( this, { 'click': [ 'close', { 'action': 'apply' } ] } );
Single-click insertion Objectives: * Reduce the number of clicks and mouse maneuvers required to insert media, references or template parameters * Make use of highlighting with mouse movement or arrow key presses, similar to menus, to suggest action when clicked * Improve the way media search results look and feel Changes: ve.ui.SelectWidget.js * Add mouseleave handler to un-highlight when the mouse exits the widget * Document highlight events (already being emitted) ve.ui.SearchWidget.js * Propagate both select and highlight events from results widget * Make arrow keys change highlight instead of selection * Get rid of enter event, make enter key select highlighted item instead * Provide direct access to results widget through getResults method ve.ui.MenuWidget.js * Use the selected item as a starting point if nothing is currently highlighted when adjusting the highlight position ve.ui.Dialog.js * Add footless option to hide the foot element and make the body extend all the way down to the bottom * Remove applyButton, which only some dialogs need, and should be creating themselves, along with other buttons as needed ve.ui.Widget.css * Change highlight and selected colors of option widgets to match other selection colors used elsewhere * Leave selected and highlighted widget looking selected ve.ui.Frame.css * Add background color to combat any color that might have been applied to the frame body in the imported CSS from the parent frame ve.ui.Dialog.css * Add rules for footless mode ve.ui.MWReferenceResultWidget.js, ve.ui.MWParameterResultWidget.js, ve.ui.MWMediaResultWidget.js * Allow highlighting ve.ui.MWParamterSearchWidget.js * Switch from selecting the first item when filtering to highlighting ve-mw/ve.ui.Widget.js * Adjust media result widget styling to better match other elements ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceListDialog.js, ve.ui.MWReferenceEditDialog.js, ve.ui.MWMetaDialog.js ve.ui.MWMediaEditDialog.js * Add apply button, as per it being removed from parent class ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceInsertDialog.js, ve.ui.MWMediaInsertDialog.js * Insert parameter/reference/media on select, instead of clicking an insert button * Use 'insert' instead of 'apply' as argument for close method Bug: 50774 Bug: 51143 Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
2013-07-15 21:07:53 +00:00
// Initialization
this.optionsFieldset.addItems( [ this.groupField ] );
this.editPanel.$element.append( this.optionsFieldset.$element );
this.$body.append( this.editPanel.$element );
this.$foot.append( this.applyButton.$element );
};
/**
* @inheritdoc
*/
ve.ui.MWReferenceListDialog.prototype.setup = function ( data ) {
// Parent method
ve.ui.Dialog.prototype.setup.call( this, data );
var node, refGroup;
// Prepopulate from existing node if we're editing a node
// instead of inserting a new one
node = this.getFragment().getSelectedNode();
if ( node instanceof ve.dm.MWReferenceListNode ) {
refGroup = node.getAttribute( 'refGroup' );
this.inserting = false;
} else {
refGroup = '';
this.inserting = true;
}
this.groupInput.setValue( refGroup );
this.applyButton.setLabel ( ve.msg (
!this.inserting ?
'visualeditor-dialog-action-apply' :
'visualeditor-dialog-referencelist-insert-button'
) );
/**
* Focused node.
*
* @private
* @property {ve.dm.MWReferenceListNode|undefined}
*/
this.node = node;
};
/**
* @inheritdoc
*/
ve.ui.MWReferenceListDialog.prototype.teardown = function ( data ) {
var refGroup, listGroup, oldListGroup, attrChanges, doc,
surfaceModel = this.getFragment().getSurface();
// Data initialization
data = data || {};
// Save changes
if ( data.action === 'apply' ) {
refGroup = this.groupInput.getValue();
listGroup = 'mwReference/' + refGroup;
if ( this.node ) {
// Edit existing model
doc = surfaceModel.getDocument();
oldListGroup = this.node.getAttribute( 'listGroup' );
if ( listGroup !== oldListGroup ) {
attrChanges = {
listGroup: listGroup,
refGroup: refGroup
};
surfaceModel.change(
ve.dm.Transaction.newFromAttributeChanges(
doc, this.node.getOuterRange().start, attrChanges
)
);
}
} else {
// Create new model
surfaceModel.getFragment().collapseRangeToEnd().insertContent( [
{
'type': 'mwReferenceList',
'attributes': {
'listGroup': listGroup,
'refGroup': refGroup
}
},
{ 'type': '/mwReferenceList' }
] ).collapseRangeToEnd().select();
}
}
// Parent method
ve.ui.Dialog.prototype.teardown.call( this, data );
};
/* Registration */
ve.ui.dialogFactory.register( ve.ui.MWReferenceListDialog );