field_group.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. (function($) {
  2. /**
  3. * Drupal FieldGroup object.
  4. */
  5. Drupal.FieldGroup = Drupal.FieldGroup || {};
  6. Drupal.FieldGroup.Effects = Drupal.FieldGroup.Effects || {};
  7. Drupal.FieldGroup.groupWithfocus = null;
  8. Drupal.FieldGroup.setGroupWithfocus = function(element) {
  9. element.css({display: 'block'});
  10. Drupal.FieldGroup.groupWithfocus = element;
  11. }
  12. /**
  13. * Implements Drupal.FieldGroup.processHook().
  14. */
  15. Drupal.FieldGroup.Effects.processFieldset = {
  16. execute: function (context, settings, type) {
  17. if (type == 'form') {
  18. // Add required fields mark to any fieldsets containing required fields
  19. $('fieldset.fieldset', context).once('fieldgroup-effects', function(i) {
  20. if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
  21. $('legend span.fieldset-legend', $(this)).eq(0).append(' ').append($('.form-required').eq(0).clone());
  22. }
  23. if ($('.error', $(this)).length) {
  24. $('legend span.fieldset-legend', $(this)).eq(0).addClass('error');
  25. Drupal.FieldGroup.setGroupWithfocus($(this));
  26. }
  27. });
  28. }
  29. }
  30. }
  31. /**
  32. * Implements Drupal.FieldGroup.processHook().
  33. */
  34. Drupal.FieldGroup.Effects.processAccordion = {
  35. execute: function (context, settings, type) {
  36. $('div.field-group-accordion-wrapper', context).once('fieldgroup-effects', function () {
  37. var wrapper = $(this);
  38. wrapper.accordion({
  39. autoHeight: false,
  40. active: '.field-group-accordion-active',
  41. collapsible: true,
  42. changestart: function(event, ui) {
  43. if ($(this).hasClass('effect-none')) {
  44. ui.options.animated = false;
  45. }
  46. else {
  47. ui.options.animated = 'slide';
  48. }
  49. }
  50. });
  51. if (type == 'form') {
  52. var $firstErrorItem = false;
  53. // Add required fields mark to any element containing required fields
  54. wrapper.find('div.field-group-accordion-item').each(function(i) {
  55. if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
  56. $('h3.ui-accordion-header a').eq(i).append(' ').append($('.form-required').eq(0).clone());
  57. }
  58. if ($('.error', $(this)).length) {
  59. // Save first error item, for focussing it.
  60. if (!$firstErrorItem) {
  61. $firstErrorItem = $(this).parent().accordion("activate" , i);
  62. }
  63. $('h3.ui-accordion-header').eq(i).addClass('error');
  64. }
  65. });
  66. // Save first error item, for focussing it.
  67. if (!$firstErrorItem) {
  68. $('.ui-accordion-content-active', $firstErrorItem).css({height: 'auto', width: 'auto', display: 'block'});
  69. }
  70. }
  71. });
  72. }
  73. }
  74. /**
  75. * Implements Drupal.FieldGroup.processHook().
  76. */
  77. Drupal.FieldGroup.Effects.processHtabs = {
  78. execute: function (context, settings, type) {
  79. if (type == 'form') {
  80. // Add required fields mark to any element containing required fields
  81. $('fieldset.horizontal-tabs-pane', context).once('fieldgroup-effects', function(i) {
  82. if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
  83. $(this).data('horizontalTab').link.find('strong:first').after($('.form-required').eq(0).clone()).after(' ');
  84. }
  85. if ($('.error', $(this)).length) {
  86. $(this).data('horizontalTab').link.parent().addClass('error');
  87. Drupal.FieldGroup.setGroupWithfocus($(this));
  88. $(this).data('horizontalTab').focus();
  89. }
  90. });
  91. }
  92. }
  93. }
  94. /**
  95. * Implements Drupal.FieldGroup.processHook().
  96. */
  97. Drupal.FieldGroup.Effects.processTabs = {
  98. execute: function (context, settings, type) {
  99. if (type == 'form') {
  100. // Add required fields mark to any fieldsets containing required fields
  101. $('fieldset.vertical-tabs-pane', context).once('fieldgroup-effects', function(i) {
  102. if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
  103. $(this).data('verticalTab').link.find('strong:first').after($('.form-required').eq(0).clone()).after(' ');
  104. }
  105. if ($('.error', $(this)).length) {
  106. $(this).data('verticalTab').link.parent().addClass('error');
  107. Drupal.FieldGroup.setGroupWithfocus($(this));
  108. $(this).data('verticalTab').focus();
  109. }
  110. });
  111. }
  112. }
  113. }
  114. /**
  115. * Implements Drupal.FieldGroup.processHook().
  116. *
  117. * TODO clean this up meaning check if this is really
  118. * necessary.
  119. */
  120. Drupal.FieldGroup.Effects.processDiv = {
  121. execute: function (context, settings, type) {
  122. $('div.collapsible', context).once('fieldgroup-effects', function() {
  123. var $wrapper = $(this);
  124. // Turn the legend into a clickable link, but retain span.field-group-format-toggler
  125. // for CSS positioning.
  126. var $toggler = $('span.field-group-format-toggler:first', $wrapper);
  127. var $link = $('<a class="field-group-format-title" href="#"></a>');
  128. $link.prepend($toggler.contents());
  129. // Add required field markers if needed
  130. if ($(this).is('.required-fields') && $(this).find('.form-required').length > 0) {
  131. $link.append(' ').append($('.form-required').eq(0).clone());
  132. }
  133. $link.appendTo($toggler);
  134. // .wrapInner() does not retain bound events.
  135. $link.click(function () {
  136. var wrapper = $wrapper.get(0);
  137. // Don't animate multiple times.
  138. if (!wrapper.animating) {
  139. wrapper.animating = true;
  140. var speed = $wrapper.hasClass('speed-fast') ? 300 : 1000;
  141. if ($wrapper.hasClass('effect-none') && $wrapper.hasClass('speed-none')) {
  142. $('> .field-group-format-wrapper', wrapper).toggle();
  143. }
  144. else if ($wrapper.hasClass('effect-blind')) {
  145. $('> .field-group-format-wrapper', wrapper).toggle('blind', {}, speed);
  146. }
  147. else {
  148. $('> .field-group-format-wrapper', wrapper).toggle(speed);
  149. }
  150. wrapper.animating = false;
  151. }
  152. $wrapper.toggleClass('collapsed');
  153. return false;
  154. });
  155. });
  156. }
  157. };
  158. /**
  159. * Behaviors.
  160. */
  161. Drupal.behaviors.fieldGroup = {
  162. attach: function (context, settings) {
  163. settings.field_group = settings.field_group || Drupal.settings.field_group;
  164. if (settings.field_group == undefined) {
  165. return;
  166. }
  167. // Execute all of them.
  168. $.each(Drupal.FieldGroup.Effects, function (func) {
  169. // We check for a wrapper function in Drupal.field_group as
  170. // alternative for dynamic string function calls.
  171. var type = func.toLowerCase().replace("process", "");
  172. if (settings.field_group[type] != undefined && $.isFunction(this.execute)) {
  173. this.execute(context, settings, settings.field_group[type]);
  174. }
  175. });
  176. // Fixes css for fieldgroups under vertical tabs.
  177. $('.fieldset-wrapper .fieldset > legend').css({display: 'block'});
  178. $('.vertical-tabs fieldset.fieldset').addClass('default-fallback');
  179. // Add a new ID to each fieldset.
  180. $('.group-wrapper fieldset').each(function() {
  181. // Tats bad, but we have to keep the actual id to prevent layouts to break.
  182. var fieldgorupID = 'field_group-' + $(this).attr('id') + ' ' + $(this).attr('id');
  183. $(this).attr('id', fieldgorupID);
  184. })
  185. // Set the hash in url to remember last userselection.
  186. $('.group-wrapper ul li').each(function() {
  187. var fieldGroupNavigationListIndex = $(this).index();
  188. $(this).children('a').click(function() {
  189. var fieldset = $('.group-wrapper fieldset').get(fieldGroupNavigationListIndex);
  190. // Grab the first id, holding the wanted hashurl.
  191. var hashUrl = $(fieldset).attr('id').replace(/^field_group-/, '').split(' ')[0];
  192. window.location.hash = hashUrl;
  193. });
  194. });
  195. }
  196. };
  197. })(jQuery);