Merge "mediawiki.searchSuggest: Show full article title as a tooltip for each suggestion"
[lhc/web/wiklou.git] / 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
17 // Compatibility map
18 map = {
19 // SimpleSearch is broken in Opera < 9.6
20 opera: [['>=', 9.6]],
21 // Older Konquerors are unable to position the suggestions correctly (bug 50805)
22 konqueror: [['>=', '4.11']],
23 docomo: false,
24 blackberry: false,
25 ipod: false,
26 iphone: false
27 };
28
29 if ( !$.client.test( map ) ) {
30 return;
31 }
32
33 // Compute form data for search suggestions functionality.
34 function computeResultRenderCache( context ) {
35 var $form, baseHref, linkParams;
36
37 // Compute common parameters for links' hrefs
38 $form = context.config.$region.closest( 'form' );
39
40 baseHref = $form.attr( 'action' );
41 baseHref += baseHref.indexOf( '?' ) > -1 ? '&' : '?';
42
43 linkParams = {};
44 $.each( $form.serializeArray(), function ( idx, obj ) {
45 linkParams[ obj.name ] = obj.value;
46 } );
47
48 return {
49 textParam: context.data.$textbox.attr( 'name' ),
50 linkParams: linkParams,
51 baseHref: baseHref
52 };
53 }
54
55 // The function used to render the suggestions.
56 function renderFunction( text, context ) {
57 if ( !resultRenderCache ) {
58 resultRenderCache = computeResultRenderCache( context );
59 }
60
61 // linkParams object is modified and reused
62 resultRenderCache.linkParams[ resultRenderCache.textParam ] = text;
63
64 // this is the container <div>, jQueryfied
65 this.text( text )
66 .wrap(
67 $( '<a>' )
68 .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
69 .attr( 'title', text )
70 .addClass( 'mw-searchSuggest-link' )
71 );
72 }
73
74 function specialRenderFunction( query, context ) {
75 var $el = this;
76
77 if ( !resultRenderCache ) {
78 resultRenderCache = computeResultRenderCache( context );
79 }
80
81 // linkParams object is modified and reused
82 resultRenderCache.linkParams[ resultRenderCache.textParam ] = query;
83
84 if ( $el.children().length === 0 ) {
85 $el
86 .append(
87 $( '<div>' )
88 .addClass( 'special-label' )
89 .text( mw.msg( 'searchsuggest-containing' ) ),
90 $( '<div>' )
91 .addClass( 'special-query' )
92 .text( query )
93 )
94 .show();
95 } else {
96 $el.find( '.special-query' )
97 .text( query );
98 }
99
100 if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {
101 $el.parent().attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) + '&fulltext=1' );
102 } else {
103 $el.wrap(
104 $( '<a>' )
105 .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) + '&fulltext=1' )
106 .addClass( 'mw-searchSuggest-link' )
107 );
108 }
109 }
110
111 // Generic suggestions functionality for all search boxes
112 searchboxesSelectors = [
113 // Primary searchbox on every page in standard skins
114 '#searchInput',
115 // Special:Search
116 '#powerSearchText',
117 '#searchText',
118 // Generic selector for skins with multiple searchboxes (used by CologneBlue)
119 // and for MediaWiki itself (special pages with page title inputs)
120 '.mw-searchInput'
121 ];
122 $( searchboxesSelectors.join( ', ' ) )
123 .suggestions( {
124 fetch: function ( query ) {
125 var $textbox = this,
126 node = this[0];
127
128 api = api || new mw.Api();
129
130 $.data( node, 'request', api.get( {
131 action: 'opensearch',
132 search: query,
133 namespace: 0,
134 suggest: ''
135 } ).done( function ( data ) {
136 $textbox.suggestions( 'suggestions', data[1] );
137 } ) );
138 },
139 cancel: function () {
140 var node = this[0],
141 request = $.data( node, 'request' );
142
143 if ( request ) {
144 request.abort();
145 $.removeData( node, 'request' );
146 }
147 },
148 result: {
149 render: renderFunction,
150 select: function () {
151 // allow the form to be submitted
152 return true;
153 }
154 },
155 delay: 120,
156 highlightInput: true
157 } )
158 .bind( 'paste cut drop', function () {
159 // make sure paste and cut events from the mouse and drag&drop events
160 // trigger the keypress handler and cause the suggestions to update
161 $( this ).trigger( 'keypress' );
162 } )
163 // In most skins (at least Monobook and Vector), the font-size is messed up in <body>.
164 // (they use 2 elements to get a sane font-height). So, instead of making exceptions for
165 // each skin or adding more stylesheets, just copy it from the active element so auto-fit.
166 .each( function () {
167 var $this = $( this );
168 $this
169 .data( 'suggestions-context' )
170 .data.$container
171 .css( 'fontSize', $this.css( 'fontSize' ) );
172 } );
173
174 // Ensure that the thing is actually present!
175 if ( $searchRegion.length === 0 ) {
176 // Don't try to set anything up if simpleSearch is disabled sitewide.
177 // The loader code loads us if the option is present, even if we're
178 // not actually enabled (anymore).
179 return;
180 }
181
182 // Special suggestions functionality for skin-provided search box
183 $searchInput.suggestions( {
184 special: {
185 render: specialRenderFunction,
186 select: function ( $input ) {
187 $input.closest( 'form' )
188 .append( $( '<input type="hidden" name="fulltext" value="1"/>' ) );
189 return true; // allow the form to be submitted
190 }
191 },
192 $region: $searchRegion
193 } );
194
195 // If the form includes any fallback fulltext search buttons, remove them
196 $searchInput.closest( 'form' ).find( '.mw-fallbackSearchButton' ).remove();
197 } );
198
199 }( mediaWiki, jQuery ) );