3 * Machine name functionality.
6 (function ($, Drupal, drupalSettings) {
11 * Attach the machine-readable name form element behavior.
13 * @type {Drupal~behavior}
15 * @prop {Drupal~behaviorAttach} attach
16 * Attaches machine-name behaviors.
18 Drupal.behaviors.machineName = {
21 * Attaches the behavior.
23 * @param {Element} context
24 * The context for attaching the behavior.
25 * @param {object} settings
27 * @param {object} settings.machineName
28 * A list of elements to process, keyed by the HTML ID of the form
29 * element containing the human-readable value. Each element is an object
30 * defining the following properties:
31 * - target: The HTML ID of the machine name form element.
32 * - suffix: The HTML ID of a container to show the machine name preview
33 * in (usually a field suffix after the human-readable name
35 * - label: The label to show for the machine name preview.
36 * - replace_pattern: A regular expression (without modifiers) matching
37 * disallowed characters in the machine name; e.g., '[^a-z0-9]+'.
38 * - replace: A character to replace disallowed characters with; e.g.,
40 * - standalone: Whether the preview should stay in its own element
41 * rather than the suffix of the source element.
42 * - field_prefix: The #field_prefix of the form element.
43 * - field_suffix: The #field_suffix of the form element.
45 attach: function (context, settings) {
47 var $context = $(context);
51 function clickEditHandler(e) {
53 data.$wrapper.removeClass('visually-hidden');
54 data.$target.trigger('focus');
56 data.$source.off('.machineName');
59 function machineNameHandler(e) {
61 var options = data.options;
62 var baseValue = $(e.target).val();
64 var rx = new RegExp(options.replace_pattern, 'g');
65 var expected = baseValue.toLowerCase().replace(rx, options.replace).substr(0, options.maxlength);
67 // Abort the last pending request because the label has changed and it
68 // is no longer valid.
69 if (xhr && xhr.readystate !== 4) {
74 // Wait 300 milliseconds for Ajax request since the last event to update
75 // the machine name i.e., after the user has stopped typing.
77 clearTimeout(timeout);
80 if (baseValue.toLowerCase() !== expected) {
81 timeout = setTimeout(function () {
82 xhr = self.transliterate(baseValue, options).done(function (machine) {
83 self.showMachineName(machine.substr(0, options.maxlength), data);
88 self.showMachineName(expected, data);
92 Object.keys(settings.machineName).forEach(function (source_id) {
95 var options = settings.machineName[source_id];
97 var $source = $context.find(source_id).addClass('machine-name-source').once('machine-name');
98 var $target = $context.find(options.target).addClass('machine-name-target');
99 var $suffix = $context.find(options.suffix);
100 var $wrapper = $target.closest('.js-form-item');
101 // All elements have to exist.
102 if (!$source.length || !$target.length || !$suffix.length || !$wrapper.length) {
105 // Skip processing upon a form validation error on the machine name.
106 if ($target.hasClass('error')) {
109 // Figure out the maximum length for the machine name.
110 options.maxlength = $target.attr('maxlength');
111 // Hide the form item container of the machine name form element.
112 $wrapper.addClass('visually-hidden');
113 // Determine the initial machine name value. Unless the machine name
114 // form element is disabled or not empty, the initial default value is
115 // based on the human-readable form element value.
116 if ($target.is(':disabled') || $target.val() !== '') {
117 machine = $target.val();
119 else if ($source.val() !== '') {
120 machine = self.transliterate($source.val(), options);
122 // Append the machine name preview to the source field.
123 var $preview = $('<span class="machine-name-value">' + options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix + '</span>');
126 $suffix.append('<span class="machine-name-label">' + options.label + ': </span>');
128 $suffix.append($preview);
130 // If the machine name cannot be edited, stop further processing.
131 if ($target.is(':disabled')) {
143 // If it is editable, append an edit link.
144 var $link = $('<span class="admin-link"><button type="button" class="link">' + Drupal.t('Edit') + '</button></span>').on('click', eventData, clickEditHandler);
145 $suffix.append($link);
147 // Preview the machine name in realtime when the human-readable name
148 // changes, but only if there is no machine name yet; i.e., only upon
149 // initial creation, not when editing.
150 if ($target.val() === '') {
151 $source.on('formUpdated.machineName', eventData, machineNameHandler)
152 // Initialize machine name preview.
153 .trigger('formUpdated.machineName');
156 // Add a listener for an invalid event on the machine name input
157 // to show its container and focus it.
158 $target.on('invalid', eventData, clickEditHandler);
162 showMachineName: function (machine, data) {
163 var settings = data.options;
164 // Set the machine name to the transliterated value.
165 if (machine !== '') {
166 if (machine !== settings.replace) {
167 data.$target.val(machine);
168 data.$preview.html(settings.field_prefix + Drupal.checkPlain(machine) + settings.field_suffix);
174 data.$target.val(machine);
175 data.$preview.empty();
180 * Transliterate a human-readable name to a machine name.
182 * @param {string} source
183 * A string to transliterate.
184 * @param {object} settings
185 * The machine name settings for the corresponding field.
186 * @param {string} settings.replace_pattern
187 * A regular expression (without modifiers) matching disallowed characters
188 * in the machine name; e.g., '[^a-z0-9]+'.
189 * @param {string} settings.replace_token
190 * A token to validate the regular expression.
191 * @param {string} settings.replace
192 * A character to replace disallowed characters with; e.g., '_' or '-'.
193 * @param {number} settings.maxlength
194 * The maximum length of the machine name.
197 * The transliterated source string.
199 transliterate: function (source, settings) {
200 return $.get(Drupal.url('machine_name/transliterate'), {
202 langcode: drupalSettings.langcode,
203 replace_pattern: settings.replace_pattern,
204 replace_token: settings.replace_token,
205 replace: settings.replace,
211 })(jQuery, Drupal, drupalSettings);