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