Skip to content

Commit 8091c7a

Browse files
author
Rafael J. Staib
committed
Add loading animation
1 parent 60d249d commit 8091c7a

File tree

2 files changed

+70
-68
lines changed

2 files changed

+70
-68
lines changed

‎jquery.steps.js‎

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* jQuery Steps Plugin v0.9.1 - A powerful jQuery wizard plugin that supports accessibility and HTML5
2+
* jQuery Steps Plugin v0.9.2 - A powerful jQuery wizard plugin that supports accessibility and HTML5
33
* https://github.com/rstaib/jquery-steps
44
*
55
* Copyright (c) 2013 Rafael J. Staib
@@ -13,7 +13,7 @@
1313

1414
/*
1515
* TODOs:
16-
* - Loading Animation (Spinner)
16+
* - Add tests and styles for loading animation (Spinner)
1717
* - Add tests for add, insert and remove
1818
* - Shrink the comprehensive code
1919
*
@@ -246,7 +246,8 @@
246246
current: "current step:", /* For Accessability reasons */
247247
finish: "Finish",
248248
next: "Next",
249-
previous: "Previous"
249+
previous: "Previous",
250+
loading: "Loading ..."
250251
}
251252
};
252253

@@ -286,10 +287,10 @@
286287
**/
287288
$.fn.steps.getStep = function (index)
288289
{
289-
var $this = $(this);
290-
var state = $this.data("state");
290+
var wizard = $(this),
291+
state = wizard.data("state");
291292

292-
return (index === state.currentStep) ? state.currentStep : getStepProperties($this, index);
293+
return (index === state.currentStep) ? state.currentStep : getStepProperties(wizard, index);
293294
};
294295

295296
/**
@@ -300,8 +301,9 @@
300301
**/
301302
$.fn.steps.next = function ()
302303
{
303-
var $this = $(this);
304-
return actionClick($this, $this.data("state").currentIndex + 1);
304+
var wizard = $(this);
305+
306+
return actionClick(wizard, wizard.data("state").currentIndex + 1);
305307
};
306308

307309
/**
@@ -312,8 +314,9 @@
312314
**/
313315
$.fn.steps.previous = function ()
314316
{
315-
var $this = $(this);
316-
return actionClick($this, $this.data("state").currentIndex - 1);
317+
var wizard = $(this);
318+
319+
return actionClick(wizard, wizard.data("state").currentIndex - 1);
317320
};
318321

