Userform progress improvements

css/UserForm.css

@@ -1,24 +1,33 @@
 /**
  * Lightweight base styles for the front-end form.
  */
-#userform-progress .step-buttons,
+.userform-progress .step-buttons,
 .step-navigation .step-buttons {
 	margin-left: 0;
 }
 
-#userform-progress .step-buttons .step-button-wrapper,
+.userform-progress .step-buttons {
+	position: relative;
+}
+
+.userform-progress .step-button-jump {
+	position: absolute;
+	top: 0;
+}
+
+.userform-progress .step-buttons .step-button-wrapper,
 .step-navigation .step-buttons .step-button-wrapper {
 	display: inline-block;
 	list-style-type: none;
 }
 
-#userform-progress .progress {
+.userform-progress .progress {
 	position: relative;
 	height: 1em;
 	background: #eee;
 }
 
-#userform-progress .progress .progress-bar {
+.userform-progress .progress .progress-bar {
 	position: absolute;
 	height: 1em;
 	background: #666;

javascript/UserForm.js

@@ -354,6 +354,15 @@ jQuery(function ($) {
 			self.update(newStep + 1);
 		});
 
+		// Spaces out the steps below progress bar evenly
+		this.$buttons.each(function (index, button) {
+			var $button = $(button),
+				leftPercent = (100 / (self.$buttons.length - 1) * index + '%'),
+				buttonOffset = -1 * ($button.innerWidth() / 2);
+
+			$button.css({left: leftPercent, marginLeft: buttonOffset});
+		});
+
 		this.update(1);
 
 		return this;
@@ -365,6 +374,8 @@ jQuery(function ($) {
 	 * @desc Update the progress element to show a new step.
 	 */
 	ProgressBar.prototype.update = function (newStep) {
+		var $newStepElement = $($('.form-step')[newStep - 1]);
+
 		// Update elements that contain the current step number.
 		this.$el.find('.current-step-number').each(function (i, element) {
 			$(element).text(newStep);
@@ -390,8 +401,11 @@ jQuery(function ($) {
 			$item.removeClass('current');
 		});
 
+		// Update the progress bar's title with the new step's title.
+		this.$el.find('.progress-title').text($newStepElement.data('title'));
+
 		// Update the width of the progress bar.
-		this.$el.find('.progress-bar').width(newStep / this.$buttons.length * 100 + '%');
+		this.$el.find('.progress-bar').width((newStep - 1) / (this.$buttons.length - 1) * 100 + '%');
 	};
 
 	/**
@@ -426,6 +440,9 @@ jQuery(function ($) {
 			});
 		}
 
+		// Display all the things that are hidden when JavaScript is disabled.
+		$('.userform-progress, .step-navigation').attr('aria-hidden', false).show();
+
 		userform = new UserForm($('.userform'));
 		progressBar = new ProgressBar($('#userform-progress'));
 
@@ -439,11 +456,6 @@ jQuery(function ($) {
 			});
 		}
 
-		// Display all the things that are hidden when JavaScript is disabled.
-		$.each(['#userform-progress', '.step-navigation'], function (i, selector) {
-			$(selector).attr('aria-hidden', false).show();
-		});
-
 		// Initialise the form steps.
 		userform.$el.find('.form-step').each(function (i, element) {
 			var step = new FormStep(element);

templates/Includes/UserFormProgress.ss

@@ -1,6 +1,7 @@
 <% cached "UserForms_Navigation", $LastEdited %>
 <% if $NumberOfSteps.Count > "1" %>
-<div id="userform-progress" aria-hidden="true" style="display:none;">
+<div id="userform-progress" class="userform-progress" aria-hidden="true" style="display:none;">
+	<h2 class="progress-title"></h2>
 	<p>Step <span class="current-step-number">1</span> of $NumberOfSteps.Count</p>
 	<div class="progress">
 		<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div>

templates/UserForm.ss

@@ -12,7 +12,7 @@
 	<% if $Legend %><legend>$Legend</legend><% end_if %>
 
 	<% if $FormFields%><% loop $FormFields %>
-		<fieldset class="form-step">
+		<fieldset class="form-step" data-title="$Title">
 			<% if $Top.DisplayErrorMessagesAtTop %>
 				<fieldset class="error-container" aria-hidden="true" style="display: none;">
 					<div>
@@ -22,11 +22,9 @@
 				</fieldset>
 			<% end_if %>
 
-			<h2>$Title</h2>
-
-			<% loop $Children %>
-				$FieldHolder
-			<% end_loop %>
+		<% loop $Children %>
+		$FieldHolder
+		<% end_loop %>
 
 			<% include UserFormStepNav ContainingPage=$Top %>
 		</fieldset>