mediawiki-extensions-Visual.../modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js

1334 lines
36 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor user interface MWMediaDialog class.
*
* @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
* 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.$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';
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
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'
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
},
{
action: 'insert',
label: OO.ui.deferMsg( 'visualeditor-dialog-action-insert' ),
flags: [ 'primary', 'constructive' ],
modes: 'insert'
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
},
{
action: 'change',
label: OO.ui.deferMsg( 'visualeditor-dialog-media-change-image' ),
modes: [ 'edit', 'insert' ]
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
},
{
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' ]
},
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
{
label: OO.ui.deferMsg( 'visualeditor-dialog-action-cancel' ),
flags: 'safe',
modes: [ 'edit', 'insert', 'select' ]
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
},
{
action: 'back',
label: OO.ui.deferMsg( 'visualeditor-dialog-media-goback' ),
flags: 'safe',
modes: [ 'change' ]
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
}
];
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 */
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
/**
* @inheritdoc
*/
ve.ui.MWMediaDialog.prototype.getBodyHeight = function () {
// FIXME: This should vary on panel.
return 500;
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
};
/**
* @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.$ } );
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
// 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.$,
// Height of the panels
fullSize: 400
} );
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' ),
icon: 'parameter',
classes: [ 've-ui-mwMediaDialog-caption-fielset']
} );
// 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.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' )
} );
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.positionSelect.$element
);
// Type
this.typeFieldset = new OO.ui.FieldsetLayout( {
$: this.$,
label: ve.msg( 'visualeditor-dialog-media-type-section' ),
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'
} );
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
);
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
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,
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 = {},
windowWidth = this.mediaImageInfoPanel.$element.innerWidth(),
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.attr( 'dir', contentDirection ),
$details
);
// Make sure all links open in a new window
$info.find( 'a' ).attr( 'target', '_blank' );
// 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 {
newDimensions = {
width: imageinfo.thumbwidth,
height: imageinfo.thumbheight
};
}
// Initialize thumb container
$thumbContainer.append( $image.attr( {
src: imageinfo.thumburl,
width: newDimensions.width,
height: newDimensions.height
} ) );
isPortrait = newDimensions.width < windowWidth * 3 / 5;
this.mediaImageInfoPanel.$element.toggleClass( 've-ui-mwMediaDialog-panel-imageinfo-portrait', isPortrait );
this.$infoPanelWrapper.append(
$thumbContainer,
$info
);
this.mediaImageInfoPanel.$element.append( this.$infoPanelWrapper );
if ( isPortrait ) {
$info.outerWidth( Math.floor( this.mediaImageInfoPanel.$element.innerWidth() - $thumbContainer.width() - 1 ) );
}
// Adjust height-limited fields
for ( field in fields ) {
if ( fields[field].getType() === 'description' ) {
fields[field].toggleReadMoreButton();
}
}
};
/**
* 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,
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
},
{ width: info.width, height: info.height }
);
}
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
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
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();
// Hide/show the panels
this.bookletLayout.$element.show();
this.mediaSearchPanel.$element.hide();
this.mediaImageInfoPanel.$element.hide();
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 );
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
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 );
// Hide/show the panels
this.bookletLayout.$element.hide();
this.mediaSearchPanel.$element.show();
this.mediaImageInfoPanel.$element.hide();
break;
default:
case 'imageInfo':
this.setSize( 'larger' );
// Hide/show buttons
this.actions.setMode( 'info' );
// Hide/show the panels
this.mediaImageInfoPanel.$element.show();
this.bookletLayout.$element.hide();
this.mediaSearchPanel.$element.hide();
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 );
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
this.sizeWidget.disconnect( this );
}
this.captionSurface.destroy();
this.captionSurface = null;
this.captionNode = null;
this.imageModel = null;
}, this );
};
/**
* @inheritdoc
*/
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
ve.ui.MWMediaDialog.prototype.getActionProcess = function ( action ) {
var handler;
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
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() );
Update VE core submodule to master (f2277ea) New changes: 56de6f5 Localisation updates from https://translatewiki.net. f8bda64 Widgetise demo menu 6ac48d8 Localisation updates from https://translatewiki.net. 365e131 builderloader: Omit value for boolean "disabled" attribute per HTML5 706e4b3 Prevent double counting of DM nodes in getNodeAndOffset b141a7d Update OOjs UI to v0.1.0-pre (d2451ac748) c5b3921 Localisation updates from https://translatewiki.net. 1606983 Update reference to ConfirmationDialog to use MessageDialog Deletions: * Styles for ve.ui.MWBetaWelcomeDialog - not needed anymore because OO.ui.MessageDialog provides them * Styles for ve.ui.MWGalleryInspector - not needed anymore because ve.ui.MWExtensionInspector provides part of them and the rest are being replaced by programatic sizing Modifications: * ve.ui.MWLinkTargetInputWidget - Added support for validation and href getter * Split message between tool and dialog title for ve.ui.MWEditModeTool and ve.ui.MWWikitextSwitchConfirmDialog General changes: * Updated inheritance. * Added manager param to constructors of dialogs and inspectors. * Updated use of show/hide with toggle. * Added meaningful descriptions of dialog and inspector classes. * Configured dialog and inspector sizes statically. * Configured dialog action buttons statically. * Interfaced with OO.ui.ActionSet to control action buttons. * Moved applyChanges code into getActionProcess methods. * Always using .next in setup/ready process getters and .first in hold/teardown process getters. Change-Id: Ia74732e6e32c0808eee021f0a26225b9e6c3f971
2014-07-14 21:32:49 +00:00
}
}
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 );