wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-24 10:48:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Add image upload tab to media dialog"

Browse source
This commit is contained in:
jenkins-bot 2015-10-07 01:54:20 +00:00 committed by Gerrit Code Review
parent f764155edc 97ddc8af2b
commit b83511ac54
4 changed files with 137 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
extension.json
View file

@ -1149,7 +1149,8 @@
"modules/ve-mw/ui/styles/widgets/ve.ui.MWMediaInfoFieldWidget.css"
],
"dependencies": [
"ext.visualEditor.mwimage.core"
"ext.visualEditor.mwimage.core",
"mediawiki.ForeignStructuredUpload.BookletLayout"
],
"messages": [
"visualeditor-dialog-media-alttext-section",
@ -1185,6 +1186,9 @@
"visualeditor-dialog-media-position-right",
"visualeditor-dialog-media-position-section",
"visualeditor-dialog-media-position-section-help",
"visualeditor-dialog-media-save",
"visualeditor-dialog-media-search-tab-search",
"visualeditor-dialog-media-search-tab-upload",
"visualeditor-dialog-media-searchselect",
"visualeditor-dialog-media-size-originalsize-error",
"visualeditor-dialog-media-size-section",
@ -1198,12 +1202,12 @@
"visualeditor-dialog-media-type-section",
"visualeditor-dialog-media-type-section-help",
"visualeditor-dialog-media-type-thumb",
"visualeditor-dialog-media-upload",
"visualeditor-dialogbutton-media-tooltip",
"visualeditor-media-input-placeholder"
],
"targets": [
"desktop",
"mobile"
"desktop"
]
},
"ext.visualEditor.mwlink": {

4
modules/ve-mw/i18n/en.json
View file

@ -105,6 +105,9 @@
"visualeditor-dialog-media-position-right": "Right",
"visualeditor-dialog-media-position-section": "Position",
"visualeditor-dialog-media-position-section-help": "You can set where this media item appears on the page. This is sometimes used to break up a long line of images on one side of the page.",
"visualeditor-dialog-media-save": "Save",
"visualeditor-dialog-media-search-tab-search": "Search",
"visualeditor-dialog-media-search-tab-upload": "Upload",
"visualeditor-dialog-media-searchselect": "Select",
"visualeditor-dialog-media-size-choosecustom": "Set custom size",
"visualeditor-dialog-media-size-choosedefault": "Set to default size",
@ -121,6 +124,7 @@
"visualeditor-dialog-media-type-section": "Image type",
"visualeditor-dialog-media-type-section-help": "You can set how the media item appears on the page. This should be the thumbnail format to be consistent with other pages in almost all cases.",
"visualeditor-dialog-media-type-thumb": "Thumbnail",
"visualeditor-dialog-media-upload": "Upload",
"visualeditor-dialog-meta-advancedsettings-label": "Advanced settings",
"visualeditor-dialog-meta-advancedsettings-section": "Advanced settings",
"visualeditor-dialog-meta-categories-category": "Category",

4
modules/ve-mw/i18n/qqq.json
View file

@ -114,6 +114,9 @@
"visualeditor-dialog-media-position-right": "Label for the image position option for aligning to the right.\n{{Related|Visualeditor-dialog-media-position}}\n{{Identical|Right}}",
"visualeditor-dialog-media-position-section": "Label for the image position sub-section.\n\nSee also:\n* {{msg-mw|Visualeditor-dialog-media-position-center}}\n* {{msg-mw|Visualeditor-dialog-media-position-left}}\n* {{msg-mw|Visualeditor-dialog-media-position-none}}\n* {{msg-mw|Visualeditor-dialog-media-position-right}}\n{{Identical|Position}}",
"visualeditor-dialog-media-position-section-help": "Message displayed as contextual help about the control for which display position to use (<code>left</code>, <code>right</code>, etc.) to editors in the media editing dialog.",
"visualeditor-dialog-media-save": "Label for the save button",
"visualeditor-dialog-media-search-tab-search": "Label for search tab on insert new media page",
"visualeditor-dialog-media-search-tab-upload": "Label for upload tab on insert new media page",
"visualeditor-dialog-media-searchselect": "Button for choosing media item from the search results in the media dialog.\n{{Identical|Select}}",
"visualeditor-dialog-media-size-choosecustom": "Label for setting image size to custom dimensions.\n{{Related|Visualeditor-dialog-media-size}}",
"visualeditor-dialog-media-size-choosedefault": "Label for setting image size to wiki default thumbnail dimensions.\n{{Related|Visualeditor-dialog-media-size}}",
@ -130,6 +133,7 @@
"visualeditor-dialog-media-type-section": "Label for the image type sub-section.\n\nFollowed by the following buttons:\n* {{msg-mw|Visualeditor-dialog-media-type-thumb}}\n* {{msg-mw|Visualeditor-dialog-media-type-frame}}\n* {{msg-mw|Visualeditor-dialog-media-type-frameless}}\n* {{msg-mw|Visualeditor-dialog-media-type-border}}",
"visualeditor-dialog-media-type-section-help": "Message displayed as contextual help about the controls for display type (<code>thumb</code>, <code>frameless</code>, etc.) to editors in the media editing dialog.",
"visualeditor-dialog-media-type-thumb": "Label for the image type option for thumbnail.\n{{Identical|Thumbnail}}",
"visualeditor-dialog-media-upload": "Label for the upload button",
"visualeditor-dialog-meta-advancedsettings-label": "Title for the advanced settings dialog section.\n{{Identical|Advanced settings}}",
"visualeditor-dialog-meta-advancedsettings-section": "Label for the advanced settings dialog section.\n{{Identical|Advanced settings}}",
"visualeditor-dialog-meta-categories-category": "Title of popup for editing category options.\n{{Identical|Category}}",

130
modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
View file

@ -70,6 +70,18 @@ ve.ui.MWMediaDialog.static.actions = [
flags: [ 'primary', 'progressive' ],
modes: [ 'info' ]
},
{
action: 'upload',
label: OO.ui.deferMsg( 'visualeditor-dialog-media-upload' ),
flags: [ 'primary', 'progressive' ],
modes: [ 'upload-upload' ]
},
{
action: 'save',
label: OO.ui.deferMsg( 'visualeditor-dialog-media-save' ),
flags: [ 'primary', 'progressive' ],
modes: [ 'upload-info' ]
},
{
action: 'cancelchoose',
label: OO.ui.deferMsg( 'visualeditor-dialog-media-goback' ),
@ -79,7 +91,7 @@ ve.ui.MWMediaDialog.static.actions = [
{
label: OO.ui.deferMsg( 'visualeditor-dialog-action-cancel' ),
flags: [ 'safe', 'back' ],
modes: [ 'edit', 'insert', 'select' ]
modes: [ 'edit', 'insert', 'select', 'search', 'upload-upload', 'upload-info' ]
},
{
action: 'back',
@ -175,6 +187,8 @@ ve.ui.MWMediaDialog.prototype.initialize = function () {
scrollable: true
} );
this.mediaUploadBooklet = new mw.ForeignStructuredUpload.BookletLayout( { $overlay: this.$overlay } );
this.mediaImageInfoPanel = new OO.ui.PanelLayout( {
classes: [ 've-ui-mwMediaDialog-panel-imageinfo' ],
scrollable: false
@ -195,6 +209,18 @@ ve.ui.MWMediaDialog.prototype.initialize = function () {
.setLabel( ve.msg( 'visualeditor-dialog-media-page-advanced' ) );
// Define the media search page
this.searchTabs = new OO.ui.IndexLayout();
this.searchTabs.addCards( [
new OO.ui.CardLayout( 'search', {
label: ve.msg( 'visualeditor-dialog-media-search-tab-search' )
} ),
new OO.ui.CardLayout( 'upload', {
label: ve.msg( 'visualeditor-dialog-media-search-tab-upload' ),
content: [ this.mediaUploadBooklet ]
} )
] );
this.search = new ve.ui.MWMediaSearchWidget();
// Define fieldsets for image settings
@ -323,9 +349,18 @@ ve.ui.MWMediaDialog.prototype.initialize = function () {
this.typeSelect.connect( this, { choose: 'onTypeSelectChoose' } );
this.search.getResults().connect( this, { choose: 'onSearchResultsChoose' } );
this.altTextInput.connect( this, { change: 'onAlternateTextChange' } );
this.searchTabs.connect( this, {
set: 'onSearchTabsSet'
} );
this.mediaUploadBooklet.connect( this, {
set: 'onMediaUploadBooketSet',
uploadValid: 'onUploadValid',
infoValid: 'onInfoValid'
} );
// Initialization
this.mediaSearchPanel.$element.append( this.search.$element );
this.searchTabs.getCard( 'search' ).$element.append( this.search.$element );
this.mediaSearchPanel.$element.append( this.searchTabs.$element );
this.generalSettingsPage.$element.append(
this.filenameFieldset.$element,
this.captionFieldset.$element,
@ -347,6 +382,70 @@ ve.ui.MWMediaDialog.prototype.initialize = function () {
this.$body.append( this.panels.$element );
};
/**
* Handle set events from the search tabs
*
* @param {OO.ui.CardLayout} card Current card
*/
ve.ui.MWMediaDialog.prototype.onSearchTabsSet = function ( card ) {
var name = card.getName();
this.actions.setMode( name );
switch ( name ) {
case 'search':
this.setSize( 'larger' );
break;
case 'upload':
this.setSize( 'medium' );
this.mediaUploadBooklet.initialize();
this.uploadPageNameSet( 'upload' );
break;
}
};
/**
* Handle panelNameSet events from the upload stack
*
* @param {OO.ui.PageLayout} page Current page
*/
ve.ui.MWMediaDialog.prototype.onMediaUploadBooketSet = function ( page ) {
this.uploadPageNameSet( page.getName() );
};
/**
* The upload booklet's page name has changed
*
* @param {string} pageName Page name
*/
ve.ui.MWMediaDialog.prototype.uploadPageNameSet = function ( pageName ) {
if ( pageName === 'insert' ) {
this.chooseImageInfo( this.mediaUploadBooklet.upload.getImageInfo() );
} else {
this.actions.setMode( 'upload-' + pageName );
this.actions.setAbilities( { upload: false, save: false } );
}
};
/**
* Handle uploadValid events
*
* @param {boolean} isValid The panel is complete and valid
*/
ve.ui.MWMediaDialog.prototype.onUploadValid = function ( isValid ) {
this.actions.setAbilities( { upload: isValid } );
};
/**
* Handle infoValid events
*
* @param {boolean} isValid The panel is complete and valid
*/
ve.ui.MWMediaDialog.prototype.onInfoValid = function ( isValid ) {
this.actions.setAbilities( { save: isValid } );
};
/**
* Build the image info panel from the information in the API.
* Use the metadata info if it exists.
@ -358,8 +457,9 @@ ve.ui.MWMediaDialog.prototype.initialize = function () {
ve.ui.MWMediaDialog.prototype.buildMediaInfoPanel = function ( imageinfo ) {
var i, newDimensions, field, isPortrait, $info, $section, windowWidth,
contentDirection = this.getFragment().getDocument().getDir(),
imageTitleText = imageinfo.title || imageinfo.canonicaltitle,
imageTitle = new OO.ui.LabelWidget( {
label: mw.Title.newFromText( imageinfo.title ).getNameText()
label: mw.Title.newFromText( imageTitleText ).getNameText()
} ),
metadata = imageinfo.extmetadata,
// Field configuration (in order)
@ -568,7 +668,7 @@ ve.ui.MWMediaDialog.prototype.buildMediaInfoPanel = function ( imageinfo ) {
} );
// Call for a bigger image
this.fetchThumbnail( imageinfo.title, newDimensions )
this.fetchThumbnail( imageTitleText, newDimensions )
.done( function ( thumburl ) {
if ( thumburl ) {
$image.prop( 'src', thumburl );
@ -709,7 +809,15 @@ ve.ui.MWMediaDialog.prototype.getLicenseIcon = function ( license ) {
* @param {ve.ui.MWMediaResultWidget} item Chosen item
*/
ve.ui.MWMediaDialog.prototype.onSearchResultsChoose = function ( item ) {
var info = item.getData();
this.chooseImageInfo( item.getData );
};
/**
* Choose image info for editing
*
* @param {Object} info Image info
*/
ve.ui.MWMediaDialog.prototype.chooseImageInfo = function ( info ) {
this.$infoPanelWrapper.empty();
// Switch panels
this.selectedImageInfo = info;
@ -724,13 +832,14 @@ ve.ui.MWMediaDialog.prototype.onSearchResultsChoose = function ( item ) {
* @param {ve.ui.MWMediaResultWidget|null} item Selected item
*/
ve.ui.MWMediaDialog.prototype.confirmSelectedImage = function () {
var title,
var title, imageTitleText,
obj = {},
info = this.selectedImageInfo;
if ( info ) {
imageTitleText = info.title || info.canonicaltitle;
// Run title through mw.Title so the File: prefix is localised
title = mw.Title.newFromText( info.title ).getPrefixedText();
title = mw.Title.newFromText( imageTitleText ).getPrefixedText();
if ( !this.imageModel ) {
// Create a new image model based on default attributes
this.imageModel = ve.dm.MWImageModel.static.newFromImageAttributes(
@ -768,7 +877,7 @@ ve.ui.MWMediaDialog.prototype.confirmSelectedImage = function () {
}
// Cache
obj[ info.title ] = info;
obj[ imageTitleText ] = info;
ve.init.platform.imageInfoCache.set( obj );
this.checkChanged();
@ -1007,6 +1116,7 @@ ve.ui.MWMediaDialog.prototype.switchPanels = function ( panel, stopSearchRequery
}
// Set the edit panel
this.panels.setItem( this.mediaSearchPanel );
this.searchTabs.setCard( 'search' );
this.actions.setMode( this.imageModel ? 'change' : 'select' );
// Layout pending items
this.search.runLayoutQueue();
@ -1225,6 +1335,10 @@ ve.ui.MWMediaDialog.prototype.getActionProcess = function ( action ) {
this.switchPanels( 'search', true );
};
break;
case 'upload':
return new OO.ui.Process( this.mediaUploadBooklet.uploadFile() );
case 'save':
return new OO.ui.Process( this.mediaUploadBooklet.saveFile() );
case 'apply':
case 'insert':
handler = function () {