dependent.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. /**
  2. * @file
  3. * Provides dependent visibility for form items in CTools' ajax forms.
  4. *
  5. * To your $form item definition add:
  6. * - '#process' => array('ctools_process_dependency'),
  7. * - '#dependency' => array('id-of-form-item' => array(list, of, values, that,
  8. * make, this, item, show),
  9. *
  10. * Special considerations:
  11. * - Radios are harder. Because Drupal doesn't give radio groups individual IDs,
  12. * use 'radio:name-of-radio'.
  13. *
  14. * - Checkboxes don't have their own id, so you need to add one in a div
  15. * around the checkboxes via #prefix and #suffix. You actually need to add TWO
  16. * divs because it's the parent that gets hidden. Also be sure to retain the
  17. * 'expand_checkboxes' in the #process array, because the CTools process will
  18. * override it.
  19. */
  20. (function ($) {
  21. Drupal.CTools = Drupal.CTools || {};
  22. Drupal.CTools.dependent = {};
  23. Drupal.CTools.dependent.bindings = {};
  24. Drupal.CTools.dependent.activeBindings = {};
  25. Drupal.CTools.dependent.activeTriggers = [];
  26. Drupal.CTools.dependent.inArray = function(array, search_term) {
  27. var i = array.length;
  28. while (i--) {
  29. if (array[i] == search_term) {
  30. return true;
  31. }
  32. }
  33. return false;
  34. }
  35. Drupal.CTools.dependent.autoAttach = function() {
  36. // Clear active bindings and triggers.
  37. for (i in Drupal.CTools.dependent.activeTriggers) {
  38. $(Drupal.CTools.dependent.activeTriggers[i]).unbind('change.ctools-dependent');
  39. }
  40. Drupal.CTools.dependent.activeTriggers = [];
  41. Drupal.CTools.dependent.activeBindings = {};
  42. Drupal.CTools.dependent.bindings = {};
  43. if (!Drupal.settings.CTools) {
  44. return;
  45. }
  46. // Iterate through all relationships
  47. for (id in Drupal.settings.CTools.dependent) {
  48. // Test to make sure the id even exists; this helps clean up multiple
  49. // AJAX calls with multiple forms.
  50. // Drupal.CTools.dependent.activeBindings[id] is a boolean,
  51. // whether the binding is active or not. Defaults to no.
  52. Drupal.CTools.dependent.activeBindings[id] = 0;
  53. // Iterate through all possible values
  54. for(bind_id in Drupal.settings.CTools.dependent[id].values) {
  55. // This creates a backward relationship. The bind_id is the ID
  56. // of the element which needs to change in order for the id to hide or become shown.
  57. // The id is the ID of the item which will be conditionally hidden or shown.
  58. // Here we're setting the bindings for the bind
  59. // id to be an empty array if it doesn't already have bindings to it
  60. if (!Drupal.CTools.dependent.bindings[bind_id]) {
  61. Drupal.CTools.dependent.bindings[bind_id] = [];
  62. }
  63. // Add this ID
  64. Drupal.CTools.dependent.bindings[bind_id].push(id);
  65. // Big long if statement.
  66. // Drupal.settings.CTools.dependent[id].values[bind_id] holds the possible values
  67. if (bind_id.substring(0, 6) == 'radio:') {
  68. var trigger_id = "input[name='" + bind_id.substring(6) + "']";
  69. }
  70. else {
  71. var trigger_id = '#' + bind_id;
  72. }
  73. Drupal.CTools.dependent.activeTriggers.push(trigger_id);
  74. if ($(trigger_id).attr('type') == 'checkbox') {
  75. $(trigger_id).siblings('label').addClass('hidden-options');
  76. }
  77. var getValue = function(item, trigger) {
  78. if ($(trigger).size() == 0) {
  79. return null;
  80. }
  81. if (item.substring(0, 6) == 'radio:') {
  82. var val = $(trigger + ':checked').val();
  83. }
  84. else {
  85. switch ($(trigger).attr('type')) {
  86. case 'checkbox':
  87. // **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
  88. if ($().prop) {
  89. var val = $(trigger).prop('checked') ? true : false;
  90. }
  91. else {
  92. var val = $(trigger).attr('checked') ? true : false;
  93. }
  94. if (val) {
  95. $(trigger).siblings('label').removeClass('hidden-options').addClass('expanded-options');
  96. }
  97. else {
  98. $(trigger).siblings('label').removeClass('expanded-options').addClass('hidden-options');
  99. }
  100. break;
  101. default:
  102. var val = $(trigger).val();
  103. }
  104. }
  105. return val;
  106. }
  107. var setChangeTrigger = function(trigger_id, bind_id) {
  108. // Triggered when change() is clicked.
  109. var changeTrigger = function() {
  110. var val = getValue(bind_id, trigger_id);
  111. if (val == null) {
  112. return;
  113. }
  114. for (i in Drupal.CTools.dependent.bindings[bind_id]) {
  115. var id = Drupal.CTools.dependent.bindings[bind_id][i];
  116. // Fix numerous errors
  117. if (typeof id != 'string') {
  118. continue;
  119. }
  120. // This bit had to be rewritten a bit because two properties on the
  121. // same set caused the counter to go up and up and up.
  122. if (!Drupal.CTools.dependent.activeBindings[id]) {
  123. Drupal.CTools.dependent.activeBindings[id] = {};
  124. }
  125. if (val != null && Drupal.CTools.dependent.inArray(Drupal.settings.CTools.dependent[id].values[bind_id], val)) {
  126. Drupal.CTools.dependent.activeBindings[id][bind_id] = 'bind';
  127. }
  128. else {
  129. delete Drupal.CTools.dependent.activeBindings[id][bind_id];
  130. }
  131. var len = 0;
  132. for (i in Drupal.CTools.dependent.activeBindings[id]) {
  133. len++;
  134. }
  135. var $original = $('#' + id);
  136. if ($original.is('fieldset') || $original.is('textarea')) {
  137. continue;
  138. }
  139. var object = $original.parent();
  140. if (Drupal.settings.CTools.dependent[id].type == 'disable') {
  141. if (Drupal.settings.CTools.dependent[id].num <= len) {
  142. // Show if the element if criteria is matched
  143. // **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
  144. if (typeof $().prop == 'function') {
  145. object.prop('disabled', false);
  146. object.addClass('dependent-options');
  147. object.children().prop('disabled', false);
  148. }
  149. else {
  150. object.attr('disabled', false);
  151. object.addClass('dependent-options');
  152. object.children().attr('disabled', false);
  153. }
  154. }
  155. else {
  156. // Otherwise hide. Use css rather than hide() because hide()
  157. // does not work if the item is already hidden, for example,
  158. // in a collapsed fieldset.
  159. // **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
  160. if (typeof $().prop == 'function') {
  161. object.prop('disabled', true);
  162. object.children().prop('disabled', true);
  163. }
  164. else {
  165. object.attr('disabled', true);
  166. object.children().attr('disabled', true);
  167. }
  168. }
  169. }
  170. else {
  171. if (Drupal.settings.CTools.dependent[id].num <= len) {
  172. // Show if the element if criteria is matched
  173. object.show(0);
  174. object.addClass('dependent-options');
  175. }
  176. else {
  177. // Otherwise hide. Use css rather than hide() because hide()
  178. // does not work if the item is already hidden, for example,
  179. // in a collapsed fieldset.
  180. object.css('display', 'none');
  181. }
  182. }
  183. }
  184. }
  185. $(trigger_id).bind('change.ctools-dependent', function() {
  186. // Trigger the internal change function
  187. // the attr('id') is used because closures are more confusing
  188. changeTrigger(trigger_id, bind_id);
  189. });
  190. // Trigger initial reaction
  191. changeTrigger(trigger_id, bind_id);
  192. }
  193. setChangeTrigger(trigger_id, bind_id);
  194. }
  195. }
  196. }
  197. Drupal.behaviors.CToolsDependent = {
  198. attach: function (context) {
  199. Drupal.CTools.dependent.autoAttach();
  200. // Really large sets of fields are too slow with the above method, so this
  201. // is a sort of hacked one that's faster but much less flexible.
  202. $("select.ctools-master-dependent")
  203. .once('ctools-dependent')
  204. .bind('change.ctools-dependent', function() {
  205. var val = $(this).val();
  206. if (val == 'all') {
  207. $('.ctools-dependent-all').show(0);
  208. }
  209. else {
  210. $('.ctools-dependent-all').hide(0);
  211. $('.ctools-dependent-' + val).show(0);
  212. }
  213. })
  214. .trigger('change.ctools-dependent');
  215. }
  216. }
  217. })(jQuery);