resources/src/mediawiki/mediawiki.searchSuggest.js

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