Skip to content

Commit 8545e50

Browse files
author
Rafael J. Staib
committed
Add small visualization fixes and some tests
- Add last class for the last step - Add tests especially for step visualization - Add small fixes related to step visualization - Enhanced quint for jquery version test
1 parent 5f21927 commit 8545e50

File tree

6 files changed

+341
-85
lines changed

6 files changed

+341
-85
lines changed

‎jquery.steps.js

Lines changed: 99 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/*!
2-
* jQuery Steps Plugin v0.9.4 - A powerful jQuery wizard plugin that supports accessibility and HTML5
2+
* jQuery Steps Plugin v0.9.5 - 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
66
* Released under the MIT license
77
*
88
* Follow me on twitter: https://twitter.com/@RafaelStaib
99
*
10-
* Tested with jQuery v1.4.4 and newer versions as well.
10+
* Requires jQuery version 1.4.4 or higher
1111
* Please report issues at: https://github.com/rstaib/jquery-steps/issues
1212
*/
1313

@@ -618,18 +618,25 @@
618618
$(".body:eq(" + index + ")", contentContainer).remove();
619619
$(".steps > ol > li:eq(" + index + ")", wizard).remove();
620620

621+
// Reset state values
622+
if (state.currentIndex > index)
623+
{
624+
state.currentIndex = state.currentIndex - 1;
625+
}
626+
state.stepCount--;
627+
state.currentStep = getStepProperties(wizard, state.currentIndex);
628+
629+
// Set the "first" class to the new first step button
621630
if (index === 0)
622631
{
623-
$(".title:first", contentContainer).addClass("first");
632+
$(".steps > ol > li:first", wizard).addClass("first");
624633
}
625634

626-
// Reset state values
627-
if (state.currentIndex >= index)
635+
// Set the "last" class to the new last step button
636+
if (index === state.stepCount)
628637
{
629-
state.currentIndex = state.currentIndex + 1;
638+
$(".steps > ol > li:eq(" + index + ")", wizard).addClass("last");
630639
}
631-
state.stepCount = $(".body", contentContainer).length;
632-
state.currentStep = getStepProperties(wizard, state.currentIndex);
633640

634641
updateSteps(wizard, index);
635642
refreshActionState(wizard);
@@ -678,43 +685,37 @@
678685
}
679686

680687
var contentContainer = wizard.children(".content"),
681-
header = $(document.createElement(options.headerTag)),
682-
body = $(document.createElement(options.bodyTag));
683-
if (index === 0)
684-
{
685-
contentContainer.prepend(body).prepend(header);
686-
}
687-
else
688+
header = $(document.createElement(options.headerTag)).html(step.title),
689+
body = $(document.createElement(options.bodyTag)).addClass("body").hide();
690+
691+
if (step.contentMode == null || step.contentMode === $.fn.steps.contentMode.html)
688692
{
689-
$(".body:eq(" + (index - 1) + ")", contentContainer).after(body).after(header);
693+
body.html(step.content);
690694
}
691695

692-
header.html(step.title);
693-
transformTitle(wizard, header, index);
694-
695-
// Add click event
696-
$(".steps > ol > li:eq(" + index + ") > a", wizard).bind("click.steps", stepClickHandler);
697-
698-
// Reset the current class
699696
if (index === 0)
700697
{
701-
$(".steps > ol > li", wizard).removeClass("first").eq(index).addClass("first");
698+
contentContainer.prepend(body).prepend(header);
702699
}
703-
704-
body.addClass("body").hide();
705-
if (step.contentMode == null || step.contentMode === $.fn.steps.contentMode.html)
700+
else
706701
{
707-
body.html(step.content);
702+
$(".body:eq(" + (index - 1) + ")", contentContainer).after(body).after(header);
708703
}
709704

710705
// Reset state values
711706
if (state.currentIndex >= index)
712707
{
713708
state.currentIndex = state.currentIndex + 1;
714709
}
715-
state.stepCount = contentContainer.children(".body").length;
710+
state.stepCount++;
711+
712+
transformTitle(wizard, header, index);
713+
716714
state.currentStep = getStepProperties(wizard, state.currentIndex);
717715

716+
// Add click event
717+
$(".steps > ol > li:eq(" + index + ") > a", wizard).bind("click.steps", stepClickHandler);
718+
718719
updateSteps(wizard, index);
719720
refreshActionState(wizard);
720721

