2013-06-21 02:55:16 +00:00
|
|
|
/*!
|
|
|
|
* VisualEditor user interface MWReferenceListDialog class.
|
|
|
|
*
|
2014-01-05 12:05:05 +00:00
|
|
|
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
|
2013-06-21 02:55:16 +00:00
|
|
|
* @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.
|
2013-06-21 02:55:16 +00:00
|
|
|
*
|
|
|
|
* @class
|
2013-07-03 01:30:10 +00:00
|
|
|
* @extends ve.ui.MWDialog
|
2013-06-21 02:55:16 +00:00
|
|
|
*
|
|
|
|
* @constructor
|
Ultra-mega-hyper-citation editing on crack
Objectives:
* Allow users on-wiki to create tools and dialogs for citation templates
of their choosing
* Allow editing of citation templates directly, without having to go
through the reference dialog
* Provide citation template tools within reference editing that use the
same titles and icons as the citation tools do, but don't wrap the
inserted content in a ref tag
Changes:
* Reference list was cloning the DOM element it was inserting into its
view before the generated content node could finish rendering, so it
never ended up showing the finished rendering in the reference list
* Documenting hack about use of reference list node's destroy method,
and how we are depending on destroy not canceling generated content
rendering
* Introduced reference model
* Added saving/updating method to transclusion model
* Added getPartsList method to dm transclusion node, which caches the
result and invalidates the cache on update
* Added citation dialog, which extends transclusion dialog
* Added cite group to toolbars, cite-template in reference dialog toolbar
* Factored out getting the node to edit and saving changes procedures in
transclusion dialog so they could be extended in citation dialog
* Updated uses of autoAdd as per changes in oojs-ui (Ic353f91)
* Renamed MWDialogTool file since there was only one tool in it
* Expanded TransclusionDialogTool file out since there is now more logic
to it
* Switched to using ve.dm.MWReferenceModel instead of plain objects in
reference search widget
Configuration:
If you add to MediaWiki:Visualeditor-cite-tool-definition.json the
following code you will magically be presented with a delightful array
of citation options:
[
{ "name": "web", "icon": "ref-cite-web", "template": "Cite web" },
{ "name": "book", "icon": "ref-cite-book", "template": "Cite book" },
{ "name": "news", "icon": "ref-cite-news", "template": "Cite news" },
{ "name": "journal", "icon": "ref-cite-journal", "template": "Cite journal" }
]
...or...
[
{
"name": "any-name",
"icon": "any-ooui-icon",
"template": "Any template",
"title": "Any title text"
}
]
The title text is derived either from the title property or from the name
property by pre-pending the string 'visualeditor-cite-tool-name-' to
generate a message key. Titles for 'web', 'book', 'news' and 'journal' are
provided. The icon is a normal oo-ui-icon name, and more icons can be
added, as usual, by adding a class called .oo-ui-icon-{icon name} to
MediaWiki:Common.css. 'ref-cite-web', 'ref-cite-book', 'ref-cite-news'
and 'ref-cite-journal' are provided. The template name is simply the name
of the template without its namespace prefix.
Depends on Ic353f91 in oojs-ui
Bug: 50110
Bug: 50768
Change-Id: Id401d973b8d5fe2faec481cc777c17a24fd19dd4
2014-03-21 18:56:46 +00:00
|
|
|
* @param {ve.ui.Surface} surface Surface dialog is for
|
2013-09-25 10:21:09 +00:00
|
|
|
* @param {Object} [config] Configuration options
|
2013-06-21 02:55:16 +00:00
|
|
|
*/
|
2014-03-06 01:07:20 +00:00
|
|
|
ve.ui.MWReferenceListDialog = function VeUiMWReferenceListDialog( surface, config ) {
|
2014-03-12 23:38:02 +00:00
|
|
|
// Configuration initialization
|
|
|
|
config = ve.extendObject( { 'size': 'small' }, config );
|
|
|
|
|
2013-06-21 02:55:16 +00:00
|
|
|
// Parent constructor
|
2014-03-06 01:07:20 +00:00
|
|
|
ve.ui.MWDialog.call( this, surface, config );
|
2014-03-12 23:38:02 +00:00
|
|
|
|
|
|
|
// Properties
|
|
|
|
this.inserting = false;
|
2013-06-21 02:55:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Inheritance */
|
|
|
|
|
2013-10-11 21:44:09 +00:00
|
|
|
OO.inheritClass( ve.ui.MWReferenceListDialog, ve.ui.MWDialog );
|
2013-06-21 02:55:16 +00:00
|
|
|
|
|
|
|
/* Static Properties */
|
|
|
|
|
2013-08-27 23:28:29 +00:00
|
|
|
ve.ui.MWReferenceListDialog.static.name = 'referenceList';
|
|
|
|
|
2014-02-12 21:45:37 +00:00
|
|
|
ve.ui.MWReferenceListDialog.static.title =
|
|
|
|
OO.ui.deferMsg( 'visualeditor-dialog-referencelist-title' );
|
2013-06-21 02:55:16 +00:00
|
|
|
|
|
|
|
ve.ui.MWReferenceListDialog.static.icon = 'references';
|
|
|
|
|
|
|
|
/* Methods */
|
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
2013-06-21 02:55:16 +00:00
|
|
|
ve.ui.MWReferenceListDialog.prototype.initialize = function () {
|
|
|
|
// Parent method
|
2013-07-03 01:30:10 +00:00
|
|
|
ve.ui.MWDialog.prototype.initialize.call( this );
|
2013-06-21 02:55:16 +00:00
|
|
|
|
|
|
|
// Properties
|
2013-10-09 20:09:59 +00:00
|
|
|
this.editPanel = new OO.ui.PanelLayout( {
|
2013-11-01 19:45:59 +00:00
|
|
|
'$': this.$, 'scrollable': true, 'padded': true
|
2013-07-17 19:01:49 +00:00
|
|
|
} );
|
2013-10-09 20:09:59 +00:00
|
|
|
this.optionsFieldset = new OO.ui.FieldsetLayout( {
|
2014-03-12 23:38:02 +00:00
|
|
|
'$': this.$
|
2013-06-21 02:55:16 +00:00
|
|
|
} );
|
|
|
|
|
2014-02-16 16:41:40 +00:00
|
|
|
this.groupInput = new OO.ui.TextInputWidget( {
|
|
|
|
'$': this.$,
|
|
|
|
'placeholder': ve.msg( 'visualeditor-dialog-reference-options-group-placeholder' )
|
|
|
|
} );
|
2014-01-22 20:13:59 +00:00
|
|
|
this.groupField = new OO.ui.FieldLayout( this.groupInput, {
|
2013-11-01 19:45:59 +00:00
|
|
|
'$': this.$,
|
2014-01-22 20:13:59 +00:00
|
|
|
'align': 'top',
|
2013-06-21 02:55:16 +00:00
|
|
|
'label': ve.msg( 'visualeditor-dialog-reference-options-group-label' )
|
|
|
|
} );
|
|
|
|
|
2014-01-17 14:24:12 +00:00
|
|
|
this.applyButton = new OO.ui.ButtonWidget( {
|
2013-11-05 00:29:50 +00:00
|
|
|
'$': 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
|
2013-11-05 00:29:50 +00:00
|
|
|
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
|
|
|
|
2013-06-21 02:55:16 +00:00
|
|
|
// Initialization
|
2014-01-22 20:13:59 +00:00
|
|
|
this.optionsFieldset.addItems( [ this.groupField ] );
|
2013-11-01 19:45:59 +00:00
|
|
|
this.editPanel.$element.append( this.optionsFieldset.$element );
|
|
|
|
this.$body.append( this.editPanel.$element );
|
|
|
|
this.$foot.append( this.applyButton.$element );
|
2013-06-21 02:55:16 +00:00
|
|
|
};
|
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
ve.ui.MWReferenceListDialog.prototype.setup = function ( data ) {
|
2013-06-21 02:55:16 +00:00
|
|
|
// Parent method
|
2013-11-05 00:29:50 +00:00
|
|
|
ve.ui.MWDialog.prototype.setup.call( this, data );
|
|
|
|
|
|
|
|
var node, refGroup;
|
2013-06-21 02:55:16 +00:00
|
|
|
|
|
|
|
// Prepopulate from existing node if we're editing a node
|
|
|
|
// instead of inserting a new one
|
|
|
|
node = this.surface.getView().getFocusedNode();
|
|
|
|
if ( node instanceof ve.ce.MWReferenceListNode ) {
|
|
|
|
refGroup = node.getModel().getAttribute( 'refGroup' );
|
2014-03-12 23:38:02 +00:00
|
|
|
this.inserting = false;
|
2013-06-21 02:55:16 +00:00
|
|
|
} else {
|
|
|
|
refGroup = '';
|
2014-03-12 23:38:02 +00:00
|
|
|
this.inserting = true;
|
2013-06-21 02:55:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.groupInput.setValue( refGroup );
|
2014-03-12 23:38:02 +00:00
|
|
|
this.applyButton.setLabel ( ve.msg (
|
|
|
|
!this.inserting ?
|
|
|
|
'visualeditor-dialog-action-apply' :
|
|
|
|
'visualeditor-dialog-referencelist-insert-button'
|
|
|
|
) );
|
2013-06-21 02:55:16 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Focused node.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @property {ve.ce.MWReferenceListNode|undefined}
|
|
|
|
*/
|
|
|
|
this.node = node;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2013-11-05 00:29:50 +00:00
|
|
|
* @inheritdoc
|
2013-06-21 02:55:16 +00:00
|
|
|
*/
|
2013-11-05 00:29:50 +00:00
|
|
|
ve.ui.MWReferenceListDialog.prototype.teardown = function ( data ) {
|
2013-06-21 02:55:16 +00:00
|
|
|
var refGroup, listGroup, oldListGroup, attrChanges,
|
|
|
|
doc, model,
|
|
|
|
surfaceModel = this.surface.getModel(),
|
|
|
|
node = this.node;
|
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
// Data initialization
|
|
|
|
data = data || {};
|
|
|
|
|
2013-06-21 02:55:16 +00:00
|
|
|
// Save changes
|
2013-11-05 00:29:50 +00:00
|
|
|
if ( data.action === 'apply' ) {
|
2013-06-21 02:55:16 +00:00
|
|
|
refGroup = this.groupInput.getValue();
|
|
|
|
listGroup = 'mwReference/' + refGroup;
|
|
|
|
|
|
|
|
if ( node ) {
|
|
|
|
// Edit existing model
|
|
|
|
doc = surfaceModel.getDocument();
|
|
|
|
model = node.getModel();
|
|
|
|
oldListGroup = model.getAttribute( 'listGroup' );
|
|
|
|
|
|
|
|
if ( listGroup !== oldListGroup ) {
|
|
|
|
attrChanges = {
|
|
|
|
listGroup: listGroup,
|
|
|
|
refGroup: refGroup
|
|
|
|
};
|
|
|
|
surfaceModel.change(
|
|
|
|
ve.dm.Transaction.newFromAttributeChanges(
|
|
|
|
doc, model.getOuterRange().start, attrChanges
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// Create new model
|
|
|
|
surfaceModel.getFragment().collapseRangeToEnd().insertContent( [
|
|
|
|
{
|
|
|
|
'type': 'mwReferenceList',
|
|
|
|
'attributes': {
|
|
|
|
'listGroup': listGroup,
|
|
|
|
'refGroup': refGroup
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{ 'type': '/mwReferenceList' }
|
2013-12-10 02:02:18 +00:00
|
|
|
] ).collapseRangeToEnd().select();
|
2013-06-21 02:55:16 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Parent method
|
2013-11-05 00:29:50 +00:00
|
|
|
ve.ui.MWDialog.prototype.teardown.call( this, data );
|
2013-06-21 02:55:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Registration */
|
|
|
|
|
2013-08-27 23:28:29 +00:00
|
|
|
ve.ui.dialogFactory.register( ve.ui.MWReferenceListDialog );
|