summaryrefslogtreecommitdiff
path: root/misc/machine-name.js
blob: befbc0efde9927c7967e8194c88855d9f09b7e8c (plain)
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
// $Id$
(function ($) {

/**
 * 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 '-'.
   */
  attach: function (context, settings) {
    var self = this;
    $.each(settings.machineName, function (source_id, options) {
      var $source = $(source_id, context).addClass('machine-name-source');
      var $target = $(options.target, context).addClass('machine-name-target');
      var $suffix = $(options.suffix, context);
      var $wrapper = $target.parents('.form-item:first');
      // 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;
      }
      // Hide the form item container of the machine name form element.
      $wrapper.hide();
      // Append the machine name preview to the source field.
      if ($target.is(':disabled')) {
        var machine = $target.val();
      }
      else {
        var machine = self.transliterate($source.val(), options);
      }
      var $preview = $('<span class="machine-name-value">' + machine + '</span>');
      $suffix.empty()
        .append(' ').append('<span class="machine-name-label">' + options.label + ':</span>')
        .append(' ').append($preview);

      // Append a link to edit the machine name, if it is editable, and only if
      // one of the following conditions is met:
      // - the machine name is empty.
      // - the human-readable name is equal to the existing machine name.
      if (!$target.is(':disabled') && ($target.val() == '' || $target.val() == machine)) {
        var $link = $('<span class="admin-link"><a href="#">' + Drupal.t('Edit') + '</a></span>')
          .click(function () {
            $wrapper.show();
            $target.focus();
            $suffix.hide();
            $source.unbind('keyup.machineName');
            return false;
          });
        $suffix.append(' ').append($link);

        // Preview machine name in realtime when the human-readable name changes.
        $source.bind('keyup.machineName change.machineName', function () {
          machine = self.transliterate($(this).val(), options);
          // Set the machine name to the transliterated value.
          if (machine != options.replace && machine != '') {
            $target.val(machine);
            $preview.text(machine);
            $suffix.show();
          }
          else {
            $suffix.hide();
            $target.val(machine);
            $preview.empty();
          }
        });
        // Initialize machine name preview.
        $source.keyup();
      }
    });
  },

  /**
   * 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 '-'.
   *
   * @return
   *   The transliterated source string.
   */
  transliterate: function (source, settings) {
    var rx = new RegExp(settings.replace_pattern, 'g');
    return source.toLowerCase().replace(rx, settings.replace);
  }
};

})(jQuery);