mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-12-03 02:16:51 +00:00
70fb0ea24f
Prevent another api call for image sizing by caching the chosen image in the media dialog with the imageInfoCache. Bug: T88187 Change-Id: If2d905eeb5907f29b6839692509dfc07a06c230e
1412 lines
38 KiB
JavaScript
1412 lines
38 KiB
JavaScript
/*!
|
|
* VisualEditor user interface MWMediaDialog class.
|
|
*
|
|
* @copyright 2011-2015 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 {Object} [config] Configuration options
|
|
*/
|
|
ve.ui.MWMediaDialog = function VeUiMWMediaDialog( config ) {
|
|
// Parent constructor
|
|
ve.ui.MWMediaDialog.super.call( this, config );
|
|
|
|
// Properties
|
|
this.imageModel = null;
|
|
this.store = null;
|
|
this.fileRepoPromise = null;
|
|
this.pageTitle = '';
|
|
this.isSettingUpModel = false;
|
|
this.isInsertion = false;
|
|
this.selectedImageInfo = null;
|
|
this.searchCache = {};
|
|
|
|
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: [ 'progressive', 'primary' ],
|
|
modes: 'edit'
|
|
},
|
|
{
|
|
action: 'insert',
|
|
label: OO.ui.deferMsg( 'visualeditor-dialog-action-insert' ),
|
|
flags: [ 'primary', 'constructive' ],
|
|
modes: 'insert'
|
|
},
|
|
{
|
|
action: 'change',
|
|
label: OO.ui.deferMsg( 'visualeditor-dialog-media-change-image' ),
|
|
modes: [ 'edit', 'insert' ]
|
|
},
|
|
{
|
|
action: 'choose',
|
|
label: OO.ui.deferMsg( 'visualeditor-dialog-media-choose-image' ),
|
|
flags: [ 'primary', 'progressive' ],
|
|
modes: [ 'info' ]
|
|
},
|
|
{
|
|
action: 'cancelchoose',
|
|
label: OO.ui.deferMsg( 'visualeditor-dialog-media-goback' ),
|
|
flags: 'safe',
|
|
modes: [ 'info' ]
|
|
},
|
|
{
|
|
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.excludeCommands = [
|
|
// No formatting
|
|
'paragraph',
|
|
'heading1',
|
|
'heading2',
|
|
'heading3',
|
|
'heading4',
|
|
'heading5',
|
|
'heading6',
|
|
'preformatted',
|
|
'blockquote',
|
|
// TODO: Decide if tables tools should be allowed
|
|
'tableCellHeader',
|
|
'tableCellData',
|
|
// No structure
|
|
'bullet',
|
|
'number',
|
|
'indent',
|
|
'outdent'
|
|
];
|
|
|
|
/**
|
|
* Get the import rules for the surface widget in the dialog
|
|
*
|
|
* @see ve.dm.ElementLinearData#sanitize
|
|
* @return {Object} Import rules
|
|
*/
|
|
ve.ui.MWMediaDialog.static.getImportRules = function () {
|
|
return ve.extendObject(
|
|
ve.copy( ve.init.target.constructor.static.importRules ),
|
|
{
|
|
all: {
|
|
blacklist: OO.simpleArrayUnion(
|
|
ve.getProp( ve.init.target.constructor.static.importRules, '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 () {
|
|
// FIXME: This should vary on panel.
|
|
return 500;
|
|
};
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.initialize = function () {
|
|
var altTextFieldset, positionFieldset, borderField, positionField,
|
|
alignLeftButton, alignCenterButton, alignRightButton, alignButtons;
|
|
|
|
// 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.$,
|
|
classes: [ 've-ui-mwMediaDialog-panel-settings' ],
|
|
outlined: true
|
|
} );
|
|
|
|
this.mediaSearchPanel = new OO.ui.PanelLayout( {
|
|
$: this.$,
|
|
classes: [ 've-ui-mwMediaDialog-panel-search' ],
|
|
scrollable: true
|
|
} );
|
|
|
|
this.mediaImageInfoPanel = new OO.ui.PanelLayout( {
|
|
$: this.$,
|
|
classes: [ 've-ui-mwMediaDialog-panel-imageinfo' ],
|
|
scrollable: false
|
|
} );
|
|
|
|
this.$infoPanelWrapper = $( '<div>' ).addClass( 've-ui-mwMediaDialog-panel-imageinfo-wrapper' );
|
|
|
|
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
|
|
|
|
// Filename
|
|
this.filenameFieldset = new OO.ui.FieldsetLayout( {
|
|
$: this.$,
|
|
label: ve.msg( 'visualeditor-dialog-media-content-filename' ),
|
|
icon: 'picture'
|
|
} );
|
|
|
|
// Caption
|
|
this.captionFieldset = new OO.ui.FieldsetLayout( {
|
|
$: this.$,
|
|
label: ve.msg( 'visualeditor-dialog-media-content-section' ),
|
|
help: ve.msg( 'visualeditor-dialog-media-content-section-help' ),
|
|
icon: 'parameter',
|
|
classes: [ 've-ui-mwMediaDialog-caption-fielset']
|
|
} );
|
|
|
|
// Alt text
|
|
altTextFieldset = new OO.ui.FieldsetLayout( {
|
|
$: this.$,
|
|
label: ve.msg( 'visualeditor-dialog-media-alttext-section' ),
|
|
help: ve.msg( 'visualeditor-dialog-media-alttext-section-help' ),
|
|
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.positionSelect = new OO.ui.ButtonSelectWidget( {
|
|
$: this.$
|
|
} );
|
|
|
|
alignLeftButton = new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'left',
|
|
icon: 'align-float-left',
|
|
label: ve.msg( 'visualeditor-dialog-media-position-left' )
|
|
} );
|
|
alignCenterButton = new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'center',
|
|
icon: 'align-center',
|
|
label: ve.msg( 'visualeditor-dialog-media-position-center' )
|
|
} );
|
|
alignRightButton = new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'right',
|
|
icon: 'align-float-right',
|
|
label: ve.msg( 'visualeditor-dialog-media-position-right' )
|
|
} );
|
|
|
|
alignButtons = ( this.getDir() === 'ltr' ) ?
|
|
[ alignLeftButton, alignCenterButton, alignRightButton ] :
|
|
[ alignRightButton, alignCenterButton, alignLeftButton ];
|
|
|
|
this.positionSelect.addItems( alignButtons, 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' ),
|
|
help: ve.msg( 'visualeditor-dialog-media-position-checkbox-help' )
|
|
} );
|
|
|
|
positionFieldset = new OO.ui.FieldsetLayout( {
|
|
$: this.$,
|
|
label: ve.msg( 'visualeditor-dialog-media-position-section' ),
|
|
help: ve.msg( 'visualeditor-dialog-media-position-section-help' ),
|
|
icon: 'parameter'
|
|
} );
|
|
|
|
// Build position fieldset
|
|
positionFieldset.$element.append(
|
|
positionField.$element,
|
|
this.positionSelect.$element
|
|
);
|
|
|
|
// Type
|
|
this.typeFieldset = new OO.ui.FieldsetLayout( {
|
|
$: this.$,
|
|
label: ve.msg( 'visualeditor-dialog-media-type-section' ),
|
|
help: ve.msg( 'visualeditor-dialog-media-type-section-help' ),
|
|
icon: 'parameter'
|
|
} );
|
|
|
|
this.typeSelect = new OO.ui.ButtonSelectWidget( {
|
|
$: this.$
|
|
} );
|
|
this.typeSelect.addItems( [
|
|
// TODO: Inline images require a bit of further work, will be coming soon
|
|
new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'thumb',
|
|
icon: 'image-thumbnail',
|
|
label: ve.msg( 'visualeditor-dialog-media-type-thumb' )
|
|
} ),
|
|
new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'frameless',
|
|
icon: 'image-frameless',
|
|
label: ve.msg( 'visualeditor-dialog-media-type-frameless' )
|
|
} ),
|
|
new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'frame',
|
|
icon: 'image-frame',
|
|
label: ve.msg( 'visualeditor-dialog-media-type-frame' )
|
|
} ),
|
|
new OO.ui.ButtonOptionWidget( {
|
|
$: this.$,
|
|
data: 'none',
|
|
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.typeSelect.$element,
|
|
borderField.$element
|
|
);
|
|
|
|
// Size
|
|
this.sizeFieldset = new OO.ui.FieldsetLayout( {
|
|
$: this.$,
|
|
label: ve.msg( 'visualeditor-dialog-media-size-section' ),
|
|
icon: 'parameter',
|
|
help: ve.msg( 'visualeditor-dialog-media-size-section-help' )
|
|
} );
|
|
|
|
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.positionSelect.connect( this, { choose: 'onPositionSelectChoose' } );
|
|
this.typeSelect.connect( this, { choose: 'onTypeSelectChoose' } );
|
|
this.search.connect( this, { choose: 'onSearchChoose' } );
|
|
this.altTextInput.connect( this, { change: 'onAlternateTextChange' } );
|
|
|
|
// Initialization
|
|
this.mediaSearchPanel.$element.append( this.search.$element );
|
|
this.generalSettingsPage.$element.append(
|
|
this.filenameFieldset.$element,
|
|
this.captionFieldset.$element,
|
|
altTextFieldset.$element
|
|
);
|
|
|
|
this.advancedSettingsPage.$element.append(
|
|
positionFieldset.$element,
|
|
this.typeFieldset.$element,
|
|
this.sizeFieldset.$element
|
|
);
|
|
|
|
this.panels.addItems( [
|
|
this.mediaSearchPanel,
|
|
this.mediaImageInfoPanel,
|
|
this.bookletLayout
|
|
] );
|
|
|
|
this.$body.append( this.panels.$element );
|
|
};
|
|
|
|
/**
|
|
* Build the image info panel from the information in the API.
|
|
* Use the metadata info if it exists.
|
|
* Note: Some information in the metadata object needs to be safely
|
|
* stripped from its html wrappers.
|
|
*
|
|
* @param {Object} info Image info
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.buildMediaInfoPanel = function ( info ) {
|
|
var i, newDimensions, field, isPortrait, $info, $section, windowWidth,
|
|
contentDirection = this.getFragment().getDocument().getDir(),
|
|
imageinfo = info.imageinfo[0],
|
|
imageTitle = new OO.ui.LabelWidget( {
|
|
$: this.$,
|
|
label: new mw.Title( info.title ).getNameText()
|
|
} ),
|
|
metadata = imageinfo.extmetadata,
|
|
// Field configuration (in order)
|
|
apiDataKeysConfig = [
|
|
{
|
|
name: 'ImageDescription',
|
|
value: ve.getProp( metadata, 'ImageDescription', 'value' ),
|
|
data: {
|
|
keepOriginal: true
|
|
},
|
|
view: {
|
|
type: 'description',
|
|
primary: true,
|
|
descriptionHeight: '5em'
|
|
}
|
|
},
|
|
{
|
|
name: 'fileDetails',
|
|
data: { skipProcessing: true },
|
|
view: { icon: 'picture' }
|
|
},
|
|
{
|
|
name: 'Artist',
|
|
value: ve.getProp( metadata, 'Artist', 'value' ),
|
|
data: {},
|
|
view: {
|
|
label: 'visualeditor-dialog-media-info-artist',
|
|
icon: 'profile'
|
|
}
|
|
},
|
|
{
|
|
name: 'Credit',
|
|
value: ve.getProp( metadata, 'Credit', 'value' ),
|
|
data: {},
|
|
view: { icon: 'profile' }
|
|
},
|
|
{
|
|
name: 'LicenseShortName',
|
|
value: ve.getProp( metadata, 'LicenseShortName', 'value' ),
|
|
data: {},
|
|
view: {
|
|
href: ve.getProp( metadata, 'LicenseUrl' ),
|
|
icon: this.getLicenseIcon( ve.getProp( metadata, 'LicenseShortName', 'value' ) )
|
|
}
|
|
},
|
|
{
|
|
name: 'timestamp',
|
|
value: imageinfo.timestamp,
|
|
data: {
|
|
ignoreCharLimit: true
|
|
},
|
|
view: {
|
|
icon: 'time',
|
|
label: 'visualeditor-dialog-media-info-uploaded',
|
|
isDate: true
|
|
}
|
|
},
|
|
{
|
|
name: 'DateTimeOriginal',
|
|
value: ve.getProp( metadata, 'DateTimeOriginal', 'value' ),
|
|
data: {},
|
|
view: {
|
|
icon: 'time',
|
|
label: 'visualeditor-dialog-media-info-created'
|
|
}
|
|
},
|
|
{
|
|
name: 'moreinfo',
|
|
value: ve.msg( 'visualeditor-dialog-media-info-moreinfo' ),
|
|
data: {},
|
|
view: {
|
|
icon: 'info',
|
|
href: imageinfo.descriptionurl
|
|
}
|
|
}
|
|
],
|
|
fields = {},
|
|
// Store clean API data
|
|
apiData = {},
|
|
fileType = this.getFileType( imageinfo.url ),
|
|
$thumbContainer = this.$( '<div>' )
|
|
.addClass( 've-ui-mwMediaDialog-panel-imageinfo-thumb' ),
|
|
$main = this.$( '<div>' )
|
|
.addClass( 've-ui-mwMediaDialog-panel-imageinfo-main' ),
|
|
$details = this.$( '<div>' )
|
|
.addClass( 've-ui-mwMediaDialog-panel-imageinfo-details' ),
|
|
$image = this.$( '<img>' );
|
|
|
|
// Main section - title
|
|
$main.append(
|
|
imageTitle.$element
|
|
.addClass( 've-ui-mwMediaDialog-panel-imageinfo-title' )
|
|
);
|
|
|
|
// Clean data from the API responses
|
|
for ( i = 0; i < apiDataKeysConfig.length; i++ ) {
|
|
field = apiDataKeysConfig[i].name;
|
|
// Skip empty fields and those that are specifically configured to be skipped
|
|
if ( apiDataKeysConfig[i].data.skipProcessing ) {
|
|
apiData[field] = apiDataKeysConfig[i].value;
|
|
} else {
|
|
// Store a clean information from the API.
|
|
if ( apiDataKeysConfig[i].value ) {
|
|
apiData[field] = this.cleanAPIresponse( apiDataKeysConfig[i].value, apiDataKeysConfig[i].data );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add sizing info for non-audio images
|
|
if ( imageinfo.mediatype === 'AUDIO' ) {
|
|
// Label this file as an audio
|
|
apiData.fileDetails = this.$( '<span>' )
|
|
.append( ve.msg( 'visualeditor-dialog-media-info-audiofile' ) );
|
|
} else {
|
|
// Build the display for image size and type
|
|
apiData.fileDetails = this.$( '<div>' )
|
|
.append(
|
|
this.$( '<span>' ).text(
|
|
imageinfo.width +
|
|
ve.msg( 'visualeditor-dialog-media-dimensionseparator' ) +
|
|
imageinfo.height +
|
|
ve.msg( 'visualeditor-dimensionswidget-px' )
|
|
),
|
|
this.$( '<span>' )
|
|
.addClass( 've-ui-mwMediaDialog-panel-imageinfo-separator' )
|
|
.text( mw.msg( 'visualeditor-dialog-media-info-separator' ) ),
|
|
this.$( '<span>' ).text( fileType )
|
|
);
|
|
}
|
|
|
|
// Attach all fields in order
|
|
for ( i = 0; i < apiDataKeysConfig.length; i++ ) {
|
|
field = apiDataKeysConfig[i].name;
|
|
if ( apiData[field] ) {
|
|
$section = apiDataKeysConfig[i].view.primary ? $main : $details;
|
|
|
|
fields[field] = new ve.ui.MWMediaInfoFieldWidget( apiData[field],
|
|
$.extend(
|
|
{},
|
|
apiDataKeysConfig[i].view,
|
|
{ $: this.$ }
|
|
)
|
|
);
|
|
$section.append( fields[field].$element );
|
|
}
|
|
}
|
|
|
|
// Build the info panel
|
|
$info = this.$( '<div>' )
|
|
.addClass( 've-ui-mwMediaDialog-panel-imageinfo-info' )
|
|
.append(
|
|
$main.prop( 'dir', contentDirection ),
|
|
$details
|
|
);
|
|
|
|
// Make sure all links open in a new window
|
|
$info.find( 'a' ).prop( 'target', '_blank' );
|
|
|
|
// Initialize thumb container
|
|
$thumbContainer
|
|
.append( $image.prop( 'src', imageinfo.thumburl ) );
|
|
|
|
this.$infoPanelWrapper.append(
|
|
$thumbContainer,
|
|
$info
|
|
);
|
|
|
|
// Force a scrollbar to the screen before we measure it
|
|
this.mediaImageInfoPanel.$element.css( 'overflow-y', 'scroll' );
|
|
windowWidth = this.mediaImageInfoPanel.$element.width();
|
|
|
|
// Define thumbnail size
|
|
if ( imageinfo.mediatype === 'AUDIO' ) {
|
|
// HACK: We are getting the wrong information from the
|
|
// API about audio files. Set their thumbnail to square
|
|
newDimensions = {
|
|
width: imageinfo.thumbwidth,
|
|
height: imageinfo.thumbwidth
|
|
};
|
|
} else {
|
|
// For regular images, calculate a bigger image dimensions
|
|
newDimensions = ve.dm.MWImageNode.static.resizeToBoundingBox(
|
|
// Original image dimensions
|
|
{
|
|
width: imageinfo.width,
|
|
height: imageinfo.height
|
|
},
|
|
// Bounding box -- the size of the dialog, minus padding
|
|
{
|
|
width: windowWidth,
|
|
height: this.getBodyHeight() - 120
|
|
}
|
|
);
|
|
}
|
|
// Resize the image
|
|
$image.css( {
|
|
width: newDimensions.width,
|
|
height: newDimensions.height
|
|
} );
|
|
|
|
// Call for a bigger image
|
|
this.fetchThumbnail( info.title, newDimensions )
|
|
.done( function ( thumburl ) {
|
|
if ( thumburl ) {
|
|
$image.prop( 'src', thumburl );
|
|
}
|
|
} );
|
|
|
|
isPortrait = newDimensions.width < ( windowWidth * 3 / 5 );
|
|
this.mediaImageInfoPanel.$element.toggleClass( 've-ui-mwMediaDialog-panel-imageinfo-portrait', isPortrait );
|
|
this.mediaImageInfoPanel.$element.append( this.$infoPanelWrapper );
|
|
if ( isPortrait ) {
|
|
$info.outerWidth( Math.floor( windowWidth - $thumbContainer.outerWidth( true ) - 15 ) );
|
|
}
|
|
|
|
// Adjust height-limited fields
|
|
for ( field in fields ) {
|
|
if ( fields[field].getType() === 'description' ) {
|
|
fields[field].toggleReadMoreButton();
|
|
}
|
|
}
|
|
// Let the scrollbar appear naturally if it should
|
|
this.mediaImageInfoPanel.$element.css( 'overflow', '' );
|
|
};
|
|
|
|
/**
|
|
* Fetch a bigger image thumbnail from the API.
|
|
* @param {string} imageName Image source
|
|
* @param {Object} dimensions Image dimensions
|
|
* @return {jQuery.Promise} Thumbnail promise that resolves with new thumb url
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.fetchThumbnail = function ( imageName, dimensions ) {
|
|
var dialog = this,
|
|
apiObj = {
|
|
action: 'query',
|
|
prop: 'imageinfo',
|
|
indexpageids: '1',
|
|
iiprop: 'url',
|
|
titles: imageName
|
|
};
|
|
|
|
// Check cache first
|
|
if ( this.searchCache[imageName] ) {
|
|
return $.Deferred().resolve( this.searchCache[imageName] );
|
|
}
|
|
|
|
if ( dimensions.width ) {
|
|
apiObj.iiurlwidth = dimensions.width;
|
|
}
|
|
if ( dimensions.height ) {
|
|
apiObj.iiurlheight = dimensions.height;
|
|
}
|
|
return ve.init.target.constructor.static.apiRequest( apiObj )
|
|
.then( function ( response ) {
|
|
var thumburl;
|
|
if ( !response || response.error ) {
|
|
return $.Deferred().reject();
|
|
}
|
|
thumburl = ve.getProp(
|
|
response.query.pages[response.query.pageids[0]],
|
|
'imageinfo',
|
|
0,
|
|
'thumburl'
|
|
);
|
|
// Cache
|
|
dialog.searchCache[imageName] = thumburl;
|
|
return thumburl;
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Clean the API responses and return it in plaintext. If needed, truncate.
|
|
* @param {string} rawResponse Raw response from the API
|
|
* @param {Object} config Configuration options
|
|
* @return {string} Plaintext clean response
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.cleanAPIresponse = function ( rawResponse, config ) {
|
|
var isTruncated, charLimit,
|
|
html = $.parseHTML( rawResponse ),
|
|
ellipsis = ve.msg( 'visualeditor-dialog-media-info-ellipsis' ),
|
|
originalText = this.$( '<div>' ).append( html ).text();
|
|
|
|
config = config || {};
|
|
|
|
charLimit = config.charLimit || 50;
|
|
isTruncated = originalText.length > charLimit;
|
|
|
|
if ( config.keepOriginal ) {
|
|
return html;
|
|
}
|
|
|
|
// Check if the string should be truncated
|
|
return isTruncated && !config.ignoreCharLimit ?
|
|
originalText.substring( 0, charLimit ) + ellipsis :
|
|
originalText;
|
|
};
|
|
|
|
/**
|
|
* Get the file type from the suffix of the url
|
|
* @param {string} url Full file url
|
|
* @return {string} File type
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.getFileType = function ( url ) {
|
|
// TODO: Validate these types, and work with icons
|
|
// SVG, PNG, JPEG, GIF, TIFF, XCF;
|
|
// OGA, OGG, MIDI, WAV;
|
|
// WEBM, OGV, OGX;
|
|
// APNG;
|
|
// PDF, DJVU
|
|
return url.split( '.' ).pop().toUpperCase();
|
|
};
|
|
|
|
/**
|
|
* Get the proper icon for the license if it is recognized
|
|
* or general info icon if it is not recognized.
|
|
* @param {string} license License short name
|
|
* @return {string} Icon name
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.getLicenseIcon = function ( license ) {
|
|
var normalized;
|
|
|
|
if ( !license ) {
|
|
return 'info';
|
|
}
|
|
|
|
normalized = license.toLowerCase().replace( /[-_]/g, ' ' );
|
|
|
|
// FIXME: Structured data from Commons will make this properly
|
|
// multilingual. For now, this is the limit of what is sensible.
|
|
if ( normalized.match( /^((cc )?pd|public domain)/ ) ) {
|
|
return 'public-domain';
|
|
} else if ( normalized.match( /^cc (by|sa)?/ ) ) {
|
|
return 'creative-commons';
|
|
} else {
|
|
return 'info';
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handle search result choose event.
|
|
*
|
|
* @param {ve.ui.MWMediaResultWidget} info Chosen item
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.onSearchChoose = function ( info ) {
|
|
if ( info ) {
|
|
this.$infoPanelWrapper.empty();
|
|
// Switch panels
|
|
this.selectedImageInfo = info;
|
|
this.switchPanels( 'imageInfo' );
|
|
// Build info panel
|
|
this.buildMediaInfoPanel( info );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handle new image being chosen.
|
|
*
|
|
* @param {ve.ui.MWMediaResultWidget|null} item Selected item
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.confirmSelectedImage = function () {
|
|
var info,
|
|
obj = {},
|
|
item = this.selectedImageInfo;
|
|
|
|
if ( item ) {
|
|
info = item.imageinfo[0];
|
|
|
|
if ( !this.imageModel ) {
|
|
// Create a new image model based on default attributes
|
|
this.imageModel = ve.dm.MWImageModel.static.newFromImageAttributes(
|
|
{
|
|
// Per https://www.mediawiki.org/w/?diff=931265&oldid=prev
|
|
href: './' + item.title,
|
|
src: info.url,
|
|
resource: './' + item.title,
|
|
width: info.thumbwidth,
|
|
height: info.thumbheight,
|
|
mediaType: info.mediatype,
|
|
type: 'thumb',
|
|
align: 'default',
|
|
defaultSize: true
|
|
},
|
|
this.getFragment().getDocument().getDir(),
|
|
this.getFragment().getDocument().getLang()
|
|
);
|
|
this.attachImageModel();
|
|
this.resetCaption();
|
|
} else {
|
|
// Update the current image model with the new image source
|
|
this.imageModel.changeImageSource(
|
|
{
|
|
mediaType: info.mediatype,
|
|
href: './' + item.title,
|
|
src: info.url,
|
|
resource: './' + item.title
|
|
},
|
|
info
|
|
);
|
|
// Update filename
|
|
this.filenameFieldset.setLabel(
|
|
this.imageModel.getFilename()
|
|
);
|
|
}
|
|
|
|
// Cache
|
|
obj[ item.title ] = info;
|
|
ve.init.platform.imageInfoCache.set( obj );
|
|
|
|
this.checkChanged();
|
|
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.positionSelect.getItemFromData( alignment ) : null;
|
|
|
|
// Select the item without triggering the 'choose' event
|
|
this.positionSelect.selectItem( item );
|
|
|
|
this.positionCheckbox.setSelected( alignment !== 'none' );
|
|
this.checkChanged();
|
|
};
|
|
|
|
/**
|
|
* Handle image model type change
|
|
* @param {string} alignment Image alignment
|
|
*/
|
|
|
|
ve.ui.MWMediaDialog.prototype.onImageModelTypeChange = function ( type ) {
|
|
var item = type ? this.typeSelect.getItemFromData( type ) : null;
|
|
|
|
this.typeSelect.selectItem( item );
|
|
|
|
this.borderCheckbox.setDisabled(
|
|
!this.imageModel.isBorderable()
|
|
);
|
|
|
|
this.borderCheckbox.setSelected(
|
|
this.imageModel.isBorderable() && this.imageModel.hasBorder()
|
|
);
|
|
this.checkChanged();
|
|
};
|
|
|
|
/**
|
|
* Handle change event on the positionCheckbox element.
|
|
*
|
|
* @param {boolean} isSelected Checkbox status
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.onPositionCheckboxChange = function ( isSelected ) {
|
|
var newPositionValue,
|
|
currentModelAlignment = this.imageModel.getAlignment();
|
|
|
|
this.positionSelect.setDisabled( !isSelected );
|
|
this.checkChanged();
|
|
// Only update the model if the current value is different than that
|
|
// of the image model
|
|
if (
|
|
( currentModelAlignment === 'none' && isSelected ) ||
|
|
( currentModelAlignment !== 'none' && !isSelected )
|
|
) {
|
|
if ( isSelected ) {
|
|
// 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} isSelected Checkbox status
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.onBorderCheckboxChange = function ( isSelected ) {
|
|
// Only update if the value is different than the model
|
|
if ( this.imageModel.hasBorder() !== isSelected ) {
|
|
// Update the image model
|
|
this.imageModel.toggleBorder( isSelected );
|
|
this.checkChanged();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handle change event on the positionSelect element.
|
|
*
|
|
* @param {OO.ui.ButtonOptionWidget} item Selected item
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.onPositionSelectChoose = 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.checkChanged();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handle change event on the typeSelect element.
|
|
*
|
|
* @param {OO.ui.ButtonOptionWidget} item Selected item
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.onTypeSelectChoose = 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.checkChanged();
|
|
}
|
|
|
|
// If type is 'frame', disable the size input widget completely
|
|
this.sizeWidget.setDisabled( type === 'frame' );
|
|
};
|
|
|
|
/**
|
|
* Respond to change in alternate text
|
|
* @param {string} text New alternate text
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.onAlternateTextChange = function ( text ) {
|
|
this.imageModel.setAltText( text );
|
|
this.checkChanged();
|
|
};
|
|
|
|
/**
|
|
* When changes occur, enable the apply button.
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.checkChanged = function () {
|
|
var captionChanged = false;
|
|
|
|
// Only check 'changed' status after the model has finished
|
|
// building itself
|
|
if ( !this.isSettingUpModel ) {
|
|
if ( this.captionSurface && this.captionSurface.getSurface() ) {
|
|
captionChanged = this.captionSurface.getSurface().getModel().hasBeenModified();
|
|
}
|
|
|
|
if (
|
|
// Activate or deactivate the apply/insert buttons
|
|
// Make sure sizes are valid first
|
|
this.sizeWidget.isValid() &&
|
|
(
|
|
// Check that the model or caption changed
|
|
this.isInsertion && this.imageModel ||
|
|
captionChanged ||
|
|
this.imageModel.hasBeenModified()
|
|
)
|
|
) {
|
|
this.actions.setAbilities( { insert: true, apply: true } );
|
|
} else {
|
|
this.actions.setAbilities( { insert: false, apply: false } );
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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 && 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.slice( pageTitle.lastIndexOf( '/' ) + 1 );
|
|
}
|
|
this.pageTitle = pageTitle;
|
|
|
|
// Set language for search results
|
|
this.search.setLang( this.getFragment().getDocument().getLang() );
|
|
|
|
if ( this.selectedNode ) {
|
|
this.isInsertion = false;
|
|
// Create image model
|
|
this.imageModel = ve.dm.MWImageModel.static.newFromImageAttributes(
|
|
this.selectedNode.getAttributes(),
|
|
this.selectedNode.getDocument().getDir(),
|
|
this.selectedNode.getDocument().getLang()
|
|
);
|
|
this.attachImageModel();
|
|
|
|
if ( !this.imageModel.isDefaultSize() ) {
|
|
// To avoid dirty diff in case where only the image changes,
|
|
// we will store the initial bounding box, in case the image
|
|
// is not defaultSize
|
|
this.imageModel.setBoundingBox( this.imageModel.getCurrentDimensions() );
|
|
}
|
|
// Store initial hash to compare against
|
|
this.imageModel.storeInitialHash( this.imageModel.getHashObject() );
|
|
} else {
|
|
this.isInsertion = true;
|
|
}
|
|
|
|
this.resetCaption();
|
|
|
|
this.actions.setAbilities( { insert: false, apply: false } );
|
|
|
|
this.switchPanels( this.selectedNode ? 'edit' : 'search' );
|
|
}, this );
|
|
};
|
|
|
|
/**
|
|
* Switch between the edit and insert/search panels
|
|
* @param {string} panel Panel name
|
|
* @param {boolean} [stopSearchRequery] Do not re-query the API for the search panel
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery ) {
|
|
var dialog = this;
|
|
switch ( panel ) {
|
|
case 'edit':
|
|
this.setSize( 'large' );
|
|
// 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.$content.removeClass( 'oo-ui-dialog-content-footless' );
|
|
// Focus the caption surface
|
|
this.captionSurface.focus();
|
|
break;
|
|
case 'search':
|
|
this.setSize( 'larger' );
|
|
this.selectedImageInfo = null;
|
|
if ( !stopSearchRequery ) {
|
|
// 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
|
|
dialog.getFileRepos().done( function ( repos ) {
|
|
dialog.search.setSources( repos );
|
|
// Done, hide the spinner
|
|
dialog.$spinner.hide();
|
|
// Show the search and query the media sources
|
|
dialog.search.$element.show();
|
|
dialog.search.query.setValue( dialog.pageTitle );
|
|
dialog.search.queryMediaSources();
|
|
// Initialization
|
|
// This must be done only after there are proper
|
|
// sources defined
|
|
dialog.search.getQuery().focus().select();
|
|
dialog.search.getResults().selectItem();
|
|
dialog.search.getResults().highlightItem();
|
|
} );
|
|
}
|
|
|
|
// 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.$content.toggleClass( 'oo-ui-dialog-content-footless', !this.imageModel );
|
|
|
|
// Layout pending items
|
|
this.search.runLayoutQueue();
|
|
break;
|
|
default:
|
|
case 'imageInfo':
|
|
this.setSize( 'larger' );
|
|
// Hide/show buttons
|
|
this.actions.setMode( 'info' );
|
|
// Hide/show the panels
|
|
this.panels.setItem( this.mediaImageInfoPanel );
|
|
break;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Attach the image model to the dialog
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.attachImageModel = function () {
|
|
if ( this.imageModel ) {
|
|
this.imageModel.disconnect( this );
|
|
this.sizeWidget.disconnect( this );
|
|
}
|
|
|
|
// Events
|
|
this.imageModel.connect( this, {
|
|
alignmentChange: 'onImageModelAlignmentChange',
|
|
typeChange: 'onImageModelTypeChange',
|
|
sizeDefaultChange: 'checkChanged'
|
|
} );
|
|
|
|
// Set up
|
|
// Ignore the following changes in validation while we are
|
|
// setting up the initial tools according to the model state
|
|
this.isSettingUpModel = true;
|
|
|
|
// Filename
|
|
this.filenameFieldset.setLabel(
|
|
this.imageModel.getFilename()
|
|
);
|
|
|
|
// Size widget
|
|
this.sizeErrorLabel.$element.hide();
|
|
this.sizeWidget.setScalable( this.imageModel.getScalable() );
|
|
this.sizeWidget.connect( this, {
|
|
changeSizeType: 'checkChanged',
|
|
change: 'checkChanged',
|
|
valid: 'checkChanged'
|
|
} );
|
|
|
|
// Initialize size
|
|
this.sizeWidget.setSizeType(
|
|
this.imageModel.isDefaultSize() ?
|
|
'default' :
|
|
'custom'
|
|
);
|
|
this.sizeWidget.setDisabled( this.imageModel.getType() === 'frame' );
|
|
|
|
// Update default dimensions
|
|
this.sizeWidget.updateDefaultDimensions();
|
|
|
|
// Set initial alt text
|
|
this.altTextInput.setValue(
|
|
this.imageModel.getAltText()
|
|
);
|
|
|
|
// Set initial alignment
|
|
this.positionSelect.setDisabled(
|
|
!this.imageModel.isAligned()
|
|
);
|
|
this.positionSelect.selectItem(
|
|
this.imageModel.isAligned() ?
|
|
this.positionSelect.getItemFromData(
|
|
this.imageModel.getAlignment()
|
|
) :
|
|
null
|
|
);
|
|
this.positionCheckbox.setSelected(
|
|
this.imageModel.isAligned()
|
|
);
|
|
|
|
// Border flag
|
|
this.borderCheckbox.setDisabled(
|
|
!this.imageModel.isBorderable()
|
|
);
|
|
this.borderCheckbox.setSelected(
|
|
this.imageModel.isBorderable() && this.imageModel.hasBorder()
|
|
);
|
|
|
|
// Type select
|
|
this.typeSelect.selectItem(
|
|
this.typeSelect.getItemFromData(
|
|
this.imageModel.getType() || 'none'
|
|
)
|
|
);
|
|
|
|
this.isSettingUpModel = false;
|
|
};
|
|
|
|
/**
|
|
* Reset the caption surface
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.resetCaption = function () {
|
|
var captionDocument,
|
|
doc = this.getFragment().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' }
|
|
],
|
|
// The ve.dm.Document constructor expects
|
|
// ( data, htmlDocument, parentDocument, internalList, innerWhitespace, lang, dir )
|
|
// as parameters. We are only interested in setting up language, hence the
|
|
// multiple 'null' values.
|
|
null, null, null, null, doc.getLang(), doc.getDir() );
|
|
}
|
|
|
|
this.store = doc.getStore();
|
|
|
|
// Set up the caption surface
|
|
this.captionSurface = new ve.ui.MWSurfaceWidget(
|
|
captionDocument,
|
|
{
|
|
$: this.$,
|
|
tools: ve.init.target.constructor.static.toolbarGroups,
|
|
excludeCommands: this.constructor.static.excludeCommands,
|
|
importRules: this.constructor.static.getImportRules()
|
|
}
|
|
);
|
|
|
|
// Initialization
|
|
this.captionFieldset.$element.append( this.captionSurface.$element );
|
|
this.captionSurface.initialize();
|
|
|
|
// Events
|
|
this.captionSurface.getSurface().getModel().connect( this, {
|
|
history: this.checkChanged.bind( this )
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* @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();
|
|
// Revalidate size
|
|
this.sizeWidget.validateDimensions();
|
|
}, 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 );
|
|
}
|
|
this.captionSurface.destroy();
|
|
this.captionSurface = null;
|
|
this.captionNode = null;
|
|
this.imageModel = null;
|
|
}, this );
|
|
};
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
ve.ui.MWMediaDialog.prototype.getActionProcess = function ( action ) {
|
|
var handler;
|
|
|
|
switch ( action ) {
|
|
case 'change':
|
|
handler = function () {
|
|
this.switchPanels( 'search' );
|
|
};
|
|
break;
|
|
case 'back':
|
|
handler = function () {
|
|
this.switchPanels( 'edit' );
|
|
};
|
|
break;
|
|
case 'choose':
|
|
handler = function () {
|
|
this.confirmSelectedImage();
|
|
this.switchPanels( 'edit' );
|
|
};
|
|
break;
|
|
case 'cancelchoose':
|
|
handler = function () {
|
|
this.switchPanels( 'search', true );
|
|
};
|
|
break;
|
|
case 'apply':
|
|
case 'insert':
|
|
handler = 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(
|
|
new ve.dm.LinearSelection( this.fragment.getDocument(), this.selectedNode.getOuterRange() )
|
|
);
|
|
this.fragment.removeContent();
|
|
}
|
|
// Insert the new image
|
|
this.fragment = this.imageModel.insertImageNode( this.getFragment() );
|
|
}
|
|
}
|
|
|
|
this.close( { action: action } );
|
|
};
|
|
break;
|
|
default:
|
|
return ve.ui.MWMediaDialog.super.prototype.getActionProcess.call( this, action );
|
|
}
|
|
|
|
return new OO.ui.Process( handler, this );
|
|
};
|
|
|
|
/* Registration */
|
|
|
|
ve.ui.windowFactory.register( ve.ui.MWMediaDialog );
|