yaffs.net Git - yaffs-website/blob - web/core/modules/system/js/system.date.es6.js

   1 /**
   2  * @file
   3  * Provides date format preview feature.
   4  */
   5
   6 (function($, Drupal, drupalSettings) {
   7   const dateFormats = drupalSettings.dateFormats;
   8
   9   /**
  10    * Display the preview for date format entered.
  11    *
  12    * @type {Drupal~behavior}
  13    *
  14    * @prop {Drupal~behaviorAttach} attach
  15    *   Attach behavior for previewing date formats on input elements.
  16    */
  17   Drupal.behaviors.dateFormat = {
  18     attach(context) {
  19       const $context = $(context);
  20       const $source = $context
  21         .find('[data-drupal-date-formatter="source"]')
  22         .once('dateFormat');
  23       const $target = $context
  24         .find('[data-drupal-date-formatter="preview"]')
  25         .once('dateFormat');
  26       const $preview = $target.find('em');
  27
  28       // All elements have to exist.
  29       if (!$source.length || !$target.length) {
  30         return;
  31       }
  32
  33       /**
  34        * Event handler that replaces date characters with value.
  35        *
  36        * @param {jQuery.Event} e
  37        *   The jQuery event triggered.
  38        */
  39       function dateFormatHandler(e) {
  40         const baseValue = $(e.target).val() || '';
  41         const dateString = baseValue.replace(
  42           /\\?(.?)/gi,
  43           (key, value) => (dateFormats[key] ? dateFormats[key] : value),
  44         );
  45
  46         $preview.html(dateString);
  47         $target.toggleClass('js-hide', !dateString.length);
  48       }
  49
  50       /**
  51        * On given event triggers the date character replacement.
  52        */
  53       $source
  54         .on(
  55           'keyup.dateFormat change.dateFormat input.dateFormat',
  56           dateFormatHandler,
  57         )
  58         // Initialize preview.
  59         .trigger('keyup');
  60     },
  61   };
  62 })(jQuery, Drupal, drupalSettings);