field_group.js 8.1 KB

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