Skip to content

Demo improvements #55

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.

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

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
9 changes: 9 additions & 0 deletions bin/copy-dependencies
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# JS
cp node_modules/jquery/dist/jquery.min.js demo/js
cp node_modules/validaty/lib/jquery.validaty.js demo/js
cp node_modules/validaty/lib/jquery.validaty.validators.js demo/js
cp lib/jquery.stepy.js demo/js

# CSS
cp lib/jquery.stepy.css demo/css
cp node_modules/validaty/lib/jquery.validaty.css demo/css
8 changes: 5 additions & 3 deletions demo/css/common.css
Original file line number Diff line number Diff line change
@@ -4,9 +4,9 @@ a:hover { color: #48A5D4 }

body { background-color: #E7E7E7; font: normal 10px/1.6 'Helvetica Neue', 'Lucida Grande', Helvetica, Arial, sans-serif }

footer { font-size: 1.3em; margin: 0 auto; overflow: auto; padding-bottom: 15px; padding-top: 10px; text-align: center; width: 1100px }
footer { font-size: 1.3em; margin: 0 auto; overflow: auto; padding-bottom: 15px; padding-top: 10px; text-align: center; width: 100% }

h2 { border-bottom: 1px solid #DEDEDE; clear: right; color: #444; font-size: 2.6em; letter-spacing: .5px; line-height: 1.3em; padding-bottom: 3px }
h2 { background-color: #dedede; border-left: 5px solid; clear: right; color: #444; font-size: 2.6em; letter-spacing: .5px; line-height: 1; margin: 40px 0 0; padding: 20px 0 20px 10px }
h2 a { color: #444 }

h3 { color: #777; font-size: 1.8em; letter-spacing: .4px; margin-bottom: 0 }
@@ -34,7 +34,9 @@ pre { background-color: #F8F8F8; border: 1px solid #EAEAEA; border-radius: 3px;

.function p { color: #444; font-size: 1.2em; letter-spacing: .4px; margin-left: 3px; margin-top: -8px; text-align: left }

.demo { margin-bottom: 10px }
.demo { max-width: 700px; margin: 0 auto 20px auto }
.demo:after,
.demo form:after { content: ' '; clear: both; display: block }

.highlight { clear: both }

15 changes: 15 additions & 0 deletions demo/css/jquery.stepy.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.stepy-step {
display: none;
}

.stepy-step.stepy-active {
display: block;
}

.stepy-back, .stepy-next, .stepy-finish {
visibility: hidden;
}

.stepy-back.stepy-active, .stepy-next.stepy-active, .stepy-finish.stepy-active {
visibility: visible;
}
59 changes: 59 additions & 0 deletions demo/css/jquery.validaty.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
@charset "utf-8";

.validaty-balloon {
cursor: help;
opacity: 0;
position: absolute;
}

.validaty-balloon div {
border-right: 15px solid transparent;
border-top: 10px solid #444;
margin-left: 10px;
opacity: .8;
width: 0;
}

.validaty-balloon li {
color: white;
font-size: 1.2em;
font-weight: bold;
letter-spacing: .5px;
line-height: 1.6em;
}

.validaty-balloon ul {
background-color: #444;
border-radius: 5px;
list-style: none;
margin: 0;
opacity: .8;
padding: 4px 10px;
}

.validaty .invalid {
border: 1px solid #c00;
}

.validaty-message {
cursor: help;
opacity: 0
}

.validaty-message li {
color: #c00;
font-size: 1.1em;
line-height: 1.3em;
letter-spacing: .5px
}

.validaty-message ul {
opacity: .8;
list-style: none;
margin: 0;
padding: 4px 10px
}

.validaty .valid {
border: 1px solid #0c0;
}
51 changes: 38 additions & 13 deletions demo/css/stepy.demo.css
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
.stepy-header { list-style: none; padding: 0; width: 724px }
.stepy-header { list-style: none; padding: 0; width: 100% }
.stepy-header:after { content: ' '; display: block; clear: both }
.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 { background-color: #f1f0f0; border: 1px solid #bbb; clear: left; padding: 15px 30px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 20px; }

.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 { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 100% }

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

@@ -26,29 +28,47 @@
-moz-border-radius: 3px;
-opera-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #369;
border-radius: 3px;
border: 1px solid #ccc;
color: #7f0055;
border: 1px solid #405b75;
color: #fff;
cursor: pointer;
font: 1.2em verdana;
padding: 7px 15px 8px;
text-decoration: none;
transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s;
}

.stepy-back:hover, .stepy-next:hover {
border-color: #bbb;
color: #b07;
}

.stepy-finish {
background-color: transparent;
input[type="submit"].stepy-finish {
background-color: #369;
border-radius: 3px !important;
border: 1px solid #ccc !important;
border: 1px solid #405b75 !important;
color: #fff;
cursor: pointer;
float: right;
font: 1.2em verdana;
height: 33px !important;
width: 80px !important;
}

.stepy-finish,
.stepy-back,
.stepy-next {
display: none;
}

.stepy-active {
display: inline-block;
}

.stepy-finish:hover,
.stepy-back:hover,
.stepy-next:hover {
color: #fff;
box-shadow: 1px 1px 4px 0px rgba(0,0,0,.3);
transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s;
}

.stepy-legend {
color: #4080bf;
font: bold 1.8em arial;
@@ -59,3 +79,8 @@
.stepy-next {
float: right
}

.highlight .demo-title {
font-size: 13px;
padding-top: 20px;
}
858 changes: 462 additions & 396 deletions demo/index.html

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions demo/js/jquery.min.js

Large diffs are not rendered by default.

460 changes: 460 additions & 0 deletions demo/js/jquery.stepy.js

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions demo/js/jquery.validate.min.js

Large diffs are not rendered by default.

405 changes: 405 additions & 0 deletions demo/js/jquery.validaty.js

Large diffs are not rendered by default.

139 changes: 139 additions & 0 deletions demo/js/jquery.validaty.validators.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
$.validaty

.register('contain', 'Must contain "{word}"!', function(helper, el, word) {
'use strict';

return this.val() === '' || helper.contains(this.val(), word);
})

.register('dateiso', 'Must be a valid date ISO (yyyy-MM-dd)!', function(helper, el) {
'use strict';

var value = $.trim(this.val());

return value === '' || helper.isDateISO(value);
})

.register('digits', 'Must be digits!', function(helper, el) {
'use strict';

return this.val() === '' || helper.isDigits(this.val());
})

.register('email', 'Must be a valid e-mail!', function(helper, el) {
'use strict';

var value = $.trim(this.val());

return value === '' || helper.isEmail(value);
})

.register('equal', 'Must be equals to "{value}"!', function(helper, el, value) {
'use strict';

return this.val() == value;
})

.register('maxcheck', 'Check at most {max} checkboxes!', function(helper, el, max) {
'use strict';

return $(el).find('[name="' + this.attr('name') + '"]:checked:enabled').length <= max;
})

.register('maxlength', 'Too long (max is {max} characters)!', function(helper, el, max) {
'use strict';

return $.trim(this.val()).length <= max;
})

.register('maxselect', 'Select at most {max} options!', function(helper, el, max) {
'use strict';

return $(this).children(':enabled').filter(':selected').length <= max;
})

.register('mincheck', 'Check at least {min} checkboxes!', function(helper, el, min) {
'use strict';

return $(el).find('[name="' + this.attr('name') + '"]:checked:enabled').length >= min;
})

.register('minlength', 'Too short (min is {min} characters)!', function(helper, el, min) {
'use strict';

return $.trim(this.val()).length >= min;
})

.register('minselect', 'Select at least {min} options!', function(helper, el, min) {
'use strict';

return $(this).children(':enabled').filter(':selected').length >= min;
})

.register('number', 'Must be a number!', function(helper, el) {
'use strict';

return this.val() === '' || helper.isNumber(this.val());
})

.register('range', 'Must be a number between {min} and {max}!', function(helper, el, min, max) {
'use strict';

return this.val() === '' || helper.isNumber(this.val()) && (this.val() >= min && this.val() <= max);
})

.register('rangecheck', 'Check between {min} and {max} checkboxes!', function(helper, el, min, max) {
'use strict';

var count = $(el).find('[name="' + this.attr('name') + '"]:checked:enabled').length;

return count >= min && count <= max;
})

.register('rangelength', 'Wrong length (min is {min} and max is {max} characters)!', function(helper, el, min, max) {
'use strict';

var value = $.trim(this.val());

return value === '' || (value.length >= min && value.length <= max);
})

.register('rangeselect', 'Select between {min} and {max} options!', function(helper, el, min, max) {
'use strict';

var count = $(this).children(':enabled').filter(':selected').length;

return count >= min && count <= max;
})

.register('required', {
text: 'Can\'t be blank or empty!',
textarea: 'Can\'t be blank or empty!',
checkbox: 'Should be checked!',
radio: 'Should be chosen!',
select: 'Should be selected!'
}, function(helper, el) {
'use strict';

if (helper.isCheckable(this[0])) {
var attributes = '[name="' + this.attr('name') + '"]:checked';

return $(el).find(':radio' + attributes + ', :checkbox' + attributes).length > 0;
} else {
return $.trim(this.val()) !== '';
}
})

.register('url', 'Must be a valid URL!', function(helper, el) {
'use strict';

return this.val() === '' || helper.isUrl(this.val());
})

.register('username', 'Must be a valid username (a-z, A-Z and _) only!', function(helper, el) {
'use strict';

return this.val() === '' || helper.isUsername(this.val());
})

;
162 changes: 132 additions & 30 deletions package-lock.json
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@
},
"description": "jQuery Stepy - A Wizard Plugin",
"devDependencies": {
"http-server": "^0.10.0",
"jasmine-core": "^2.6.1",
"jasmine-jquery": "^2.1.1",
"karma": "^1.7.0",
@@ -52,7 +53,9 @@
"url": "https://github.com/wbotelhos/stepy"
},
"scripts": {
"test": "node_modules/karma/bin/karma start karma.conf.js"
"test": "node_modules/karma/bin/karma start karma.conf.js",
"build-dev": "./bin/copy-dependencies",
"start": "npm run build-dev && http-server -p 8000 demo/"
},
"version": "1.2.0"
}