resources/src/mediawiki/mediawiki.searchSuggest.js

   1 /*!
   2  * Add search suggestions to the search form.
   3  */
   4 ( function ( mw, $ ) {
   5         mw.searchSuggest = {
   6                 // queries the wiki and calls response with the result
   7                 request: function ( api, query, response, maxRows ) {
   8                         return api.get( {
   9                                 formatversion: 2,
  10                                 action: 'opensearch',
  11                                 search: query,
  12                                 namespace: 0,
  13                                 limit: maxRows,
  14                                 suggest: true
  15                         } ).done( function ( data, jqXHR ) {
  16                                 response( data[ 1 ], {
  17                                         type: jqXHR.getResponseHeader( 'X-OpenSearch-Type' ),
  18                                         query: query
  19                                 } );
  20                         } );
  21                 }
  22         };
  23
  24         $( function () {
  25                 var api, map, searchboxesSelectors,
  26                         // Region where the suggestions box will appear directly below
  27                         // (using the same width). Can be a container element or the input
  28                         // itself, depending on what suits best in the environment.
  29                         // For Vector the suggestion box should align with the simpleSearch
  30                         // container's borders, in other skins it should align with the input
  31                         // element (not the search form, as that would leave the buttons
  32                         // vertically between the input and the suggestions).
  33                         $searchRegion = $( '#simpleSearch, #searchInput' ).first(),
  34                         $searchInput = $( '#searchInput' ),
  35                         previousSearchText = $searchInput.val();
  36
  37                 // Compatibility map
  38                 map = {
  39                         // SimpleSearch is broken in Opera < 9.6
  40                         opera: [ [ '>=', 9.6 ] ],
  41                         // Older Konquerors are unable to position the suggestions correctly (bug 50805)
  42                         konqueror: [ [ '>=', '4.11' ] ],
  43                         docomo: false,
  44                         blackberry: false,
  45                         // Support for iOS 6 or higher. It has not been tested on iOS 5 or lower
  46                         ipod: [ [ '>=', 6 ] ],
  47                         iphone: [ [ '>=', 6 ] ]
  48                 };
  49
  50                 if ( !$.client.test( map ) ) {
  51                         return;
  52                 }
  53
  54                 // Compute form data for search suggestions functionality.
  55                 function getFormData( context ) {
  56                         var $form, baseHref, linkParams;
  57
  58                         if ( !context.formData ) {
  59                                 // Compute common parameters for links' hrefs
  60                                 $form = context.config.$region.closest( 'form' );
  61
  62                                 baseHref = $form.attr( 'action' );
  63                                 baseHref += baseHref.indexOf( '?' ) > -1 ? '&' : '?';
  64
  65                                 linkParams = $form.serializeObject();
  66
  67                                 context.formData = {
  68                                         textParam: context.data.$textbox.attr( 'name' ),
  69                                         linkParams: linkParams,
  70                                         baseHref: baseHref
  71                                 };
  72                         }
  73
  74                         return context.formData;
  75                 }
  76
  77                 /**
  78                  * Callback that's run when the user changes the search input text
  79                  * 'this' is the search input box (jQuery object)
  80                  *
  81                  * @ignore
  82                  */
  83                 function onBeforeUpdate() {
  84                         var searchText = this.val();
  85
  86                         if ( searchText && searchText !== previousSearchText ) {
  87                                 mw.track( 'mediawiki.searchSuggest', {
  88                                         action: 'session-start'
  89                                 } );
  90                         }
  91                         previousSearchText = searchText;
  92                 }
  93
  94                 /**
  95                  * Defines the location of autocomplete. Typically either
  96                  * header, which is in the top right of vector (for example)
  97                  * and content which identifies the main search bar on
  98                  * Special:Search. Defaults to header for skins that don't set
  99                  * explicitly.
 100                  *
 101                  * @ignore
 102                  * @param {Object} context
 103                  * @return {string}
 104                  */
 105                 function getInputLocation( context ) {
 106                         return context.config.$region
 107                                         .closest( 'form' )
 108                                         .find( '[data-search-loc]' )
 109                                         .data( 'search-loc' ) || 'header';
 110                 }
 111
 112                 /**
 113                  * Callback that's run when suggestions have been updated either from the cache or the API
 114                  * 'this' is the search input box (jQuery object)
 115                  *
 116                  * @ignore
 117                  * @param {Object} metadata
 118                  */
 119                 function onAfterUpdate( metadata ) {
 120                         var context = this.data( 'suggestionsContext' );
 121
 122                         mw.track( 'mediawiki.searchSuggest', {
 123                                 action: 'impression-results',
 124                                 numberOfResults: context.config.suggestions.length,
 125                                 resultSetType: metadata.type || 'unknown',
 126                                 query: metadata.query,
 127                                 inputLocation: getInputLocation( context )
 128                         } );
 129                 }
 130
 131                 // The function used to render the suggestions.
 132                 function renderFunction( text, context ) {
 133                         var formData = getFormData( context ),
 134                                 textboxConfig = context.data.$textbox.data( 'mw-searchsuggest' ) || {};
 135
 136                         // linkParams object is modified and reused
 137                         formData.linkParams[ formData.textParam ] = text;
 138
 139                         // Allow trackers to attach tracking information, such
 140                         // as wprov, to clicked links.
 141                         mw.track( 'mediawiki.searchSuggest', {
 142                                 action: 'render-one',
 143                                 formData: formData,
 144                                 index: context.config.suggestions.indexOf( text )
 145                         } );
 146
 147                         // this is the container <div>, jQueryfied
 148                         this.text( text );
 149
 150                         // wrap only as link, if the config doesn't disallow it
 151                         if ( textboxConfig.wrapAsLink !== false ) {
 152                                 this.wrap(
 153                                         $( '<a>' )
 154                                                 .attr( 'href', formData.baseHref + $.param( formData.linkParams ) )
 155                                                 .attr( 'title', text )
 156                                                 .addClass( 'mw-searchSuggest-link' )
 157                                 );
 158                         }
 159                 }
 160
 161                 // The function used when the user makes a selection
 162                 function selectFunction( $input, source ) {
 163                         var context = $input.data( 'suggestionsContext' ),
 164                                 text = $input.val();
 165
 166                         // Selecting via keyboard triggers a form submission. That will fire
 167                         // the submit-form event in addition to this click-result event.
 168                         if ( source !== 'keyboard' ) {
 169                                 mw.track( 'mediawiki.searchSuggest', {
 170                                         action: 'click-result',
 171                                         numberOfResults: context.config.suggestions.length,
 172                                         index: context.config.suggestions.indexOf( text )
 173                                 } );
 174                         }
 175
 176                         // allow the form to be submitted
 177                         return true;
 178                 }
 179
 180                 function specialRenderFunction( query, context ) {
 181                         var $el = this,
 182                                 formData = getFormData( context );
 183
 184                         // linkParams object is modified and reused
 185                         formData.linkParams[ formData.textParam ] = query;
 186
 187                         mw.track( 'mediawiki.searchSuggest', {
 188                                 action: 'render-one',
 189                                 formData: formData,
 190                                 index: context.config.suggestions.indexOf( query )
 191                         } );
 192
 193                         if ( $el.children().length === 0 ) {
 194                                 $el
 195                                         .append(
 196                                                 $( '<div>' )
 197                                                         .addClass( 'special-label' )
 198                                                         .text( mw.msg( 'searchsuggest-containing' ) ),
 199                                                 $( '<div>' )
 200                                                         .addClass( 'special-query' )
 201                                                         .text( query )
 202                                         )
 203                                         .show();
 204                         } else {
 205                                 $el.find( '.special-query' )
 206                                         .text( query );
 207                         }
 208
 209                         if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {
 210                                 $el.parent().attr( 'href', formData.baseHref + $.param( formData.linkParams ) + '&fulltext=1' );
 211                         } else {
 212                                 $el.wrap(
 213                                         $( '<a>' )
 214                                                 .attr( 'href', formData.baseHref + $.param( formData.linkParams ) + '&fulltext=1' )
 215                                                 .addClass( 'mw-searchSuggest-link' )
 216                                 );
 217                         }
 218                 }
 219
 220                 // Generic suggestions functionality for all search boxes
 221                 searchboxesSelectors = [
 222                         // Primary searchbox on every page in standard skins
 223                         '#searchInput',
 224                         // Generic selector for skins with multiple searchboxes (used by CologneBlue)
 225                         // and for MediaWiki itself (special pages with page title inputs)
 226                         '.mw-searchInput'
 227                 ];
 228                 $( searchboxesSelectors.join( ', ' ) )
 229                         .suggestions( {
 230                                 fetch: function ( query, response, maxRows ) {
 231                                         var node = this[ 0 ];
 232
 233                                         api = api || new mw.Api();
 234
 235                                         $.data( node, 'request', mw.searchSuggest.request( api, query, response, maxRows ) );
 236                                 },
 237                                 cancel: function () {
 238                                         var node = this[ 0 ],
 239                                                 request = $.data( node, 'request' );
 240
 241                                         if ( request ) {
 242                                                 request.abort();
 243                                                 $.removeData( node, 'request' );
 244                                         }
 245                                 },
 246                                 result: {
 247                                         render: renderFunction,
 248                                         select: function () {
 249                                                 // allow the form to be submitted
 250                                                 return true;
 251                                         }
 252                                 },
 253                                 update: {
 254                                         before: onBeforeUpdate,
 255                                         after: onAfterUpdate
 256                                 },
 257                                 cache: true,
 258                                 highlightInput: true
 259                         } )
 260                         .bind( 'paste cut drop', function () {
 261                                 // make sure paste and cut events from the mouse and drag&drop events
 262                                 // trigger the keypress handler and cause the suggestions to update
 263                                 $( this ).trigger( 'keypress' );
 264                         } )
 265                         // In most skins (at least Monobook and Vector), the font-size is messed up in <body>.
 266                         // (they use 2 elements to get a sane font-height). So, instead of making exceptions for
 267                         // each skin or adding more stylesheets, just copy it from the active element so auto-fit.
 268                         .each( function () {
 269                                 var $this = $( this );
 270                                 $this
 271                                         .data( 'suggestions-context' )
 272                                         .data.$container
 273                                                 .css( 'fontSize', $this.css( 'fontSize' ) );
 274                         } );
 275
 276                 // Ensure that the thing is actually present!
 277                 if ( $searchRegion.length === 0 ) {
 278                         // Don't try to set anything up if simpleSearch is disabled sitewide.
 279                         // The loader code loads us if the option is present, even if we're
 280                         // not actually enabled (anymore).
 281                         return;
 282                 }
 283
 284                 // Special suggestions functionality and tracking for skin-provided search box
 285                 $searchInput.suggestions( {
 286                         update: {
 287                                 before: onBeforeUpdate,
 288                                 after: onAfterUpdate
 289                         },
 290                         result: {
 291                                 render: renderFunction,
 292                                 select: selectFunction
 293                         },
 294                         special: {
 295                                 render: specialRenderFunction,
 296                                 select: function ( $input, source ) {
 297                                         var context = $input.data( 'suggestionsContext' ),
 298                                                 text = $input.val();
 299                                         if ( source === 'mouse' ) {
 300                                                 // mouse click won't trigger form submission, so we need to send a click event
 301                                                 mw.track( 'mediawiki.searchSuggest', {
 302                                                         action: 'click-result',
 303                                                         numberOfResults: context.config.suggestions.length,
 304                                                         index: context.config.suggestions.indexOf( text )
 305                                                 } );
 306                                         } else {
 307                                                 $input.closest( 'form' )
 308                                                         .append( $( '<input type="hidden" name="fulltext" value="1"/>' ) );
 309                                         }
 310                                         return true; // allow the form to be submitted
 311                                 }
 312                         },
 313                         $region: $searchRegion
 314                 } );
 315
 316                 $searchInput.closest( 'form' )
 317                         // track the form submit event
 318                         .on( 'submit', function () {
 319                                 var context = $searchInput.data( 'suggestionsContext' );
 320                                 mw.track( 'mediawiki.searchSuggest', {
 321                                         action: 'submit-form',
 322                                         numberOfResults: context.config.suggestions.length,
 323                                         $form: context.config.$region.closest( 'form' ),
 324                                         inputLocation: getInputLocation( context ),
 325                                         index: context.config.suggestions.indexOf(
 326                                                 context.data.$textbox.val()
 327                                         )
 328                                 } );
 329                         } )
 330                         // If the form includes any fallback fulltext search buttons, remove them
 331                         .find( '.mw-fallbackSearchButton' ).remove();
 332         } );
 333
 334 }( mediaWiki, jQuery ) );