mediawiki-extensions-Visual.../modules/ve-mw/ui/dialogs/ve.ui.MWReferenceInsertDialog.js
Trevor Parscal 130e446e52 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 23:42:56 +00:00

149 lines
4.2 KiB
JavaScript

/*!
* VisualEditor user interface ReferenceInsertDialog class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Dialog for inserting MediaWiki references.
*
* @class
* @extends ve.ui.MWDialog
*
* @constructor
* @param {ve.ui.Surface} surface
* @param {Object} [config] Config options
*/
ve.ui.MWReferenceInsertDialog = function VeUiMWReferenceInsertDialog( surface, config ) {
// Configuration initialization
config = ve.extendObject( {}, config, { 'footless': true } );
// Parent constructor
ve.ui.MWDialog.call( this, surface, config );
// Properties
this.result = null;
};
/* Inheritance */
ve.inheritClass( ve.ui.MWReferenceInsertDialog, ve.ui.MWDialog );
/* Static Properties */
ve.ui.MWReferenceInsertDialog.static.titleMessage = 'visualeditor-dialog-reference-insert-title';
ve.ui.MWReferenceInsertDialog.static.icon = 'reference';
/* Methods */
/**
* Handle result select events.
*
* @method
* @param {string|Object|null} result Command string, reference attributes object, or null if
* nothing is selected
*/
ve.ui.MWReferenceInsertDialog.prototype.onSearchSelect = function ( result ) {
this.result = result;
if ( result ) {
this.close( 'insert' );
}
};
ve.ui.MWReferenceInsertDialog.prototype.onOpen = function () {
// Parent method
ve.ui.MWDialog.prototype.onOpen.call( this );
// Initialization
this.search.buildIndex();
this.search.getQuery().$input.focus().select();
};
ve.ui.MWReferenceInsertDialog.prototype.onClose = function ( action ) {
var doc, item, attr, internalList, group, refNode,
create = this.result === 'create',
surface = this.surface,
surfaceModel = surface.getModel();
// Parent method
ve.ui.MWDialog.prototype.onClose.call( this );
if ( action === 'insert' ) {
doc = surfaceModel.getDocument(),
internalList = doc.getInternalList();
if ( create ) {
// Create new reference
attr = {
'listKey': null,
'refGroup': '',
'listGroup': 'mwReference/'
};
item = internalList.getItemInsertion(
attr.listGroup,
attr.listKey,
[ { 'type': 'paragraph', 'internal': { 'generated': 'wrapper' } } ]
.concat( ve.splitClusters( this.search.getQuery().getValue() ) )
.concat( [ { 'type': '/paragraph' } ] )
);
surfaceModel.change( item.transaction );
attr.listIndex = item.index;
} else if ( ve.isPlainObject( this.result ) ) {
// Re-use existing reference
attr = {
'listKey': this.result.listKey,
'refGroup': this.result.refGroup,
'listGroup': this.result.listGroup,
'listIndex': this.result.listIndex
};
if ( attr.listKey === null ) {
attr.listKey = internalList.getUniqueListKey( attr.listGroup );
// Update the list key in the other use of this source
group = internalList.nodes[attr.listGroup];
refNode = group.firstNodes[attr.listIndex];
// HACK: Removing and re-inserting nodes to/from the internal list is done because
// internal list doesn't yet support attribute changes
refNode.removeFromInternalList();
surfaceModel.change(
ve.dm.Transaction.newFromAttributeChanges(
doc, refNode.getOuterRange().start, { 'listKey': attr.listKey }
)
);
refNode.addToInternalList();
}
} else {
throw new Error( 'Invalid selection' );
}
// Add reference at cursor
surfaceModel.getFragment().collapseRangeToEnd().insertContent( [
{ 'type': 'mwReference', 'attributes': attr }, { 'type': '/mwReference' }
] );
// Auto-launch the reference editor if we are creating a new reference
if ( create ) {
setTimeout( function () {
surface.getDialogs().open( 'mwReferenceEdit' );
} );
}
}
};
ve.ui.MWReferenceInsertDialog.prototype.initialize = function () {
// Parent method
ve.ui.MWDialog.prototype.initialize.call( this );
// Properties
this.search = new ve.ui.MWReferenceSearchWidget( this.surface, { '$$': this.frame.$$ } );
// Events
this.search.connect( this, { 'select': 'onSearchSelect' } );
// Initialization
this.search.$.addClass( 've-ui-mwReferenceInsertDialog-select' );
this.$body.append( this.search.$ );
};
/* Registration */
ve.ui.dialogFactory.register( 'mwReferenceInsert', ve.ui.MWReferenceInsertDialog );