- Patch #557272 by kkaefer, Rob Loach, quicksketch: added FAPI JavaScript States system.

includes/common.inc

@@ -3769,6 +3769,53 @@ function drupal_process_attached($elements, $weight = JS_DEFAULT, $dependency_ch
   return $success;
 }
 
+/**
+ * Adds JavaScript to the element to allow it to have different active states.
+ *
+ * @param $elements
+ *   The structured array that may contain an array item named states. This
+ *   array describes the different JavaScript states that can be applied to the
+ *   element when certain contitions are met. The #states array is first keyed
+ *   by one of the following states:
+ *   - enabled
+ *   - invisible
+ *   - invalid
+ *   - untouched
+ *   - optional
+ *   - filled
+ *   - unchecked
+ *   - irrelevant
+ *   - expanded
+ *   - readwrite
+ *
+ *   Each of these states is an array containing conditions that must be met in
+ *   order for this state to be active. The key to this conditioning array is
+ *   a jQuery selector for the element that is checked. The value of the
+ *   conditioning array are the states that are checked on the element (empty,
+ *   checked, value, collapsed, etc) and the expected value of that condition.
+ *
+ *   @code
+ *   $form['email_canceled']['settings'] = array(
+ *     '#type' => 'container',
+ *     '#states' => array(
+ *       // Hide the settings when the cancel notify checkbox is disabled.
+ *       'invisible' => array(
+ *         'input[name="email_canceled_toggle"]' => array('checked' => FALSE),
+ *       ),
+ *     ),
+ *   );
+ *   @endcode
+ */
+function drupal_process_states(&$elements) {
+  if (!empty($elements['#states'])) {
+    $elements['#attached']['js']['misc/states.js'] = array('weight' => JS_LIBRARY + 1);
+    $elements['#attached']['js'][] = array(
+      'type' => 'setting',
+      'data' => array('states' => array('#' . $elements['#id'] => $elements['#states'])),
+    );
+  }
+}
+
 /**
  * Adds multiple JavaScript or CSS files at the same time.
  *
@@ -4646,6 +4693,9 @@ function drupal_render(&$elements) {
     }
   }
 
+  // Add any JavaScript state information associated with the element.
+  drupal_process_states($elements);
+
   // Add additional libraries, CSS, JavaScript an other custom
   // attached data associated with this element.
   drupal_process_attached($elements);
@@ -5171,6 +5221,9 @@ function drupal_common_theme() {
     'vertical_tabs' => array(
       'arguments' => array('element' => NULL),
     ),
+    'container' => array(
+      'arguments' => array('element' => NULL),
+    ),
   );
 }
 

includes/form.inc

@@ -2181,6 +2181,39 @@ function form_process_checkboxes($element) {
   return $element;
 }
 
+/**
+ * Processes a container element.
+ *
+ * @param $element
+ *   An associative array containing the properties and children of the
+ *   container.
+ * @param $form_state
+ *   The $form_state array for the form this element belongs to.
+ * @return
+ *   The processed element.
+ */
+function form_process_container($element, &$form_state) {
+  $element['#id'] = drupal_html_id(implode('-', $element['#parents']) . '-wrapper');
+  return $element;
+}
+
+/**
+ * Adds a container for grouped items
+ *
+ * @param $element
+ *   An associative array containing the properties and children of the
+ *   group.
+ *   Properties used: #children.
+ * @return
+ *   A themed HTML string representing the form element.
+ *
+ * @ingroup themeable
+ */
+function theme_container($variables) {
+  $element = $variables['element'];
+  return '<div class="form-wrapper" id="' . $element['#id'] . '">' . $element['#children'] . '</div>';
+}
+
 /**
  * Format a table with radio buttons or checkboxes.
  *

misc/collapse.js

@@ -9,7 +9,9 @@ Drupal.toggleFieldset = function (fieldset) {
     // Action div containers are processed separately because of a IE bug
     // that alters the default submit button behavior.
     var content = $('> div:not(.action)', fieldset);
-    $(fieldset).removeClass('collapsed');
+    $(fieldset)
+      .removeClass('collapsed')
+      .trigger({ type: 'collapsed', value: false });
     content.hide();
     content.slideDown({
       duration: 'fast',
@@ -27,6 +29,7 @@ Drupal.toggleFieldset = function (fieldset) {
   }
   else {
     $('div.action', fieldset).hide();
+    $(fieldset).trigger({ type: 'collapsed', value: true });
     var content = $('> div:not(.action)', fieldset).slideUp('fast', function () {
       $(this.parentNode).addClass('collapsed');
       this.parentNode.animating = false;

modules/node/node.pages.inc

@@ -178,6 +178,12 @@ function node_form($form, &$form_state, $node) {
       '#type' => 'checkbox',
       '#title' => t('Create new revision'),
       '#default_value' => $node->revision,
+      '#states' => array(
+        // Check the revision log checkbox when the log textarea is filled in.
+        'checked' => array(
+          'textarea[name="log"]' => array('empty' => FALSE),
+        ),
+      ),
     );
     $form['revision_information']['log'] = array(
       '#type' => 'textarea',

modules/system/system.admin.inc

@@ -493,13 +493,22 @@ function system_theme_settings($form, &$form_state, $key = '') {
       '#tree' => FALSE,
       '#description' => t('Check here if you want the theme to use the logo supplied with it.')
     );
-    $form['logo']['logo_path'] = array(
+    $form['logo']['settings'] = array(
+      '#type' => 'container',
+      '#states' => array(
+        // Hide the logo settings when using the default logo.
+        'invisible' => array(
+          'input[name="default_logo"]' => array('checked' => TRUE),
+        ),
+      ),
+    );
+    $form['logo']['settings']['logo_path'] = array(
       '#type' => 'textfield',
       '#title' => t('Path to custom logo'),
       '#default_value' => theme_get_setting('logo_path', $key),
-      '#description' => t('The path to the file you would like to use as your logo file instead of the default logo.'));
-
-    $form['logo']['logo_upload'] = array(
+      '#description' => t('The path to the file you would like to use as your logo file instead of the default logo.'),
+    );
+    $form['logo']['settings']['logo_upload'] = array(
       '#type' => 'file',
       '#title' => t('Upload logo image'),
       '#maxlength' => 40,
@@ -519,13 +528,22 @@ function system_theme_settings($form, &$form_state, $key = '') {
       '#default_value' => theme_get_setting('default_favicon', $key),
       '#description' => t('Check here if you want the theme to use the default shortcut icon.')
     );
-    $form['favicon']['favicon_path'] = array(
+    $form['favicon']['settings'] = array(
+      '#type' => 'container',
+      '#states' => array(
+        // Hide the favicon settings when using the default favicon.
+        'invisible' => array(
+          'input[name="default_favicon"]' => array('checked' => TRUE),
+        ),
+      ),
+    );
+    $form['favicon']['settings']['favicon_path'] = array(
       '#type' => 'textfield',
       '#title' => t('Path to custom icon'),
       '#default_value' => theme_get_setting('favicon_path', $key),
       '#description' => t('The path to the image file you would like to use as your custom shortcut icon.')
     );
-    $form['favicon']['favicon_upload'] = array(
+    $form['favicon']['settings']['favicon_upload'] = array(
       '#type' => 'file',
       '#title' => t('Upload icon image'),
       '#description' => t("If you don't have direct file access to the server, use this field to upload your shortcut icon.")
@@ -1660,12 +1678,16 @@ function system_regional_settings() {
     '#default_value' => $configurable_timezones,
   );
 
-  $js_hide = !$configurable_timezones ? ' class="js-hide"' : '';
   $form['timezone']['configurable_timezones_wrapper'] =  array(
-    '#prefix' => '<div id="empty-timezone-message-wrapper"' . $js_hide . '>',
-    '#suffix' => '</div>',
+    '#type' => 'container',
+    '#states' => array(
+      // Hide the user configured timezone settings when users are forced to use
+      // the default setting.
+      'invisible' => array(
+        'input[name="configurable_timezones"]' => array('checked' => FALSE),
+      ),
+    ),
   );
-
   $form['timezone']['configurable_timezones_wrapper']['empty_timezone_message'] = array(
     '#type' => 'checkbox',
     '#title' => t('Remind users at login if their time zone is not set.'),

modules/system/system.js

@@ -114,19 +114,6 @@ Drupal.behaviors.dateTime = {
   }
 };
 
-/**
- * Show/hide settings for user configurable time zones depending on whether
- * users are able to set their own time zones or not.
- */
-Drupal.behaviors.userTimeZones = {
-  attach: function (context, settings) {
-    $('#empty-timezone-message-wrapper .description').hide();
-    $('#edit-configurable-timezones', context).change(function () {
-      $('#empty-timezone-message-wrapper').toggle();
-    });
-  }
-};
-
 /**
  * Show the powered by Drupal image preview
  */

