/*! * VisualEditor UserInterface MWCategoryWidget class. * * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt * @license The MIT License (MIT); see LICENSE.txt */ /** * Creates an ve.ui.MWCategoryWidget object. * * @class * @abstract * @extends OO.ui.Widget * @mixins OO.ui.GroupElement * * @constructor * @param {Object} [config] Configuration options * @cfg {jQuery} [$overlay] Overlay to render dropdowns in */ ve.ui.MWCategoryWidget = function VeUiMWCategoryWidget( config ) { // Config initialization config = config || {}; // Parent constructor OO.ui.Widget.call( this, config ); // Mixin constructors OO.ui.GroupElement.call( this, config ); // Properties this.categories = {}; this.categoryRedirects = {}; // Source -> target this.popupState = false; this.savedPopupState = false; this.popup = new ve.ui.MWCategoryPopupWidget( { $: this.$ } ); this.input = new ve.ui.MWCategoryInputWidget( this, { $: this.$, $overlay: config.$overlay } ); // Events this.input.lookupMenu.connect( this, { choose: 'onLookupMenuItemChoose' } ); this.popup.connect( this, { removeCategory: 'onRemoveCategory', updateSortkey: 'onUpdateSortkey', hide: 'onPopupHide' } ); // Initialization this.$element.addClass( 've-ui-mwCategoryWidget' ) .append( this.$group.addClass( 've-ui-mwCategoryWidget-items' ), this.input.$element, this.popup.$element, this.$( '
' ).css( 'clear', 'both' ) ); }; /* Inheritance */ OO.inheritClass( ve.ui.MWCategoryWidget, OO.ui.Widget ); OO.mixinClass( ve.ui.MWCategoryWidget, OO.ui.GroupElement ); /* Events */ /** * @event newCategory * @param {Object} item Category item * @param {string} item.name Fully prefixed category name * @param {string} item.value Category value (name without prefix) * @param {Object} item.metaItem Category meta item */ /** * @event updateSortkey * @param {Object} item Category item * @param {string} item.name Fully prefixed category name * @param {string} item.value Category value (name without prefix) * @param {Object} item.metaItem Category meta item */ /* Methods */ /** * Handle menu item select event. * * @method * @param {OO.ui.MenuOptionWidget} item Selected item */ ve.ui.MWCategoryWidget.prototype.onLookupMenuItemChoose = function ( item ) { var categoryItem, value = item && item.getData(), categoryWidget = this; if ( value && value !== '' ) { // Remove existing items by value if ( Object.prototype.hasOwnProperty.call( this.categories, value ) ) { this.categories[value].metaItem.remove(); } // Add new item categoryItem = this.input.getCategoryItemFromValue( value ); this.queryCategoryHiddenStatus( [categoryItem.name] ).done( function () { categoryWidget.emit( 'newCategory', categoryItem ); } ); // Reset input this.input.setValue( '' ); } }; /** * Removes category from model. * * @method * @param {string} name category name */ ve.ui.MWCategoryWidget.prototype.onRemoveCategory = function ( name ) { this.categories[name].metaItem.remove(); }; /** * Update sortkey value, emit updateSortkey event * * @method * @param {string} name * @param {string} value */ ve.ui.MWCategoryWidget.prototype.onUpdateSortkey = function ( name, value ) { this.categories[name].sortKey = value; this.emit( 'updateSortkey', this.categories[name] ); }; /** * Sets popup state when popup is hidden */ ve.ui.MWCategoryWidget.prototype.onPopupHide = function () { this.popupState = false; }; /** * Saves current popup state */ ve.ui.MWCategoryWidget.prototype.onSavePopupState = function () { this.savedPopupState = this.popupState; }; /** * Toggles popup menu per category item * @param {Object} item */ ve.ui.MWCategoryWidget.prototype.onTogglePopupMenu = function ( item ) { // Close open popup. if ( this.savedPopupState === false || item.value !== this.popup.category ) { this.popup.openPopup( item ); } else { // Handle toggle this.popup.closePopup(); } }; /** */ ve.ui.MWCategoryWidget.prototype.setDefaultSortKey = function ( value ) { this.popup.setDefaultSortKey( value ); }; /** * Get list of category names. * * @method * @param {string[]} List of category names */ ve.ui.MWCategoryWidget.prototype.getCategories = function () { return ve.getObjectKeys( this.categories ); }; /** * Starts a request to update the link cache's hidden status for the given titles. * The returned promise will be resolved with an API result if an API call was made, * or no arguments if it was unnecessary. * * @param {string[]} categoryNames * @return {jQuery.Promise} */ ve.ui.MWCategoryWidget.prototype.queryCategoryHiddenStatus = function ( categoryNames ) { var categoryWidget = this, categoryNamesToQuery = []; // Get rid of any we already know the hidden status of. categoryNamesToQuery = $.grep( categoryNames, function ( categoryTitle ) { var cacheEntry = ve.init.platform.linkCache.getCached( categoryTitle ); return !( cacheEntry && cacheEntry.hidden ); } ); if ( !categoryNamesToQuery.length ) { return $.Deferred().resolve().promise(); } return new mw.Api().get( { action: 'query', prop: 'pageprops', titles: categoryNamesToQuery.join( '|' ), ppprop: 'hiddencat', redirects: '' } ).then( function ( result ) { var linkCacheUpdate = {}; if ( result && result.query && result.query.pages ) { $.each( result.query.pages, function ( index, pageInfo ) { linkCacheUpdate[pageInfo.title] = { missing: Object.prototype.hasOwnProperty.call( pageInfo, 'missing' ), hidden: pageInfo.pageprops && Object.prototype.hasOwnProperty.call( pageInfo.pageprops, 'hiddencat' ) }; } ); } if ( result && result.query && result.query.redirects ) { $.each( result.query.redirects, function ( index, redirectInfo ) { categoryWidget.categoryRedirects[redirectInfo.from] = redirectInfo.to; } ); } ve.init.platform.linkCache.set( linkCacheUpdate ); } ); }; /** * Adds category items. * * @method * @param {Object[]} items Items to add * @param {number} [index] Index to insert items after * @return {jQuery.Promise} */ ve.ui.MWCategoryWidget.prototype.addItems = function ( items, index ) { var i, len, item, categoryItem, categoryItems = [], existingCategoryItem = null, categoryNames = $.map( items, function ( item ) { return item.name; } ), categoryWidget = this; return this.queryCategoryHiddenStatus( categoryNames ).then( function () { var itemTitle, config, cachedData; for ( i = 0, len = items.length; i < len; i++ ) { item = items[i]; itemTitle = new mw.Title( item.name, mw.config.get( 'wgNamespaceIds' ).category ).getPrefixedText(); // Create a widget using the item data config = { $: categoryWidget.$, item: item }; if ( Object.prototype.hasOwnProperty.call( categoryWidget.categoryRedirects, itemTitle ) ) { config.redirectTo = new mw.Title( categoryWidget.categoryRedirects[itemTitle], mw.config.get( 'wgNamespaceIds' ).category ).getMainText(); cachedData = ve.init.platform.linkCache.getCached( categoryWidget.categoryRedirects[itemTitle] ); config.hidden = cachedData.hidden; config.missing = cachedData.missing; } else { cachedData = ve.init.platform.linkCache.getCached( item.name ); config.hidden = cachedData.hidden; config.missing = cachedData.missing; } categoryItem = new ve.ui.MWCategoryItemWidget( config ); categoryItem.connect( categoryWidget, { savePopupState: 'onSavePopupState', togglePopupMenu: 'onTogglePopupMenu' } ); // Index item by value categoryWidget.categories[item.value] = categoryItem; // Copy sortKey from old item when "moving" if ( existingCategoryItem ) { categoryItem.sortKey = existingCategoryItem.sortKey; } categoryItems.push( categoryItem ); } OO.ui.GroupElement.prototype.addItems.call( categoryWidget, categoryItems, index ); categoryWidget.fitInput(); } ); }; /** * Remove category items. * * @method * @param {string[]} names Names of categories to remove */ ve.ui.MWCategoryWidget.prototype.removeItems = function ( names ) { var i, len, categoryItem, items = []; for ( i = 0, len = names.length; i < len; i++ ) { categoryItem = this.categories[names[i]]; if ( categoryItem ) { categoryItem.disconnect( this ); items.push( categoryItem ); delete this.categories[names[i]]; } } OO.ui.GroupElement.prototype.removeItems.call( this, items ); this.fitInput(); }; /** * Auto-fit the input. * * @method */ ve.ui.MWCategoryWidget.prototype.fitInput = function () { var gap, min, $lastItem, $input = this.input.$element; if ( !$input.is( ':visible') ) { return; } $input.css( { width: 'inherit' } ); min = $input.outerWidth(); $input.css( { width: '100%' } ); $lastItem = this.$element.find( '.ve-ui-mwCategoryItemWidget:last' ); if ( $lastItem.length ) { // Try to fit to the right of the last item gap = ( $input.offset().left + $input.outerWidth() ) - ( $lastItem.offset().left + $lastItem.outerWidth() ); if ( gap >= min ) { $input.css( { width: gap } ); } } };