1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
/**
* @file
* Machine name functionality.
*/
(function ($, Drupal, drupalSettings) {
/**
* Attach the machine-readable name form element behavior.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches machine-name behaviors.
*/
Drupal.behaviors.machineName = {
/**
* Attaches the behavior.
*
* @param {Element} context
* The context for attaching the behavior.
* @param {object} settings
* Settings object.
* @param {object} settings.machineName
* A list of elements to process, keyed by the HTML ID of the form
* element containing the human-readable value. Each element is an object
* defining the following properties:
* - target: The HTML ID of the machine name form element.
* - suffix: The HTML ID of a container to show the machine name preview
* in (usually a field suffix after the human-readable name
* form element).
* - label: The label to show for the machine name preview.
* - replace_pattern: A regular expression (without modifiers) matching
* disallowed characters in the machine name; e.g., '[^a-z0-9]+'.
* - replace: A character to replace disallowed characters with; e.g.,
* '_' or '-'.
* - standalone: Whether the preview should stay in its own element
* rather than the suffix of the source element.
* - field_prefix: The #field_prefix of the form element.
* - field_suffix: The #field_suffix of the form element.
*/
attach(context, settings) {
const self = this;
const $context = $(context);
let timeout = null;
let xhr = null;
function clickEditHandler(e) {
const data = e.data;
data.$wrapper.removeClass('visually-hidden');
data.$target.trigger('focus');
data.$suffix.hide();
data.$source.off('.machineName');
}
function machineNameHandler(e) {
const data = e.data;
const options = data.options;
const baseValue = e.target.value;
const rx = new RegExp(options.replace_pattern, 'g');
const expected = baseValue
.toLowerCase()
.replace(rx, options.replace)
.substr(0, options.maxlength);
// Abort the last pending request because the label has changed and it
// is no longer valid.
if (xhr && xhr.readystate !== 4) {
xhr.abort();
xhr = null;
}
// Wait 300 milliseconds for Ajax request since the last event to update
// the machine name i.e., after the user has stopped typing.
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
if (baseValue.toLowerCase() !== expected) {
timeout = setTimeout(() => {
xhr = self.transliterate(baseValue, options).done((machine) => {
self.showMachineName(machine.substr(0, options.maxlength), data);
});
}, 300);
} else {
self.showMachineName(expected, data);
}
}
Object.keys(settings.machineName).forEach((sourceId) => {
const options = settings.machineName[sourceId];
const $source = $(
once(
'machine-name',
$context.find(sourceId).addClass('machine-name-source'),
),
);
const $target = $context
.find(options.target)
.addClass('machine-name-target');
const $suffix = $context.find(options.suffix);
const $wrapper = $target.closest('.js-form-item');
// All elements have to exist.
if (
!$source.length ||
!$target.length ||
!$suffix.length ||
!$wrapper.length
) {
return;
}
// Skip processing upon a form validation error on the machine name.
if ($target.hasClass('error')) {
return;
}
// Figure out the maximum length for the machine name.
options.maxlength = $target.attr('maxlength');
// Hide the form item container of the machine name form element.
$wrapper.addClass('visually-hidden');
// Initial machine name from the target field default value.
const machine = $target[0].value;
// Append the machine name preview to the source field.
const $preview = $(
`<span class="machine-name-value">${
options.field_prefix
}${Drupal.checkPlain(machine)}${options.field_suffix}</span>`,
);
$suffix.empty();
if (options.label) {
$suffix.append(
`<span class="machine-name-label">${options.label}: </span>`,
);
}
$suffix.append($preview);
// If the machine name cannot be edited, stop further processing.
if ($target.is(':disabled')) {
return;
}
const eventData = {
$source,
$target,
$suffix,
$wrapper,
$preview,
options,
};
// If no initial value, determine machine name based on the
// human-readable form element value.
if (machine === '' && $source[0].value !== '') {
self.transliterate($source[0].value, options).done((machineName) => {
self.showMachineName(
machineName.substr(0, options.maxlength),
eventData,
);
});
}
// If it is editable, append an edit link.
const $link = $(
`<span class="admin-link"><button type="button" class="link">${Drupal.t(
'Edit',
)}</button></span>`,
).on('click', eventData, clickEditHandler);
$suffix.append($link);
// Preview the machine name in realtime when the human-readable name
// changes, but only if there is no machine name yet; i.e., only upon
// initial creation, not when editing.
if ($target[0].value === '') {
$source
.on('formUpdated.machineName', eventData, machineNameHandler)
// Initialize machine name preview.
.trigger('formUpdated.machineName');
}
// Add a listener for an invalid event on the machine name input
// to show its container and focus it.
$target.on('invalid', eventData, clickEditHandler);
});
},
showMachineName(machine, data) {
const settings = data.options;
// Set the machine name to the transliterated value.
if (machine !== '') {
if (machine !== settings.replace) {
data.$target[0].value = machine;
data.$preview.html(
settings.field_prefix +
Drupal.checkPlain(machine) +
settings.field_suffix,
);
}
data.$suffix.show();
} else {
data.$suffix.hide();
data.$target[0].value = machine;
data.$preview.empty();
}
},
/**
* Transliterate a human-readable name to a machine name.
*
* @param {string} source
* A string to transliterate.
* @param {object} settings
* The machine name settings for the corresponding field.
* @param {string} settings.replace_pattern
* A regular expression (without modifiers) matching disallowed characters
* in the machine name; e.g., '[^a-z0-9]+'.
* @param {string} settings.replace_token
* A token to validate the regular expression.
* @param {string} settings.replace
* A character to replace disallowed characters with; e.g., '_' or '-'.
* @param {number} settings.maxlength
* The maximum length of the machine name.
*
* @return {jQuery}
* The transliterated source string.
*/
transliterate(source, settings) {
return $.get(Drupal.url('machine_name/transliterate'), {
text: source,
langcode: drupalSettings.langcode,
replace_pattern: settings.replace_pattern,
replace_token: settings.replace_token,
replace: settings.replace,
lowercase: true,
});
},
};
})(jQuery, Drupal, drupalSettings);
|
