first import

sites/all/modules/field_group/multipage/multipage.css

@@ -0,0 +1,125 @@
+.multipage-controls-list #edit-actions {
+  float: left;
+}
+
+.multipage-button {    
+  margin-bottom: 1em;
+  margin-top: 0;
+  float: left;
+  line-height: 36px;
+}
+
+.multipage-button a {    
+  padding-top: 10px;
+}
+
+.multipage-counter{
+  float: right;
+  margin-right: 5px;
+  height: 0;
+  position: relative;
+  top: 1.8em;
+  line-height: 30px;
+  font: 12px arial,sans-serif;
+  font-weight: bold;
+  color:#666;
+}
+
+a.multipage-link-previous{
+  font: 12px arial,sans-serif;
+  font-weight: bold;
+  color:#666;
+  -webkit-transition: color 218ms;
+  -moz-transition: color 218ms;
+  -o-transition: color 218ms;
+  transition: color 218ms;
+}
+
+a.multipage-link-previous:hover{
+  text-decoration:none;
+  color: #333;
+}
+
+.multipage-controls-list input.form-submit{
+  background:none;
+  border: none;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font: 12px arial,sans-serif;
+  font-weight: bold;
+  color: #666;
+  text-shadow: 0 1px 0 white;
+  padding: 7px 12px;
+  background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
+  -o-transition: border-top-color 0.218s,border-right-color 0.218s,border-bottom-color 0.218s,border-left-color .218s;
+  -webkit-transition: border-color .218s;
+}
+
+.multipage-controls-list input.form-submit:hover{
+  color:#333;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+  border-color: #939393;
+}
+
+.multipage-controls-list input.form-submit:active{
+  background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F1F1F1),to(whiteSmoke));
+}
+
+.multipage-controls-list input#edit-submit{
+  background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
+  background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
+  color: white;
+  text-shadow: none;
+  text-transform: uppercase;
+  min-width: 79px;
+}
+
+.multipage-controls-list input#edit-submit:hover{
+  background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
+  background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
+  color: white;
+  text-shadow: none;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+}
+
+.multipage-controls-list input#edit-submit:active{
+  background: #4D90FE;
+  border-color: #2F5BB7;
+}
+
+.multipage-controls-list input#edit-delete{
+  background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
+  background-image: -o-linear-gradient(top,#dd4b39,#d14836);
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
+  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
+  color: white;
+  text-shadow: none;
+
+}
+
+.multipage-controls-list input#edit-delete:hover{
+  background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
+  background-image: -o-linear-gradient(top,#dd4b39,#c53727);
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#c53727));
+  border: 1px solid #B0281A!important;
+  border-bottom: 1px solid #AF301F!important;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
+  color: white;
+}
+
+.multipage-controls-list input#edit-delete:active{
+  background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
+  background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#b0281a));
+  border: 1px solid #992A1b!important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}

sites/all/modules/field_group/multipage/multipage.js

