states-show.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. /**
  2. * @file
  3. * Custom state for handling visibility
  4. */
  5. /**
  6. * Add a new state to Drupal #states. We use this to toggle element-invisible
  7. * to show/hidden #states elements. This allows elements to be visible to
  8. * screen readers.
  9. *
  10. * To use:
  11. * $form['my_form_field'] = array(
  12. * ..
  13. * // Only show this field if 'some_other_field' is checked.
  14. * '#states => array(
  15. * 'show' => array(
  16. * 'some-other-field' => array('checked' => TRUE),
  17. * ),
  18. * ),
  19. * ..
  20. * // Required to load the 'show' state handler.
  21. * '#attached' => array(
  22. * 'js' => array(ctools_attach_js('states-show')),
  23. * ),
  24. * );
  25. */
  26. (function ($) {
  27. 'use strict';
  28. Drupal.states.State.aliases.hidden = '!show';
  29. // Show/hide form items by toggling the 'element-invisible' class. This is a
  30. // more accessible option than the core 'visible' state.
  31. $(document).bind('state:show', function(e) {
  32. if (e.trigger) {
  33. var element = $(e.target).closest('.form-item, .form-submit, .form-wrapper');
  34. element.toggle(e.value);
  35. e.value === true ? element.removeClass('element-invisible') : element.addClass('element-invisible');
  36. }
  37. });
  38. })(jQuery);