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

   1 /*!
   2  * MediaWiki Widgets - SearchInputWidget 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 ( $, mw ) {
   8
   9         /**
  10          * Creates a mw.widgets.SearchInputWidget object.
  11          *
  12          * @class
  13          * @extends mw.widgets.TitleInputWidget
  14          *
  15          * @constructor
  16          * @param {Object} [config] Configuration options
  17          * @cfg {boolean} [pushPending=true] Visually mark the input field as "pending", while
  18          *  requesting suggestions.
  19          * @cfg {boolean} [performSearchOnClick=true] If true, the script will start a search when-
  20          *  ever a user hits a suggestion. If false, the text of the suggestion is inserted into the
  21          *  text field only.
  22          *  @cfg {string} [dataLocation='header'] Where the search input field will be
  23          *  used (header or content).
  24          */
  25         mw.widgets.SearchInputWidget = function MwWidgetsSearchInputWidget( config ) {
  26                 // The parent constructors will detach this from the DOM, and won't
  27                 // be reattached until after this function is completed. As such
  28                 // grab a handle here. If no config.$input is passed tracking of
  29                 // form submissions won't work.
  30                 var $form = config.$input ? config.$input.closest( 'form' ) : $();
  31
  32                 config = $.extend( {
  33                         type: 'search',
  34                         icon: 'search',
  35                         maxLength: undefined,
  36                         performSearchOnClick: true,
  37                         dataLocation: 'header'
  38                 }, config );
  39
  40                 // Parent constructor
  41                 mw.widgets.SearchInputWidget.parent.call( this, config );
  42
  43                 // Initialization
  44                 this.$element.addClass( 'mw-widget-searchInputWidget' );
  45                 this.lookupMenu.$element.addClass( 'mw-widget-searchWidget-menu' );
  46                 this.lastLookupItems = [];
  47                 if ( !config.pushPending ) {
  48                         this.pushPending = false;
  49                 }
  50                 if ( config.dataLocation ) {
  51                         this.dataLocation = config.dataLocation;
  52                 }
  53                 if ( config.performSearchOnClick ) {
  54                         this.performSearchOnClick = config.performSearchOnClick;
  55                 }
  56                 this.setLookupsDisabled( !this.suggestions );
  57
  58                 $form.on( 'submit', function () {
  59                         mw.track( 'mw.widgets.SearchInputWidget', {
  60                                 action: 'submit-form',
  61                                 numberOfResults: this.lastLookupItems.length,
  62                                 $form: $form,
  63                                 inputLocation: this.dataLocation || 'header',
  64                                 index: this.lastLookupItems.indexOf(
  65                                         this.$input.val()
  66                                 )
  67                         } );
  68                 }.bind( this ) );
  69         };
  70
  71         /* Setup */
  72
  73         OO.inheritClass( mw.widgets.SearchInputWidget, mw.widgets.TitleInputWidget );
  74
  75         /* Methods */
  76
  77         /**
  78          * @inheritdoc mw.widgets.TitleWidget
  79          */
  80         mw.widgets.SearchInputWidget.prototype.getSuggestionsPromise = function () {
  81                 var api = this.getApi(),
  82                         promise,
  83                         self = this;
  84
  85                 // reuse the searchSuggest function from mw.searchSuggest
  86                 promise = mw.searchSuggest.request( api, this.getQueryValue(), $.noop, this.limit );
  87
  88                 // tracking purposes
  89                 promise.done( function ( data, jqXHR ) {
  90                         self.requestType = jqXHR.getResponseHeader( 'X-OpenSearch-Type' );
  91                 } );
  92
  93                 return promise;
  94         };
  95
  96         /**
  97          * @inheritdoc mw.widgets.TitleInputWidget
  98          */
  99         mw.widgets.SearchInputWidget.prototype.getLookupCacheDataFromResponse = function ( response ) {
 100                 var resp;
 101
 102                 // mw.widgets.TitleInputWidget uses response.query, which doesn't exist for opensearch,
 103                 // so return the whole response (titles only, and links)
 104                 resp = {
 105                         data: response || {},
 106                         metadata: {
 107                                 type: this.requestType || 'unknown',
 108                                 query: this.getQueryValue()
 109                         }
 110                 };
 111                 this.requestType = undefined;
 112
 113                 return resp;
 114         };
 115
 116         /**
 117          * @inheritdoc mw.widgets.TitleWidget
 118          */
 119         mw.widgets.SearchInputWidget.prototype.getOptionsFromData = function ( data ) {
 120                 var items = [],
 121                         self = this;
 122
 123                 // mw.widgets.TitleWidget does a lot more work here, because the TitleOptionWidgets can
 124                 // differ a lot, depending on the returned data from the request. With the request used here
 125                 // we get only the search results.
 126                 $.each( data.data[ 1 ], function ( i, result ) {
 127                         items.push( new mw.widgets.TitleOptionWidget(
 128                                 // data[ 3 ][ i ] is the link for this result
 129                                 self.getOptionWidgetData( result, null, data.data[ 3 ][ i ] )
 130                         ) );
 131                 } );
 132
 133                 mw.track( 'mw.widgets.SearchInputWidget', {
 134                         action: 'impression-results',
 135                         numberOfResults: items.length,
 136                         resultSetType: data.metadata.type,
 137                         query: data.metadata.query,
 138                         inputLocation: this.dataLocation || 'header'
 139                 } );
 140
 141                 return items;
 142         };
 143
 144         /**
 145          * @inheritdoc mw.widgets.TitleWidget
 146          *
 147          * @param {string} title
 148          * @param {Object} data
 149          * @param {string} url The Url to the result
 150          */
 151         mw.widgets.SearchInputWidget.prototype.getOptionWidgetData = function ( title, data, url ) {
 152                 // the values used in mw.widgets-TitleWidget doesn't exist here, that's why
 153                 // the values are hard-coded here
 154                 return {
 155                         data: title,
 156                         url: url,
 157                         imageUrl: null,
 158                         description: null,
 159                         missing: false,
 160                         redirect: false,
 161                         disambiguation: false,
 162                         query: this.getQueryValue()
 163                 };
 164         };
 165
 166         /**
 167          * @inheritdoc
 168          */
 169         mw.widgets.SearchInputWidget.prototype.onLookupMenuItemChoose = function () {
 170                 mw.widgets.SearchInputWidget.parent.prototype.onLookupMenuItemChoose.apply( this, arguments );
 171
 172                 if ( this.performSearchOnClick ) {
 173                         this.$element.closest( 'form' ).submit();
 174                 }
 175         };
 176
 177         /**
 178          * @inheritdoc
 179          */
 180         mw.widgets.SearchInputWidget.prototype.getLookupMenuOptionsFromData = function () {
 181                 var items = mw.widgets.SearchInputWidget.parent.prototype.getLookupMenuOptionsFromData.apply(
 182                         this, arguments
 183                 );
 184
 185                 this.lastLookupItems = items.map( function ( item ) {
 186                         return item.data;
 187                 } );
 188
 189                 return items;
 190         };
 191
 192 }( jQuery, mediaWiki ) );