Conditions | 2 |
Paths | > 20000 |
Total Lines | 357 |
Code Lines | 242 |
Lines | 357 |
Ratio | 100 % |
Changes | 1 | ||
Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | View Code Duplication | /******/ (function(modules) { // webpackBootstrap |
|
79 | $(document).ready(function () { |
||
80 | |||
81 | /* |
||
82 | * jQuery accessible and keyboard-enhanced autocomplete list |
||
83 | * @version v1.6.0 |
||
84 | * Website: https://a11y.nicolas-hoffmann.net/autocomplet-list/ |
||
85 | * License MIT: https://github.com/nico3333fr/jquery-accessible-autocomplete-list-aria/blob/master/LICENSE |
||
86 | */ |
||
87 | // loading combobox ------------------------------------------------------------------------------------------------------------ |
||
88 | // init |
||
89 | var $js_combobox = $('.js-combobox'), |
||
90 | $body = $('body'), |
||
91 | |||
92 | // default_text_help = 'Use tabulation (or down) key to access and browse suggestions after input. Confirm your choice with enter key, or esc key to close suggestions box.', |
||
93 | default_text_help = '', |
||
94 | default_class_for_invisible_text = 'invisible', |
||
95 | suggestion_single = 'There is ', |
||
96 | suggestion_plural = 'There are ', |
||
97 | suggestion_word = 'suggestion', |
||
98 | suggestion_word_plural = 'suggestions', |
||
99 | button_clear_title = 'clear this field', |
||
100 | button_clear_text = 'X', |
||
101 | case_sensitive = 'no', |
||
102 | min_length = 0, |
||
103 | limit_number_suggestions = 666, |
||
104 | search_option = 'beginning', |
||
105 | // or 'containing' |
||
106 | see_more_text = 'See more results…', |
||
107 | tablo_suggestions = []; |
||
108 | |||
109 | function do_see_more_option() { |
||
110 | var $output_content = $('#js-codeit'); |
||
111 | $output_content.html('You have to code a function or a redirection to display more results ;)'); |
||
112 | } |
||
113 | |||
114 | if ($js_combobox.length) { |
||
115 | // if there are at least one :) |
||
116 | |||
117 | // init |
||
118 | $js_combobox.each(function (index_combo) { |
||
119 | var $this = $(this), |
||
120 | $this_id = $this.attr('id'), |
||
121 | $label_this = $('label[for="' + $this_id + '"]'), |
||
122 | index_lisible = index_combo + 1, |
||
123 | options = $this.data(), |
||
124 | $combobox_prefix_class = typeof options.comboboxPrefixClass !== 'undefined' ? options.comboboxPrefixClass + '-' : '', |
||
125 | $combobox_help_text = typeof options.comboboxHelpText !== 'undefined' ? options.comboboxHelpText : default_text_help, |
||
126 | $list_suggestions = $('#' + $this.attr('list')), |
||
127 | $combobox_button_title = typeof options.comboboxButtonTitle !== 'undefined' ? options.comboboxButtonTitle : button_clear_title, |
||
128 | $combobox_button_text = typeof options.comboboxButtonText !== 'undefined' ? options.comboboxButtonText : button_clear_text, |
||
129 | $combobox_case_sensitive = typeof options.comboboxCaseSensitive !== 'undefined' ? options.comboboxCaseSensitive : case_sensitive, |
||
130 | tablo_temp_suggestions = []; |
||
131 | |||
132 | // input |
||
133 | $this.attr({ |
||
134 | 'data-number': index_lisible, |
||
135 | 'autocorrect': 'off', |
||
136 | 'autocapitalize': 'off', |
||
137 | 'spellcheck': 'false', |
||
138 | 'autocomplete': 'off', |
||
139 | 'aria-describedby': $combobox_prefix_class + 'help-text' + index_lisible, |
||
140 | 'aria-autocomplete': 'list', |
||
141 | 'data-lastval': '', |
||
142 | 'aria-owns': $combobox_prefix_class + 'suggest_' + index_lisible |
||
143 | }); |
||
144 | // stock into tables |
||
145 | $list_suggestions.find('option').each(function (index_option, index_element) { |
||
146 | tablo_temp_suggestions.push(index_element.value); |
||
147 | }); |
||
148 | if ($combobox_case_sensitive === 'no') { |
||
149 | // order case tablo_temp_suggestions |
||
150 | tablo_suggestions[index_lisible] = tablo_temp_suggestions.sort(function (a, b) { |
||
151 | a = a.toLowerCase(); |
||
152 | b = b.toLowerCase(); |
||
153 | if (a == b) { |
||
154 | return 0; |
||
155 | } |
||
156 | if (a > b) { |
||
157 | return 1; |
||
158 | } |
||
159 | return -1; |
||
160 | }); |
||
161 | } else { |
||
162 | tablo_suggestions[index_lisible] = tablo_temp_suggestions.sort(); |
||
163 | } |
||
164 | |||
165 | // wrap into a container |
||
166 | $this.wrap('<div class="' + $combobox_prefix_class + 'container js-container" data-combobox-prefix-class="' + $combobox_prefix_class + '"></div>'); |
||
167 | |||
168 | var $combobox_container = $this.parent(); |
||
169 | |||
170 | // custom datalist/listbox linked to input |
||
171 | $combobox_container.append('<div id="' + $combobox_prefix_class + 'suggest_' + index_lisible + '" class="js-suggest ' + $combobox_prefix_class + 'suggestions"><div role="listbox"></div></div>'); |
||
172 | $list_suggestions.remove(); |
||
173 | |||
174 | // status zone |
||
175 | // $combobox_container.prepend('<div id="' + $combobox_prefix_class + 'suggestion-text' + index_lisible + '" class="js-suggestion-text ' + $combobox_prefix_class + 'suggestion-text ' + default_class_for_invisible_text + '" aria-live="assertive"></div>'); |
||
176 | |||
177 | // help text |
||
178 | $combobox_container.prepend('<span id="' + $combobox_prefix_class + 'help-text' + index_lisible + '" class="' + $combobox_prefix_class + 'help-text ' + default_class_for_invisible_text + '">' + $combobox_help_text + '</span>'); |
||
179 | |||
180 | // label id |
||
181 | $label_this.attr('id', 'label-id-' + $this_id); |
||
182 | |||
183 | // button clear |
||
184 | $this.after('<button class="js-clear-button ' + $combobox_prefix_class + 'clear-button" aria-label="' + $combobox_button_title + '" title="' + $combobox_button_title + '" aria-describedby="label-id-' + $this_id + '" type="button">' + $combobox_button_text + '</button>'); |
||
185 | }); |
||
186 | |||
187 | // listeners |
||
188 | // keydown on field |
||
189 | $body.on('keyup', '.js-combobox', function (event) { |
||
190 | var $this = $(this), |
||
191 | options_combo = $this.data(), |
||
192 | $container = $this.parent(), |
||
193 | $form = $container.parents('form'), |
||
194 | options = $container.data(), |
||
195 | $combobox_prefix_class = typeof options.comboboxPrefixClass !== 'undefined' ? options.comboboxPrefixClass : '', |
||
196 | // no "-"" because already generated |
||
197 | $suggestions = $container.find('.js-suggest div'), |
||
198 | |||
199 | //$suggestion_list = $suggestions.find('.js-suggestion'), |
||
200 | $suggestions_text = $container.find('.js-suggestion-text'), |
||
201 | $combobox_suggestion_single = typeof options_combo.suggestionSingle !== 'undefined' ? options_combo.suggestionSingle : suggestion_single, |
||
202 | $combobox_suggestion_plural = typeof options_combo.suggestionPlural !== 'undefined' ? options_combo.suggestionPlural : suggestion_plural, |
||
203 | $combobox_suggestion_word = typeof options_combo.suggestionWord !== 'undefined' ? options_combo.suggestionWord : suggestion_word, |
||
204 | $combobox_suggestion_word_plural = typeof options_combo.suggestionWord !== 'undefined' ? options_combo.suggestionWordPlural : suggestion_word_plural, |
||
205 | combobox_min_length = typeof options_combo.comboboxMinLength !== 'undefined' ? Math.abs(options_combo.comboboxMinLength) : min_length, |
||
206 | $combobox_case_sensitive = typeof options_combo.comboboxCaseSensitive !== 'undefined' ? options_combo.comboboxCaseSensitive : case_sensitive, |
||
207 | combobox_limit_number_suggestions = typeof options_combo.comboboxLimitNumberSuggestions !== 'undefined' ? Math.abs(options_combo.comboboxLimitNumberSuggestions) : limit_number_suggestions, |
||
208 | $combobox_search_option = typeof options_combo.comboboxSearchOption !== 'undefined' ? options_combo.comboboxSearchOption : search_option, |
||
209 | $combobox_see_more_text = typeof options_combo.comboboxSeeMoreText !== 'undefined' ? options_combo.comboboxSeeMoreText : see_more_text, |
||
210 | index_table = $this.attr('data-number'), |
||
211 | value_to_search = $this.val(), |
||
212 | text_number_suggestions = ''; |
||
213 | |||
214 | if (event.keyCode === 13) { |
||
215 | $form.submit(); |
||
216 | } else { |
||
217 | |||
218 | if (event.keyCode !== 27) { |
||
219 | // No Escape |
||
220 | |||
221 | $this.attr('data-lastval', value_to_search); |
||
222 | // search for text suggestion in the array tablo_suggestions[index_table] |
||
223 | var size_tablo = tablo_suggestions[index_table].length, |
||
224 | i = 0, |
||
225 | counter = 0; |
||
226 | |||
227 | $suggestions.empty(); |
||
228 | |||
229 | if (value_to_search != '' && value_to_search.length >= combobox_min_length) { |
||
230 | while (i < size_tablo) { |
||
231 | if (counter < combobox_limit_number_suggestions) { |
||
232 | if ($combobox_search_option === 'containing' && ($combobox_case_sensitive === 'yes' && tablo_suggestions[index_table][i].indexOf(value_to_search) >= 0 || $combobox_case_sensitive === 'no' && tablo_suggestions[index_table][i].toUpperCase().indexOf(value_to_search.toUpperCase()) >= 0) || $combobox_search_option === 'beginning' && ($combobox_case_sensitive === 'yes' && tablo_suggestions[index_table][i].substring(0, value_to_search.length) === value_to_search || $combobox_case_sensitive === 'no' && tablo_suggestions[index_table][i].substring(0, value_to_search.length).toUpperCase() === value_to_search.toUpperCase())) { |
||
233 | $suggestions.append('<div id="suggestion-' + index_table + '-' + counter + '" class="js-suggestion ' + $combobox_prefix_class + 'suggestion" tabindex="-1" role="option">' + tablo_suggestions[index_table][i] + '</div>'); |
||
234 | counter++; |
||
235 | } |
||
236 | } |
||
237 | i++; |
||
238 | } |
||
239 | if (counter >= combobox_limit_number_suggestions) { |
||
240 | $suggestions.append('<div id="suggestion-' + index_table + '-' + counter + '" class="js-suggestion js-seemore ' + $combobox_prefix_class + 'suggestion" tabindex="-1" role="option">' + $combobox_see_more_text + '</div>'); |
||
241 | counter++; |
||
242 | } |
||
243 | // update number of suggestions |
||
244 | if (counter > 1) { |
||
245 | text_number_suggestions = $combobox_suggestion_plural + counter + ' ' + $combobox_suggestion_word_plural + '.'; |
||
246 | } |
||
247 | if (counter === 1) { |
||
248 | text_number_suggestions = $combobox_suggestion_single + counter + ' ' + $combobox_suggestion_word + '.'; |
||
249 | } |
||
250 | if (counter === 0) { |
||
251 | text_number_suggestions = $combobox_suggestion_single + counter + ' ' + $combobox_suggestion_word + '.'; |
||
252 | } |
||
253 | if (counter >= 0) { |
||
254 | var text_number_suggestions_default = $suggestions_text.text(); |
||
255 | if (text_number_suggestions != text_number_suggestions_default) { |
||
256 | // @Goestu trick to make it work on all AT |
||
257 | var suggestions_to_add = $("<p>").text(text_number_suggestions); |
||
258 | $suggestions_text.attr('aria-live', 'polite'); |
||
259 | $suggestions_text.empty(); |
||
260 | $suggestions_text.append(suggestions_to_add); |
||
261 | } |
||
262 | } |
||
263 | } |
||
264 | } |
||
265 | } |
||
266 | }).on('click', function (event) { |
||
267 | var $target = $(event.target), |
||
268 | $suggestions_text = $('.js-suggestion-text:not(:empty)'), |
||
269 | // if a suggestion text is not empty => suggestion opened somewhere |
||
270 | $container = $suggestions_text.parents('.js-container'), |
||
271 | $input_text = $container.find('.js-combobox'), |
||
272 | $suggestions = $container.find('.js-suggest div'); |
||
273 | |||
274 | // if click outside => close opened suggestions |
||
275 | if (!$target.is('.js-suggestion') && !$target.is('.js-combobox') && $suggestions_text.length) { |
||
276 | $input_text.val($input_text.attr('data-lastval')); |
||
277 | $suggestions.empty(); |
||
278 | $suggestions_text.empty(); |
||
279 | } |
||
280 | }) |
||
281 | // tab + down management for autocomplete (when list of suggestion) |
||
282 | .on('keydown', '.js-combobox', function (event) { |
||
283 | var $this = $(this), |
||
284 | $container = $this.parent(), |
||
285 | $input_text = $container.find('.js-combobox'), |
||
286 | $suggestions = $container.find('.js-suggest div'), |
||
287 | $suggestion_list = $suggestions.find('.js-suggestion'), |
||
288 | $suggestions_text = $container.find('.js-suggestion-text'), |
||
289 | $autorise_tab_options = typeof $this.attr('data-combobox-notab-options') !== 'undefined' ? false : true, |
||
290 | $first_suggestion = $suggestion_list.first(); |
||
291 | |||
292 | if (!event.shiftKey && event.keyCode == 9 && $autorise_tab_options || event.keyCode == 40) { |
||
293 | // tab (if authorised) or bottom |
||
294 | // See if there are suggestions, and yes => focus on first one |
||
295 | if ($suggestion_list.length) { |
||
296 | $input_text.val($first_suggestion.html()); |
||
297 | $suggestion_list.first().focus(); |
||
298 | event.preventDefault(); |
||
299 | } |
||
300 | } |
||
301 | if (event.keyCode == 27 || $autorise_tab_options === false && event.keyCode == 9) { |
||
302 | // esc or (tab/shift tab + notab option) = close |
||
303 | $input_text.val($input_text.attr('data-lastval')); |
||
304 | $suggestions.empty(); |
||
305 | $suggestions_text.empty(); |
||
306 | if (event.keyCode == 27) { |
||
307 | // Esc prevented only, tab can go :) |
||
308 | event.preventDefault(); |
||
309 | setTimeout(function () { |
||
310 | $input_text.focus(); |
||
311 | }, 300); // timeout to avoid problem in suggestions display |
||
312 | } |
||
313 | } |
||
314 | }) |
||
315 | // tab + down management in list of suggestions |
||
316 | .on('keydown', '.js-suggestion', function (event) { |
||
317 | var $this = $(this), |
||
318 | $container = $this.parents('.js-container'), |
||
319 | $input_text = $container.find('.js-combobox'), |
||
320 | $autorise_tab_options = typeof $input_text.attr('data-combobox-notab-options') !== 'undefined' ? false : true, |
||
321 | $suggestions = $container.find('.js-suggest div'), |
||
322 | $suggestions_text = $container.find('.js-suggestion-text'), |
||
323 | $next_suggestion = $this.next(), |
||
324 | $previous_suggestion = $this.prev(); |
||
325 | |||
326 | if (event.keyCode == 27 || $autorise_tab_options === false && event.keyCode == 9) { |
||
327 | // esc or (tab/shift tab + notab option) = close |
||
328 | if (event.keyCode == 27) { |
||
329 | // Esc prevented only, tab can go :) |
||
330 | $input_text.val($input_text.attr('data-lastval')); |
||
331 | $suggestions.empty(); |
||
332 | $suggestions_text.empty(); |
||
333 | setTimeout(function () { |
||
334 | $input_text.focus(); |
||
335 | }, 300); // timeout to avoid problem in suggestions display |
||
336 | event.preventDefault(); |
||
337 | } |
||
338 | if ($autorise_tab_options === false && event.keyCode == 9) { |
||
339 | $suggestions.empty(); |
||
340 | $suggestions_text.empty(); |
||
341 | $input_text.focus(); |
||
342 | } |
||
343 | } |
||
344 | if (event.keyCode == 13 || event.keyCode == 32) { |
||
345 | // Enter or space |
||
346 | if ($this.hasClass('js-seemore')) { |
||
347 | $input_text.val($input_text.attr('data-lastval')); |
||
348 | $suggestions.empty(); |
||
349 | $suggestions_text.empty(); |
||
350 | setTimeout(function () { |
||
351 | $input_text.focus(); |
||
352 | }, 300); // timeout to avoid problem in suggestions display |
||
353 | // go define the function you need when we click the see_more option |
||
354 | setTimeout(function () { |
||
355 | do_see_more_option(); |
||
356 | }, 301); // timeout to avoid problem in suggestions display |
||
357 | event.preventDefault(); |
||
358 | } else { |
||
359 | $input_text.val($this.html()); |
||
360 | $input_text.attr('data-lastval', $this.html()); |
||
361 | $suggestions.empty(); |
||
362 | $suggestions_text.empty(); |
||
363 | setTimeout(function () { |
||
364 | $input_text.focus(); |
||
365 | }, 300); // timeout to avoid problem in suggestions display |
||
366 | event.preventDefault(); |
||
367 | } |
||
368 | } |
||
369 | if (!event.shiftKey && event.keyCode == 9 && $autorise_tab_options || event.keyCode == 40) { |
||
370 | // tab (if authorised) or bottom |
||
371 | if ($next_suggestion.length) { |
||
372 | $input_text.val($next_suggestion.html()); |
||
373 | $next_suggestion.focus(); |
||
374 | } else { |
||
375 | $input_text.val($input_text.attr('data-lastval')); |
||
376 | if (!event.shiftKey && event.keyCode == 9) { |
||
377 | // tab closes the list |
||
378 | var e = jQuery.Event("keydown"); |
||
379 | e.which = 27; // # Some key code value |
||
380 | e.keyCode = 27; |
||
381 | $this.trigger(e); |
||
382 | } else { |
||
383 | setTimeout(function () { |
||
384 | $input_text.focus(); |
||
385 | }, 300); |
||
386 | } // timeout to avoid problem in suggestions display |
||
387 | } |
||
388 | event.preventDefault(); |
||
389 | } |
||
390 | |||
391 | if (event.shiftKey && event.keyCode == 9 && $autorise_tab_options || event.keyCode == 38) { |
||
392 | // top or Maj+tab (if authorised) |
||
393 | if ($previous_suggestion.length) { |
||
394 | $input_text.val($previous_suggestion.html()); |
||
395 | $previous_suggestion.focus(); |
||
396 | } else { |
||
397 | $input_text.val($input_text.attr('data-lastval')).focus(); |
||
398 | } |
||
399 | event.preventDefault(); |
||
400 | } |
||
401 | }) |
||
402 | // clear button |
||
403 | .on('click', '.js-clear-button', function () { |
||
404 | var $this = $(this), |
||
405 | $container = $this.parent(), |
||
406 | $input_text = $container.find('.js-combobox'), |
||
407 | $suggestions = $container.find('.js-suggest div'), |
||
408 | $suggestions_text = $container.find('.js-suggestion-text'); |
||
409 | |||
410 | $suggestions.empty(); |
||
411 | $suggestions_text.empty(); |
||
412 | $input_text.val(''); |
||
413 | $input_text.attr('data-lastval', ''); |
||
414 | }).on('click', '.js-suggestion', function () { |
||
415 | var $this = $(this), |
||
416 | value = $this.html(), |
||
417 | $container = $this.parents('.js-container'), |
||
418 | $input_text = $container.find('.js-combobox'), |
||
419 | $suggestions = $container.find('.js-suggest div'), |
||
420 | $suggestions_text = $container.find('.js-suggestion-text'); |
||
421 | |||
422 | if ($this.hasClass('js-seemore')) { |
||
423 | $suggestions.empty(); |
||
424 | $suggestions_text.empty(); |
||
425 | $input_text.focus(); |
||
426 | // go define the function you need when we click the see_more option |
||
427 | do_see_more_option(); |
||
428 | } else { |
||
429 | $input_text.val(value).focus(); |
||
430 | $suggestions.empty(); |
||
431 | $suggestions_text.empty(); |
||
432 | } |
||
433 | }); |
||
434 | } |
||
435 | }); |
||
436 | |||
439 | /******/ }); |