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
|
/**
* @file
* Provides date format preview feature.
*/
(function ($, Drupal, drupalSettings) {
const dateFormats = drupalSettings.dateFormats;
/**
* Display the preview for date format entered.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attach behavior for previewing date formats on input elements.
*/
Drupal.behaviors.dateFormat = {
attach(context) {
const source = once(
'dateFormat',
'[data-drupal-date-formatter="source"]',
context,
);
const target = once(
'dateFormat',
'[data-drupal-date-formatter="preview"]',
context,
);
// All elements have to exist.
if (!source.length || !target.length) {
return;
}
/**
* Event handler that replaces date characters with value.
*
* @param {jQuery.Event} e
* The jQuery event triggered.
*/
function dateFormatHandler(e) {
const baseValue = e.target.value || '';
const dateString = baseValue.replace(/\\?(.?)/gi, (key, value) =>
dateFormats[key] ? dateFormats[key] : value,
);
// Set date preview.
target.forEach((item) => {
item.querySelectorAll('em').forEach((em) => {
em.textContent = dateString;
});
});
$(target).toggleClass('js-hide', !dateString.length);
}
/**
* On given event triggers the date character replacement.
*/
$(source)
.on(
'keyup.dateFormat change.dateFormat input.dateFormat',
dateFormatHandler,
)
// Initialize preview.
.trigger('keyup');
},
};
})(jQuery, Drupal, drupalSettings);
|
