/*! * VisualEditor user interface MWGalleryDialog class. * * @copyright 2016 VisualEditor Team and others; see AUTHORS.txt * @license The MIT License (MIT); see LICENSE.txt */ /** * Dialog for editing MediaWiki galleries. * * @class * @extends ve.ui.MWExtensionDialog * * @constructor * @param {Object} [config] Configuration options */ ve.ui.MWGalleryDialog = function VeUiMWGalleryDialog() { // Parent constructor ve.ui.MWGalleryDialog.super.apply( this, arguments ); this.$element.addClass( 've-ui-mwGalleryDialog' ); }; /* Inheritance */ OO.inheritClass( ve.ui.MWGalleryDialog, ve.ui.MWExtensionDialog ); /* Static properties */ ve.ui.MWGalleryDialog.static.name = 'gallery'; ve.ui.MWGalleryDialog.static.size = 'large'; ve.ui.MWGalleryDialog.static.title = OO.ui.deferMsg( 'visualeditor-mwgallerydialog-title' ); ve.ui.MWGalleryDialog.static.modelClasses = [ ve.dm.MWGalleryNode ]; /* Methods */ /** * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.initialize = function () { var indexLayout, imagesCard, optionsCard, menuLayout, menuPanel, modeField, captionField, widthsField, heightsField, perrowField, showFilenameField, classesField, stylesField; // Parent method ve.ui.MWGalleryDialog.super.prototype.initialize.call( this ); // States this.highlightedItem = null; this.searchPanelVisible = false; // Default settings this.defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions; // Images and options cards indexLayout = new OO.ui.IndexLayout( { scrollable: false, expanded: true } ); imagesCard = new OO.ui.CardLayout( 'images', { label: ve.msg( 'visualeditor-mwgallerydialog-card-images' ), expandable: false, scrollable: false, padded: true } ); optionsCard = new OO.ui.CardLayout( 'options', { label: ve.msg( 'visualeditor-mwgallerydialog-card-options' ), expandable: false, scrollable: false, padded: true } ); // Images card // General layout menuLayout = new OO.ui.MenuLayout(); menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ); this.editPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ); this.searchPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ).toggle( false ); // Menu this.$emptyGalleryMessage = $( '
' ) .addClass( 'oo-ui-element-hidden' ) .text( ve.msg( 'visualeditor-mwgallerydialog-empty-gallery-message' ) ); this.galleryGroup = new ve.ui.MWGalleryGroupWidget(); this.showSearchPanelButton = new OO.ui.ButtonWidget( { label: ve.msg( 'visualeditor-mwgallerydialog-search-button-label' ), flags: [ 'progressive' ], classes: [ 've-ui-mwGalleryDialog-show-search-panel-button' ] } ); // Edit panel this.$highlightedImage = $( '
' ) .addClass( 've-ui-mwGalleryDialog-highlighted-image' ); // TODO: make into a ve.ui.MWTargetWidget once Parsoid handles galleries this.highlightedCaptionInput = new OO.ui.TextInputWidget( { placeholder: 'Image caption', multiline: true, autosize: true } ); this.removeButton = new OO.ui.ButtonWidget( { label: ve.msg( 'visualeditor-mwgallerydialog-remove-button-label' ), flags: [ 'destructive' ], classes: [ 've-ui-mwGalleryDialog-remove-button' ] } ); // Search panel this.searchWidget = new ve.ui.MWMediaSearchWidget(); // Options card // Input widgets this.modeDropdown = new OO.ui.DropdownWidget( { menu: { items: [ new OO.ui.OptionWidget( { data: 'traditional', label: ve.msg( 'visualeditor-mwgallerydialog-mode-dropdown-label-traditional' ) } ), new OO.ui.OptionWidget( { data: 'nolines', label: ve.msg( 'visualeditor-mwgallerydialog-mode-dropdown-label-nolines' ) } ), new OO.ui.OptionWidget( { data: 'packed', label: ve.msg( 'visualeditor-mwgallerydialog-mode-dropdown-label-packed' ) } ), new OO.ui.OptionWidget( { data: 'packed-overlay', label: ve.msg( 'visualeditor-mwgallerydialog-mode-dropdown-label-packed-overlay' ) } ), new OO.ui.OptionWidget( { data: 'packed-hover', label: ve.msg( 'visualeditor-mwgallerydialog-mode-dropdown-label-packed-hover' ) } ), new OO.ui.OptionWidget( { data: 'slideshow', label: ve.msg( 'visualeditor-mwgallerydialog-mode-dropdown-label-slideshow' ) } ) ] } } ); this.captionInput = new OO.ui.TextInputWidget( { placeholder: ve.msg( 'visualeditor-mwgallerydialog-caption-input-placeholder' ) } ); this.widthsInput = new OO.ui.NumberInputWidget( { min: 0, showButtons: false, input: { placeholder: ve.msg( 'visualeditor-mwgallerydialog-widths-input-placeholder', this.defaults.imageWidth ) } } ); this.heightsInput = new OO.ui.NumberInputWidget( { min: 0, showButtons: false, input: { placeholder: ve.msg( 'visualeditor-mwgallerydialog-heights-input-placeholder', this.defaults.imageHeight ) } } ); this.perrowInput = new OO.ui.NumberInputWidget( { min: 0, showButtons: false } ); this.showFilenameCheckbox = new OO.ui.CheckboxInputWidget( { value: 'yes' } ); this.classesInput = new OO.ui.TextInputWidget( { placeholder: ve.msg( 'visualeditor-mwgallerydialog-classes-input-placeholder' ) } ); this.stylesInput = new OO.ui.TextInputWidget( { placeholder: ve.msg( 'visualeditor-mwgallerydialog-styles-input-placeholder' ) } ); // Field layouts modeField = new OO.ui.FieldLayout( this.modeDropdown, { label: ve.msg( 'visualeditor-mwgallerydialog-mode-field-label' ) } ); captionField = new OO.ui.FieldLayout( this.captionInput, { label: ve.msg( 'visualeditor-mwgallerydialog-caption-field-label' ) } ); widthsField = new OO.ui.FieldLayout( this.widthsInput, { label: ve.msg( 'visualeditor-mwgallerydialog-widths-field-label' ) } ); heightsField = new OO.ui.FieldLayout( this.heightsInput, { label: ve.msg( 'visualeditor-mwgallerydialog-heights-field-label' ) } ); perrowField = new OO.ui.FieldLayout( this.perrowInput, { label: ve.msg( 'visualeditor-mwgallerydialog-perrow-field-label' ) } ); showFilenameField = new OO.ui.FieldLayout( this.showFilenameCheckbox, { label: ve.msg( 'visualeditor-mwgallerydialog-show-filename-field-label' ) } ); classesField = new OO.ui.FieldLayout( this.classesInput, { label: ve.msg( 'visualeditor-mwgallerydialog-classes-field-label' ) } ); stylesField = new OO.ui.FieldLayout( this.stylesInput, { label: ve.msg( 'visualeditor-mwgallerydialog-styles-field-label' ) } ); // Append everything menuLayout.$menu.append( menuPanel.$element.append( this.$emptyGalleryMessage, this.galleryGroup.$element, this.showSearchPanelButton.$element ) ); menuLayout.$content.append( this.editPanel.$element.append( this.$highlightedImage, this.highlightedCaptionInput.$element, this.removeButton.$element ), this.searchPanel.$element.append( this.searchWidget.$element ) ); imagesCard.$element.append( menuLayout.$element ); optionsCard.$element.append( modeField.$element, captionField.$element, widthsField.$element, heightsField.$element, perrowField.$element, showFilenameField.$element, classesField.$element, stylesField.$element ); indexLayout.addCards( [ imagesCard, optionsCard ] ); this.$body.append( indexLayout.$element ); }; /** * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.getSetupProcess = function ( data ) { return ve.ui.MWGalleryDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { var titlesString, title, titleText, imageTitles, mode, caption, widths, heights, perrow, showFilename, classes, styles, pageTitle, namespace, namespacesWithSubpages, dialog = this, attributes = this.selectedNode && this.selectedNode.getAttribute( 'mw' ).attrs; // Images card // First set the search widget input value to the page title pageTitle = mw.config.get( 'wgTitle' ); namespace = mw.config.get( 'wgNamespaceNumber' ); namespacesWithSubpages = mw.config.get( 'wgVisualEditorConfig' ).namespacesWithSubpages; if ( namespacesWithSubpages[ namespace ] ) { pageTitle = pageTitle.slice( pageTitle.lastIndexOf( '/' ) + 1 ); } this.searchWidget.getQuery().setValue( pageTitle ); // If editing an existing gallery, populate with the images... if ( this.selectedNode ) { imageTitles = []; this.imageData = []; // Get image and caption data // TODO: Can be multiple pipes. See parser.php -> renderImageGallery in MediaWiki $.trim( this.selectedNode.getAttribute( 'mw' ).body.extsrc ) .split( '\n' ).forEach( function ( line ) { var matches; // Match lines like: // Image:someimage.jpg|This is some image matches = line.match( /^([^|]+)(\|(.*))?$/ ); // Ignore any empty lines if ( matches ) { title = mw.Title.newFromText( matches[ 1 ] ); // Ignore any invalid titles // (which will result in title being null) if ( title ) { titleText = title.getPrefixedText(); imageTitles.push( titleText ); dialog.imageData.push( { title: titleText, caption: matches[ 3 ] } ); } } } ); // Populate menu and edit panels titlesString = imageTitles.join( '|' ); this.imagesPromise = this.requestImages( { titlesString: titlesString } ).done( function () { dialog.onHighlightItem(); } ); // ...Otherwise show the search panel } else { this.toggleEmptyGalleryMessage( true ); this.showSearchPanelButton.toggle( false ); this.toggleSearchPanel( true ); this.updateActions(); } // Options card // Set options mode = attributes && attributes.mode || this.defaults.mode; caption = attributes && attributes.caption || ''; widths = attributes && parseInt( attributes.widths ) || ''; heights = attributes && parseInt( attributes.heights ) || ''; perrow = attributes && attributes.perrow || ''; showFilename = attributes && attributes.showfilename === 'yes'; classes = attributes && attributes.class || ''; styles = attributes && attributes.style || ''; // Populate options panel this.modeDropdown.getMenu().selectItemByData( mode ); this.captionInput.setValue( caption ); this.widthsInput.setValue( widths ); this.heightsInput.setValue( heights ); this.perrowInput.setValue( perrow ); this.showFilenameCheckbox.setSelected( showFilename ); this.classesInput.setValue( classes ); this.stylesInput.setValue( styles ); // Add event handlers this.searchWidget.getResults().connect( this, { choose: 'onSearchResultsChoose' } ); this.showSearchPanelButton.connect( this, { click: 'onShowSearchPanelButtonClick' } ); this.galleryGroup.connect( this, { editItem: 'onHighlightItem' } ); this.removeButton.connect( this, { click: 'onRemoveItem' } ); this.modeDropdown.getMenu().connect( this, { choose: 'onModeDropdownChange' } ); // Hack: Give the input a value so that this.insertOrUpdateNode gets called this.input.setValue( 'gallery' ); }, this ); }; /** * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.getReadyProcess = function ( data ) { return ve.ui.MWGalleryDialog.super.prototype.getReadyProcess.call( this, data ) .next( function () { this.searchWidget.getQuery().focus().select(); return this.imagesPromise; }, this ); }; /** * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.getTeardownProcess = function ( data ) { return ve.ui.MWGalleryDialog.super.prototype.getTeardownProcess.call( this, data ) .first( function () { this.galleryGroup.clearItems(); this.highlightedItem = null; this.searchWidget.getQuery().setValue( '' ); this.searchWidget.teardown(); this.searchPanelVisible = false; // Disconnect events this.searchWidget.getResults().disconnect( this ); this.showSearchPanelButton.disconnect( this ); this.galleryGroup.disconnect( this ); this.removeButton.disconnect( this ); this.modeDropdown.disconnect( this ); }, this ); }; /** * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.getBodyHeight = function () { return 600; }; /** * Request the images for the images card menu * * @param {Object} options Options for the request */ ve.ui.MWGalleryDialog.prototype.requestImages = function ( options ) { return new mw.Api().get( { action: 'query', prop: 'imageinfo', iiprop: 'url', iiurlwidth: options.width || 200, // Matches height of this.$highlightedImage iiurlheight: options.height || 200, titles: options.titlesString } ).done( this.onRequestImagesSuccess.bind( this ) ); }; /** * Create items for the returned images and add them to the gallery group * * @param {Object} deferred jQuery deferred object * @param {Object} response jQuery response object */ ve.ui.MWGalleryDialog.prototype.onRequestImagesSuccess = function ( deferred, response ) { var index, thumbUrls = {}, items = [], pages = response.responseJSON.query.pages; // Store object of titles to thumbUrls for ( index in pages ) { if ( pages[ index ].imageinfo ) { thumbUrls[ pages[ index ].title ] = pages[ index ].imageinfo[ 0 ].thumburl; } } // Make items for every image in imageData this.imageData.forEach( function ( image ) { image.thumbUrl = thumbUrls[ image.title ]; items.push( new ve.ui.MWGalleryItemWidget( image ) ); } ); this.galleryGroup.addItems( items ); // Gallery is no longer empty this.updateActions(); this.toggleEmptyGalleryMessage( false ); this.showSearchPanelButton.toggle( true ); }; /** * Request a new image and highlight it * * @param {string} title File name for the new image */ ve.ui.MWGalleryDialog.prototype.addNewImage = function ( title ) { var dialog = this; // Reset this.imageData, for onRequestImagesSuccess this.imageData = [ { title: title, caption: '' } ]; // Request image this.requestImages( { titlesString: title } ).done( function () { // populate edit panel with the new image var items = dialog.galleryGroup.items; dialog.onHighlightItem( items[ items.length - 1 ] ); dialog.highlightedCaptionInput.focus(); } ); }; /** * Handle search results choose event. * * @param {ve.ui.MWMediaResultWidget} item Chosen item */ ve.ui.MWGalleryDialog.prototype.onSearchResultsChoose = function ( item ) { this.addNewImage( item.getData().title ); }; /** * Handle click event for the remove button */ ve.ui.MWGalleryDialog.prototype.onRemoveItem = function () { // Remove the highlighted item this.galleryGroup.removeItems( [ this.highlightedItem ] ); // Show the search panel if the gallery is now empty... if ( this.galleryGroup.items.length === 0 ) { this.toggleEmptyGalleryMessage( true ); this.showSearchPanelButton.toggle( false ); this.toggleSearchPanel( true ); // ...Otherwise highlight the first item in the gallery } else { this.onHighlightItem(); } this.updateActions(); }; /** * Handle clicking on an image in the menu * * @param {ve.ui.MWGalleryItemWidget} item The item that was clicked on */ ve.ui.MWGalleryDialog.prototype.onHighlightItem = function ( item ) { // Unhighlight previous item if ( this.highlightedItem ) { this.highlightedItem.toggleHighlighted( false ); } // Show edit panel this.toggleSearchPanel( false ); // Highlight new item item = item ? item : this.galleryGroup.items[ 0 ]; item.toggleHighlighted( true ); this.highlightedItem = item; // Populate edit panel this.$highlightedImage .css( 'background-image', 'url(' + item.thumbUrl + ')' ); this.highlightedCaptionInput .setValue( item.caption ); }; /** * Handle change event for this.modeDropdown */ ve.ui.MWGalleryDialog.prototype.onModeDropdownChange = function () { var mode = this.modeDropdown.getMenu().getSelectedItem().getData(), disabled = ( mode === 'packed' || mode === 'packed-overlay' || mode === 'packed-hover' || mode === 'slideshow' ); this.widthsInput.setDisabled( disabled ); this.perrowInput.setDisabled( disabled ); }; /** * Handle click event for showSearchPanelButton */ ve.ui.MWGalleryDialog.prototype.onShowSearchPanelButtonClick = function () { this.toggleSearchPanel( true ); }; /** * Toggle the search panel (and the edit panel, the opposite way) * * @param {boolean} visible The search panel is visible */ ve.ui.MWGalleryDialog.prototype.toggleSearchPanel = function ( visible ) { visible = visible !== undefined ? visible : !this.searchPanelVisible; // If currently visible panel is an edit panel, store the caption if ( !this.searchPanelVisible && this.highlightedItem ) { this.highlightedItem.setCaption( this.highlightedCaptionInput.getValue() ); } // Record the state of the search panel this.searchPanelVisible = visible; // Toggle the search panel, and do the opposite for the edit panel this.searchPanel.toggle( visible ); this.editPanel.toggle( !visible ); // If the edit panel is visible, focus the caption input if ( !visible ) { this.highlightedCaptionInput.focus(); } else { this.searchWidget.getQuery().focus().select(); } }; /** * Toggle the empty gallery message * * @param {boolean} empty The gallery is empty */ ve.ui.MWGalleryDialog.prototype.toggleEmptyGalleryMessage = function ( empty ) { if ( empty ) { this.$emptyGalleryMessage.removeClass( 'oo-ui-element-hidden' ); } else { this.$emptyGalleryMessage.addClass( 'oo-ui-element-hidden' ); } }; /** * Disable the "Done" button if the gallery is empty, otherwise enable it */ ve.ui.MWGalleryDialog.prototype.updateActions = function () { this.actions.setAbilities( { done: this.galleryGroup.items.length > 0 } ); }; /** * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.updateMwData = function ( mwData ) { var i, ilen, mode, caption, widths, heights, perrow, showFilename, classes, styles, extsrc = '', items = this.galleryGroup.items; // Parent method ve.ui.MWGalleryDialog.super.prototype.updateMwData.call( this, mwData ); // Get titles and captions from gallery group this.highlightedItem.setCaption( this.highlightedCaptionInput.getValue() ); for ( i = 0, ilen = items.length; i < ilen; i++ ) { extsrc += '\n' + items[ i ].imageTitle + '|' + items[ i ].caption; } // Get data from options card mode = this.modeDropdown.getMenu().getSelectedItem().getData(); caption = this.captionInput.getValue(); widths = this.widthsInput.getValue(); heights = this.heightsInput.getValue(); perrow = this.perrowInput.getValue(); showFilename = this.showFilenameCheckbox.isSelected(); classes = this.classesInput.getValue(); styles = this.stylesInput.getValue(); // Update extsrc and attributes mwData.body.extsrc = extsrc + '\n'; mwData.attrs.mode = mode || undefined; mwData.attrs.caption = caption || undefined; mwData.attrs.widths = widths || undefined; mwData.attrs.heights = heights || undefined; mwData.attrs.perrow = perrow || undefined; mwData.attrs.showfilename = showFilename ? 'yes' : undefined; mwData.attrs.classes = classes || undefined; mwData.attrs.styles = styles || undefined; // Unset mode attribute if it is the same as the default mwData.attrs.mode = mode === this.defaults.mode ? undefined : mode; }; /* Registration */ ve.ui.windowFactory.register( ve.ui.MWGalleryDialog );