modules/system/system.module

@@ -490,6 +490,12 @@ function system_element_info() {
     '#default_tab' => '',
     '#process' => array('form_process_vertical_tabs'),
   );
+
+  $types['container'] = array(
+    '#theme_wrappers' => array('container'),
+    '#process' => array('form_process_container'),
+  );
+
   $types['token'] = array(
     '#input' => TRUE,
     '#theme' => array('hidden'),

modules/user/user.admin.inc

@@ -342,15 +342,14 @@ function user_admin_settings() {
     '#default_value' => $picture_support,
   );
   drupal_add_js(drupal_get_path('module', 'user') . '/user.js');
-  // If JS is enabled, and the checkbox defaults to off, hide all the settings
-  // on page load via CSS using the js-hide class so there's no flicker.
-  $css_class = 'user-admin-picture-settings';
-  if (!$picture_support) {
-    $css_class .= ' js-hide';
-  }
   $form['personalization']['pictures'] = array(
-    '#prefix' => '<div class="' . $css_class . '">',
-    '#suffix' => '</div>',
+    '#type' => 'container',
+    '#states' => array(
+      // Hide the additional picture settings when user pictures are disabled.
+      'invisible' => array(
+        'input[name="user_pictures"]' => array('checked' => FALSE),
+      ),
+    ),
   );
   $form['personalization']['pictures']['user_picture_path'] = array(
     '#type' => 'textfield',
@@ -511,13 +510,22 @@ function user_admin_settings() {
     '#title' => t('Notify user when account is activated.'),
     '#default_value' => variable_get('user_mail_status_activated_notify', TRUE),
   );
-  $form['email_activated']['user_mail_status_activated_subject'] = array(
+  $form['email_activated']['settings'] = array(
+    '#type' => 'container',
+    '#states' => array(
+      // Hide the additional settings when this email is disabled.
+      'invisible' => array(
+        'input[name="user_mail_status_activated_notify"]' => array('checked' => FALSE),
+      ),
+    ),
+  );
+  $form['email_activated']['settings']['user_mail_status_activated_subject'] = array(
     '#type' => 'textfield',
     '#title' => t('Subject'),
     '#default_value' => _user_mail_text('status_activated_subject'),
     '#maxlength' => 180,
   );
-  $form['email_activated']['user_mail_status_activated_body'] = array(
+  $form['email_activated']['settings']['user_mail_status_activated_body'] = array(
     '#type' => 'textarea',
     '#title' => t('Body'),
     '#default_value' => _user_mail_text('status_activated_body'),
@@ -537,13 +545,22 @@ function user_admin_settings() {
     '#title' => t('Notify user when account is blocked.'),
     '#default_value' => variable_get('user_mail_status_blocked_notify', FALSE),
   );
-  $form['email_blocked']['user_mail_status_blocked_subject'] = array(
+  $form['email_blocked']['settings'] = array(
+    '#type' => 'container',
+    '#states' => array(
+      // Hide the additional settings when the blocked email is disabled.
+      'invisible' => array(
+        'input[name="user_mail_status_blocked_notify"]' => array('checked' => FALSE),
+      ),
+    ),
+  );
+  $form['email_blocked']['settings']['user_mail_status_blocked_subject'] = array(
     '#type' => 'textfield',
     '#title' => t('Subject'),
     '#default_value' => _user_mail_text('status_blocked_subject'),
     '#maxlength' => 180,
   );
-  $form['email_blocked']['user_mail_status_blocked_body'] = array(
+  $form['email_blocked']['settings']['user_mail_status_blocked_body'] = array(
     '#type' => 'textarea',
     '#title' => t('Body'),
     '#default_value' => _user_mail_text('status_blocked_body'),
@@ -584,13 +601,22 @@ function user_admin_settings() {
     '#title' => t('Notify user when account is canceled.'),
     '#default_value' => variable_get('user_mail_status_canceled_notify', FALSE),
   );
-  $form['email_canceled']['user_mail_status_canceled_subject'] = array(
+  $form['email_canceled']['settings'] = array(
+    '#type' => 'container',
+    '#states' => array(
+      // Hide the settings when the cancel notify checkbox is disabled. 
+      'invisible' => array(
+        'input[name="user_mail_status_canceled_notify"]' => array('checked' => FALSE),
+      ),
+    ),
+  );
+  $form['email_canceled']['settings']['user_mail_status_canceled_subject'] = array(
     '#type' => 'textfield',
     '#title' => t('Subject'),
     '#default_value' => _user_mail_text('status_canceled_subject'),
     '#maxlength' => 180,
   );
-  $form['email_canceled']['user_mail_status_canceled_body'] = array(
+  $form['email_canceled']['settings']['user_mail_status_canceled_body'] = array(
     '#type' => 'textarea',
     '#title' => t('Body'),
     '#default_value' => _user_mail_text('status_canceled_body'),

modules/user/user.js

@@ -176,16 +176,4 @@ Drupal.evaluatePasswordStrength = function (password, translate) {
 
 };
 
-/**
- * Show all of the picture-related form elements at admin/config/people/accounts
- * depending on whether user pictures are enabled or not.
- */
-Drupal.behaviors.userSettings = {
-  attach: function (context, settings) {
-    $('#edit-user-pictures', context).change(function () {
-      $('div.user-admin-picture-settings', context).toggle();
-    });
-  }
-};
-
 })(jQuery);