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