multipage.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. (function ($) {
  2. /**
  3. * This script transforms a set of wrappers into a stack of multipage pages.
  4. * Another pane can be entered by clicking next/previous.
  5. *
  6. */
  7. Drupal.behaviors.MultiPage = {
  8. attach: function (context) {
  9. $('.multipage-panes', context).once('multipage', function () {
  10. var focusID = $(':hidden.multipage-active-control', this).val();
  11. var paneWithFocus;
  12. // Check if there are some wrappers that can be converted to multipages.
  13. var $panes = $('> div.field-group-multipage', this);
  14. var $form = $panes.parents('form');
  15. if ($panes.length == 0) {
  16. return;
  17. }
  18. // Create the next/previous controls.
  19. var $controls;
  20. // Transform each div.multipage-pane into a multipage with controls.
  21. $panes.each(function () {
  22. $controls = $('<div class="multipage-controls-list clearfix"></div>');
  23. $(this).append($controls);
  24. // Check if the submit button needs to move to the latest pane.
  25. if (Drupal.settings.field_group.multipage_move_submit && $('.form-actions').length) {
  26. $('.form-actions', $form).remove().appendTo($($controls, $panes.last()));
  27. }
  28. var multipageControl = new Drupal.multipageControl({
  29. title: $('> .multipage-pane-title', this).text(),
  30. wrapper: $(this),
  31. has_next: $(this).next().length,
  32. has_previous: $(this).prev().length
  33. });
  34. $controls.append(multipageControl.item);
  35. $(this)
  36. .addClass('multipage-pane')
  37. .data('multipageControl', multipageControl);
  38. if (this.id == focusID) {
  39. paneWithFocus = $(this);
  40. }
  41. });
  42. if (paneWithFocus === undefined) {
  43. // If the current URL has a fragment and one of the tabs contains an
  44. // element that matches the URL fragment, activate that tab.
  45. var hash = window.location.hash.replace(/[=%;,\/]/g, "");
  46. if (hash !== '#' && $(hash, this).length) {
  47. paneWithFocus = $(window.location.hash, this).closest('.multipage-pane');
  48. }
  49. else {
  50. paneWithFocus = $('multipage-open', this).length ? $('multipage-open', this) : $('> .multipage-pane:first', this);
  51. }
  52. }
  53. if (paneWithFocus !== undefined) {
  54. paneWithFocus.data('multipageControl').focus();
  55. }
  56. });
  57. }
  58. };
  59. /**
  60. * The multipagePane object represents a single div as a page.
  61. *
  62. * @param settings
  63. * An object with the following keys:
  64. * - title: The name of the tab.
  65. * - wrapper: The jQuery object of the <div> that is the tab pane.
  66. */
  67. Drupal.multipageControl = function (settings) {
  68. var self = this;
  69. var controls = Drupal.theme('multipage', settings);
  70. $.extend(self, settings, controls);
  71. this.nextLink.click(function (e) {
  72. e.preventDefault();
  73. self.nextPage();
  74. });
  75. this.previousLink.click(function (e) {
  76. e.preventDefault();
  77. self.previousPage();
  78. });
  79. /*
  80. // Keyboard events added:
  81. // Pressing the Enter key will open the tab pane.
  82. this.nextLink.keydown(function(event) {
  83. if (event.keyCode == 13) {
  84. self.focus();
  85. // Set focus on the first input field of the visible wrapper/tab pane.
  86. $("div.multipage-pane :input:visible:enabled:first").focus();
  87. return false;
  88. }
  89. });
  90. // Pressing the Enter key lets you leave the tab again.
  91. this.wrapper.keydown(function(event) {
  92. // Enter key should not trigger inside <textarea> to allow for multi-line entries.
  93. if (event.keyCode == 13 && event.target.nodeName != "TEXTAREA") {
  94. // Set focus on the selected tab button again.
  95. $(".multipage-tab-button.selected a").focus();
  96. return false;
  97. }
  98. });
  99. */
  100. };
  101. Drupal.multipageControl.prototype = {
  102. /**
  103. * Displays the tab's content pane.
  104. */
  105. focus: function () {
  106. this.wrapper
  107. .show()
  108. .siblings('div.multipage-pane')
  109. .each(function () {
  110. var tab = $(this).data('multipageControl');
  111. tab.wrapper.hide();
  112. })
  113. .end()
  114. .siblings(':hidden.multipage-active-control')
  115. .val(this.wrapper.attr('id'));
  116. // Mark the active control for screen readers.
  117. $('#active-multipage-control').remove();
  118. this.nextLink.after('<span id="active-multipage-control" class="element-invisible">' + Drupal.t('(active page)') + '</span>');
  119. },
  120. /**
  121. * Continues to the next page or step in the form.
  122. */
  123. nextPage: function () {
  124. this.wrapper.next().data('multipageControl').focus();
  125. $('html, body').scrollTop(this.wrapper.parents('.field-group-multipage-group-wrapper').offset().top);
  126. },
  127. /**
  128. * Returns to the previous page or step in the form.
  129. */
  130. previousPage: function () {
  131. this.wrapper.prev().data('multipageControl').focus();
  132. $('html, body').scrollTop(this.wrapper.parents('.field-group-multipage-group-wrapper').offset().top);
  133. },
  134. /**
  135. * Shows a horizontal tab pane.
  136. */
  137. tabShow: function () {
  138. // Display the tab.
  139. this.item.show();
  140. // Update .first marker for items. We need recurse from parent to retain the
  141. // actual DOM element order as jQuery implements sortOrder, but not as public
  142. // method.
  143. this.item.parent().children('.multipage-control').removeClass('first')
  144. .filter(':visible:first').addClass('first');
  145. // Display the wrapper.
  146. this.wrapper.removeClass('multipage-control-hidden').show();
  147. // Focus this tab.
  148. this.focus();
  149. return this;
  150. },
  151. /**
  152. * Hides a horizontal tab pane.
  153. */
  154. tabHide: function () {
  155. // Hide this tab.
  156. this.item.hide();
  157. // Update .first marker for items. We need recurse from parent to retain the
  158. // actual DOM element order as jQuery implements sortOrder, but not as public
  159. // method.
  160. this.item.parent().children('.multipage-control').removeClass('first')
  161. .filter(':visible:first').addClass('first');
  162. // Hide the wrapper.
  163. this.wrapper.addClass('horizontal-tab-hidden').hide();
  164. // Focus the first visible tab (if there is one).
  165. var $firstTab = this.wrapper.siblings('.multipage-pane:not(.multipage-control-hidden):first');
  166. if ($firstTab.length) {
  167. $firstTab.data('multipageControl').focus();
  168. }
  169. return this;
  170. }
  171. };
  172. /**
  173. * Theme function for a multipage control.
  174. *
  175. * @param settings
  176. * An object with the following keys:
  177. * - title: The name of the tab.
  178. * @return
  179. * This function has to return an object with at least these keys:
  180. * - item: The root tab jQuery element
  181. * - nextLink: The anchor tag that acts as the clickable area of the control
  182. * - nextTitle: The jQuery element that contains the group title
  183. * - previousLink: The anchor tag that acts as the clickable area of the control
  184. * - previousTitle: The jQuery element that contains the group title
  185. */
  186. Drupal.theme.prototype.multipage = function (settings) {
  187. var controls = {};
  188. controls.item = $('<span class="multipage-button"></span>');
  189. controls.previousLink = $('<input type="button" class="form-submit multipage-link-previous" value="" />');
  190. controls.previousTitle = Drupal.t('Previous page');
  191. controls.item.append(controls.previousLink.val(controls.previousTitle));
  192. controls.nextLink = $('<input type="button" class="form-submit multipage-link-next" value="" />');
  193. controls.nextTitle = Drupal.t('Next page');
  194. controls.item.append(controls.nextLink.val(controls.nextTitle));
  195. if (!settings.has_next) {
  196. controls.nextLink.hide();
  197. }
  198. if (!settings.has_previous) {
  199. controls.previousLink.hide();
  200. }
  201. return controls;
  202. };
  203. Drupal.FieldGroup = Drupal.FieldGroup || {};
  204. Drupal.FieldGroup.Effects = Drupal.FieldGroup.Effects || {};
  205. /**
  206. * Implements Drupal.FieldGroup.processHook().
  207. */
  208. Drupal.FieldGroup.Effects.processMultipage = {
  209. execute: function (context, settings, type) {
  210. if (type == 'form') {
  211. var $firstErrorItem = false;
  212. // Add required fields mark to any element containing required fields
  213. $('div.multipage-pane').each(function(i){
  214. if ($('.error', $(this)).length) {
  215. // Save first error item, for focussing it.
  216. if (!$firstErrorItem) {
  217. $firstErrorItem = $(this).data('multipageControl');
  218. }
  219. Drupal.FieldGroup.setGroupWithfocus($(this));
  220. $(this).data('multipageControl').focus();
  221. }
  222. });
  223. // Focus on first multipage that has an error.
  224. if ($firstErrorItem) {
  225. $firstErrorItem.focus();
  226. }
  227. }
  228. }
  229. }
  230. })(jQuery);