2013-06-18 22:58:10 +00:00
|
|
|
/*!
|
|
|
|
* VisualEditor user interface MWMediaEditDialog class.
|
|
|
|
*
|
2014-01-05 12:05:05 +00:00
|
|
|
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
|
2013-06-18 22:58:10 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
*/
|
2014-02-20 05:11:04 +00:00
|
|
|
/*global mw */
|
2013-06-18 22:58:10 +00:00
|
|
|
|
|
|
|
/**
|
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 editing MediaWiki media objects.
|
2013-06-18 22:58:10 +00:00
|
|
|
*
|
|
|
|
* @class
|
2014-04-04 17:42:13 +00:00
|
|
|
* @extends ve.ui.Dialog
|
2013-06-18 22:58:10 +00:00
|
|
|
*
|
|
|
|
* @constructor
|
2013-09-25 10:21:09 +00:00
|
|
|
* @param {Object} [config] Configuration options
|
2013-06-18 22:58:10 +00:00
|
|
|
*/
|
2014-04-04 17:42:13 +00:00
|
|
|
ve.ui.MWMediaEditDialog = function VeUiMWMediaEditDialog( config ) {
|
2013-06-18 22:58:10 +00:00
|
|
|
// Parent constructor
|
2014-04-04 17:42:13 +00:00
|
|
|
ve.ui.Dialog.call( this, config );
|
2013-06-18 22:58:10 +00:00
|
|
|
|
|
|
|
// Properties
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
this.mediaNode = null;
|
2013-06-18 22:58:10 +00:00
|
|
|
this.captionNode = null;
|
2014-01-26 14:26:57 +00:00
|
|
|
this.store = null;
|
2014-04-10 00:26:48 +00:00
|
|
|
this.scalable = null;
|
2014-04-16 22:12:39 +00:00
|
|
|
|
|
|
|
// Events
|
|
|
|
this.connect( this, { 'open': 'onOpen' } );
|
2013-06-18 22:58:10 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Inheritance */
|
|
|
|
|
2014-04-04 17:42:13 +00:00
|
|
|
OO.inheritClass( ve.ui.MWMediaEditDialog, ve.ui.Dialog );
|
2013-06-18 22:58:10 +00:00
|
|
|
|
|
|
|
/* Static Properties */
|
|
|
|
|
2013-08-27 23:28:29 +00:00
|
|
|
ve.ui.MWMediaEditDialog.static.name = 'mediaEdit';
|
|
|
|
|
2014-02-12 21:45:37 +00:00
|
|
|
ve.ui.MWMediaEditDialog.static.title =
|
|
|
|
OO.ui.deferMsg( 'visualeditor-dialog-media-title' );
|
2013-06-18 22:58:10 +00:00
|
|
|
|
|
|
|
ve.ui.MWMediaEditDialog.static.icon = 'picture';
|
|
|
|
|
2013-08-09 18:29:09 +00:00
|
|
|
ve.ui.MWMediaEditDialog.static.toolbarGroups = [
|
2013-12-12 19:04:15 +00:00
|
|
|
// History
|
2013-08-27 23:28:29 +00:00
|
|
|
{ 'include': [ 'undo', 'redo' ] },
|
2013-12-12 19:04:15 +00:00
|
|
|
// No formatting
|
|
|
|
/* {
|
|
|
|
'type': 'menu',
|
2014-01-13 22:46:15 +00:00
|
|
|
'indicator': 'down',
|
2014-03-15 00:01:44 +00:00
|
|
|
'title': OO.ui.deferMsg( 'visualeditor-toolbar-format-tooltip' ),
|
2013-12-12 19:04:15 +00:00
|
|
|
'include': [ { 'group': 'format' } ],
|
|
|
|
'promote': [ 'paragraph' ],
|
|
|
|
'demote': [ 'preformatted', 'heading1' ]
|
|
|
|
},*/
|
|
|
|
// Style
|
|
|
|
{
|
|
|
|
'type': 'list',
|
|
|
|
'icon': 'text-style',
|
2014-01-13 22:46:15 +00:00
|
|
|
'indicator': 'down',
|
2014-03-15 00:01:44 +00:00
|
|
|
'title': OO.ui.deferMsg( 'visualeditor-toolbar-style-tooltip' ),
|
2013-12-12 19:04:15 +00:00
|
|
|
'include': [ { 'group': 'textStyle' }, 'clear' ],
|
|
|
|
'promote': [ 'bold', 'italic' ],
|
2014-03-15 00:01:44 +00:00
|
|
|
'demote': [ 'strikethrough', 'code', 'underline', 'clear' ]
|
2013-12-12 19:04:15 +00:00
|
|
|
},
|
|
|
|
// Link
|
|
|
|
{ 'include': [ 'link' ] },
|
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
|
|
|
// Cite
|
|
|
|
{
|
|
|
|
'type': 'list',
|
|
|
|
'label': 'Cite',
|
|
|
|
'indicator': 'down',
|
|
|
|
'include': [ { 'group': 'cite' } ]
|
|
|
|
},
|
2014-03-25 00:13:59 +00:00
|
|
|
// No structure
|
|
|
|
/* {
|
|
|
|
'type': 'bar',
|
|
|
|
'include': [ 'number', 'bullet', 'outdent', 'indent' ]
|
|
|
|
},*/
|
2013-12-12 19:04:15 +00:00
|
|
|
// Insert
|
2013-09-05 00:32:50 +00:00
|
|
|
{
|
2014-02-12 23:04:28 +00:00
|
|
|
'label': OO.ui.deferMsg( 'visualeditor-toolbar-insert' ),
|
2014-01-13 22:46:15 +00:00
|
|
|
'indicator': 'down',
|
2013-09-05 00:32:50 +00:00
|
|
|
'include': '*',
|
2014-02-05 19:45:56 +00:00
|
|
|
'exclude': [
|
2014-03-15 00:01:44 +00:00
|
|
|
{ 'group': 'format' },
|
|
|
|
{ 'group': 'structure' },
|
2014-02-05 19:45:56 +00:00
|
|
|
'referenceList',
|
|
|
|
'gallery'
|
|
|
|
],
|
2014-03-05 22:49:52 +00:00
|
|
|
'promote': [ 'reference', 'mediaInsert' ],
|
|
|
|
'demote': [ 'language', 'specialcharacter' ]
|
2013-09-05 00:32:50 +00:00
|
|
|
}
|
2013-06-18 22:58:10 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
ve.ui.MWMediaEditDialog.static.surfaceCommands = [
|
2013-12-12 19:04:15 +00:00
|
|
|
'undo',
|
|
|
|
'redo',
|
|
|
|
'bold',
|
|
|
|
'italic',
|
|
|
|
'link',
|
|
|
|
'clear',
|
|
|
|
'underline',
|
|
|
|
'subscript',
|
|
|
|
'superscript',
|
|
|
|
'pasteSpecial'
|
2013-06-18 22:58:10 +00:00
|
|
|
];
|
|
|
|
|
2014-02-03 15:08:52 +00:00
|
|
|
ve.ui.MWMediaEditDialog.static.pasteRules = ve.extendObject(
|
2014-02-06 22:30:07 +00:00
|
|
|
ve.copy( ve.init.mw.Target.static.pasteRules ),
|
2014-02-03 15:08:52 +00:00
|
|
|
{
|
|
|
|
'all': {
|
|
|
|
'blacklist': OO.simpleArrayUnion(
|
2014-02-06 22:30:07 +00:00
|
|
|
ve.getProp( ve.init.mw.Target.static.pasteRules, 'all', 'blacklist' ) || [],
|
2014-02-03 15:08:52 +00:00
|
|
|
[
|
|
|
|
// Tables (but not lists) are possible in wikitext with a leading
|
|
|
|
// line break but we prevent creating these with the UI
|
|
|
|
'list', 'listItem', 'definitionList', 'definitionListItem',
|
|
|
|
'table', 'tableCaption', 'tableSection', 'tableRow', 'tableCell'
|
|
|
|
]
|
|
|
|
),
|
|
|
|
// Headings are also possible, but discouraged
|
|
|
|
'conversions': {
|
|
|
|
'mwHeading': 'paragraph'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2013-06-18 22:58:10 +00:00
|
|
|
/* Methods */
|
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
2013-06-18 22:58:10 +00:00
|
|
|
ve.ui.MWMediaEditDialog.prototype.initialize = function () {
|
2014-02-27 17:39:19 +00:00
|
|
|
var altTextFieldset, positionFieldset, borderField, positionField;
|
2013-06-21 02:47:10 +00:00
|
|
|
// Parent method
|
2014-04-04 17:42:13 +00:00
|
|
|
ve.ui.Dialog.prototype.initialize.call( this );
|
2013-06-18 22:58:10 +00:00
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
this.$spinner = this.$( '<div>' ).addClass( 've-specialchar-spinner' );
|
|
|
|
|
2013-12-21 22:37:54 +00:00
|
|
|
// Set up the booklet layout
|
|
|
|
this.bookletLayout = new OO.ui.BookletLayout( {
|
|
|
|
'$': this.$,
|
|
|
|
'outlined': true
|
|
|
|
} );
|
|
|
|
|
2014-02-15 01:37:32 +00:00
|
|
|
this.generalSettingsPage = new OO.ui.PageLayout( 'general', { '$': this.$ } );
|
|
|
|
this.advancedSettingsPage = new OO.ui.PageLayout( 'advanced', { '$': this.$ } );
|
2013-12-21 22:37:54 +00:00
|
|
|
this.bookletLayout.addPages( [
|
|
|
|
this.generalSettingsPage, this.advancedSettingsPage
|
|
|
|
] );
|
2014-02-15 01:37:32 +00:00
|
|
|
this.generalSettingsPage.getOutlineItem()
|
|
|
|
.setIcon( 'parameter' )
|
|
|
|
.setLabel( ve.msg( 'visualeditor-dialog-media-page-general' ) );
|
|
|
|
this.advancedSettingsPage.getOutlineItem()
|
|
|
|
.setIcon( 'parameter' )
|
|
|
|
.setLabel( ve.msg( 'visualeditor-dialog-media-page-advanced' ) );
|
2013-12-21 22:37:54 +00:00
|
|
|
|
|
|
|
// Define fieldsets for image settings
|
|
|
|
|
|
|
|
// Caption
|
2014-01-26 14:26:57 +00:00
|
|
|
this.captionFieldset = new OO.ui.FieldsetLayout( {
|
2013-11-01 19:45:59 +00:00
|
|
|
'$': this.$,
|
2013-06-18 22:58:10 +00:00
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-content-section' ),
|
|
|
|
'icon': 'parameter'
|
|
|
|
} );
|
2013-12-21 22:37:54 +00:00
|
|
|
|
2013-12-28 10:29:35 +00:00
|
|
|
// Alt text
|
|
|
|
altTextFieldset = new OO.ui.FieldsetLayout( {
|
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-alttext-section' ),
|
|
|
|
'icon': 'parameter'
|
|
|
|
} );
|
|
|
|
|
|
|
|
this.altTextInput = new OO.ui.TextInputWidget( {
|
|
|
|
'$': this.$
|
|
|
|
} );
|
|
|
|
|
2014-02-18 19:45:21 +00:00
|
|
|
this.altTextInput.$element.addClass( 've-ui-mwMediaEditDialog-altText' );
|
|
|
|
|
2013-12-28 10:29:35 +00:00
|
|
|
// Build alt text fieldset
|
|
|
|
altTextFieldset.$element
|
|
|
|
.append( this.altTextInput.$element );
|
|
|
|
|
2013-12-29 03:49:06 +00:00
|
|
|
// Position
|
2013-12-29 05:49:56 +00:00
|
|
|
this.positionInput = new OO.ui.ButtonSelectWidget( {
|
2013-12-29 03:49:06 +00:00
|
|
|
'$': this.$
|
|
|
|
} );
|
|
|
|
this.positionInput.addItems( [
|
2014-03-03 11:42:52 +00:00
|
|
|
new OO.ui.ButtonOptionWidget( 'left', {
|
|
|
|
'$': this.$,
|
|
|
|
'icon': 'align-float-left',
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-position-left' )
|
|
|
|
} ),
|
|
|
|
new OO.ui.ButtonOptionWidget( 'center', {
|
|
|
|
'$': this.$,
|
|
|
|
'icon': 'align-center',
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-position-center' )
|
|
|
|
} ),
|
|
|
|
new OO.ui.ButtonOptionWidget( 'right', {
|
|
|
|
'$': this.$,
|
|
|
|
'icon': 'align-float-right',
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-position-right' )
|
|
|
|
} ),
|
2013-12-29 03:49:06 +00:00
|
|
|
], 0 );
|
2014-01-21 18:05:50 +00:00
|
|
|
|
|
|
|
this.positionCheckbox = new OO.ui.CheckboxInputWidget( {
|
|
|
|
'$': this.$
|
|
|
|
} );
|
|
|
|
positionField = new OO.ui.FieldLayout( this.positionCheckbox, {
|
|
|
|
'$': this.$,
|
|
|
|
'align': 'inline',
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-position-checkbox' )
|
|
|
|
} );
|
|
|
|
|
|
|
|
positionFieldset = new OO.ui.FieldsetLayout( {
|
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-position-section' ),
|
|
|
|
'icon': 'parameter'
|
|
|
|
} );
|
|
|
|
|
2013-12-29 03:49:06 +00:00
|
|
|
// Build position fieldset
|
2014-01-21 18:05:50 +00:00
|
|
|
positionFieldset.$element.append( [
|
|
|
|
positionField.$element,
|
|
|
|
this.positionInput.$element
|
|
|
|
] );
|
2013-12-29 03:49:06 +00:00
|
|
|
|
2013-12-29 05:49:56 +00:00
|
|
|
// Type
|
|
|
|
this.typeFieldset = new OO.ui.FieldsetLayout( {
|
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-type-section' ),
|
|
|
|
'icon': 'parameter'
|
|
|
|
} );
|
|
|
|
|
|
|
|
this.typeInput = new OO.ui.ButtonSelectWidget( {
|
|
|
|
'$': this.$
|
|
|
|
} );
|
|
|
|
this.typeInput.addItems( [
|
|
|
|
// TODO: Inline images require a bit of further work, will be coming soon
|
|
|
|
new OO.ui.ButtonOptionWidget( 'thumb', {
|
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-type-thumb' )
|
|
|
|
} ),
|
|
|
|
new OO.ui.ButtonOptionWidget( 'frameless', {
|
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-type-frameless' )
|
|
|
|
} ),
|
|
|
|
new OO.ui.ButtonOptionWidget( 'frame', {
|
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-type-frame' )
|
|
|
|
} ),
|
2014-02-27 17:39:19 +00:00
|
|
|
new OO.ui.ButtonOptionWidget( 'none', {
|
2013-12-29 05:49:56 +00:00
|
|
|
'$': this.$,
|
2014-02-27 17:39:19 +00:00
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-type-none' )
|
2013-12-29 05:49:56 +00:00
|
|
|
} )
|
|
|
|
] );
|
2014-02-27 17:39:19 +00:00
|
|
|
this.borderCheckbox = new OO.ui.CheckboxInputWidget( {
|
|
|
|
'$': this.$
|
|
|
|
} );
|
|
|
|
borderField = new OO.ui.FieldLayout( this.borderCheckbox, {
|
|
|
|
'$': this.$,
|
|
|
|
'align': 'inline',
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-type-border' )
|
|
|
|
} );
|
2013-12-29 05:49:56 +00:00
|
|
|
|
|
|
|
// Build type fieldset
|
2014-02-27 17:39:19 +00:00
|
|
|
this.typeFieldset.$element.append( [
|
|
|
|
this.typeInput.$element,
|
|
|
|
borderField.$element
|
|
|
|
] );
|
2013-12-29 05:49:56 +00:00
|
|
|
|
2013-12-21 22:37:54 +00:00
|
|
|
// Size
|
2014-01-26 14:26:57 +00:00
|
|
|
this.sizeFieldset = new OO.ui.FieldsetLayout( {
|
2013-12-21 22:37:54 +00:00
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-size-section' ),
|
|
|
|
'icon': 'parameter'
|
|
|
|
} );
|
|
|
|
|
2014-01-22 20:13:59 +00:00
|
|
|
this.sizeErrorLabel = new OO.ui.LabelWidget( {
|
2013-12-21 22:37:54 +00:00
|
|
|
'$': this.$,
|
|
|
|
'label': ve.msg( 'visualeditor-dialog-media-size-originalsize-error' )
|
|
|
|
} );
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
this.sizeWidget = new ve.ui.MediaSizeWidget( {}, {
|
2014-02-20 05:11:04 +00:00
|
|
|
'$': this.$
|
|
|
|
} );
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
this.$sizeWidgetElements = this.$( '<div>' ).append( [
|
2014-01-26 14:26:57 +00:00
|
|
|
this.sizeWidget.$element,
|
2014-01-26 15:02:07 +00:00
|
|
|
this.sizeErrorLabel.$element
|
2013-12-21 22:37:54 +00:00
|
|
|
] );
|
2014-04-10 00:26:48 +00:00
|
|
|
this.sizeFieldset.$element.append( [
|
|
|
|
this.$spinner,
|
|
|
|
this.$sizeWidgetElements
|
|
|
|
] );
|
2013-12-21 22:37:54 +00:00
|
|
|
|
2014-02-20 05:11:04 +00:00
|
|
|
// Get wiki default thumbnail size
|
2014-04-10 00:26:48 +00:00
|
|
|
this.defaultThumbSize = mw.config.get( 'wgVisualEditorConfig' ).defaultUserOptions.defaultthumbsize;
|
2014-02-20 05:11:04 +00:00
|
|
|
|
2014-01-17 14:24:12 +00:00
|
|
|
this.applyButton = new OO.ui.ButtonWidget( {
|
2013-11-01 19:45:59 +00:00
|
|
|
'$': this.$,
|
2013-07-18 18:36:43 +00:00
|
|
|
'label': ve.msg( 'visualeditor-dialog-action-apply' ),
|
|
|
|
'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' } ] } );
|
2014-01-21 18:05:50 +00:00
|
|
|
this.positionCheckbox.connect( this, { 'change': 'onPositionCheckboxChange' } );
|
2014-02-20 05:11:04 +00:00
|
|
|
this.sizeWidget.connect( this, { 'change': 'onSizeWidgetChange' } );
|
2014-02-24 21:56:24 +00:00
|
|
|
this.typeInput.connect( this, { 'select': 'onTypeChange' } );
|
2014-04-16 22:12:39 +00:00
|
|
|
this.bookletLayout.connect( this, { 'set': 'onBookletLayoutSet' } );
|
2013-06-18 22:58:10 +00:00
|
|
|
|
|
|
|
// Initialization
|
2013-12-28 10:29:35 +00:00
|
|
|
this.generalSettingsPage.$element.append( [
|
|
|
|
this.captionFieldset.$element,
|
|
|
|
altTextFieldset.$element
|
|
|
|
] );
|
2013-12-29 03:49:06 +00:00
|
|
|
|
|
|
|
this.advancedSettingsPage.$element.append( [
|
|
|
|
positionFieldset.$element,
|
2013-12-29 05:49:56 +00:00
|
|
|
this.typeFieldset.$element,
|
2013-12-29 03:49:06 +00:00
|
|
|
this.sizeFieldset.$element
|
|
|
|
] );
|
2013-12-21 22:37:54 +00:00
|
|
|
|
|
|
|
this.$body.append( this.bookletLayout.$element );
|
2013-11-01 19:45:59 +00:00
|
|
|
this.$foot.append( this.applyButton.$element );
|
2013-06-18 22:58:10 +00:00
|
|
|
};
|
|
|
|
|
2014-02-20 05:11:04 +00:00
|
|
|
/**
|
|
|
|
* Handle change event on the sizeWidget. Switch the size select
|
|
|
|
* from default to custom and vise versa based on the values in
|
|
|
|
* the widget.
|
|
|
|
*/
|
|
|
|
ve.ui.MWMediaEditDialog.prototype.onSizeWidgetChange = function () {
|
2014-02-27 17:39:19 +00:00
|
|
|
// Switch to 'default' or 'custom' size
|
2014-02-20 05:11:04 +00:00
|
|
|
if ( this.sizeWidget.isEmpty() ) {
|
2014-04-10 00:26:48 +00:00
|
|
|
this.sizeWidget.setSizeType( 'default' );
|
2014-02-20 05:11:04 +00:00
|
|
|
} else {
|
2014-04-10 00:26:48 +00:00
|
|
|
this.sizeWidget.setSizeType( 'custom' );
|
2014-02-20 05:11:04 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2014-02-24 21:56:24 +00:00
|
|
|
/**
|
|
|
|
* Handle type change, particularly to and from 'thumb' to make
|
|
|
|
* sure size is limited.
|
2014-03-06 18:37:17 +00:00
|
|
|
* @param {OO.ui.ButtonOptionWidget} item Selected item
|
2014-02-24 21:56:24 +00:00
|
|
|
*/
|
2014-03-06 18:37:17 +00:00
|
|
|
ve.ui.MWMediaEditDialog.prototype.onTypeChange = function ( item ) {
|
2014-04-10 00:26:48 +00:00
|
|
|
var selectedType = item ? item.getData() : '',
|
|
|
|
thumbOrFrameless = selectedType === 'thumb' || selectedType === 'frameless',
|
|
|
|
originalDimensions = this.scalable.getOriginalDimensions();
|
2014-03-05 19:31:45 +00:00
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
// As per wikitext docs, both 'thumb' and 'frameless' images are
|
|
|
|
// limited in max size to their original size
|
2014-03-05 19:31:45 +00:00
|
|
|
if ( thumbOrFrameless ) {
|
2014-04-10 00:26:48 +00:00
|
|
|
if ( originalDimensions ) {
|
|
|
|
// Set original dimensions as the max. In the future we may
|
|
|
|
// want to switch between original dimensions (in frameless
|
|
|
|
// and thumb) and perhaps some preset maximum dimensions for
|
|
|
|
// basic and frameless.
|
|
|
|
this.scalable.setMaxDimensions( originalDimensions );
|
|
|
|
this.scalable.setEnforcedMax( true );
|
2014-03-21 18:50:39 +00:00
|
|
|
} else {
|
2014-04-10 00:26:48 +00:00
|
|
|
// We don't have maximum dimensions available, so we can't
|
|
|
|
// enforce any max size
|
|
|
|
this.scalable.setEnforcedMax( false );
|
2014-03-21 18:50:39 +00:00
|
|
|
}
|
2014-04-16 04:03:35 +00:00
|
|
|
} else {
|
|
|
|
// Don't limit maximum dimensions on basic and frameless images
|
|
|
|
this.scalable.setEnforcedMax( false );
|
|
|
|
}
|
|
|
|
|
2014-04-16 17:14:58 +00:00
|
|
|
// Disable border checkbox for thumb and framed images
|
2014-04-16 04:03:35 +00:00
|
|
|
// According to documentation:
|
|
|
|
// https://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax#Border
|
2014-04-16 17:14:58 +00:00
|
|
|
if ( selectedType === 'thumb' || selectedType === 'frame' ) {
|
2014-04-10 00:26:48 +00:00
|
|
|
// Disable border option
|
2014-02-27 17:39:19 +00:00
|
|
|
this.borderCheckbox.setDisabled( true );
|
|
|
|
this.borderCheckbox.setValue( false );
|
|
|
|
} else {
|
2014-04-10 00:26:48 +00:00
|
|
|
// Enable border option
|
2014-02-27 17:39:19 +00:00
|
|
|
this.borderCheckbox.setDisabled( false );
|
2014-02-24 21:56:24 +00:00
|
|
|
}
|
2014-03-05 19:31:45 +00:00
|
|
|
|
2014-02-24 21:56:24 +00:00
|
|
|
// Re-validate the existing dimensions
|
|
|
|
this.sizeWidget.validateDimensions();
|
|
|
|
};
|
|
|
|
|
2014-01-21 18:05:50 +00:00
|
|
|
/**
|
|
|
|
* Handle change event on the positionCheckbox element. If an option
|
|
|
|
* is selected, mark the checkbox
|
|
|
|
*/
|
|
|
|
ve.ui.MWMediaEditDialog.prototype.onPositionCheckboxChange = function () {
|
|
|
|
var checked = this.positionCheckbox.getValue();
|
|
|
|
|
|
|
|
if ( !checked ) {
|
|
|
|
// If unchecked, remove selection
|
2014-04-07 19:15:01 +00:00
|
|
|
this.positionInput.selectItem( null );
|
2014-01-21 18:05:50 +00:00
|
|
|
} else {
|
|
|
|
// If checked, choose default position
|
2014-04-04 17:42:13 +00:00
|
|
|
if ( this.getFragment().getDocument().getDir() === 'ltr' ) {
|
2014-01-21 18:05:50 +00:00
|
|
|
// Assume default is 'right'
|
|
|
|
this.positionInput.selectItem(
|
|
|
|
this.positionInput.getItemFromData( 'right' )
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
// Assume default is 'left'
|
|
|
|
this.positionInput.selectItem(
|
|
|
|
this.positionInput.getItemFromData( 'left' )
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.positionInput.setDisabled( !checked );
|
|
|
|
};
|
|
|
|
|
2014-04-16 22:12:39 +00:00
|
|
|
ve.ui.MWMediaEditDialog.prototype.onBookletLayoutSet = function ( page ) {
|
|
|
|
// When switching to the general settings page, focus the surface
|
|
|
|
if ( page === this.generalSettingsPage ) {
|
|
|
|
this.captionSurface.focus();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
ve.ui.MWMediaEditDialog.prototype.setup = function ( data ) {
|
2014-01-26 15:02:07 +00:00
|
|
|
var newDoc,
|
2014-01-26 20:09:40 +00:00
|
|
|
dialog = this,
|
2014-04-04 17:42:13 +00:00
|
|
|
doc = this.getFragment().getSurface().getDocument();
|
2013-12-21 22:37:54 +00:00
|
|
|
|
2013-06-18 22:58:10 +00:00
|
|
|
// Parent method
|
2014-04-04 17:42:13 +00:00
|
|
|
ve.ui.Dialog.prototype.setup.call( this, data );
|
2013-11-05 00:29:50 +00:00
|
|
|
|
2013-07-18 18:36:43 +00:00
|
|
|
// Properties
|
2014-04-04 17:42:13 +00:00
|
|
|
this.mediaNode = this.getFragment().getSelectedNode();
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
this.captionNode = this.mediaNode.getCaptionNode();
|
2014-04-04 17:42:13 +00:00
|
|
|
this.store = doc.getStore();
|
2014-01-26 14:26:57 +00:00
|
|
|
|
2013-06-18 22:58:10 +00:00
|
|
|
if ( this.captionNode && this.captionNode.getLength() > 0 ) {
|
2013-10-03 09:52:21 +00:00
|
|
|
newDoc = doc.cloneFromRange( this.captionNode.getRange() );
|
2013-06-18 22:58:10 +00:00
|
|
|
} else {
|
2014-02-06 14:12:04 +00:00
|
|
|
newDoc = new ve.dm.Document( [
|
2013-06-18 22:58:10 +00:00
|
|
|
{ 'type': 'paragraph', 'internal': { 'generated': 'wrapper' } },
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
{ 'type': '/paragraph' },
|
|
|
|
{ 'type': 'internalList' },
|
|
|
|
{ 'type': '/internalList' }
|
2014-02-06 14:12:04 +00:00
|
|
|
] );
|
2013-06-18 22:58:10 +00:00
|
|
|
}
|
|
|
|
|
2013-07-18 18:36:43 +00:00
|
|
|
this.captionSurface = new ve.ui.SurfaceWidget(
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
newDoc,
|
2013-07-18 18:36:43 +00:00
|
|
|
{
|
2013-11-01 19:45:59 +00:00
|
|
|
'$': this.$,
|
2013-08-09 18:29:09 +00:00
|
|
|
'tools': this.constructor.static.toolbarGroups,
|
2014-02-03 15:08:52 +00:00
|
|
|
'commands': this.constructor.static.surfaceCommands,
|
|
|
|
'pasteRules': this.constructor.static.pasteRules
|
2013-07-18 18:36:43 +00:00
|
|
|
}
|
2013-06-18 22:58:10 +00:00
|
|
|
);
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
this.$spinner.show();
|
|
|
|
this.$sizeWidgetElements.hide();
|
|
|
|
this.sizeErrorLabel.$element.hide();
|
|
|
|
// Ask for the asynchronous call to get a full scalable object
|
|
|
|
// with original dimensions and imageinfo from the API
|
|
|
|
this.mediaNode.getScalablePromise()
|
|
|
|
.done( ve.bind( function () {
|
|
|
|
this.scalable = this.mediaNode.getScalable();
|
|
|
|
this.$spinner.hide();
|
|
|
|
this.$sizeWidgetElements.show();
|
2014-02-12 21:11:34 +00:00
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
if (
|
|
|
|
this.mediaNode.getAttribute( 'type' ) === 'thumb' &&
|
|
|
|
this.scalable.getOriginalDimensions()
|
|
|
|
) {
|
|
|
|
// Set the max dimensions to the image's original dimensions
|
|
|
|
this.scalable.setMaxDimensions(
|
|
|
|
this.scalable.getOriginalDimensions()
|
|
|
|
);
|
|
|
|
// Tell the size widget to limit maxDimensions to image's original dimensions
|
|
|
|
this.scalable.setEnforcedMax( true );
|
|
|
|
} else {
|
|
|
|
this.scalable.setEnforcedMax( false );
|
|
|
|
}
|
2014-02-27 17:39:19 +00:00
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
// Send the scalable object to the size widget
|
|
|
|
this.sizeWidget.setScalable( this.scalable );
|
|
|
|
this.scalable.setDefaultDimensions(
|
|
|
|
this.scalable.getDimensionsFromValue( { 'width': this.defaultThumbSize } )
|
|
|
|
);
|
|
|
|
}, this ) )
|
|
|
|
.fail( ve.bind( function () {
|
|
|
|
dialog.sizeErrorLabel.$element.show();
|
|
|
|
}, this ) );
|
|
|
|
|
|
|
|
// Initialize size
|
|
|
|
this.sizeWidget.setSizeType(
|
|
|
|
this.mediaNode.getAttribute( 'defaultSize' ) ?
|
|
|
|
'default' :
|
|
|
|
'custom'
|
|
|
|
);
|
2014-02-24 21:56:24 +00:00
|
|
|
|
2013-12-28 10:29:35 +00:00
|
|
|
// Set initial alt text
|
|
|
|
this.altTextInput.setValue( this.mediaNode.getAttribute( 'alt' ) || '' );
|
2013-12-21 22:37:54 +00:00
|
|
|
|
2013-12-29 03:49:06 +00:00
|
|
|
// Set initial position
|
2014-01-21 18:05:50 +00:00
|
|
|
if (
|
|
|
|
!this.mediaNode.getAttribute( 'align' ) ||
|
|
|
|
this.mediaNode.getAttribute( 'align' ) === 'none'
|
|
|
|
) {
|
|
|
|
this.positionCheckbox.setValue( false );
|
|
|
|
this.positionInput.setDisabled( true );
|
2014-04-07 19:15:01 +00:00
|
|
|
this.positionInput.selectItem( null );
|
2014-01-21 18:05:50 +00:00
|
|
|
} else {
|
|
|
|
this.positionCheckbox.setValue( true );
|
|
|
|
this.positionInput.setDisabled( false );
|
|
|
|
if ( this.mediaNode.getAttribute( 'align' ) === 'default' ) {
|
|
|
|
// Assume wiki default according to wiki dir
|
2014-04-04 17:42:13 +00:00
|
|
|
if ( this.getFragment().getDocument().getDir() === 'ltr' ) {
|
2014-01-21 18:05:50 +00:00
|
|
|
// Assume default is 'right'
|
|
|
|
this.positionInput.selectItem(
|
|
|
|
this.positionInput.getItemFromData( 'right' )
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
// Assume default is 'left'
|
|
|
|
this.positionInput.selectItem(
|
|
|
|
this.positionInput.getItemFromData( 'left' )
|
|
|
|
);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.positionInput.selectItem(
|
|
|
|
this.positionInput.getItemFromData( this.mediaNode.getAttribute( 'align' ) )
|
|
|
|
);
|
|
|
|
}
|
2013-12-29 03:49:06 +00:00
|
|
|
}
|
|
|
|
|
2014-02-27 17:39:19 +00:00
|
|
|
// Border flag
|
|
|
|
this.borderCheckbox.setValue( !!this.mediaNode.getAttribute( 'borderImage' ) );
|
|
|
|
|
2013-12-29 05:49:56 +00:00
|
|
|
// Set image type
|
2014-04-07 19:15:01 +00:00
|
|
|
this.typeInput.selectItem( null );
|
2013-12-29 05:49:56 +00:00
|
|
|
if ( this.mediaNode.getAttribute( 'type' ) !== undefined ) {
|
|
|
|
this.typeInput.selectItem(
|
|
|
|
this.typeInput.getItemFromData( this.mediaNode.getAttribute( 'type' ) )
|
|
|
|
);
|
2014-02-27 17:39:19 +00:00
|
|
|
} else {
|
|
|
|
// Explicitly show 'none' if no type was specified
|
|
|
|
this.typeInput.selectItem(
|
|
|
|
this.typeInput.getItemFromData( 'none' )
|
|
|
|
);
|
2013-12-29 05:49:56 +00:00
|
|
|
}
|
|
|
|
|
2013-07-18 18:36:43 +00:00
|
|
|
// Initialization
|
2014-01-26 14:26:57 +00:00
|
|
|
this.captionFieldset.$element.append( this.captionSurface.$element );
|
2013-06-18 22:58:10 +00:00
|
|
|
this.captionSurface.initialize();
|
|
|
|
};
|
|
|
|
|
2014-04-16 22:12:39 +00:00
|
|
|
/**
|
|
|
|
* Respond to 'open' event. Fires once the dialog has finished opening.
|
|
|
|
*/
|
|
|
|
ve.ui.MWMediaEditDialog.prototype.onOpen = function () {
|
|
|
|
// Focus the caption surface
|
|
|
|
this.captionSurface.focus();
|
|
|
|
};
|
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
ve.ui.MWMediaEditDialog.prototype.teardown = function ( data ) {
|
2014-04-10 00:26:48 +00:00
|
|
|
var newDoc, doc, originalAlt, attr, transactionAttributes = {},
|
|
|
|
imageSizeType, imageType, imageAlignmentCheckbox,
|
|
|
|
imageAlignmentValue, originalDimensions,
|
2014-04-04 17:42:13 +00:00
|
|
|
surfaceModel = this.getFragment().getSurface();
|
2013-06-18 22:58:10 +00:00
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
// Data initialization
|
|
|
|
data = data || {};
|
2013-06-18 22:58:10 +00:00
|
|
|
|
2013-11-05 00:29:50 +00:00
|
|
|
if ( data.action === 'apply' ) {
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
newDoc = this.captionSurface.getSurface().getModel().getDocument();
|
2013-06-18 22:58:10 +00:00
|
|
|
doc = surfaceModel.getDocument();
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
if ( !this.captionNode ) {
|
2013-06-18 22:58:10 +00:00
|
|
|
// Insert a new caption at the beginning of the image node
|
|
|
|
surfaceModel.getFragment()
|
|
|
|
.adjustRange( 1 )
|
|
|
|
.collapseRangeToStart()
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
.insertContent( [ { 'type': 'mwImageCaption' }, { 'type': '/mwImageCaption' } ] );
|
|
|
|
this.captionNode = this.mediaNode.getCaptionNode();
|
2013-06-18 22:58:10 +00:00
|
|
|
}
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
// Replace the contents of the caption
|
|
|
|
surfaceModel.change(
|
2013-09-30 13:25:28 +00:00
|
|
|
ve.dm.Transaction.newFromRemoval( doc, this.captionNode.getRange(), true )
|
|
|
|
);
|
|
|
|
surfaceModel.change(
|
|
|
|
ve.dm.Transaction.newFromDocumentInsertion( doc, this.captionNode.getRange().start, newDoc )
|
Introduce newFromDocumentReplace() transaction builder
Replaces newFromNodeReplacement(). newFromNodeReplacement was very
simplistic and didn't support metadata or internal list items, so
if you had comments or references inside of the data you were editing
(reference contents or an image caption), they'd get mangled.
With this, you can do:
newDoc = doc.getDocumentSlice( node );
// Edit newDoc
tx = ve.dm.Transaction.newFromDocumentReplace( doc, node, newDoc );
surface.change( newDoc );
and that takes care of metadata, internal list items, and things like
references that reference internal list items.
ve.dm.Document.js:
* In getDocumentSlice(), store a reference to the original document
and the number of items in its InternalList at the time of slicing
in the created slice. This is used for reconciliation when the
modified slice is injected back into the parent document with
newFromDocumentReplace().
ve.dm.InternalList.js:
* Add a method for merging in another InternalList. This provides a
mapping from old to new InternalList indexes so the linear model data
being injected by newFromDocumentReplace() can have its InternalList
indexes remapped.
ve.dm.Transaction.js:
* Replace newFromNodeReplacement() with newFromDocumentReplace()
ve.ui.MWMediaEditDialog.js, ve.ui.MWReferenceDialog.js:
* Use getDocumentSlice/newFromDocumentReplace for editing captions/refs
* Change insertion code path to insert an empty internalItem/caption, then
newFromDocumentReplace into that
* Add empty internalList to new mini-documents
ve/test/dm/ve.dm.Transaction.test.js:
* Replace newFromNodeReplacement tests with newFromDocumentReplace tests
ve-mw/test/dm/ve.dm.Transaction.test.js (new):
* Add tests for newFromDocumentReplace with mwReference nodes
ve.dm.mwExample.js:
* Add data for newFromDocumentReplace with mwReference tests
VisualEditor.hooks.php:
* Add new test file
Bug: 52102
Change-Id: I4aa980780114b391924f04df588e81c990c32983
2013-09-05 01:05:07 +00:00
|
|
|
);
|
2014-02-20 05:11:04 +00:00
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
// Get all the details and their fallbacks
|
|
|
|
imageSizeType = this.sizeWidget.getSizeType() || 'default';
|
|
|
|
imageType = this.typeInput.getSelectedItem() ? this.typeInput.getSelectedItem().getData() : '';
|
|
|
|
imageAlignmentCheckbox = this.positionCheckbox.getValue();
|
|
|
|
if ( imageAlignmentCheckbox && this.positionInput.getSelectedItem() ) {
|
|
|
|
imageAlignmentValue = this.positionInput.getSelectedItem().getData();
|
|
|
|
}
|
2014-02-27 17:39:19 +00:00
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
// Size and scalabletravaganza
|
|
|
|
attr = null;
|
|
|
|
if ( imageSizeType === 'default' ) {
|
|
|
|
transactionAttributes.defaultSize = true;
|
|
|
|
originalDimensions = this.scalable.getOriginalDimensions();
|
|
|
|
// Figure out the default size
|
|
|
|
if ( imageType === 'thumb' || imageType === 'frame' ) {
|
|
|
|
// Default is thumb-default unless the image is originally smaller
|
|
|
|
if ( originalDimensions.width > this.defaultThumbSize ) {
|
|
|
|
attr = this.scalable.getDimensionsFromValue( { 'width': this.defaultThumbSize } );
|
|
|
|
} else {
|
|
|
|
attr = originalDimensions;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// Default is full size
|
|
|
|
if ( originalDimensions ) {
|
|
|
|
attr = originalDimensions;
|
|
|
|
}
|
2014-02-27 17:39:19 +00:00
|
|
|
}
|
2014-04-10 00:26:48 +00:00
|
|
|
|
|
|
|
// Apply
|
|
|
|
if ( attr ) {
|
|
|
|
transactionAttributes.width = attr.width;
|
|
|
|
transactionAttributes.height = attr.height;
|
2014-02-12 20:38:52 +00:00
|
|
|
}
|
2014-04-10 00:26:48 +00:00
|
|
|
// Upright is not yet implemented in Parsoid. When it is,
|
|
|
|
// the scale properties should be implemented here
|
|
|
|
//} else if ( imageSizeType === 'scale' ) {
|
|
|
|
} else if ( imageSizeType === 'custom' && this.sizeWidget.isValid() ) {
|
|
|
|
attr = this.sizeWidget.getCurrentDimensions();
|
|
|
|
transactionAttributes.width = attr.width;
|
|
|
|
transactionAttributes.height = attr.height;
|
|
|
|
transactionAttributes.defaultSize = false;
|
2013-12-21 22:37:54 +00:00
|
|
|
}
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
// Set alternate text
|
2013-12-28 10:29:35 +00:00
|
|
|
attr = $.trim( this.altTextInput.getValue() );
|
|
|
|
originalAlt = this.mediaNode.getAttribute( 'alt' );
|
|
|
|
// Allow the user to submit an empty alternate text but
|
|
|
|
// not if there was no alternate text originally to avoid
|
|
|
|
// dirty diffing images with empty |alt=
|
|
|
|
if (
|
|
|
|
// If there was no original alternate text but there
|
|
|
|
// is a value now, update
|
|
|
|
( originalAlt === undefined && attr ) ||
|
|
|
|
// If original alternate text was defined, always
|
|
|
|
// update, even if the input is empty to allow the
|
|
|
|
// user to unset it
|
|
|
|
originalAlt !== undefined
|
|
|
|
) {
|
2014-04-10 00:26:48 +00:00
|
|
|
transactionAttributes.alt = attr;
|
2013-12-28 10:29:35 +00:00
|
|
|
}
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
if ( !imageAlignmentCheckbox ) {
|
2014-01-21 18:05:50 +00:00
|
|
|
// Only change to 'none' if alignment was originally
|
|
|
|
// set to anything else
|
|
|
|
if (
|
|
|
|
this.mediaNode.getAttribute( 'align' ) &&
|
|
|
|
this.mediaNode.getAttribute( 'align' ) !== 'none'
|
|
|
|
) {
|
2014-04-10 00:26:48 +00:00
|
|
|
transactionAttributes.align = 'none';
|
2014-01-21 18:05:50 +00:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// If alignment was originally default and is still
|
|
|
|
// set to the default position according to the wiki
|
|
|
|
// content direction, do not change it
|
|
|
|
if (
|
|
|
|
(
|
|
|
|
this.mediaNode.getAttribute( 'align' ) === 'default' &&
|
|
|
|
(
|
2014-04-04 17:42:13 +00:00
|
|
|
this.getFragment().getDocument().getDir() === 'ltr' &&
|
2014-04-10 00:26:48 +00:00
|
|
|
imageAlignmentValue !== 'right'
|
2014-01-21 18:05:50 +00:00
|
|
|
) ||
|
|
|
|
(
|
2014-04-04 17:42:13 +00:00
|
|
|
this.getFragment().getDocument().getDir() === 'rtl' &&
|
2014-04-10 00:26:48 +00:00
|
|
|
imageAlignmentValue !== 'left'
|
2014-01-21 18:05:50 +00:00
|
|
|
)
|
|
|
|
) ||
|
|
|
|
this.mediaNode.getAttribute( 'align' ) !== 'default'
|
|
|
|
) {
|
2014-04-10 00:26:48 +00:00
|
|
|
transactionAttributes.align = imageAlignmentValue;
|
2014-01-21 18:05:50 +00:00
|
|
|
}
|
2013-12-29 03:49:06 +00:00
|
|
|
}
|
|
|
|
|
2014-02-27 17:39:19 +00:00
|
|
|
// Border
|
|
|
|
if (
|
|
|
|
!this.borderCheckbox.isDisabled() &&
|
|
|
|
this.borderCheckbox.getValue() === true
|
|
|
|
) {
|
2014-04-10 00:26:48 +00:00
|
|
|
transactionAttributes.borderImage = true;
|
2014-02-27 17:39:19 +00:00
|
|
|
} else {
|
2014-04-10 00:26:48 +00:00
|
|
|
transactionAttributes.borderImage = false;
|
2014-02-27 17:39:19 +00:00
|
|
|
}
|
|
|
|
|
2014-04-10 00:26:48 +00:00
|
|
|
// Image type
|
|
|
|
if ( imageType ) {
|
|
|
|
transactionAttributes.type = imageType;
|
2013-12-29 05:49:56 +00:00
|
|
|
}
|
2013-12-21 22:37:54 +00:00
|
|
|
surfaceModel.change(
|
2014-04-10 00:26:48 +00:00
|
|
|
ve.dm.Transaction.newFromAttributeChanges( doc, this.mediaNode.getOffset(), transactionAttributes )
|
2013-12-21 22:37:54 +00:00
|
|
|
);
|
2013-06-18 22:58:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Cleanup
|
|
|
|
this.captionSurface.destroy();
|
2013-07-18 18:36:43 +00:00
|
|
|
this.captionSurface = null;
|
|
|
|
this.captionNode = null;
|
2013-11-05 00:29:50 +00:00
|
|
|
|
|
|
|
// Parent method
|
2014-04-04 17:42:13 +00:00
|
|
|
ve.ui.Dialog.prototype.teardown.call( this, data );
|
2013-06-18 22:58:10 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/* Registration */
|
|
|
|
|
2013-08-27 23:28:29 +00:00
|
|
|
ve.ui.dialogFactory.register( ve.ui.MWMediaEditDialog );
|