Issue #1164812 by Niklas Fiekas, tim.plunkett, xjm: Improve UX for machine names for fields.

1 files changed, 11 insertions, 5 deletions

diff --git a/misc/machine-name.js b/misc/machine-name.js
index 3f8e788a2..66eb9d472 100644
--- a/misc/machine-name.js
+++ b/misc/machine-name.js
@@ -19,6 +19,10 @@ Drupal.behaviors.machineName = {
    *     disallowed characters in the machine name; e.g., '[^a-z0-9]+'.
    *   - replace: A character to replace disallowed characters with; e.g., '_'
    *     or '-'.
+   *   - standalone: Whether the preview should stay in its own element rather
+   *     than the suffix of the source element.
+   *   - field_prefix: The #field_prefix of the form element.
+   *   - field_suffix: The #field_suffix of the form element.
    */
   attach: function (context, settings) {
     var self = this;
@@ -49,10 +53,12 @@ Drupal.behaviors.machineName = {
         var machine = self.transliterate($source.val(), options);
       }
       // Append the machine name preview to the source field.
-      var $preview = $('<span class="machine-name-value">' + machine + '</span>');
-      $suffix.empty()
-        .append(' ').append('<span class="machine-name-label">' + options.label + ':</span>')
-        .append(' ').append($preview);
+      var $preview = $('<span class="machine-name-value">' + options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix + '</span>');
+      $suffix.empty();
+      if (options.label) {
+        $suffix.append(' ').append('<span class="machine-name-label">' + options.label + ':</span>');
+      }
+      $suffix.append(' ').append($preview);
 
       // If the machine name cannot be edited, stop further processing.
       if ($target.is(':disabled')) {
@@ -80,7 +86,7 @@ Drupal.behaviors.machineName = {
           if (machine != '') {
             if (machine != options.replace) {
               $target.val(machine);
-              $preview.text(machine);
+              $preview.html(options.field_prefix + Drupal.checkPlain(machine) + options.field_suffix);
             }
             $suffix.show();
           }