diff --git a/core/modules/awesomplete_autocomplete/js/autocomplete.es6.js b/core/modules/awesomplete_autocomplete/js/autocomplete.es6.js index 4d7c9bcb61..958c4ff3a1 100644 --- a/core/modules/awesomplete_autocomplete/js/autocomplete.es6.js +++ b/core/modules/awesomplete_autocomplete/js/autocomplete.es6.js @@ -3,7 +3,7 @@ * Autocomplete based on Awesomplete. */ -((Drupal, Awesomplete) => { +((Drupal, Awesomplete, drupalSettings) => { let autocomplete; const { announce, formatPlural } = Drupal; // The first time autocomplete results appear on a field, the @@ -13,7 +13,7 @@ let autocompleteInstructionsRead = false; /** - * Helper splitting terms from the autocomplete value. + * Helper splitting selections from the autocomplete value. * * @function Drupal.autocomplete.splitValues * @@ -24,7 +24,7 @@ * Array of values, split by comma. */ const autocompleteSplitValues = value => { - // We will match the value against comma-separated terms. + // We will match the value against comma-separated selections. const result = []; let quote = false; let current = ''; @@ -52,15 +52,16 @@ /** * Returns the last value of an multi-value textfield. * - * @function Drupal.autocomplete.extractLastTerm + * @function Drupal.autocomplete.extractLastEntityReference * - * @param {string} terms + * @param {string} value * The value of the field. * * @return {string} * The last value of the input field. */ - const extractLastTerm = terms => autocomplete.splitValues(terms).pop(); + const extractLastEntityReference = value => + autocomplete.splitValues(value).pop(); /** * Return the id from a suggestion value. @@ -122,7 +123,10 @@ return false; } - return Awesomplete.FILTER_CONTAINS(suggestion, extractLastTerm(input)); + return Awesomplete.FILTER_CONTAINS( + suggestion, + autocomplete.extractLastEntityReference(input), + ); } /** @@ -139,7 +143,7 @@ const displayItem = (suggestion, input) => Awesomplete.ITEM( suggestion, - extractLastTerm(input), + autocomplete.extractLastEntityReference(input), extractIdFromSuggestion(suggestion), ); @@ -169,7 +173,7 @@ // the first set of results for a field, additional instructions on // navigating the results are provided. const readResults = count => { - const { maxItems } = Drupal.autocomplete.awesompleteOptions; + const { maxItems } = drupalSettings.awesompleteOptions; // If the number of suggestions provided equals the maximum allowed, // provide a different message so users are aware there may be additional @@ -203,29 +207,29 @@ const input = event.target; const { awesomplete } = input; const inputId = input.getAttribute('id'); - const term = autocomplete.extractLastTerm(input.value); + const searchTerm = autocomplete.extractLastEntityReference(input.value); if (!(inputId in autocomplete.cache)) { autocomplete.cache[inputId] = {}; } - if (term && term.length > 0) { - if (autocomplete.cache[inputId].hasOwnProperty(term)) { - awesomplete.list = autocomplete.cache[inputId][term]; + if (searchTerm && searchTerm.length > 0) { + if (autocomplete.cache[inputId].hasOwnProperty(searchTerm)) { + awesomplete.list = autocomplete.cache[inputId][searchTerm]; awesomplete.evaluate(); readResults(awesomplete.ul.children.length); } else { const apiUrl = input.getAttribute('data-autocomplete-path'); input.classList.add('ui-autocomplete-loading'); const xhr = new XMLHttpRequest(); - xhr.open('GET', `${apiUrl}?q=${term}`); + xhr.open('GET', `${apiUrl}?q=${searchTerm}`); xhr.onload = () => { input.classList.remove('ui-autocomplete-loading'); if (xhr.status === 200) { const results = JSON.parse(xhr.response); input.awesomplete.list = results; input.awesomplete.evaluate(); - autocomplete.cache[inputId][term] = results; + autocomplete.cache[inputId][searchTerm] = results; readResults(results.length); } }; @@ -250,7 +254,7 @@ 'input.form-autocomplete', ); - const options = Drupal.autocomplete.awesompleteOptions; + const options = drupalSettings.awesompleteOptions; Array.prototype.forEach.call(autoCompleteInputs, autocompleteElement => { // Determine if a field accepts multiple values and set the Awesomplete @@ -308,29 +312,31 @@ autocomplete = { cache: {}, splitValues: autocompleteSplitValues, - extractLastTerm, + extractLastEntityReference, inputListener: autocompleteInputListener, firstCharacterDenylist: ',', - /** - * Awesomplete option object. - * - * @name Drupal.autocomplete.awesompleteOptions - */ - awesompleteOptions: { - // Options that customize settings. - // @see https://leaverou.github.io/awesomplete/#customization for - // additional options. - minChars: 1, - maxItems: 10, - // Options that customize functionality. - // @see https://leaverou.github.io/awesomplete/#extensibility for - // additional options. - filter: filterResults, - item: displayItem, - replace: replaceInputValue, - sort: false, - }, }; Drupal.autocomplete = autocomplete; -})(Drupal, Awesomplete); + + /** + * The options passed to the Awesomplete constructor. + */ + drupalSettings.awesompleteOptions = { + // Options that customize settings. + // @see https://leaverou.github.io/awesomplete/#customization for + // additional options. + minChars: 1, + // 10 is the default value, but must be explicitly set so the value is + // available to functionality that needs to know the maxiumum number of + // displayed items. + maxItems: 10, + // Options that customize functionality. + // @see https://leaverou.github.io/awesomplete/#extensibility for + // additional options. + filter: filterResults, + item: displayItem, + replace: replaceInputValue, + sort: false, + }; +})(Drupal, Awesomplete, drupalSettings); diff --git a/core/modules/awesomplete_autocomplete/js/autocomplete.js b/core/modules/awesomplete_autocomplete/js/autocomplete.js index 121698390e..b3f72621ae 100644 --- a/core/modules/awesomplete_autocomplete/js/autocomplete.js +++ b/core/modules/awesomplete_autocomplete/js/autocomplete.js @@ -5,7 +5,7 @@ * @preserve **/ -(function (Drupal, Awesomplete) { +(function (Drupal, Awesomplete, drupalSettings) { var autocomplete = void 0; var announce = Drupal.announce, formatPlural = Drupal.formatPlural; @@ -37,8 +37,8 @@ return result; }; - var extractLastTerm = function extractLastTerm(terms) { - return autocomplete.splitValues(terms).pop(); + var extractLastEntityReference = function extractLastEntityReference(value) { + return autocomplete.splitValues(value).pop(); }; var extractIdFromSuggestion = function extractIdFromSuggestion(suggestion) { @@ -68,11 +68,11 @@ return false; } - return Awesomplete.FILTER_CONTAINS(suggestion, extractLastTerm(input)); + return Awesomplete.FILTER_CONTAINS(suggestion, autocomplete.extractLastEntityReference(input)); } var displayItem = function displayItem(suggestion, input) { - return Awesomplete.ITEM(suggestion, extractLastTerm(input), extractIdFromSuggestion(suggestion)); + return Awesomplete.ITEM(suggestion, autocomplete.extractLastEntityReference(input), extractIdFromSuggestion(suggestion)); }; function replaceInputValue(item) { @@ -87,7 +87,7 @@ } var readResults = function readResults(count) { - var maxItems = Drupal.autocomplete.awesompleteOptions.maxItems; + var maxItems = drupalSettings.awesompleteOptions.maxItems; var pluralMessage = maxItems === count ? 'There are at least @count results available. Type additional characters to refine your search.' : 'There are @count results available.'; var beginning = formatPlural(count, 'There is one result available.', pluralMessage); @@ -102,29 +102,29 @@ var awesomplete = input.awesomplete; var inputId = input.getAttribute('id'); - var term = autocomplete.extractLastTerm(input.value); + var searchTerm = autocomplete.extractLastEntityReference(input.value); if (!(inputId in autocomplete.cache)) { autocomplete.cache[inputId] = {}; } - if (term && term.length > 0) { - if (autocomplete.cache[inputId].hasOwnProperty(term)) { - awesomplete.list = autocomplete.cache[inputId][term]; + if (searchTerm && searchTerm.length > 0) { + if (autocomplete.cache[inputId].hasOwnProperty(searchTerm)) { + awesomplete.list = autocomplete.cache[inputId][searchTerm]; awesomplete.evaluate(); readResults(awesomplete.ul.children.length); } else { var apiUrl = input.getAttribute('data-autocomplete-path'); input.classList.add('ui-autocomplete-loading'); var xhr = new XMLHttpRequest(); - xhr.open('GET', apiUrl + '?q=' + term); + xhr.open('GET', apiUrl + '?q=' + searchTerm); xhr.onload = function () { input.classList.remove('ui-autocomplete-loading'); if (xhr.status === 200) { var results = JSON.parse(xhr.response); input.awesomplete.list = results; input.awesomplete.evaluate(); - autocomplete.cache[inputId][term] = results; + autocomplete.cache[inputId][searchTerm] = results; readResults(results.length); } }; @@ -137,7 +137,7 @@ attach: function attach(context) { var autoCompleteInputs = context.querySelectorAll('input.form-autocomplete'); - var options = Drupal.autocomplete.awesompleteOptions; + var options = drupalSettings.awesompleteOptions; Array.prototype.forEach.call(autoCompleteInputs, function (autocompleteElement) { var cardinality = autocompleteElement.closest('[data-autocomplete-cardinality]').getAttribute('data-autocomplete-cardinality'); @@ -170,20 +170,21 @@ autocomplete = { cache: {}, splitValues: autocompleteSplitValues, - extractLastTerm: extractLastTerm, + extractLastEntityReference: extractLastEntityReference, inputListener: autocompleteInputListener, - firstCharacterDenylist: ',', - - awesompleteOptions: { - minChars: 1, - maxItems: 10, - - filter: filterResults, - item: displayItem, - replace: replaceInputValue, - sort: false - } + firstCharacterDenylist: ',' }; Drupal.autocomplete = autocomplete; -})(Drupal, Awesomplete); \ No newline at end of file + + drupalSettings.awesompleteOptions = { + minChars: 1, + + maxItems: 10, + + filter: filterResults, + item: displayItem, + replace: replaceInputValue, + sort: false + }; +})(Drupal, Awesomplete, drupalSettings); \ No newline at end of file