mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 04:06:51 +00:00
51e096d6f2
Use OOJS-UI's newly-extended paged dialogs (in e08eb2a03b) to refactor how the Transclusion and Meta dialogs work, splitting out the code for each of the panels into its own file and simplifying extensibility. The Meta dialog (ve.ui.MWMetaDialog) now has two self-managing panels: * ve.ui.MWCategoriesPage for categories and the default sort key * ve.ui.MWLanguagesPage for language links The Transclusion dialog (ve.ui.MWTransclusionDialog) now has four: * ve.ui.MWTemplatePage for a template's primary panel * ve.ui.MWTemplateParameterPage for each parameter of a template * ve.ui.MWTemplatePlaceholderPage for a placeholder to insert a template * ve.ui.MWTransclusionContentPage for non-template transclusion Additionally, the Transclusion dialog has been slightly cleaned up: * Replace add/remove events with replace events in transclusion model * Actually return and resolve a promise (as documented) * Get rid of "origin" info in template models * Add method for adding required parts TODO: * Decide how and when we will choose between advanced transclusion and template dialogs * Work out design issues with how template descriptions will be visible and how adding parameters will work if only showing parameters in outline * Add preview to template dialog * Consider ways to further improve pages for use in continuous mode WARNING: * Right now the template dialog gets overridden by the advanced transclusion dialog because they have the same symbolic name and the latter is registered later than the former. To test the template dialog, just change the symbolic name of the advanced transclusion dialog. Change-Id: I51e74b322aec9a4c3918e6f792bdb3d318060979
265 lines
7.5 KiB
JavaScript
265 lines
7.5 KiB
JavaScript
/*!
|
|
* VisualEditor user interface MWCategoriesPage class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/*global mw*/
|
|
|
|
/**
|
|
* MediaWiki meta dialog categories page.
|
|
*
|
|
* @class
|
|
* @extends OO.ui.PageLayout
|
|
*
|
|
* @constructor
|
|
* @param {ve.ui.Surface} surface Surface being worked on
|
|
* @param {string} name Unique symbolic name of page
|
|
* @param {Object} [config] Configuration options
|
|
* @cfg {jQuery} [$overlay] Overlay to render category settings popups in
|
|
*/
|
|
ve.ui.MWCategoriesPage = function VeUiMWCategoriesPage( surface, name, config ) {
|
|
// Configuration initialization
|
|
config = ve.extendObject( config, { 'icon': 'tag' } );
|
|
|
|
// Parent constructor
|
|
OO.ui.PageLayout.call( this, name, config );
|
|
|
|
// Properties
|
|
this.surface = surface;
|
|
this.metaList = this.surface.getModel().metaList;
|
|
this.defaultSortKeyTouched = false;
|
|
this.fallbackDefaultSortKey = mw.config.get( 'wgTitle' );
|
|
this.label = ve.msg( 'visualeditor-dialog-meta-categories-section' );
|
|
this.categoriesFieldset = new OO.ui.FieldsetLayout( {
|
|
'$': this.$,
|
|
'label': ve.msg( 'visualeditor-dialog-meta-categories-data-label' ),
|
|
'icon': 'tag'
|
|
} );
|
|
this.categoryOptionsFieldset = new OO.ui.FieldsetLayout( {
|
|
'$': this.$,
|
|
'label': ve.msg( 'visualeditor-dialog-meta-categories-options' ),
|
|
'icon': 'settings'
|
|
} );
|
|
this.categoryWidget = new ve.ui.MWCategoryWidget( {
|
|
'$': this.$, '$overlay': config.$overlay
|
|
} );
|
|
this.defaultSortInput = new OO.ui.TextInputWidget( {
|
|
'$': this.$, 'placeholder': this.fallbackDefaultSortKey
|
|
} );
|
|
this.defaultSortLabel = new OO.ui.InputLabelWidget( {
|
|
'$': this.$,
|
|
'input': this.defaultSortInput,
|
|
'label': ve.msg( 'visualeditor-dialog-meta-categories-defaultsort-label' )
|
|
} );
|
|
|
|
// Events
|
|
this.metaList.connect( this, {
|
|
'insert': 'onMetaListInsert',
|
|
'remove': 'onMetaListRemove'
|
|
} );
|
|
this.categoryWidget.connect( this, {
|
|
'newCategory': 'onNewCategory',
|
|
'updateSortkey': 'onUpdateSortKey'
|
|
} );
|
|
this.defaultSortInput.connect( this, {
|
|
'change': 'onDefaultSortChange'
|
|
} );
|
|
|
|
// Initialization
|
|
this.categoryWidget.addItems( this.getCategoryItems() );
|
|
this.categoriesFieldset.$element.append( this.categoryWidget.$element );
|
|
this.categoryOptionsFieldset.$element.append(
|
|
this.defaultSortLabel.$element,
|
|
this.defaultSortInput.$element
|
|
);
|
|
this.$element.append( this.categoriesFieldset.$element, this.categoryOptionsFieldset.$element );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
OO.inheritClass( ve.ui.MWCategoriesPage, OO.ui.PageLayout );
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Handle category default sort change events.
|
|
*
|
|
* @param {string} value Default sort value
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.onDefaultSortChange = function ( value ) {
|
|
this.categoryWidget.setDefaultSortKey( value === '' ? this.fallbackDefaultSortKey : value );
|
|
this.defaultSortKeyTouched = true;
|
|
};
|
|
|
|
/**
|
|
* Inserts new category into meta list
|
|
*
|
|
* @param {Object} item
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.onNewCategory = function ( item ) {
|
|
// Insert new metaList item
|
|
this.insertMetaListItem( this.getCategoryItemForInsertion( item ) );
|
|
};
|
|
|
|
/**
|
|
* Removes and re-inserts updated category widget item
|
|
*
|
|
* @param {Object} item
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.onUpdateSortKey = function ( item ) {
|
|
// Replace meta item with updated one
|
|
item.metaItem.replaceWith( this.getCategoryItemForInsertion( item, item.metaItem.getElement() ) );
|
|
};
|
|
|
|
/**
|
|
* Bound to MetaList insert event for adding meta dialog components.
|
|
*
|
|
* @param {Object} ve.dm.MetaItem
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.onMetaListInsert = function ( metaItem ) {
|
|
// Responsible for adding UI components
|
|
if ( metaItem.element.type === 'mwCategory' ) {
|
|
this.categoryWidget.addItems(
|
|
[ this.getCategoryItemFromMetaListItem( metaItem ) ],
|
|
this.metaList.findItem( metaItem.getOffset(), metaItem.getIndex(), 'mwCategory' )
|
|
);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Bound to MetaList insert event for removing meta dialog components.
|
|
*
|
|
* @param {Object} ve.dm.MetaItem
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.onMetaListRemove = function ( metaItem ) {
|
|
var item;
|
|
|
|
if ( metaItem.element.type === 'mwCategory' ) {
|
|
item = this.getCategoryItemFromMetaListItem( metaItem );
|
|
this.categoryWidget.removeItems( [item.value] );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get default sort key item.
|
|
*
|
|
* @returns {string} Default sort key item
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.getDefaultSortKeyItem = function () {
|
|
var items = this.metaList.getItemsInGroup( 'mwDefaultSort' );
|
|
return items.length ? items[0] : null;
|
|
};
|
|
|
|
/**
|
|
* Get array of category items from meta list
|
|
*
|
|
* @returns {Object[]} items
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.getCategoryItems = function () {
|
|
var i,
|
|
items = [],
|
|
categories = this.metaList.getItemsInGroup( 'mwCategory' );
|
|
|
|
// Loop through MwCategories and build out items
|
|
for ( i = 0; i < categories.length; i++ ) {
|
|
items.push( this.getCategoryItemFromMetaListItem( categories[i] ) );
|
|
}
|
|
return items;
|
|
};
|
|
|
|
/**
|
|
* Gets category item from meta list item
|
|
*
|
|
* @param {Object} ve.dm.MWCategoryMetaItem
|
|
* @returns {Object} item
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.getCategoryItemFromMetaListItem = function ( metaItem ) {
|
|
var title = mw.Title.newFromText( metaItem.element.attributes.category ),
|
|
value = title ? title.getMainText() : '';
|
|
|
|
return {
|
|
'name': metaItem.element.attributes.category,
|
|
'value': value,
|
|
// TODO: sortkey is lcase, make consistent throughout CategoryWidget
|
|
'sortKey': metaItem.element.attributes.sortkey,
|
|
'metaItem': metaItem
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Get metaList like object to insert from item
|
|
*
|
|
* @param {Object} item category widget item
|
|
* @param {Object} [oldData] Metadata object that was previously associated with this item, if any
|
|
* @returns {Object} metaBase
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.getCategoryItemForInsertion = function ( item, oldData ) {
|
|
var newData = {
|
|
'attributes': { 'category': item.name, 'sortkey': item.sortKey || '' },
|
|
'type': 'mwCategory'
|
|
};
|
|
if ( oldData ) {
|
|
return ve.extendObject( {}, oldData, newData );
|
|
}
|
|
return newData;
|
|
};
|
|
|
|
/**
|
|
* Inserts a meta list item
|
|
*
|
|
* @param {Object} metaBase meta list insert object
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.insertMetaListItem = function ( metaBase ) {
|
|
this.metaList.insertMeta( metaBase );
|
|
};
|
|
|
|
/**
|
|
* Set up the page. This is called when the MWMetaDialog is set up.
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.setup = function () {
|
|
var defaultSortKeyItem = this.getDefaultSortKeyItem();
|
|
|
|
this.defaultSortInput.setValue(
|
|
defaultSortKeyItem ? defaultSortKeyItem.getAttribute( 'content' ) : ''
|
|
);
|
|
this.defaultSortKeyTouched = false;
|
|
|
|
// Update input position once visible
|
|
setTimeout( ve.bind( function () {
|
|
this.categoryWidget.fitInput();
|
|
}, this ) );
|
|
};
|
|
|
|
/**
|
|
* Tear down the page. This is called when the MWMetaDialog is torn down.
|
|
*/
|
|
ve.ui.MWCategoriesPage.prototype.teardown = function () {
|
|
var currentDefaultSortKeyItem = this.getDefaultSortKeyItem(),
|
|
newDefaultSortKey = this.defaultSortInput.getValue(),
|
|
newDefaultSortKeyData = {
|
|
'type': 'mwDefaultSort',
|
|
'attributes': { 'content': newDefaultSortKey }
|
|
};
|
|
|
|
// Alter the default sort key iff it's been touched & is actually different
|
|
if ( this.defaultSortKeyTouched ) {
|
|
if ( newDefaultSortKey === '' ) {
|
|
if ( currentDefaultSortKeyItem ) {
|
|
currentDefaultSortKeyItem.remove();
|
|
}
|
|
} else {
|
|
if ( !currentDefaultSortKeyItem ) {
|
|
this.metaList.insertMeta( newDefaultSortKeyData );
|
|
} else if ( currentDefaultSortKeyItem.getAttribute( 'content' ) !== newDefaultSortKey ) {
|
|
currentDefaultSortKeyItem.replaceWith(
|
|
ve.extendObject( true, {},
|
|
currentDefaultSortKeyItem.getElement(),
|
|
newDefaultSortKeyData
|
|
) );
|
|
}
|
|
}
|
|
}
|
|
};
|