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
|
(function ($, Drupal, drupalSettings) {
"use strict";
/**
* Attach the machine-readable name form element behavior.
*/
Drupal.behaviors.machineName = {
/**
* Attaches the behavior.
*
* @param 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: function (context, settings) {
var self = this;
var $context = $(context);
var timeout = null;
var xhr = null;
function clickEditHandler(e) {
var data = e.data;
e.preventDefault();
data.$wrapper.show();
data.$target.trigger('focus');
data.$suffix.hide();
data.$source.off('.machineName');
}
function machineNameHandler(e) {
var data = e.data;
var options = data.options;
var baseValue = $(e.target).val();
var rx = new RegExp(options.replace_pattern, 'g');
var 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 since the last event to update the machine name
// i.e., after the user has stopped typing.
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(function () {
if (baseValue.toLowerCase() !== expected) {
xhr = self.transliterate(baseValue, options).done(function (machine) {
self.showMachineName(machine.substr(0, options.maxlength), data);
});
}
else {
self.showMachineName(expected, data);
}
}, 300);
}
Object.keys(settings.machineName).forEach(function (source_id) {
var machine;
var eventData;
var options = settings.machineName[source_id];
var $source = $context.find(source_id).addClass('machine-name-source').once('machine-name');
var $target = $context.find(options.target).addClass('machine-name-target');
var $suffix = $context.find(options.suffix);
var $wrapper = $target.closest('.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.hide();
// Determine the initial machine name value. Unless the machine name form
// element is disabled or not empty, the initial default value is based on
// the human-readable form element value.
if ($target.is(':disabled') || $target.val() !== '') {
machine = $target.val();
}
else {
machine = self.transliterate($source.val(), options);
}
// Append the machine name preview to the source field.
var $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;
}
eventData = {
$source: $source,
$target: $target,
$suffix: $suffix,
$wrapper: $wrapper,
$preview: $preview,
options: options
};
// If it is editable, append an edit link.
var $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.val() === '') {
$source.on('keyup.machineName change.machineName input.machineName', eventData, machineNameHandler)
// Initialize machine name preview.
.trigger('keyup');
}
});
},
showMachineName: function (machine, data) {
var settings = data.options;
// Set the machine name to the transliterated value.
if (machine !== '') {
if (machine !== settings.replace) {
data.$target.val(machine);
data.$preview.html(settings.field_prefix + Drupal.checkPlain(machine) + settings.field_suffix);
}
data.$suffix.show();
}
else {
data.$suffix.hide();
data.$target.val(machine);
data.$preview.empty();
}
},
/**
* Transliterate a human-readable name to a machine name.
*
* @param source
* A string to transliterate.
* @param settings
* The machine name settings for the corresponding field, containing:
* - 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 '-'.
* - maxlength: The maximum length of the machine name.
*
* @return
* The transliterated source string.
*/
transliterate: function (source, settings) {
return $.get(Drupal.url('machine_name/transliterate'), {
text: source,
langcode: drupalSettings.langcode,
replace_pattern: settings.replace_pattern,
replace: settings.replace,
lowercase: true
});
}
};
})(jQuery, Drupal, drupalSettings);
|