@@ -0,0 +1,241 @@
+(function ($) {
+
+/**
+ * This script transforms a set of wrappers into a stack of multipage pages. 
+ * Another pane can be entered by clicking next/previous.
+ *
+ */
+Drupal.behaviors.MultiPage = {
+  attach: function (context) {
+    $('.multipage-panes', context).once('multipage', function () {
+
+      var focusID = $(':hidden.multipage-active-control', this).val();
+      var paneWithFocus;
+
+      // Check if there are some wrappers that can be converted to multipages.
+      var $panes = $('> div.field-group-multipage', this);
+      var $form = $panes.parents('form');
+      if ($panes.length == 0) {
+        return;
+      }
+
+      // Create the next/previous controls.
+      var $controls;
+
+      // Transform each div.multipage-pane into a multipage with controls.
+      $panes.each(function () {
+        
+        $controls = $('<div class="multipage-controls-list"></div>');
+        $(this).append('<div class="multipage-controls clearfix"></div>').append($controls);
+        
+        // Check if the submit button needs to move to the latest pane.
+        if (Drupal.settings.field_group.multipage_move_submit && $('.form-actions').length) {
+          $('.form-actions', $form).remove().appendTo($($controls, $panes.last()));
+        }
+        
+        var multipageControl = new Drupal.multipageControl({
+          title: $('> .multipage-pane-title', this).text(),
+          wrapper: $(this),
+          has_next: $(this).next().length,
+          has_previous: $(this).prev().length
+        });
+        
+        $controls.append(multipageControl.item);
+        $(this)
+          .addClass('multipage-pane')
+          .data('multipageControl', multipageControl);
+
+        if (this.id == focusID) {
+          paneWithFocus = $(this);
+        }
+        
+      });
+      
+      if (!paneWithFocus) {
+        // If the current URL has a fragment and one of the tabs contains an
+        // element that matches the URL fragment, activate that tab.
+        if (window.location.hash && $(window.location.hash, this).length) {
+          paneWithFocus = $(window.location.hash, this).closest('.multipage-pane');
+        }
+        else {
+          paneWithFocus = $('multipage-open', this).length ? $('multipage-open', this) : $('> .multipage-pane:first', this);
+        }
+      }
+      if (paneWithFocus.length) {
+        paneWithFocus.data('multipageControl').focus();
+      }
+    });
+  }
+};
+
+/**
+ * The multipagePane object represents a single div as a page.
+ *
+ * @param settings
+ *   An object with the following keys:
+ *   - title: The name of the tab.
+ *   - wrapper: The jQuery object of the <div> that is the tab pane.
+ */
+Drupal.multipageControl = function (settings) {
+  var self = this;
+  $.extend(this, settings, Drupal.theme('multipage', settings));
+
+  this.nextLink.click(function () {
+    self.nextPage();
+    return false;
+  });
+  
+  this.previousLink.click(function () {
+    self.previousPage();
+    return false;
+  });
+  
+/*
+  // Keyboard events added:
+  // Pressing the Enter key will open the tab pane.
+  this.nextLink.keydown(function(event) {
+    if (event.keyCode == 13) {
+      self.focus();
+      // Set focus on the first input field of the visible wrapper/tab pane.
+      $("div.multipage-pane :input:visible:enabled:first").focus();
+      return false;
+    }
+  });
+
+  // Pressing the Enter key lets you leave the tab again.
+  this.wrapper.keydown(function(event) {
+    // Enter key should not trigger inside <textarea> to allow for multi-line entries.
+    if (event.keyCode == 13 && event.target.nodeName != "TEXTAREA") {
+      // Set focus on the selected tab button again.
+      $(".multipage-tab-button.selected a").focus();
+      return false;
+    }
+  });
+*/
+};
+
+Drupal.multipageControl.prototype = {
+    
+  /**
+   * Displays the tab's content pane.
+   */
+  focus: function () {
+    this.wrapper
+      .show()
+      .siblings('div.multipage-pane')
+        .each(function () {
+          var tab = $(this).data('multipageControl');
+          tab.wrapper.hide();
+        })
+        .end()
+      .siblings(':hidden.multipage-active-control')
+        .val(this.wrapper.attr('id'));
+    // Mark the active control for screen readers.
+    $('#active-multipage-control').remove();
+    this.nextLink.append('<span id="active-multipage-control" class="element-invisible">' + Drupal.t('(active page)') + '</span>');
+  },
+  
+  /**
+   * Continues to the next page or step in the form.
+   */
+  nextPage: function () {
+    this.wrapper.next().data('multipageControl').focus();
+  },
+  
+  /**
+   * Returns to the previous page or step in the form.
+   */
+  previousPage: function () {
+    this.wrapper.prev().data('multipageControl').focus();
+  },
+
+  /**
+   * Shows a horizontal tab pane.
+   */
+  tabShow: function () {
+    // Display the tab.
+    this.item.show();
+    // Update .first marker for items. We need recurse from parent to retain the
+    // actual DOM element order as jQuery implements sortOrder, but not as public
+    // method.
+    this.item.parent().children('.multipage-control').removeClass('first')
+      .filter(':visible:first').addClass('first');
+    // Display the wrapper.
+    this.wrapper.removeClass('multipage-control-hidden').show();
+    // Focus this tab.
+    this.focus();
+    return this;
+  },
+
+  /**
+   * Hides a horizontal tab pane.
+   */
+  tabHide: function () {
+    // Hide this tab.
+    this.item.hide();
+    // Update .first marker for items. We need recurse from parent to retain the
+    // actual DOM element order as jQuery implements sortOrder, but not as public
+    // method.
+    this.item.parent().children('.multipage-control').removeClass('first')
+      .filter(':visible:first').addClass('first');
+    // Hide the wrapper.
+    this.wrapper.addClass('horizontal-tab-hidden').hide();
+    // Focus the first visible tab (if there is one).
+    var $firstTab = this.wrapper.siblings('.multipage-pane:not(.multipage-control-hidden):first');
+    if ($firstTab.length) {
+      $firstTab.data('multipageControl').focus();
+    }
+    return this;
+  }
+};
+
+/**
+ * Theme function for a multipage control.
+ *
+ * @param settings
+ *   An object with the following keys:
+ *   - title: The name of the tab.
+ * @return
+ *   This function has to return an object with at least these keys:
+ *   - item: The root tab jQuery element
+ *   - nextLink: The anchor tag that acts as the clickable area of the control
+ *   - nextTitle: The jQuery element that contains the group title
+ *   - previousLink: The anchor tag that acts as the clickable area of the control
+ *   - previousTitle: The jQuery element that contains the group title
+ */
+Drupal.theme.prototype.multipage = function (settings) {
+  var controls = {};
+  controls.item = $('<span class="multipage-button"></span>');
+  controls.item.append(controls.nextLink = $('<input type="button" class="form-submit multipage-link-next" value="" />').val(controls.nextTitle = Drupal.t('Next page')));
+  controls.item.append(controls.previousLink = $('<input type="button" class="form-submit multipage-link-previous" value="" />').val(controls.nextTitle = Drupal.t('Previous')));
+  if (!settings.has_next) {
+    controls.nextLink.hide();
+  }
+  if (!settings.has_previous) {
+    controls.previousLink.hide();
+  }
+  return controls;
+};
+
+
+Drupal.FieldGroup = Drupal.FieldGroup || {};
+Drupal.FieldGroup.Effects = Drupal.FieldGroup.Effects || {};
+
+/**
+ * Implements Drupal.FieldGroup.processHook().
+ */
+Drupal.FieldGroup.Effects.processMultipage = {
+  execute: function (context, settings, type) {
+    if (type == 'form') {
+      // Add required fields mark to any element containing required fields
+      $('div.multipage-pane').each(function(i){
+        if ($('.error', $(this)).length) {
+          Drupal.FieldGroup.setGroupWithfocus($(this));
+          $(this).data('multipageControl').focus();
+        }
+      });
+    }
+  }
+}
+
+})(jQuery);