materio-base-d7/multipage/multipage.js

(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 clearfix"></div>');
        $(this).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 === undefined) {
        // 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 !== '#' && $(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 !== undefined) {
        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;
  var controls = Drupal.theme('multipage', settings);
  $.extend(self, settings, controls);

  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.after('<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();
    $('html, body').scrollTop(this.wrapper.parents('.field-group-multipage-group-wrapper').offset().top);
  },
  
  /**
   * Returns to the previous page or step in the form.
   */
  previousPage: function () {
    this.wrapper.prev().data('multipageControl').focus();
    $('html, body').scrollTop(this.wrapper.parents('.field-group-multipage-group-wrapper').offset().top);
  },

  /**
   * 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.previousLink = $('<input type="button" class="form-submit multipage-link-previous" value="" />');
  controls.previousTitle = Drupal.t('Previous page');
  controls.item.append(controls.previousLink.val(controls.previousTitle));  
  
  controls.nextLink = $('<input type="button" class="form-submit multipage-link-next" value="" />');
  controls.nextTitle = Drupal.t('Next page');
  controls.item.append(controls.nextLink.val(controls.nextTitle));
  
  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') {
      
      var $firstErrorItem = false;
      
      // Add required fields mark to any element containing required fields
      $('div.multipage-pane').each(function(i){
        if ($('.error', $(this)).length) {
          
          // Save first error item, for focussing it.
          if (!$firstErrorItem) {
            $firstErrorItem = $(this).data('multipageControl');
          }          
          
          Drupal.FieldGroup.setGroupWithfocus($(this));
          $(this).data('multipageControl').focus();
        }
      });

      // Focus on first multipage that has an error.
      if ($firstErrorItem) {
        $firstErrorItem.focus();
      }
      
    }
  }
}

})(jQuery);