319322
/**
@@ -335,16 +338,15 @@
335338
**/
336339
$.fn.steps.finish = function ()
337340
{
338-
var $this = $(this),
339-
options = $this.data("options"),
340-
state = $this.data("state"),
341-
currentStep = $(".steps li:eq(" + state.currentIndex + ")", $this);
341+
var wizard = $(this),
342+
options = wizard.data("options"),
343+
state = wizard.data("state"),
344+
currentStep = $(".steps li:eq(" + state.currentIndex + ")", wizard);
342345

343-
if ($this.triggerHandler("finishing", [state.currentIndex]))
346+
if (wizard.triggerHandler("finishing", [state.currentIndex]))
344347
{
345348
currentStep.addClass("done").removeClass("error");
346-
347-
$this.triggerHandler("finished", [state.currentIndex]);
349+
wizard.triggerHandler("finished", [state.currentIndex]);
348350
}
349351
else
350352
{
@@ -587,6 +589,11 @@
587589
var oldIndex = state.currentIndex;
588590
if (wizard.triggerHandler("stepChanging", [state.currentIndex, index]))
589591
{
592+
if (state.asyncRequest != null)
593+
{
594+
state.asyncRequest.abort();
595+
}
596+
590597
// Save new state
591598
state.currentIndex = index;
592599
state.currentStep = getStepProperties(wizard, index);
@@ -672,19 +679,15 @@
672679
**/
673680
function transform(wizard)
674681
{
675-
var options = wizard.data("options");
676-
var state = wizard.data("state");
677-
678-
wizard.addClass("wizard");
682+
var options = wizard.data("options"),
683+
state = wizard.data("state"),
684+
contentWrapper = $(document.createElement(options.contentContainerTag)).addClass("content");
679685

680-
var contentWrapper = $(document.createElement(options.contentContainerTag)).addClass("content");
681686
contentWrapper.html(wizard.html());
682-
wizard.empty();
683-
wizard.append(contentWrapper);
684-
685-
var stepTitles = contentWrapper.children(options.headerTag);
687+
wizard.addClass("wizard").empty().append(contentWrapper);
686688

687-
var stepContents = contentWrapper.children(options.bodyTag).addClass("body");
689+
var stepTitles = contentWrapper.children(options.headerTag),
690+
stepContents = contentWrapper.children(options.bodyTag).addClass("body");
688691

689692
// hides all contents except the defined start content
690693
stepContents.not(":eq(" + options.startIndex + ")").hide();
@@ -699,11 +702,10 @@
699702
throw new Error("One or more corresponding step titles are missing.");
700703
}
701704

702-
var stepsWrapper = $(document.createElement(options.stepsContainerTag)).addClass("steps");
705+
var stepsWrapper = $(document.createElement(options.stepsContainerTag))
706+
.addClass("steps").append($(document.createElement("ol")));
703707
wizard.prepend(stepsWrapper);
704708

705-
stepsWrapper.append($(document.createElement("ol")));
706-
707709
stepTitles.each(function (index)
708710
{
709711
transformTitle(wizard, $(this), index);
@@ -715,12 +717,11 @@
715717

716718
if (options.enablePagination)
717719
{
718-
var actionWrapper = $(document.createElement(options.actionContainerTag)).addClass("actions");
720+
var actionCollection = $(document.createElement("ul")),
721+
actionWrapper = $(document.createElement(options.actionContainerTag))
722+
.addClass("actions").append(actionCollection);
719723
wizard.append(actionWrapper);
720724

721-
var actionCollection = $(document.createElement("ul"));
722-
actionWrapper.append(actionCollection);
723-
724725
if (!options.forceMoveForward)
725726
{
726727
actionCollection.append($("<li><a href=\"#previous\">" + options.labels.previous + "</a></li>"));
@@ -805,23 +806,22 @@
805806

806807
if (!options.enableContentCache || !state.currentStep.contentLoaded)
807808
{
808-
var currentStepContent;
809809
switch (getValidEnumValue($.fn.steps.contentMode, state.currentStep.contentMode))
810810
{
811811
case $.fn.steps.contentMode.iframe:
812-
currentStepContent = $(".content > .body", wizard).eq(state.currentIndex);
813-
currentStepContent.html($("<iframe src=\"" + state.currentStep.contentUrl + "\" />"));
814-
currentStepContent.data("loaded", "1");
812+
$(".content > .body", wizard).eq(state.currentIndex)
813+
.html($("<iframe src=\"" + state.currentStep.contentUrl + "\" />"))
814+
.data("loaded", "1");
815815
break;
816816

817817
case $.fn.steps.contentMode.async:
818-
currentStepContent = $(".content > .body", wizard).eq(state.currentIndex);
819-
currentStepContent.empty();
820-
$.ajax({ url: state.currentStep.contentUrl, cache: false }).done(function (data)
821-
{
822-
currentStepContent.html(data);
823-
currentStepContent.data("loaded", "1");
824-
});
818+
var currentStepContent = $(".content > .body", wizard).eq(state.currentIndex)
819+
.empty().append(renderTemplate(options.loadingTemplate, { text: options.labels.loading }));
820+
$.ajax({ url: state.currentStep.contentUrl, cache: false })
821+
.done(function (data)
822+
{
823+
currentStepContent.empty().html(data).data("loaded", "1");
824+
});
825825
break;
826826
}
827827
}
@@ -853,13 +853,13 @@
853853
*/
854854
function refreshActionState(wizard)
855855
{
856-
var options = wizard.data("options");
857-
var state = wizard.data("state");
856+
var options = wizard.data("options"),
857+
state = wizard.data("state");
858858

859859
if (options.enablePagination)
860860
{
861-
var finish = $(".actions a[href$='#finish']", wizard).parent();
862-
var next = $(".actions a[href$='#next']", wizard).parent();
861+
var finish = $(".actions a[href$='#finish']", wizard).parent(),
862+
next = $(".actions a[href$='#next']", wizard).parent();
863863

864864
if (!options.forceMoveForward)
865865
{
@@ -929,9 +929,11 @@
929929
function renderTemplate(template, substitutes)
930930
{
931931
var matches = template.match(/#([a-z]*)#/gi);
932+
932933
for (var i = 0; i < matches.length; i++)
933934
{
934-
var match = matches[i], key = match.substring(1, match.length - 1);
935+
var match = matches[i],
936+
key = match.substring(1, match.length - 1);
935937
template = template.replace(match, getSubstitute(substitutes, key));
936938
}
937939

@@ -968,19 +970,19 @@
968970
*/
969971
function getStepProperties(wizard, index)
970972
{
971-
var options = wizard.data("options");
972-
var $header = $(".content > .title:eq(" + index + ")", wizard);
973-
var $content = $header.next(".body");
974-
var mode = ($content.data("mode") == null) ? $.fn.steps.contentMode.html :
975-
getValidEnumValue($.fn.steps.contentMode, (/^\s*$/.test($content.data("mode")) || isNaN($content.data("mode"))) ?
976-
$content.data("mode") : Number($content.data("mode")));
977-
var contentUrl = (mode === $.fn.steps.contentMode.html || $content.data("url") === undefined) ?
978-
"" : $content.data("url");
979-
var contentLoaded = (mode !== $.fn.steps.contentMode.html && $content.data("loaded") === "1");
973+
var options = wizard.data("options"),
974+
header = $(".content > .title:eq(" + index + ")", wizard),
975+
content = header.next(".body"),
976+
mode = (content.data("mode") == null) ? $.fn.steps.contentMode.html :
977+
getValidEnumValue($.fn.steps.contentMode, (/^\s*$/.test(content.data("mode")) || isNaN(content.data("mode"))) ?
978+
content.data("mode") : Number(content.data("mode"))),
979+
contentUrl = (mode === $.fn.steps.contentMode.html || content.data("url") === undefined) ?
980+
"" : content.data("url"),
981+
contentLoaded = (mode !== $.fn.steps.contentMode.html && content.data("loaded") === "1");
980982

981983
return {
982-
title: $header.html(),
983-
content: (mode === $.fn.steps.contentMode.html) ? $content.html() : "",
984+
title: header.html(),
985+
content: (mode === $.fn.steps.contentMode.html) ? content.html() : "",
984986
contentUrl: contentUrl,
985987
contentMode: mode,
986988
contentLoaded: contentLoaded
@@ -1115,8 +1117,8 @@
11151117
{
11161118
event.preventDefault();
11171119

1118-
var anchor = $(this);
1119-
var wizard = anchor.parents(".wizard");
1120+
var anchor = $(this),
1121+
wizard = anchor.parents(".wizard");
11201122
switch (anchor.attr("href").substring(anchor.attr("href").lastIndexOf("#")))
11211123
{
11221124
case "#finish":
@@ -1144,10 +1146,10 @@
11441146
{
11451147
event.preventDefault();
11461148

1147-
var anchor = $(this);
1148-
var wizard = anchor.parents(".wizard");
1149-
var state = wizard.data("state");
1150-
var oldIndex = state.currentIndex;
1149+
var anchor = $(this),
1150+
wizard = anchor.parents(".wizard"),
1151+
state = wizard.data("state"),
1152+
oldIndex = state.currentIndex;
11511153

11521154
if (anchor.parent().is(":not(.disabled):not(.current)"))
11531155
{

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "jQuery-steps",
33
"title": "jQuery Wizard Plugin",
4-
"version": "0.9.1",
4+
"version": "0.9.2",
55
"description": "A powerful jQuery wizard plugin that supports accessibility and HTML5",
66
"homepage": "https://github.com/rstaib/jquery-steps",
77
"author": {

0 commit comments

Comments
 (0)