mediawiki-extensions-Visual.../modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
Moriel Schottlender 50dae0ab16 Focus the caption surface on initialization
Whenever the edit mode is active, focus the caption surface. This
is also true for cases where the dialog starts in the 'insert' mode
and then switches to 'edit'.

Bug: 68806
Change-Id: I60b862dc5738a65a6bb31eb32184c35cc108b232
2014-07-29 15:34:09 -04:00

941 lines
26 KiB
JavaScript

/*!
* VisualEditor user interface MWMediaDialog class.
*
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Dialog for inserting and editing MediaWiki media.
*
* @class
* @extends ve.ui.NodeDialog
*
* @constructor
* @param {OO.ui.WindowManager} manager Manager of window
* @param {Object} [config] Configuration options
*/
ve.ui.MWMediaDialog = function VeUiMWMediaDialog( manager, config ) {
// Parent constructor
ve.ui.MWMediaDialog.super.call( this, manager, config );
// Properties
this.imageModel = null;
this.store = null;
this.fileRepoPromise = null;
this.pageTitle = '';
this.$element.addClass( 've-ui-mwMediaDialog' );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWMediaDialog, ve.ui.NodeDialog );
/* Static Properties */
ve.ui.MWMediaDialog.static.name = 'media';
ve.ui.MWMediaDialog.static.title =
OO.ui.deferMsg( 'visualeditor-dialog-media-title' );
ve.ui.MWMediaDialog.static.icon = 'picture';
ve.ui.MWMediaDialog.static.size = 'large';
ve.ui.MWMediaDialog.static.actions = [
{
'action': 'apply',
'label': OO.ui.deferMsg( 'visualeditor-dialog-action-apply' ),
'flags': 'primary',
'modes': 'edit'
},
{
'action': 'insert',
'label': OO.ui.deferMsg( 'visualeditor-dialog-media-insert-button' ),
'flags': [ 'primary', 'constructive' ],
'modes': 'insert'
},
{
'action': 'change',
'label': OO.ui.deferMsg( 'visualeditor-dialog-media-change-image' ),
'modes': [ 'edit', 'insert' ]
},
{
'label': OO.ui.deferMsg( 'visualeditor-dialog-action-cancel' ),
'flags': 'safe',
'modes': [ 'edit', 'insert', 'select' ]
},
{
'action': 'back',
'label': OO.ui.deferMsg( 'visualeditor-dialog-media-goback' ),
'flags': 'safe',
'modes': 'change'
}
];
ve.ui.MWMediaDialog.static.modelClasses = [ ve.dm.MWBlockImageNode, ve.dm.MWInlineImageNode ];
ve.ui.MWMediaDialog.static.toolbarGroups = [
// History
{ 'include': [ 'undo', 'redo' ] },
// No formatting
/* {
'type': 'menu',
'indicator': 'down',
'title': OO.ui.deferMsg( 'visualeditor-toolbar-format-tooltip' ),
'include': [ { 'group': 'format' } ],
'promote': [ 'paragraph' ],
'demote': [ 'preformatted', 'heading1' ]
},*/
// Style
{
'type': 'list',
'icon': 'text-style',
'indicator': 'down',
'title': OO.ui.deferMsg( 'visualeditor-toolbar-style-tooltip' ),
'include': [ { 'group': 'textStyle' }, 'language', 'clear' ],
'promote': [ 'bold', 'italic' ],
'demote': [ 'strikethrough', 'code', 'underline', 'language', 'clear' ]
},
// Link
{ 'include': [ 'link' ] },
// Cite
{
'type': 'list',
'label': OO.ui.deferMsg( 'visualeditor-toolbar-cite-label' ),
'indicator': 'down',
'include': [ { 'group': 'cite' }, 'reference', 'reference/existing' ],
'demote': [ 'reference', 'reference/existing' ]
},
// No structure
/* {
'type': 'list',
'icon': 'bullet-list',
'indicator': 'down',
'include': [ { 'group': 'structure' } ],
'demote': [ 'outdent', 'indent' ]
},*/
// Insert
{
'label': OO.ui.deferMsg( 'visualeditor-toolbar-insert' ),
'indicator': 'down',
'include': '*',
'exclude': [
{ 'group': 'format' },
{ 'group': 'structure' },
'referenceList',
'gallery'
],
'promote': [ 'media', 'transclusion' ],
'demote': [ 'specialcharacter' ]
}
];
ve.ui.MWMediaDialog.static.surfaceCommands = [
'undo',
'redo',
'bold',
'italic',
'link',
'clear',
'underline',
'subscript',
'superscript',
'pasteSpecial'
];
/**
* Get the paste rules for the surface widget in the dialog
*
* @see ve.dm.ElementLinearData#sanitize
* @return {Object} Paste rules
*/
ve.ui.MWMediaDialog.static.getPasteRules = function () {
return ve.extendObject(
ve.copy( ve.init.target.constructor.static.pasteRules ),
{
'all': {
'blacklist': OO.simpleArrayUnion(
ve.getProp( ve.init.target.constructor.static.pasteRules, 'all', 'blacklist' ) || [],
[
// 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'
}
}
}
);
};
/* Methods */
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.getBodyHeight = function () {
return 400;
};
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.initialize = function () {
var altTextFieldset, positionFieldset, borderField, positionField;
// Parent method
ve.ui.MWMediaDialog.super.prototype.initialize.call( this );
this.$spinner = this.$( '<div>' ).addClass( 've-specialchar-spinner' );
this.panels = new OO.ui.StackLayout( { '$': this.$ } );
// Set up the booklet layout
this.bookletLayout = new OO.ui.BookletLayout( {
'$': this.$,
'outlined': true
} );
this.mediaSearchPanel = new OO.ui.PanelLayout( {
'$': this.$,
'scrollable': true
} );
this.generalSettingsPage = new OO.ui.PageLayout( 'general', { '$': this.$ } );
this.advancedSettingsPage = new OO.ui.PageLayout( 'advanced', { '$': this.$ } );
this.bookletLayout.addPages( [
this.generalSettingsPage, this.advancedSettingsPage
] );
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' ) );
// Define the media search page
this.search = new ve.ui.MWMediaSearchWidget( { '$': this.$ } );
this.$body.append( this.search.$spinner );
// Define fieldsets for image settings
// Caption
this.captionFieldset = new OO.ui.FieldsetLayout( {
'$': this.$,
'label': ve.msg( 'visualeditor-dialog-media-content-section' ),
'icon': 'parameter'
} );
// 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.$
} );
this.altTextInput.$element.addClass( 've-ui-mwMediaDialog-altText' );
// Build alt text fieldset
altTextFieldset.$element
.append( this.altTextInput.$element );
// Position
this.positionInput = new OO.ui.ButtonSelectWidget( {
'$': this.$
} );
this.positionInput.addItems( [
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' )
} )
], 0 );
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'
} );
// Build position fieldset
positionFieldset.$element.append( [
positionField.$element,
this.positionInput.$element
] );
// 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.$,
'icon': 'image-thumbnail',
'label': ve.msg( 'visualeditor-dialog-media-type-thumb' )
} ),
new OO.ui.ButtonOptionWidget( 'frameless', {
'$': this.$,
'icon': 'image-frameless',
'label': ve.msg( 'visualeditor-dialog-media-type-frameless' )
} ),
new OO.ui.ButtonOptionWidget( 'frame', {
'$': this.$,
'icon': 'image-frame',
'label': ve.msg( 'visualeditor-dialog-media-type-frame' )
} ),
new OO.ui.ButtonOptionWidget( 'none', {
'$': this.$,
'icon': 'image-none',
'label': ve.msg( 'visualeditor-dialog-media-type-none' )
} )
] );
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' )
} );
// Build type fieldset
this.typeFieldset.$element.append( [
this.typeInput.$element,
borderField.$element
] );
// Size
this.sizeFieldset = new OO.ui.FieldsetLayout( {
'$': this.$,
'label': ve.msg( 'visualeditor-dialog-media-size-section' ),
'icon': 'parameter'
} );
this.sizeErrorLabel = new OO.ui.LabelWidget( {
'$': this.$,
'label': ve.msg( 'visualeditor-dialog-media-size-originalsize-error' )
} );
this.sizeWidget = new ve.ui.MediaSizeWidget( {}, {
'$': this.$
} );
this.$sizeWidgetElements = this.$( '<div>' ).append( [
this.sizeWidget.$element,
this.sizeErrorLabel.$element
] );
this.sizeFieldset.$element.append( [
this.$spinner,
this.$sizeWidgetElements
] );
// Events
this.positionCheckbox.connect( this, { 'change': 'onPositionCheckboxChange' } );
this.borderCheckbox.connect( this, { 'change': 'onBorderCheckboxChange' } );
this.positionInput.connect( this, { 'choose': 'onPositionInputChoose' } );
this.typeInput.connect( this, { 'choose': 'onTypeInputChoose' } );
this.search.connect( this, { 'select': 'onSearchSelect' } );
this.altTextInput.connect( this, { 'change': 'setChanged' } );
// Panel classes
this.mediaSearchPanel.$element.addClass( 've-ui-mwMediaDialog-panel-search' );
this.bookletLayout.$element.addClass( 've-ui-mwMediaDialog-panel-settings' );
this.$body.append( this.panels.$element );
// Initialization
this.mediaSearchPanel.$element.append( this.search.$element );
this.generalSettingsPage.$element.append( [
this.captionFieldset.$element,
altTextFieldset.$element
] );
this.advancedSettingsPage.$element.append( [
positionFieldset.$element,
this.typeFieldset.$element,
this.sizeFieldset.$element
] );
this.panels.addItems( [ this.mediaSearchPanel, this.bookletLayout ] );
};
/**
* Handle search result selection.
*
* @param {ve.ui.MWMediaResultWidget|null} item Selected item
*/
ve.ui.MWMediaDialog.prototype.onSearchSelect = function ( item ) {
var attrs, info, dimensions;
if ( item ) {
info = item.imageinfo[0];
attrs = {
// Per https://www.mediawiki.org/w/?diff=931265&oldid=prev
'href': './' + item.title,
'src': info.thumburl,
'resource': './' + item.title,
'mediaType': info.mediatype
};
if ( !this.imageModel ) {
// Image model doesn't exist yet, which means we are creating
// a brand new node to insert
attrs.type = 'thumb';
attrs.align = 'default';
attrs.width = info.thumbwidth;
attrs.height = info.thumbheight;
attrs.defaultSize = true;
} else {
// Image model already exists, so we just need to create a new
// image based on the parameters that already exist
dimensions = this.imageModel.getScalable().getCurrentDimensions();
attrs.type = this.imageModel.getType();
attrs.align = this.imageModel.getAlignment();
attrs.width = dimensions.width;
attrs.height = dimensions.height;
if ( this.imageModel.getAltText() ) {
attrs.alt = this.imageModel.getAltText();
}
}
this.setImageModel( attrs );
this.setChanged();
this.switchPanels( 'edit' );
}
};
/**
* Handle image model alignment change
* @param {string} alignment Image alignment
*/
ve.ui.MWMediaDialog.prototype.onImageModelAlignmentChange = function ( alignment ) {
var item;
alignment = alignment || 'none';
item = alignment !== 'none' ? this.positionInput.getItemFromData( alignment ) : null;
// Select the item without triggering the 'choose' event
this.positionInput.selectItem( item );
this.positionCheckbox.setValue( alignment !== 'none' );
this.setChanged();
};
/**
* Handle image model type change
* @param {string} alignment Image alignment
*/
ve.ui.MWMediaDialog.prototype.onImageModelTypeChange = function ( type ) {
var item = type ? this.typeInput.getItemFromData( type ) : null;
this.typeInput.selectItem( item );
this.borderCheckbox.setDisabled(
!this.imageModel.isBorderable()
);
this.borderCheckbox.setValue(
this.imageModel.isBorderable() && this.imageModel.hasBorder()
);
this.setChanged();
};
/**
* Handle change event on the positionCheckbox element.
*
* @param {boolean} checked Checkbox status
*/
ve.ui.MWMediaDialog.prototype.onPositionCheckboxChange = function ( checked ) {
var newPositionValue,
currentModelAlignment = this.imageModel.getAlignment();
this.positionInput.setDisabled( !checked );
this.setChanged();
// Only update the model if the current value is different than that
// of the image model
if (
( currentModelAlignment === 'none' && checked ) ||
( currentModelAlignment !== 'none' && !checked )
) {
if ( checked ) {
// Picking a floating alignment value will create a block image
// no matter what the type is, so in here we want to calculate
// the default alignment of a block to set as our initial alignment
// in case the checkbox is clicked but there was no alignment set
// previously.
newPositionValue = this.imageModel.getDefaultDir( 'mwBlockImage' );
this.imageModel.setAlignment( newPositionValue );
} else {
// If we're unchecking the box, always set alignment to none and unselect the position widget
this.imageModel.setAlignment( 'none' );
}
}
};
/**
* Handle change event on the positionCheckbox element.
*
* @param {boolean} checked Checkbox status
*/
ve.ui.MWMediaDialog.prototype.onBorderCheckboxChange = function ( checked ) {
// Only update if the value is different than the model
if ( this.imageModel.hasBorder() !== checked ) {
// Update the image model
this.imageModel.toggleBorder( checked );
this.setChanged();
}
};
/**
* Handle change event on the positionInput element.
*
* @param {OO.ui.ButtonOptionWidget} item Selected item
*/
ve.ui.MWMediaDialog.prototype.onPositionInputChoose = function ( item ) {
var position = item ? item.getData() : 'default';
// Only update if the value is different than the model
if ( this.imageModel.getAlignment() !== position ) {
this.imageModel.setAlignment( position );
this.setChanged();
}
};
/**
* Handle change event on the typeInput element.
*
* @param {OO.ui.ButtonOptionWidget} item Selected item
*/
ve.ui.MWMediaDialog.prototype.onTypeInputChoose = function ( item ) {
var type = item ? item.getData() : 'default';
// Only update if the value is different than the model
if ( this.imageModel.getType() !== type ) {
this.imageModel.setType( type );
this.setChanged();
}
// If type is 'frame', disable the size input widget completely
this.sizeWidget.setDisabled( type === 'frame' );
};
/**
* When changes occur, enable the apply button.
*/
ve.ui.MWMediaDialog.prototype.setChanged = function () {
// TODO: Set up a better and deeper test of whether the new
// image parameters are different than the original image
this.actions.setAbilities( { 'insert': true, 'apply': true } );
};
/**
* Get the object of file repos to use for the media search
*
* @returns {jQuery.Promise}
*/
ve.ui.MWMediaDialog.prototype.getFileRepos = function () {
var defaultSource = [ {
'url': mw.util.wikiScript( 'api' ),
'local': true
} ];
if ( !this.fileRepoPromise ) {
this.fileRepoPromise = ve.init.target.constructor.static.apiRequest( {
'action': 'query',
'meta': 'filerepoinfo'
} ).then(
function ( resp ) {
return resp.query.repos || defaultSource;
},
function () {
return $.Deferred().resolve( defaultSource );
}
);
}
return this.fileRepoPromise;
};
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.getSetupProcess = function ( data ) {
return ve.ui.MWMediaDialog.super.prototype.getSetupProcess.call( this, data )
.next( function () {
var pageTitle = mw.config.get( 'wgTitle' ),
namespace = mw.config.get( 'wgNamespaceNumber' ),
namespacesWithSubpages = mw.config.get( 'wgVisualEditor' ).namespacesWithSubpages;
// Read the page title
if ( namespacesWithSubpages[ namespace ] ) {
// If we are in a namespace that allows for subpages, strip the entire
// title except for the part after the last /
pageTitle = pageTitle.substr( pageTitle.lastIndexOf( '/' ) + 1 );
}
this.pageTitle = pageTitle;
if ( this.selectedNode ) {
this.setImageModel( this.selectedNode.getAttributes() );
}
this.resetCaption();
this.switchPanels( this.selectedNode ? 'edit' : 'search' );
this.actions.setAbilities( { 'insert': false, 'apply': false } );
// Initialization
this.captionFieldset.$element.append( this.captionSurface.$element );
this.captionSurface.initialize();
}, this );
};
/**
* Switch between the edit and insert/search panels
* @param {string} panel Panel name
*/
ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel ) {
switch ( panel ) {
case 'edit':
// Set the edit panel
this.panels.setItem( this.bookletLayout );
// Focus the general settings page
this.bookletLayout.setPage( 'general' );
// Hide/show buttons
this.actions.setMode( this.selectedNode ? 'edit' : 'insert' );
// HACK: OO.ui.Dialog needs an API for this
this.frame.$content.removeClass( 'oo-ui-dialog-content-footless' );
// Focus the caption surface
this.captionSurface.focus();
// Hide/show the panels
this.bookletLayout.$element.show();
this.mediaSearchPanel.$element.hide();
break;
default:
case 'search':
// Show a spinner while we check for file repos.
// this will only be done once per session.
// The filerepo promise will be sent to the API
// only once per session so this will be resolved
// every time the search panel reloads
this.$spinner.show();
this.search.$element.hide();
// Get the repos from the API first
// The ajax request will only be done once per session
this.getFileRepos().done( function ( repos ) {
this.search.setSources( repos );
// Done, hide the spinner
this.$spinner.hide();
// Show the search and query the media sources
this.search.$element.show();
this.search.query.setValue( this.pageTitle );
this.search.queryMediaSources();
// Initialization
// This must be done only after there are proper
// sources defined
this.search.getQuery().focus().select();
this.search.getResults().selectItem();
this.search.getResults().highlightItem();
}.bind( this ) );
// Set the edit panel
this.panels.setItem( this.mediaSearchPanel );
this.actions.setMode( this.imageModel ? 'change' : 'select' );
// HACK: OO.ui.Dialog needs an API for this
this.frame.$content.toggleClass( 'oo-ui-dialog-content-footless', !this.imageModel );
// Hide/show the panels
this.bookletLayout.$element.hide();
this.mediaSearchPanel.$element.show();
break;
}
};
/**
* Set the image model
* @param {ve.dm.MWImageNode} node Image node, if it doesn't come from the selected node
*/
ve.ui.MWMediaDialog.prototype.setImageModel = function ( attrs ) {
var dir;
if ( this.imageModel ) {
this.imageModel.disconnect( this );
this.sizeWidget.disconnect( this );
}
if ( this.selectedNode ) {
dir = this.selectedNode.getDocument() ?
this.selectedNode.getDocument().getDir() :
this.getFragment().getSurface().getDocument().getDir();
attrs = attrs || this.selectedNode.getAttributes();
}
this.imageModel = ve.dm.MWImageModel.static.newFromImageAttributes( attrs, dir );
this.actions.setAbilities( { 'insert': true, 'apply': true } );
// Events
this.imageModel.connect( this, {
'alignmentChange': 'onImageModelAlignmentChange',
'typeChange': 'onImageModelTypeChange',
'sizeDefaultChange': 'setChanged'
} );
// Set up
// Size widget
this.sizeErrorLabel.$element.hide();
this.sizeWidget.setScalable( this.imageModel.getScalable() );
this.sizeWidget.connect( this, { 'changeSizeType': 'setChanged' } );
this.sizeWidget.connect( this, { 'change': 'setChanged' } );
// Initialize size
this.sizeWidget.setSizeType(
this.imageModel.isDefaultSize() ?
'default' :
'custom'
);
this.sizeWidget.setDisabled( this.imageModel.getType() === 'frame' );
// Set initial alt text
this.altTextInput.setValue(
this.imageModel.getAltText()
);
// Set initial alignment
this.positionInput.setDisabled(
!this.imageModel.isAligned()
);
this.positionInput.selectItem(
this.imageModel.isAligned() ?
this.positionInput.getItemFromData(
this.imageModel.getAlignment()
) :
null
);
this.positionCheckbox.setValue(
this.imageModel.isAligned()
);
// Border flag
this.borderCheckbox.setDisabled(
!this.imageModel.isBorderable()
);
this.borderCheckbox.setValue(
this.imageModel.isBorderable() && this.imageModel.hasBorder()
);
// Type select
this.typeInput.selectItem(
this.typeInput.getItemFromData(
this.imageModel.getType() || 'none'
)
);
};
/**
* Reset the caption surface
*/
ve.ui.MWMediaDialog.prototype.resetCaption = function () {
var captionDocument,
doc = this.getFragment().getSurface().getDocument();
if ( this.captionSurface ) {
// Reset the caption surface if it already exists
this.captionSurface.destroy();
this.captionSurface = null;
this.captionNode = null;
}
// Get existing caption. We only do this in setup, because the caption
// should not reset to original if the image is replaced or edited.
// If the selected node is a block image and the caption already exists,
// store the initial caption and set it as the caption document
if (
this.imageModel &&
this.selectedNode &&
this.selectedNode.getDocument() &&
this.selectedNode instanceof ve.dm.MWBlockImageNode
) {
this.captionNode = this.selectedNode.getCaptionNode();
if ( this.captionNode && this.captionNode.getLength() > 0 ) {
this.imageModel.setCaptionDocument(
this.selectedNode.getDocument().cloneFromRange( this.captionNode.getRange() )
);
}
}
if ( this.imageModel ) {
captionDocument = this.imageModel.getCaptionDocument();
} else {
captionDocument = new ve.dm.Document( [
{ 'type': 'paragraph', 'internal': { 'generated': 'wrapper' } },
{ 'type': '/paragraph' },
{ 'type': 'internalList' },
{ 'type': '/internalList' }
] );
}
this.store = doc.getStore();
// Set up the caption surface
this.captionSurface = new ve.ui.SurfaceWidget(
captionDocument,
{
'$': this.$,
'tools': this.constructor.static.toolbarGroups,
'commands': this.constructor.static.surfaceCommands,
'pasteRules': this.constructor.static.getPasteRules()
}
);
// Events
this.captionSurface.getSurface().getModel().connect( this, {
'documentUpdate': function () {
this.wikitextWarning = ve.init.mw.ViewPageTarget.static.checkForWikitextWarning(
this.captionSurface.getSurface(),
this.wikitextWarning
);
this.setChanged();
}
} );
};
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.getReadyProcess = function ( data ) {
return ve.ui.MWMediaDialog.super.prototype.getReadyProcess.call( this, data )
.next( function () {
// Focus the caption surface
this.captionSurface.focus();
}, this );
};
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.getTeardownProcess = function ( data ) {
return ve.ui.MWMediaDialog.super.prototype.getTeardownProcess.call( this, data )
.first( function () {
// Cleanup
this.search.getQuery().setValue( '' );
if ( this.imageModel ) {
this.imageModel.disconnect( this );
this.sizeWidget.disconnect( this );
}
if ( this.wikitextWarning ) {
this.wikitextWarning.close();
}
this.captionSurface.destroy();
this.captionSurface = null;
this.captionNode = null;
this.imageModel = null;
}, this );
};
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.getActionProcess = function ( action ) {
if ( action === 'change' ) {
return new OO.ui.Process( function () {
this.switchPanels( 'search' );
}, this );
}
if ( action === 'back' ) {
return new OO.ui.Process( function () {
this.switchPanels( 'edit' );
}, this );
}
if ( action === 'apply' || action === 'insert' ) {
return new OO.ui.Process( function () {
var surfaceModel = this.getFragment().getSurface();
// Update from the form
this.imageModel.setAltText( this.altTextInput.getValue() );
this.imageModel.setCaptionDocument(
this.captionSurface.getSurface().getModel().getDocument()
);
// TODO: Simplify this condition
if ( this.imageModel ) {
if (
// There was an initial node
this.selectedNode &&
// And we didn't change the image type block/inline or vise versa
this.selectedNode.type === this.imageModel.getImageNodeType() &&
// And we didn't change the image itself
this.selectedNode.getAttribute( 'src' ) ===
this.imageModel.getImageSource()
) {
// We only need to update the attributes of the current node
this.imageModel.updateImageNode( this.selectedNode, surfaceModel );
} else {
// Replacing an image or inserting a brand new one
// If there was a previous node, remove it first
if ( this.selectedNode ) {
// Remove the old image
this.fragment = this.getFragment().clone(
this.selectedNode.getOuterRange()
);
this.fragment.removeContent();
}
// Insert the new image
this.fragment = this.imageModel.insertImageNode( this.getFragment() );
}
}
this.close( { 'action': action } );
}, this );
}
return ve.ui.MWMediaDialog.super.prototype.getActionProcess.call( this, action );
};
/* Registration */
ve.ui.windowFactory.register( ve.ui.MWMediaDialog );