44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
/**
|
|
* @file
|
|
* Custom state for handling visibility
|
|
*/
|
|
|
|
/**
|
|
* Add a new state to Drupal #states. We use this to toggle element-invisible
|
|
* to show/hidden #states elements. This allows elements to be visible to
|
|
* screen readers.
|
|
*
|
|
* To use:
|
|
* $form['my_form_field'] = array(
|
|
* ..
|
|
* // Only show this field if 'some_other_field' is checked.
|
|
* '#states => array(
|
|
* 'show' => array(
|
|
* 'some-other-field' => array('checked' => TRUE),
|
|
* ),
|
|
* ),
|
|
* ..
|
|
* // Required to load the 'show' state handler.
|
|
* '#attached' => array(
|
|
* 'js' => array(ctools_attach_js('states-show')),
|
|
* ),
|
|
* );
|
|
*/
|
|
|
|
(function ($) {
|
|
'use strict';
|
|
|
|
Drupal.states.State.aliases.hidden = '!show';
|
|
|
|
// Show/hide form items by toggling the 'element-invisible' class. This is a
|
|
// more accessible option than the core 'visible' state.
|
|
$(document).bind('state:show', function(e) {
|
|
if (e.trigger) {
|
|
var element = $(e.target).closest('.form-item, .form-submit, .form-wrapper');
|
|
element.toggle(e.value);
|
|
e.value === true ? element.removeClass('element-invisible') : element.addClass('element-invisible');
|
|
}
|
|
});
|
|
|
|
})(jQuery);
|