2013-12-02 20:10:55 +00:00
|
|
|
/*!
|
|
|
|
* VisualEditor user interface MWCategoriesPage class.
|
|
|
|
*
|
2023-12-01 16:06:11 +00:00
|
|
|
* @copyright See AUTHORS.txt
|
2013-12-02 20:10:55 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* MediaWiki meta dialog categories page.
|
|
|
|
*
|
|
|
|
* @class
|
|
|
|
* @extends OO.ui.PageLayout
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @param {string} name Unique symbolic name of page
|
|
|
|
* @param {Object} [config] Configuration options
|
2014-10-14 22:48:24 +00:00
|
|
|
* @cfg {jQuery} [$overlay] Overlay to render dropdowns in
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
2014-04-04 17:42:13 +00:00
|
|
|
ve.ui.MWCategoriesPage = function VeUiMWCategoriesPage( name, config ) {
|
2013-12-02 20:10:55 +00:00
|
|
|
// Configuration initialization
|
2014-02-15 01:37:32 +00:00
|
|
|
config = config || {};
|
2013-12-02 20:10:55 +00:00
|
|
|
|
|
|
|
// Parent constructor
|
2016-08-22 21:44:59 +00:00
|
|
|
ve.ui.MWCategoriesPage.super.apply( this, arguments );
|
2013-12-02 20:10:55 +00:00
|
|
|
|
|
|
|
// Properties
|
2022-01-19 14:25:39 +00:00
|
|
|
this.fragment = null;
|
2013-12-02 20:10:55 +00:00
|
|
|
this.defaultSortKeyTouched = false;
|
2023-11-09 05:02:23 +00:00
|
|
|
this.fallbackDefaultSortKey = mw.Title.newFromText( ve.init.target.getPageName() ).getMainText();
|
2013-12-02 20:10:55 +00:00
|
|
|
this.categoriesFieldset = new OO.ui.FieldsetLayout( {
|
2014-08-22 20:50:48 +00:00
|
|
|
label: ve.msg( 'visualeditor-dialog-meta-categories-data-label' ),
|
|
|
|
icon: 'tag'
|
2013-12-02 20:10:55 +00:00
|
|
|
} );
|
2018-04-13 18:45:03 +00:00
|
|
|
|
2013-12-02 20:10:55 +00:00
|
|
|
this.categoryOptionsFieldset = new OO.ui.FieldsetLayout( {
|
2014-08-22 20:50:48 +00:00
|
|
|
label: ve.msg( 'visualeditor-dialog-meta-categories-options' ),
|
2018-09-08 02:46:12 +00:00
|
|
|
icon: 'settings'
|
2013-12-02 20:10:55 +00:00
|
|
|
} );
|
2018-04-13 18:45:03 +00:00
|
|
|
|
2013-12-02 20:10:55 +00:00
|
|
|
this.categoryWidget = new ve.ui.MWCategoryWidget( {
|
2015-04-09 23:47:15 +00:00
|
|
|
$overlay: config.$overlay
|
2013-12-02 20:10:55 +00:00
|
|
|
} );
|
2018-04-13 18:45:03 +00:00
|
|
|
|
|
|
|
this.addCategory = new OO.ui.FieldLayout(
|
|
|
|
this.categoryWidget,
|
|
|
|
{
|
|
|
|
$overlay: config.$overlay,
|
|
|
|
align: 'top',
|
|
|
|
label: ve.msg( 'visualeditor-dialog-meta-categories-addcategory-label' )
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2013-12-02 20:10:55 +00:00
|
|
|
this.defaultSortInput = new OO.ui.TextInputWidget( {
|
2015-04-09 23:47:15 +00:00
|
|
|
placeholder: this.fallbackDefaultSortKey
|
2013-12-02 20:10:55 +00:00
|
|
|
} );
|
2014-03-17 18:30:47 +00:00
|
|
|
|
|
|
|
this.defaultSortInput.$element.addClass( 've-ui-mwCategoriesPage-defaultsort' );
|
|
|
|
|
2014-01-22 20:13:59 +00:00
|
|
|
this.defaultSort = new OO.ui.FieldLayout(
|
|
|
|
this.defaultSortInput,
|
|
|
|
{
|
2017-02-16 01:56:03 +00:00
|
|
|
$overlay: config.$overlay,
|
2014-08-22 20:50:48 +00:00
|
|
|
align: 'top',
|
2014-09-15 01:18:03 +00:00
|
|
|
label: ve.msg( 'visualeditor-dialog-meta-categories-defaultsort-label' ),
|
|
|
|
help: ve.msg( 'visualeditor-dialog-meta-categories-defaultsort-help' )
|
2014-01-22 20:13:59 +00:00
|
|
|
}
|
|
|
|
);
|
2013-12-02 20:10:55 +00:00
|
|
|
|
|
|
|
// Events
|
|
|
|
this.categoryWidget.connect( this, {
|
2014-08-22 20:50:48 +00:00
|
|
|
newCategory: 'onNewCategory',
|
|
|
|
updateSortkey: 'onUpdateSortKey'
|
2013-12-02 20:10:55 +00:00
|
|
|
} );
|
|
|
|
this.defaultSortInput.connect( this, {
|
2014-08-22 20:50:48 +00:00
|
|
|
change: 'onDefaultSortChange'
|
2013-12-02 20:10:55 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
// Initialization
|
2018-04-13 18:45:03 +00:00
|
|
|
this.categoriesFieldset.addItems( [ this.addCategory ] );
|
2014-01-22 20:13:59 +00:00
|
|
|
this.categoryOptionsFieldset.addItems( [ this.defaultSort ] );
|
2013-12-02 20:10:55 +00:00
|
|
|
this.$element.append( this.categoriesFieldset.$element, this.categoryOptionsFieldset.$element );
|
|
|
|
};
|
|
|
|
|
|
|
|
/* Inheritance */
|
|
|
|
|
|
|
|
OO.inheritClass( ve.ui.MWCategoriesPage, OO.ui.PageLayout );
|
|
|
|
|
|
|
|
/* Methods */
|
|
|
|
|
2014-02-15 01:37:32 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
2021-09-15 10:10:56 +00:00
|
|
|
ve.ui.MWCategoriesPage.prototype.setupOutlineItem = function () {
|
|
|
|
this.outlineItem
|
|
|
|
.setIcon( 'tag' )
|
|
|
|
.setLabel( ve.msg( 'visualeditor-dialog-meta-categories-section' ) );
|
2014-02-15 01:37:32 +00:00
|
|
|
};
|
|
|
|
|
2013-12-02 20:10:55 +00:00
|
|
|
/**
|
|
|
|
* 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
|
2014-11-14 20:44:55 +00:00
|
|
|
* @param {ve.dm.MWCategoryMetaItem} [beforeMetaItem] Meta item to insert before,
|
|
|
|
* or undefined to go at the end
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
2014-11-14 20:44:55 +00:00
|
|
|
ve.ui.MWCategoriesPage.prototype.onNewCategory = function ( item, beforeMetaItem ) {
|
2022-01-19 14:25:39 +00:00
|
|
|
this.fragment.insertMeta(
|
|
|
|
this.getCategoryItemForInsertion( item ),
|
|
|
|
beforeMetaItem ? beforeMetaItem.getOffset() : undefined
|
|
|
|
);
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Removes and re-inserts updated category widget item
|
|
|
|
*
|
|
|
|
* @param {Object} item
|
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.onUpdateSortKey = function ( item ) {
|
|
|
|
// Replace meta item with updated one
|
2022-01-19 14:25:39 +00:00
|
|
|
this.fragment.replaceMeta( item.metaItem, this.getCategoryItemForInsertion( item, item.metaItem.getElement() ) );
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Bound to MetaList insert event for adding meta dialog components.
|
|
|
|
*
|
2014-02-20 20:36:52 +00:00
|
|
|
* @param {ve.dm.MetaItem} metaItem
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.onMetaListInsert = function ( metaItem ) {
|
|
|
|
// Responsible for adding UI components
|
|
|
|
if ( metaItem.element.type === 'mwCategory' ) {
|
2022-01-19 14:25:39 +00:00
|
|
|
var index = this.fragment.getDocument().getMetaList().getItemsInGroup( 'mwCategory' ).indexOf( metaItem );
|
2013-12-02 20:10:55 +00:00
|
|
|
this.categoryWidget.addItems(
|
|
|
|
[ this.getCategoryItemFromMetaListItem( metaItem ) ],
|
2018-01-22 01:28:07 +00:00
|
|
|
index
|
2013-12-02 20:10:55 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Bound to MetaList insert event for removing meta dialog components.
|
|
|
|
*
|
2014-02-20 20:36:52 +00:00
|
|
|
* @param {ve.dm.MetaItem} metaItem
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.onMetaListRemove = function ( metaItem ) {
|
|
|
|
if ( metaItem.element.type === 'mwCategory' ) {
|
2022-02-21 18:07:07 +00:00
|
|
|
var item = this.categoryWidget.categories[ this.getCategoryItemFromMetaListItem( metaItem ).value ];
|
2015-07-22 22:13:09 +00:00
|
|
|
this.categoryWidget.removeItems( [ item ] );
|
2013-12-02 20:10:55 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get default sort key item.
|
|
|
|
*
|
2023-11-09 05:02:23 +00:00
|
|
|
* @return {Object} Default sort key item
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.getDefaultSortKeyItem = function () {
|
2022-01-19 14:25:39 +00:00
|
|
|
return this.fragment.getDocument().getMetaList().getItemsInGroup( 'mwDefaultSort' )[ 0 ] || null;
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get array of category items from meta list
|
|
|
|
*
|
2015-08-19 18:09:34 +00:00
|
|
|
* @return {Object[]} items
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.getCategoryItems = function () {
|
2022-02-21 18:07:07 +00:00
|
|
|
var items = [],
|
2022-01-19 14:25:39 +00:00
|
|
|
categories = this.fragment.getDocument().getMetaList().getItemsInGroup( 'mwCategory' );
|
2013-12-02 20:10:55 +00:00
|
|
|
|
|
|
|
// Loop through MwCategories and build out items
|
2022-02-21 18:07:07 +00:00
|
|
|
for ( var i = 0; i < categories.length; i++ ) {
|
2015-08-19 17:33:02 +00:00
|
|
|
items.push( this.getCategoryItemFromMetaListItem( categories[ i ] ) );
|
2013-12-02 20:10:55 +00:00
|
|
|
}
|
|
|
|
return items;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Gets category item from meta list item
|
|
|
|
*
|
2014-02-20 20:36:52 +00:00
|
|
|
* @param {ve.dm.MWCategoryMetaItem} metaItem
|
2015-08-19 18:09:34 +00:00
|
|
|
* @return {Object} item
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.getCategoryItemFromMetaListItem = function ( metaItem ) {
|
|
|
|
var title = mw.Title.newFromText( metaItem.element.attributes.category ),
|
|
|
|
value = title ? title.getMainText() : '';
|
|
|
|
|
|
|
|
return {
|
2014-08-22 20:50:48 +00:00
|
|
|
name: metaItem.element.attributes.category,
|
|
|
|
value: value,
|
2013-12-02 20:10:55 +00:00
|
|
|
// TODO: sortkey is lcase, make consistent throughout CategoryWidget
|
2014-08-22 20:50:48 +00:00
|
|
|
sortKey: metaItem.element.attributes.sortkey,
|
|
|
|
metaItem: metaItem
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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
|
2015-08-19 18:09:34 +00:00
|
|
|
* @return {Object} metaBase
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.getCategoryItemForInsertion = function ( item, oldData ) {
|
|
|
|
var newData = {
|
2014-08-22 20:50:48 +00:00
|
|
|
attributes: { category: item.name, sortkey: item.sortKey || '' },
|
|
|
|
type: 'mwCategory'
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
|
|
|
if ( oldData ) {
|
|
|
|
return ve.extendObject( {}, oldData, newData );
|
|
|
|
}
|
|
|
|
return newData;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2014-04-04 17:42:13 +00:00
|
|
|
* Setup categories page.
|
|
|
|
*
|
2022-01-19 14:25:39 +00:00
|
|
|
* @param {ve.dm.SurfaceFragment} fragment Surface fragment
|
2021-09-11 08:05:31 +00:00
|
|
|
* @param {Object} config
|
2019-02-25 12:04:03 +00:00
|
|
|
* @param {Object} [config.data] Dialog setup data
|
2022-02-14 15:18:57 +00:00
|
|
|
* @param {boolean} [config.isReadOnly=false] Dialog is in read-only mode
|
2018-10-30 18:53:43 +00:00
|
|
|
* @return {jQuery.Promise}
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
2022-01-19 14:25:39 +00:00
|
|
|
ve.ui.MWCategoriesPage.prototype.setup = function ( fragment, config ) {
|
2022-02-21 18:07:07 +00:00
|
|
|
var page = this;
|
2014-12-16 21:14:01 +00:00
|
|
|
|
2022-01-19 14:25:39 +00:00
|
|
|
this.fragment = fragment;
|
|
|
|
this.fragment.getDocument().getMetaList().connect( this, {
|
2014-08-22 20:50:48 +00:00
|
|
|
insert: 'onMetaListInsert',
|
|
|
|
remove: 'onMetaListRemove'
|
2014-04-04 17:42:13 +00:00
|
|
|
} );
|
|
|
|
|
2022-02-21 18:07:07 +00:00
|
|
|
var defaultSortKeyItem = this.getDefaultSortKeyItem();
|
2013-12-02 20:10:55 +00:00
|
|
|
|
2022-01-19 14:25:39 +00:00
|
|
|
this.categoryWidget.setFragment( fragment );
|
2024-04-30 16:44:25 +00:00
|
|
|
var promise = this.categoryWidget.addItems( this.getCategoryItems() ).then( () => {
|
2019-02-25 12:04:03 +00:00
|
|
|
page.categoryWidget.setDisabled( config.isReadOnly );
|
|
|
|
} );
|
2014-04-04 17:42:13 +00:00
|
|
|
|
2013-12-02 20:10:55 +00:00
|
|
|
this.defaultSortInput.setValue(
|
2023-11-09 05:02:23 +00:00
|
|
|
defaultSortKeyItem ? defaultSortKeyItem.getAttribute( 'sortkey' ) : this.fallbackDefaultSortKey
|
2019-02-25 12:04:03 +00:00
|
|
|
).setReadOnly( config.isReadOnly );
|
2013-12-02 20:10:55 +00:00
|
|
|
this.defaultSortKeyTouched = false;
|
|
|
|
|
2016-02-18 17:09:53 +00:00
|
|
|
// Update input position after transition
|
2024-04-30 16:44:25 +00:00
|
|
|
setTimeout( () => {
|
2014-12-16 21:14:01 +00:00
|
|
|
page.categoryWidget.fitInput();
|
2016-07-12 12:28:13 +00:00
|
|
|
}, OO.ui.theme.getDialogTransitionDuration() );
|
2018-10-30 18:53:43 +00:00
|
|
|
|
|
|
|
return promise;
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
|
|
|
|
2016-02-19 17:34:41 +00:00
|
|
|
/**
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
ve.ui.MWCategoriesPage.prototype.focus = function () {
|
|
|
|
this.categoryWidget.focus();
|
|
|
|
};
|
|
|
|
|
2013-12-02 20:10:55 +00:00
|
|
|
/**
|
|
|
|
* Tear down the page. This is called when the MWMetaDialog is torn down.
|
2015-07-30 23:21:52 +00:00
|
|
|
*
|
|
|
|
* @param {Object} [data] Dialog tear down data
|
2013-12-02 20:10:55 +00:00
|
|
|
*/
|
2015-07-30 23:21:52 +00:00
|
|
|
ve.ui.MWCategoriesPage.prototype.teardown = function ( data ) {
|
2013-12-02 20:10:55 +00:00
|
|
|
var currentDefaultSortKeyItem = this.getDefaultSortKeyItem(),
|
2023-11-09 05:02:23 +00:00
|
|
|
newDefaultSortKey = this.defaultSortInput.getValue();
|
2013-12-02 20:10:55 +00:00
|
|
|
|
2019-02-19 17:08:38 +00:00
|
|
|
if ( data && data.action === 'done' ) {
|
2016-07-02 16:38:53 +00:00
|
|
|
// Alter the default sort key iff it's been touched & is actually different
|
|
|
|
if ( this.defaultSortKeyTouched ) {
|
2018-10-30 23:51:34 +00:00
|
|
|
if ( newDefaultSortKey === '' || newDefaultSortKey === this.fallbackDefaultSortKey ) {
|
2016-07-02 16:38:53 +00:00
|
|
|
if ( currentDefaultSortKeyItem ) {
|
2023-03-30 15:18:12 +00:00
|
|
|
this.fragment.removeMeta( currentDefaultSortKeyItem );
|
2016-07-02 16:38:53 +00:00
|
|
|
}
|
|
|
|
} else {
|
2023-11-09 05:02:23 +00:00
|
|
|
var newDefaultSortKeyData = {
|
|
|
|
type: 'mwDefaultSort',
|
|
|
|
attributes: {
|
|
|
|
sortkey: newDefaultSortKey
|
|
|
|
}
|
|
|
|
};
|
2016-07-02 16:38:53 +00:00
|
|
|
if ( !currentDefaultSortKeyItem ) {
|
2023-11-09 05:02:23 +00:00
|
|
|
var firstCategory = this.fragment.getDocument().getMetaList().getItemsInGroup( 'mwCategory' )[ 0 ],
|
|
|
|
offset = firstCategory && firstCategory.getOffset();
|
|
|
|
this.fragment.insertMeta( newDefaultSortKeyData, offset );
|
|
|
|
} else if ( currentDefaultSortKeyItem.getAttribute( 'sortkey' ) !== newDefaultSortKey ) {
|
2022-01-19 14:25:39 +00:00
|
|
|
this.fragment.replaceMeta(
|
|
|
|
currentDefaultSortKeyItem,
|
2016-07-02 16:38:53 +00:00
|
|
|
ve.extendObject( true, {},
|
|
|
|
currentDefaultSortKeyItem.getElement(),
|
|
|
|
newDefaultSortKeyData
|
2017-07-18 11:55:33 +00:00
|
|
|
)
|
|
|
|
);
|
2016-07-02 16:38:53 +00:00
|
|
|
}
|
2013-12-02 20:10:55 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2014-04-04 17:42:13 +00:00
|
|
|
|
|
|
|
this.categoryWidget.clearItems();
|
2022-01-19 14:25:39 +00:00
|
|
|
this.categoryWidget.setFragment( null );
|
|
|
|
this.fragment.getDocument().getMetaList().disconnect( this );
|
|
|
|
this.fragment = null;
|
2013-12-02 20:10:55 +00:00
|
|
|
};
|
2018-10-28 19:18:40 +00:00
|
|
|
|
|
|
|
ve.ui.MWCategoriesPage.prototype.getFieldsets = function () {
|
|
|
|
return [
|
|
|
|
this.categoriesFieldset,
|
|
|
|
this.categoryOptionsFieldset
|
|
|
|
];
|
|
|
|
};
|