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

Update the progress bar

Browse Source
This commit is contained in:
David Craig 2015-08-06 13:40:09 +12:00 committed by Damian Mooyman
parent f1c1ec67ec
commit c58d15fc67
2 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
javascript/UserForm_frontend.js
View File

@ -25,7 +25,7 @@ jQuery(function ($) {
}); });
// Listen for events triggered by the progress bar. // Listen for events triggered by the progress bar.
this.$el.on('userform.progress.jump', function (e, stepNumber) { $('#userform-progress').on('userform.progress.changestep', function (e, stepNumber) {
self.jumpToStep(stepNumber - 1); self.jumpToStep(stepNumber - 1);
}); });
@ -76,6 +76,8 @@ jQuery(function ($) {
this.currentStep.hide(); this.currentStep.hide();
this.setCurrentStep(targetStep); this.setCurrentStep(targetStep);
this.$el.trigger('userform.form.changestep', [stepNumber]);
}; };
/** /**
@ -102,16 +104,18 @@ jQuery(function ($) {
* @desc Creates a form step. * @desc Creates a form step.
*/ */
function FormStep(element) { function FormStep(element) {
var self = this;
this.$el = element instanceof jQuery ? element : $(element); this.$el = element instanceof jQuery ? element : $(element);
// Bind the step navigation event listeners. // Bind the step navigation event listeners.
this.$el.find('.step-button-prev').on('click', function (e) { this.$el.find('.step-button-prev').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$(this).closest('.userform').trigger('userform.step.prev'); self.$el.trigger('userform.step.prev');
}); });
this.$el.find('.step-button-next').on('click', function (e) { this.$el.find('.step-button-next').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$(this).closest('.userform').trigger('userform.step.next'); self.$el.trigger('userform.step.next');
}); });
this.hide(); this.hide();
@ -143,20 +147,63 @@ jQuery(function ($) {
* @desc Creates a progress bar. * @desc Creates a progress bar.
*/ */
function ProgressBar(element) { function ProgressBar(element) {
this.$el = element instanceof jQuery ? element : $(element); var self = this;
this.buttons = [];
// Trigger events when the user clicks step buttons. this.$el = element instanceof jQuery ? element : $(element);
this.$el.find('.step-button-jump').each(function (i, stepButton) { this.$buttons = this.$el.find('.step-button-jump');
// Update the progress bar when 'step' buttons are clicked.
this.$buttons.each(function (i, stepButton) {
$(stepButton).on('click', function (e) { $(stepButton).on('click', function (e) {
var newStepNumber = parseInt($(this).text(), 10);
e.preventDefault(); e.preventDefault();
$('.userform').trigger('userform.progress.jump', [$(this).text()]);
self.update(newStepNumber);
self.$el.trigger('userform.progress.changestep', [newStepNumber]);
}); });
}); });
// Update the progress bar when 'prev' and 'next' buttons are clicked.
$('.userform').on('userform.form.changestep', function (e, newStep) {
self.update(newStep + 1);
});
return this; return this;
} }
/**
* @func ProgressBar.update
* @param number newStep
* @desc Update the progress element to show a new step.
*/
ProgressBar.prototype.update = function (newStep) {
// Update elements that contain the current step number.
this.$el.find('.current-step-number').each(function (i, element) {
$(element).text(newStep);
});
// Update aria attributes.
this.$el.find('[aria-valuenow]').each(function (i, element) {
$(element).attr('aria-valuenow', newStep);
});
// Update the CSS classes on step buttons.
this.$buttons.each(function (i, element) {
var $item = $(element).parent();
if (parseInt($(element).text(), 10) === newStep) {
$item.addClass('current');
return;
}
$item.removeClass('current');
});
// Update the width of the progress bar.
this.$el.find('.progress-bar').width(newStep / this.$buttons.length * 100 + '%');
};
/** /**
* @func main * @func main
* @desc Bootstraps the front-end. * @desc Bootstraps the front-end.

9
templates/Includes/UserFormProgress.ss
View File

@ -1,14 +1,15 @@
<% cached "UserForms_Navigation", $LastEdited %> <% cached "UserForms_Navigation", $LastEdited %>
<% if $NumberOfSteps.Count > "1" %> <% if $NumberOfSteps.Count > "1" %>
<nav id="userform-progress" aria-hidden="true" style="display:none;"> <nav id="userform-progress" aria-hidden="true" style="display:none;">
<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 class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div>
<span class="sr-only">Step 1 of $NumberOfSteps.Count</span>
</div>
</div> </div>
<ul> <ul>
<% loop $NumberOfSteps %> <% loop $NumberOfSteps %>
<li><button class="step-button-jump">$Pos</button></li> <li <% if $Pos == '1' %>class="current"<% end_if %>>
<button class="step-button-jump">$Pos</button>
</li>
<% end_loop %> <% end_loop %>
<ul> <ul>
</nav> </nav>