crm.fsf.org/20131203/files/misc/machine-name.js

   1 (function ($) {
   2
   3 /**
   4  * Attach the machine-readable name form element behavior.
   5  */
   6 Drupal.behaviors.machineName = {
   7   /**
   8    * Attaches the behavior.
   9    *
  10    * @param settings.machineName
  11    *   A list of elements to process, keyed by the HTML ID of the form element
  12    *   containing the human-readable value. Each element is an object defining
  13    *   the following properties:
  14    *   - target: The HTML ID of the machine name form element.
  15    *   - suffix: The HTML ID of a container to show the machine name preview in
  16    *     (usually a field suffix after the human-readable name form element).
  17    *   - label: The label to show for the machine name preview.
  18    *   - replace_pattern: A regular expression (without modifiers) matching
  19    *     disallowed characters in the machine name; e.g., '[^a-z0-9]+'.
  20    *   - replace: A character to replace disallowed characters with; e.g., '_'
  21    *     or '-'.
  22    *   - standalone: Whether the preview should stay in its own element rather
  23    *     than the suffix of the source element.
  24    *   - field_prefix: The #field_prefix of the form element.
  25    *   - field_suffix: The #field_suffix of the form element.
  26    */
  27   attach: function (context, settings) {
  28     var self = this;
  29     $.each(settings.machineName, function (source_id, options) {
  30       var $source = $(source_id, context).addClass('machine-name-source');
  31       var $target = $(options.target, context).addClass('machine-name-target');
  32       var $suffix = $(options.suffix, context);
  33       var $wrapper = $target.closest('.form-item');
  34       // All elements have to exist.
  35       if (!$source.length || !$target.length || !$suffix.length || !$wrapper.length) {
  36         return;
  37       }
  38       // Skip processing upon a form validation error on the machine name.
  39       if ($target.hasClass('error')) {
  40         return;
  41       }
  42       // Figure out the maximum length for the machine name.
  43       options.maxlength = $target.attr('maxlength');
  44       // Hide the form item container of the machine name form element.
  45       $wrapper.hide();
  46       // Determine the initial machine name value. Unless the machine name form
  47       // element is disabled or not empty, the initial default value is based on
  48       // the human-readable form element value.
  49       if ($target.is(':disabled') || $target.val() != '') {
  50         var machine = $target.val();
  51       }
  52       else {
  53         var machine = self.transliterate($source.val(), options);
  54       }
  55       // Append the machine name preview to the source field.
  56       var $preview = $('<span class="machine-name-value">' + options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix + '</span>');
  57       $suffix.empty();
  58       if (options.label) {
  59         $suffix.append(' ').append('<span class="machine-name-label">' + options.label + ':</span>');
  60       }
  61       $suffix.append(' ').append($preview);
  62
  63       // If the machine name cannot be edited, stop further processing.
  64       if ($target.is(':disabled')) {
  65         return;
  66       }
  67
  68       // If it is editable, append an edit link.
  69       var $link = $('<span class="admin-link"><a href="#">' + Drupal.t('Edit') + '</a></span>')
  70         .click(function () {
  71           $wrapper.show();
  72           $target.focus();
  73           $suffix.hide();
  74           $source.unbind('.machineName');
  75           return false;
  76         });
  77       $suffix.append(' ').append($link);
  78
  79       // Preview the machine name in realtime when the human-readable name
  80       // changes, but only if there is no machine name yet; i.e., only upon
  81       // initial creation, not when editing.
  82       if ($target.val() == '') {
  83         $source.bind('keyup.machineName change.machineName input.machineName', function () {
  84           machine = self.transliterate($(this).val(), options);
  85           // Set the machine name to the transliterated value.
  86           if (machine != '') {
  87             if (machine != options.replace) {
  88               $target.val(machine);
  89               $preview.html(options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix);
  90             }
  91             $suffix.show();
  92           }
  93           else {
  94             $suffix.hide();
  95             $target.val(machine);
  96             $preview.empty();
  97           }
  98         });
  99         // Initialize machine name preview.
 100         $source.keyup();
 101       }
 102     });
 103   },
 104
 105   /**
 106    * Transliterate a human-readable name to a machine name.
 107    *
 108    * @param source
 109    *   A string to transliterate.
 110    * @param settings
 111    *   The machine name settings for the corresponding field, containing:
 112    *   - replace_pattern: A regular expression (without modifiers) matching
 113    *     disallowed characters in the machine name; e.g., '[^a-z0-9]+'.
 114    *   - replace: A character to replace disallowed characters with; e.g., '_'
 115    *     or '-'.
 116    *   - maxlength: The maximum length of the machine name.
 117    *
 118    * @return
 119    *   The transliterated source string.
 120    */
 121   transliterate: function (source, settings) {
 122     var rx = new RegExp(settings.replace_pattern, 'g');
 123     return source.toLowerCase().replace(rx, settings.replace).substr(0, settings.maxlength);
 124   }
 125 };
 126
 127 })(jQuery);