resources/src/mediawiki.widgets/mw.widgets.TitlesMultiselectWidget.js

   1 /*!
   2  * MediaWiki Widgets - TitlesMultiselectWidget class.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8
   9         /**
  10          * @classdesc Titles multiselect widget.
  11          *
  12          * @class
  13          * @extends OO.ui.MenuTagMultiselectWidget
  14          * @mixes OO.ui.mixin.RequestManager
  15          * @mixes OO.ui.mixin.PendingElement
  16          * @mixes mw.widgets.TitleWidget
  17          *
  18          * @constructor
  19          * @description Create an mw.widgets.TitlesMultiselectWidget object.
  20          * @param {Object} [config] Configuration options
  21          */
  22         mw.widgets.TitlesMultiselectWidget = function MwWidgetsTitlesMultiselectWidget( config ) {
  23                 // Parent constructor
  24                 mw.widgets.TitlesMultiselectWidget.super.call( this, $.extend( true,
  25                         {
  26                                 allowEditTags: false
  27                         },
  28                         config
  29                 ) );
  30
  31                 // Mixin constructors
  32                 mw.widgets.TitleWidget.call( this, $.extend( true, {
  33                         addQueryInput: true,
  34                         highlightSearchQuery: false
  35                 }, config ) );
  36                 OO.ui.mixin.RequestManager.call( this, config );
  37                 OO.ui.mixin.PendingElement.call( this, $.extend( true, {}, config, {
  38                         $pending: this.$handle
  39                 } ) );
  40
  41                 // Validate from mw.widgets.TitleWidget
  42                 this.input.setValidation( this.isQueryValid.bind( this ) );
  43
  44                 // TODO limit max tag length to this.maxLength
  45
  46                 // Initialization
  47                 this.$element
  48                         .addClass( 'mw-widgets-titlesMultiselectWidget' );
  49
  50                 this.menu.$element
  51                         // For consistency, use the same classes as TitleWidget
  52                         // expects for menu results
  53                         .addClass( 'mw-widget-titleWidget-menu' )
  54                         .toggleClass( 'mw-widget-titleWidget-menu-withImages', this.showImages )
  55                         .toggleClass( 'mw-widget-titleWidget-menu-withDescriptions', this.showDescriptions );
  56
  57                 if ( 'name' in config ) {
  58                         // Use this instead of <input type="hidden">, because hidden inputs do not have separate
  59                         // 'value' and 'defaultValue' properties. The script on Special:Preferences
  60                         // (mw.special.preferences.confirmClose) checks this property to see if a field was changed.
  61                         this.$hiddenInput = $( '<textarea>' )
  62                                 .addClass( 'oo-ui-element-hidden' )
  63                                 .attr( 'name', config.name )
  64                                 .appendTo( this.$element );
  65                         // Update with preset values
  66                         // Set the default value (it might be different from just being empty)
  67                         this.$hiddenInput.prop( 'defaultValue', this.getItems().map( ( item ) => item.getData() ).join( '\n' ) );
  68                         this.on( 'change', ( items ) => {
  69                                 this.$hiddenInput.val( items.map( ( item ) => item.getData() ).join( '\n' ) );
  70                                 // Trigger a 'change' event as if a user edited the text
  71                                 // (it is not triggered when changing the value from JS code).
  72                                 this.$hiddenInput.trigger( 'change' );
  73                         } );
  74                 }
  75
  76         };
  77
  78         /* Setup */
  79
  80         OO.inheritClass( mw.widgets.TitlesMultiselectWidget, OO.ui.MenuTagMultiselectWidget );
  81         OO.mixinClass( mw.widgets.TitlesMultiselectWidget, OO.ui.mixin.RequestManager );
  82         OO.mixinClass( mw.widgets.TitlesMultiselectWidget, OO.ui.mixin.PendingElement );
  83         OO.mixinClass( mw.widgets.TitlesMultiselectWidget, mw.widgets.TitleWidget );
  84
  85         /* Methods */
  86
  87         mw.widgets.TitlesMultiselectWidget.prototype.getQueryValue = function () {
  88                 return this.input.getValue();
  89         };
  90
  91         /**
  92          * @inheritdoc
  93          */
  94         mw.widgets.TitlesMultiselectWidget.prototype.onInputChange = function () {
  95                 this.getRequestData()
  96                         .then( ( data ) => {
  97                                 // Reset
  98                                 this.menu.clearItems();
  99                                 this.menu.addItems( this.getOptionsFromData( data ) );
 100                         } ).always( () => {
 101                                 // Parent method
 102                                 mw.widgets.TitlesMultiselectWidget.super.prototype.onInputChange.call( this );
 103                         } );
 104         };
 105
 106         /**
 107          * We have an empty menu when the input is empty, override the implementation from
 108          * MenuTagMultiselectWidget to avoid error and make tags editable.
 109          *
 110          * Only editable when the input is empty.
 111          */
 112         mw.widgets.TitlesMultiselectWidget.prototype.onTagSelect = function () {
 113                 if ( this.hasInput && !this.input.getValue() ) {
 114                         OO.ui.TagMultiselectWidget.prototype.onTagSelect.apply( this, arguments );
 115                 }
 116         };
 117
 118         /**
 119          * @inheritdoc
 120          */
 121         mw.widgets.TitlesMultiselectWidget.prototype.getRequestQuery = function () {
 122                 return this.getQueryValue();
 123         };
 124
 125         /**
 126          * @inheritdoc
 127          */
 128         mw.widgets.TitlesMultiselectWidget.prototype.getRequest = function () {
 129                 return this.getSuggestionsPromise();
 130         };
 131
 132         /**
 133          * @inheritdoc
 134          */
 135         mw.widgets.TitlesMultiselectWidget.prototype.getRequestCacheDataFromResponse = function ( response ) {
 136                 return response.query || {};
 137         };
 138 }() );