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