tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

Userform progress improvements

Browse Source
This commit is contained in:
scott1702 2015-08-10 13:28:06 +12:00
parent 01b07a73fb
commit 30548d793b
4 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/UserForm.css
View File

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

24
javascript/UserForm.js
View File

@ -354,6 +354,15 @@ jQuery(function ($) {
self.update(newStep + 1); 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); this.update(1);
return this; return this;
@ -365,6 +374,8 @@ jQuery(function ($) {
* @desc Update the progress element to show a new step. * @desc Update the progress element to show a new step.
*/ */
ProgressBar.prototype.update = function (newStep) { ProgressBar.prototype.update = function (newStep) {
var $newStepElement = $($('.form-step')[newStep - 1]);
// Update elements that contain the current step number. // Update elements that contain the current step number.
this.$el.find('.current-step-number').each(function (i, element) { this.$el.find('.current-step-number').each(function (i, element) {
$(element).text(newStep); $(element).text(newStep);
@ -390,8 +401,11 @@ jQuery(function ($) {
$item.removeClass('current'); $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. // 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')); userform = new UserForm($('.userform'));
progressBar = new ProgressBar($('#userform-progress')); 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. // Initialise the form steps.
userform.$el.find('.form-step').each(function (i, element) { userform.$el.find('.form-step').each(function (i, element) {
var step = new FormStep(element); var step = new FormStep(element);

3
templates/Includes/UserFormProgress.ss
View File

@ -1,6 +1,7 @@
<% cached "UserForms_Navigation", $LastEdited %> <% cached "UserForms_Navigation", $LastEdited %>
<% if $NumberOfSteps.Count > "1" %> <% 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> <p>Step <span class="current-step-number">1</span> of $NumberOfSteps.Count</p>
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div> <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div>

10
templates/UserForm.ss
View File

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