@@ -781,14 +782,14 @@
781782
**/
782783
function actionClick(wizard, index)
783784
{
784-
var options = wizard.data("options");
785-
var state = wizard.data("state");
786-
var oldIndex = state.currentIndex;
785+
var options = wizard.data("options"),
786+
state = wizard.data("state"),
787+
oldIndex = state.currentIndex;
787788

788789
if (index >= 0 && index < state.stepCount && !(options.forceMoveForward && index < state.currentIndex))
789790
{
790-
var anchor = $(".steps a[href$='-" + index + "']", wizard);
791-
var isDisabled = anchor.parent().hasClass("disabled");
791+
var anchor = $(".steps a[href$='-" + index + "']", wizard),
792+
isDisabled = anchor.parent().hasClass("disabled");
792793
// Remove the class to make the anchor clickable!
793794
anchor.parent().removeClass("disabled");
794795
anchor.click();
@@ -818,8 +819,8 @@
818819
**/
819820
function goToStep(wizard, index)
820821
{
821-
var options = wizard.data("options");
822-
var state = wizard.data("state");
822+
var options = wizard.data("options"),
823+
state = wizard.data("state");
823824

824825
if (index < 0 || index >= state.stepCount || state.stepCount === 0)
825826
{
@@ -834,21 +835,12 @@
834835
var oldIndex = state.currentIndex;
835836
if (wizard.triggerHandler("stepChanging", [state.currentIndex, index]))
836837
{
837-
if (state.asyncRequest != null)
838-
{
839-
state.asyncRequest.abort();
840-
}
841-
842838
// Save new state
843839
state.currentIndex = index;
844840
state.currentStep = getStepProperties(wizard, index);
845841

846842
// Change visualisation
847-
var steps = $(".steps li", wizard),
848-
currentInfo = $("a > .current-info", steps.eq(oldIndex));
849-
steps.eq(oldIndex).addClass("done").removeClass("current error");
850-
steps.eq(index).addClass("current").removeClass("disabled done")
851-
.children("a").prepend(currentInfo).focus();
843+
updateStepClasses(wizard, index, oldIndex);
852844

853845
refreshActionState(wizard);
854846
loadAsyncContent(wizard);
@@ -916,7 +908,7 @@
916908
}
917909

918910
/**
919-
* Transforms the initial html structure/code.
911+
* Transforms the hardcoded html structure to a new more useful html structure.
920912
*
921913
* @private
922914
* @method transform
@@ -932,10 +924,9 @@
932924
wizard.addClass("wizard").empty().append(contentWrapper);
933925

934926
var stepTitles = contentWrapper.children(options.headerTag),
935-
stepContents = contentWrapper.children(options.bodyTag).addClass("body");
927+
stepContents = contentWrapper.children(options.bodyTag).addClass("body").hide();
936928

937-
// hides all contents except the defined start content
938-
stepContents.not(":eq(" + options.startIndex + ")").hide();
929+
// Make the start step visible
939930
stepContents.eq(options.startIndex).show();
940931

941932
if (stepTitles.length > stepContents.length)
@@ -947,17 +938,29 @@
947938
throw new Error("One or more corresponding step titles are missing.");
948939
}
949940

941+
state.stepCount = stepContents.length;
942+
950943
var stepsWrapper = $(document.createElement(options.stepsContainerTag))
951944
.addClass("steps").append($(document.createElement("ol")));
952945
wizard.prepend(stepsWrapper);
953946

954947
stepTitles.each(function (index)
955948
{
956949
transformTitle(wizard, $(this), index);
950+
951+
if (index < options.startIndex)
952+
{
953+
$(".steps > ol > li:eq(" + index + ")", wizard).addClass("done");
954+
}
955+
956+
if (index > options.startIndex && !options.enableAllSteps)
957+
{
958+
$(".steps > ol > li:eq(" + index + ")", wizard).addClass("disabled");
959+
}
957960
});
958961

959-
// Set state values
960-
state.stepCount = stepContents.length;
962+
updateStepClasses(wizard, options.startIndex);
963+
961964
state.currentStep = getStepProperties(wizard, state.currentIndex);
962965

963966
if (options.enablePagination)
@@ -994,47 +997,36 @@
994997
*/
995998
function transformTitle(wizard, header, index)
996999
{
997-
// TODO: Some code for currentand so on!
998-
999-
var options = wizard.data("options");
1000-
10011000
header.attr("id", getUniqueId(wizard) + "-" + index).attr("tabindex", "-1").addClass("title");
10021001

1003-
var title = renderTemplate(options.titleTemplate, {
1002+
var options = wizard.data("options"),
1003+
state = wizard.data("state"),
1004+
stepCollection = $(".steps > ol", wizard),
1005+
title = renderTemplate(options.titleTemplate, {
10041006
index: index + 1,
10051007
title: header.html()
10061008
}),
10071009
stepItem = $("<li></li>").html("<a href=\"#" + header.attr("id") + "\">" + title + "</a>");
10081010

10091011
if (index === 0)
10101012
{
1011-
stepItem.addClass("first");
1012-
}
1013-
1014-
if (index === options.startIndex)
1015-
{
1016-
stepItem.addClass("current").children("a").prepend("<span class=\"current-info\">" +
1017-
options.labels.current + " </span>");
1013+
stepCollection.prepend(stepItem);
10181014
}
1019-
1020-
if (index < options.startIndex)
1015+
else
10211016
{
1022-
stepItem.addClass("done");
1017+
$("li:eq(" + (index - 1) + ")", stepCollection).after(stepItem);
10231018
}
10241019

1025-
if (index > options.startIndex && !options.enableAllSteps)
1026-
{
1027-
stepItem.addClass("disabled");
1028-
}
1029-
1030-
var stepCollection = $(".steps > ol", wizard);
1020+
// Set the "first" class to the new first step button
10311021
if (index === 0)
10321022
{
1033-
stepCollection.prepend(stepItem);
1023+
$("li", stepCollection).removeClass("first").eq(index).addClass("first");
10341024
}
1035-
else
1025+
1026+
// Set the "last" class to the new last step button
1027+
if (index === (state.stepCount - 1))
10361028
{
1037-
$("li:eq(" + (index - 1) + ")", stepCollection).after(stepItem);
1029+
$("li", stepCollection).removeClass("last").eq(index).addClass("last");
10381030
}
10391031
}
10401032

@@ -1074,7 +1066,7 @@
10741066
}
10751067

10761068
/**
1077-
* Updates step buttons and their related titles.
1069+
* Updates step buttons and their related titles beyond a certain position.
10781070
*
10791071
* @private
10801072
* @method updateSteps
@@ -1094,7 +1086,33 @@
10941086
}
10951087

10961088
/**
1097-
* Refreshs the action navigation.
1089+
* Updates step button classes after initialization or step changing.
1090+
*
1091+
* @private
1092+
* @method updateStepClasses
1093+
* @param wizard {Object} A jQuery wizard object
1094+
* @param index {Integer} The index of the new current step
1095+
* @param [oldIndex] {Integer} The index of the prior step
1096+
*/
1097+
function updateStepClasses(wizard, index, oldIndex)
1098+
{
1099+
var options = wizard.data("options"),
1100+
steps = $(".steps li", wizard),
1101+
currentOrNewStep = steps.eq(index),
1102+
currentInfo = $("<span class=\"current-info\">" + options.labels.current + " </span>");
1103+
1104+
if (oldIndex != null)
1105+
{
1106+
var oldStep = steps.eq(oldIndex).addClass("done").removeClass("current error");
1107+
currentInfo = $("a > .current-info", oldStep);
1108+
currentOrNewStep.focus();
1109+
}
1110+
1111+
currentOrNewStep.addClass("current").removeClass("disabled done").children("a").prepend(currentInfo);
1112+
}
1113+
1114+
/**
1115+
* Refreshs the visualization for the complete action navigation.
10981116
*
10991117
* @private
11001118
* @method refreshActionState
@@ -1167,7 +1185,7 @@
11671185
}
11681186

11691187
/**
1170-
* Renders a template and substitutes all placeholder.
1188+
* Renders a template and replaces all placeholder.
11711189
*
11721190
* @private
11731191
* @method renderTemplate
@@ -1223,8 +1241,8 @@
12231241
header = $(".content > .title:eq(" + index + ")", wizard),
12241242
content = header.next(".body"),
12251243
mode = (content.data("mode") == null) ? $.fn.steps.contentMode.html :
1226-
getValidEnumValue($.fn.steps.contentMode, (/^\s*$/.test(content.data("mode")) || isNaN(content.data("mode"))) ?
1227-
content.data("mode") : Number(content.data("mode"))),
1244+
getValidEnumValue($.fn.steps.contentMode, (/^\s*$/.test(content.data("mode")) || isNaN(content.data("mode"))) ?
1245+
content.data("mode") : Number(content.data("mode"))),
12281246
contentUrl = (mode === $.fn.steps.contentMode.html || content.data("url") === undefined) ?
12291247
"" : content.data("url"),
12301248
contentLoaded = (mode !== $.fn.steps.contentMode.html && content.data("loaded") === "1");

‎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.4",
4+
"version": "0.9.5",
55
"description": "A powerful jQuery wizard plugin that supports accessibility and HTML5",
66
"homepage": "https://github.com/rstaib/jquery-steps",
77
"author": {

‎steps.jquery.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"accessibility",
1313
"validation"
1414
],
15-
"version": "0.9.4",
15+
"version": "0.9.5",
1616
"author": {
1717
"name": "Rafael J. Staib",
1818
"email": "rstaib@derklang.com",

0 commit comments

Comments
 (0)