123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- /**
- * @file
- * Provides dependent visibility for form items in CTools' ajax forms.
- *
- * To your $form item definition add:
- * - '#process' => array('ctools_process_dependency'),
- * - '#dependency' => array('id-of-form-item' => array(list, of, values, that,
- * make, this, item, show),
- *
- * Special considerations:
- * - Radios are harder. Because Drupal doesn't give radio groups individual IDs,
- * use 'radio:name-of-radio'.
- *
- * - Checkboxes don't have their own id, so you need to add one in a div
- * around the checkboxes via #prefix and #suffix. You actually need to add TWO
- * divs because it's the parent that gets hidden. Also be sure to retain the
- * 'expand_checkboxes' in the #process array, because the CTools process will
- * override it.
- */
- (function ($) {
- Drupal.CTools = Drupal.CTools || {};
- Drupal.CTools.dependent = {};
- Drupal.CTools.dependent.bindings = {};
- Drupal.CTools.dependent.activeBindings = {};
- Drupal.CTools.dependent.activeTriggers = [];
- Drupal.CTools.dependent.inArray = function(array, search_term) {
- var i = array.length;
- while (i--) {
- if (array[i] == search_term) {
- return true;
- }
- }
- return false;
- }
- Drupal.CTools.dependent.autoAttach = function() {
- // Clear active bindings and triggers.
- for (i in Drupal.CTools.dependent.activeTriggers) {
- $(Drupal.CTools.dependent.activeTriggers[i]).unbind('change.ctools-dependent');
- }
- Drupal.CTools.dependent.activeTriggers = [];
- Drupal.CTools.dependent.activeBindings = {};
- Drupal.CTools.dependent.bindings = {};
- if (!Drupal.settings.CTools) {
- return;
- }
- // Iterate through all relationships
- for (id in Drupal.settings.CTools.dependent) {
- // Test to make sure the id even exists; this helps clean up multiple
- // AJAX calls with multiple forms.
- // Drupal.CTools.dependent.activeBindings[id] is a boolean,
- // whether the binding is active or not. Defaults to no.
- Drupal.CTools.dependent.activeBindings[id] = 0;
- // Iterate through all possible values
- for(bind_id in Drupal.settings.CTools.dependent[id].values) {
- // This creates a backward relationship. The bind_id is the ID
- // of the element which needs to change in order for the id to hide or become shown.
- // The id is the ID of the item which will be conditionally hidden or shown.
- // Here we're setting the bindings for the bind
- // id to be an empty array if it doesn't already have bindings to it
- if (!Drupal.CTools.dependent.bindings[bind_id]) {
- Drupal.CTools.dependent.bindings[bind_id] = [];
- }
- // Add this ID
- Drupal.CTools.dependent.bindings[bind_id].push(id);
- // Big long if statement.
- // Drupal.settings.CTools.dependent[id].values[bind_id] holds the possible values
- if (bind_id.substring(0, 6) == 'radio:') {
- var trigger_id = "input[name='" + bind_id.substring(6) + "']";
- }
- else {
- var trigger_id = '#' + bind_id;
- }
- Drupal.CTools.dependent.activeTriggers.push(trigger_id);
- if ($(trigger_id).attr('type') == 'checkbox') {
- $(trigger_id).siblings('label').addClass('hidden-options');
- }
- var getValue = function(item, trigger) {
- if ($(trigger).size() == 0) {
- return null;
- }
- if (item.substring(0, 6) == 'radio:') {
- var val = $(trigger + ':checked').val();
- }
- else {
- switch ($(trigger).attr('type')) {
- case 'checkbox':
- // **This check determines if using a jQuery version 1.7 or newer which requires the use of the prop function instead of the attr function when not called on an attribute
- if ($().prop) {
- var val = $(trigger).prop('checked') ? true : false;
- }
- else {
- var val = $(trigger).attr('checked') ? true : false;
- }
- if (val) {
- $(trigger).siblings('label').removeClass('hidden-options').addClass('expanded-options');
- }
- else {
- $(trigger).siblings('label').removeClass('expanded-options').addClass('hidden-options');
- }
- break;
- default:
- var val = $(trigger).val();
- }
- }
- return val;
- }
- var setChangeTrigger = function(trigger_id, bind_id) {
- // Triggered when change() is clicked.
- var changeTrigger = function() {
- var val = getValue(bind_id, trigger_id);
- if (val == null) {
- return;
- }
- for (i in Drupal.CTools.dependent.bindings[bind_id]) {
- var id = Drupal.CTools.dependent.bindings[bind_id][i];
- // Fix numerous errors
- if (typeof id != 'string') {
- continue;
- }
- // This bit had to be rewritten a bit because two properties on the
- // same set caused the counter to go up and up and up.
- if (!Drupal.CTools.dependent.activeBindings[id]) {
- Drupal.CTools.dependent.activeBindings[id] = {};
- }
- if (val != null && Drupal.CTools.dependent.inArray(Drupal.settings.CTools.dependent[id].values[bind_id], val)) {
- Drupal.CTools.dependent.activeBindings[id][bind_id] = 'bind';
- }
- else {
- delete Drupal.CTools.dependent.activeBindings[id][bind_id];
- }
- var len = 0;
- for (i in Drupal.CTools.dependent.activeBindings[id]) {
- len++;
- }
- var $original = $('#' + id);
- if ($original.is('fieldset') || $original.is('textarea')) {
- continue;
- }
- var object = $original.parent();
- if (Drupal.settings.CTools.dependent[id].type == 'disable') {
- if (Drupal.settings.CTools.dependent[id].num <= len) {
- // Show if the element if criteria is matched
- // **This check determines if using a jQuery version 1.7 or newer which requires the use of the prop function instead of the attr function when not called on an attribute
- if (typeof $().prop == 'function') {
- object.prop('disabled', false);
- object.addClass('dependent-options');
- object.children().prop('disabled', false);
- }
- else {
- object.attr('disabled', false);
- object.addClass('dependent-options');
- object.children().attr('disabled', false);
- }
- }
- else {
- // Otherwise hide. Use css rather than hide() because hide()
- // does not work if the item is already hidden, for example,
- // in a collapsed fieldset.
- // **This check determines if using a jQuery version 1.7 or newer which requires the use of the prop function instead of the attr function when not called on an attribute
- if (typeof $().prop == 'function') {
- object.prop('disabled', true);
- object.children().prop('disabled', true);
- }
- else {
- object.attr('disabled', true);
- object.children().attr('disabled', true);
- }
- }
- }
- else {
- if (Drupal.settings.CTools.dependent[id].num <= len) {
- // Show if the element if criteria is matched
- object.show(0);
- object.addClass('dependent-options');
- }
- else {
- // Otherwise hide. Use css rather than hide() because hide()
- // does not work if the item is already hidden, for example,
- // in a collapsed fieldset.
- object.css('display', 'none');
- }
- }
- }
- }
- $(trigger_id).bind('change.ctools-dependent', function() {
- // Trigger the internal change function
- // the attr('id') is used because closures are more confusing
- changeTrigger(trigger_id, bind_id);
- });
- // Trigger initial reaction
- changeTrigger(trigger_id, bind_id);
- }
- setChangeTrigger(trigger_id, bind_id);
- }
- }
- }
- Drupal.behaviors.CToolsDependent = {
- attach: function (context) {
- Drupal.CTools.dependent.autoAttach();
- // Really large sets of fields are too slow with the above method, so this
- // is a sort of hacked one that's faster but much less flexible.
- $("select.ctools-master-dependent")
- .once('ctools-dependent')
- .bind('change.ctools-dependent', function() {
- var val = $(this).val();
- if (val == 'all') {
- $('.ctools-dependent-all').show(0);
- }
- else {
- $('.ctools-dependent-all').hide(0);
- $('.ctools-dependent-' + val).show(0);
- }
- })
- .trigger('change.ctools-dependent');
- }
- }
- })(jQuery);
|