Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jumping to different step in .select() handler #39

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Jumping to different step in .select() handler #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a317ae
Stop previous animation so jumping to a different step number via .st…
Dmitri-Sintsov Apr 4, 2014
caab35d
stop() and validate() optimizations and improvements (see changelog.md)
Dmitri-Sintsov Apr 6, 2014
4d5773e
Suppress validation of current step when going back. Convert line fee…
Dmitri-Sintsov Apr 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@

## Changes

+ Validate only last step in step(), which allows to jump to arbitrary step while validator enabled.
+ validate() code clean-up.
+ Optional second boolean argument of step() which allows to suppress validation at all.
+ Stop previous animation so multiple steps will not be visible when jumping to arbitrary step.
+ The container that holds the navigation buttons now has the class 'stepy-buttons';
+ The error container class was renamed to plural 'stepy-errors';
+ Forms without ID will receives a genarated hash to be used as hook;
Expand Down
76 changes: 37 additions & 39 deletions lib/jquery.stepy.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,37 @@
@CHARSET "UTF-8";

body { font-size: 10px }

.stepy-header { list-style: none; padding: 0; width: 724px }
.stepy-header li { cursor: pointer; float: left; padding: 10px }
.stepy-header li.stepy-error { background: url('../demo/img/error.png') no-repeat right top }
.stepy-header li div { color: #CCC; font: bold 2.8em verdana; text-shadow: 1px 1px #F8F8F8 }
.stepy-header li.stepy-active div { color: #369; cursor: auto }
.stepy-header li span { color: #CCC; font: 1.4em verdana }
.stepy-header li.stepy-active span { color: #BBB }

.stepy-step { border: 1px solid #BBB; clear: left; padding: 15px 20px; width: 600px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px }
.stepy-step legend { color: #4080BF; font: bold 1.8em arial; letter-spacing: .7px; padding: 0 2px 3px }
.stepy-step label { color: #222; display: block; font: bold 1.5em arial; letter-spacing: .7px; margin: 10px 0 3px 1px }

.stepy-step input,
.stepy-step textarea,
.stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 90% }

.stepy-step select { height: 34px; padding-top: 5px }

.stepy-step textarea { height: 100px }

.stepy-navigator { height: 33px; margin-top: 20px }
.button-back { float: left }

.button-next,
.stepy-navigator input[type="submit"] { float: right }

.button-back,
.button-next,
.stepy-navigator input[type="submit"] { border: 1px solid #CCC; color: #7F0055; cursor: pointer; font: 1.2em verdana; padding: 7px 15px 8px; text-decoration: none; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px }

.stepy-navigator input[type="submit"] { background-color: transparent; border-color: #CCC; margin-bottom: 0; padding: 7px 15px 24px; width: 90px }

.button-back:hover,
.button-next:hover,
.stepy-navigator input[type="submit"]:hover { border-color: #BBB; color: #B07 }
@CHARSET "UTF-8";

.stepy-header { list-style: none; padding: 0; width: 724px }
.stepy-header li { cursor: pointer; float: left; padding: 10px }
.stepy-header li.stepy-error { background: url('../demo/img/error.png') no-repeat right top }
.stepy-header li div { color: #CCC; font: bold 1.1em verdana; text-shadow: 1px 1px #F8F8F8 }
.stepy-header li.stepy-active div { color: #369; cursor: auto }
.stepy-header li span { color: #CCC; font: 1.1em verdana }
.stepy-header li.stepy-active span { color: #BBB }

.stepy-step { border: 1px solid #BBB; clear: left; padding: 15px 20px; width: 600px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px }
.stepy-step legend { color: #4080BF; font: bold 1.1em arial; letter-spacing: .7px; padding: 0 2px 3px }
.stepy-step label { color: #222; display: block; font: bold 1em arial; letter-spacing: .7px; margin: 10px 0 3px 1px }

.stepy-step input,
.stepy-step textarea,
.stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 0.9em; height: 27px; margin-bottom: 12px; padding: 3px; width: 90% }

.stepy-step select { height: 34px; padding-top: 5px }

.stepy-step textarea { height: 100px }

.stepy-navigator { height: 33px; margin-top: 20px }
.button-back { float: left }

.button-next,
.stepy-navigator input[type="submit"] { float: right }

.button-back,
.button-next,
.stepy-navigator input[type="submit"] { border: 1px solid #CCC; color: #7F0055; cursor: pointer; font: 0.9em verdana; padding: 7px 15px 8px; text-decoration: none; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px }

.stepy-navigator input[type="submit"] { background-color: transparent; border-color: #CCC; margin-bottom: 0; padding: 7px 15px 24px; width: 90px }

.button-back:hover,
.button-next:hover,
.stepy-navigator input[type="submit"]:hover { border-color: #BBB; color: #B07 }
37 changes: 29 additions & 8 deletions lib/jquery.stepy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,8 @@
e.preventDefault();

if (!self.opt.back || methods._execute.call(self, self.opt.back, index - 1)) {
methods.step.call(self, (index - 1) + 1);
// Suppress validation of current step when going back.
methods.step.call(self, (index - 1) + 1, false);
}
}).appendTo(nav);
}, _createButtons: function(step, index) {
Expand Down Expand Up @@ -270,7 +271,13 @@
steps.find('p.stepy-navigator').remove();
}
});
}, step: function(index) {
},
/**
* When jumping to arbitrary step, use validateStep = true;
* otherwise jumping will be interrupted by validation failure.
*/
step: function(index,validateStep) {
validateStep = validateStep === undefined || validateStep != false;
var self = this
that = $(this),
opt = that[0].opt;
Expand All @@ -286,7 +293,19 @@
var max = index;

// Remove Validator...
if (opt.validate) {
if (opt.validate && validateStep) {
// validate only last step
// there is no need to validate all steps, otherwise jumping to arbitrary steps will not work.
var stepIdxExpr = /-head-(\d+)$/ig;
var matches = stepIdxExpr.exec(that[0].heads.filter('.stepy-active').attr('id'));
if (matches.length == 2) {
var lastIdx = parseInt(matches.pop());
console.log('validating lastIdx:'+lastIdx);
if ( lastIdx !== index && !methods.validate.call(this,lastIdx) ) {
return;
}
}
/*
var isValid = true;

for (var i = 0; i < index; i++) {
Expand All @@ -297,12 +316,14 @@
break;
}
}
*/
}

// WIP...
var stepsCount = steps.length;

if (opt.transition == 'fade') {
steps.stop();
steps.fadeOut(opt.duration, function() {
if (--stepsCount > 0) {
return;
Expand All @@ -311,6 +332,7 @@
steps.eq(max).fadeIn(opt.duration);
});
} else if (opt.transition == 'slide') {
steps.stop();
steps.slideUp(opt.duration, function() {
if (--stepsCount > 0) {
return;
Expand Down Expand Up @@ -348,14 +370,13 @@
return true;
}

var self = this,
var self = (this.get === undefined) ? this : this.get(0),
step = that.children('fieldset').eq(index),
isValid = true,
$title = $('#' + that.attr('id') + '-header').children().eq(index),
$validate = that.validate();
$title = $('#' + that.attr('id') + '-header').children().eq(index);

$(step.find(':input:enabled').get().reverse()).each(function() {
var fieldIsValid = $validate.element($(this));
var fieldIsValid = $(this).valid();

if (fieldIsValid === undefined) {
fieldIsValid = true;
Expand All @@ -372,7 +393,7 @@
$title.addClass('stepy-error');
}

$validate.focusInvalid();
$(this).focus();
}
});

Expand Down