idealsteps improvements

remove e.preventDefault, up to the user

README.md

@@ -142,13 +142,15 @@ Callback that runs after an input attempts to validate.
 Callback that runs when the form is submitted.
 
 - **invalid:** The number of invalid fields if any.
-- **event:** The submit event (prevented by default).
+- **event:** The submit event.
 
-For Example:
+Example:
 
 ```javascript
 $('form').idealforms({
-  onSubmit: function(invalid) {
+  onSubmit: function(invalid, e) {
+    e.preventDefault();
+    
     if (invalid) {
       alert(invalid +' fields!');
     } else {

css/jquery.idealforms.css

@@ -54,7 +54,7 @@ form.idealforms.adaptive .error:after{top:2px;left:50%;margin-top:-1.4em;margin-
 form.idealforms.adaptive .error.hidden{position:absolute;visibility:hidden}
 form.idealforms.adaptive .idealforms-field-checkbox .error,form.idealforms.adaptive .idealforms-field-radio .error,form.idealforms.adaptive .idealforms-field-textarea .error{top:0}
 .idealsteps-container *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
-.idealsteps-step{zoom:1}
+.idealsteps-step{display:none;zoom:1}
 .idealsteps-step:before,.idealsteps-step:after{content:"";display:table}
 .idealsteps-step:after{clear:both}
 .idealsteps-nav{color:#444;background:#eee;background:-webkit-linear-gradient(#fff, #ddd);background:-moz-linear-gradient(#fff, #ddd);background:-o-linear-gradient(#fff, #ddd);background:-ms-linear-gradient(#fff, #ddd);background:linear-gradient(#fff, #ddd);border:1px solid #aaa;border-bottom-color:#919191;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);box-shadow:0 1px 2px rgba(0,0,0,0.15);-webkit-border-radius:3.01px;border-radius:3.01px;overflow:hidden;margin-bottom:2em;}
@@ -67,7 +67,7 @@ form.idealforms.adaptive .idealforms-field-checkbox .error,form.idealforms.adapt
 .idealsteps-nav a:after,.idealsteps-nav a:before{content:"";position:absolute;z-index:1;top:0;right:-2em;margin-right:0;margin-top:-.125em;border-width:2em 1em;border-style:solid;border-color:transparent;border-left-color:#ddd}
 .idealsteps-nav a:before{margin-right:-1px;border-left-color:#aaa}
 .idealsteps-nav li:first-child a{padding-left:1.75em;-webkit-border-top-left-radius:3.01px;border-top-left-radius:3.01px;-webkit-border-bottom-left-radius:3.01px;border-bottom-left-radius:3.01px;}
-.idealsteps-nav li.idealsteps-step-active a{padding-right:3.5em;background:#fff;color:#3f9dcc;font-weight:bold;}
+.idealsteps-nav li.idealsteps-step-active a{padding-right:3.5em;background:#fff;color:#3f9dcc;font-weight:bold;cursor:default;}
 .idealsteps-nav li.idealsteps-step-active a:after{border-left-color:#fff}
 .idealsteps-nav li.idealsteps-step-active .counter{opacity:1;-ms-filter:none;filter:none}
 .idealsteps-nav .counter{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);position:absolute;top:50%;right:1em;height:1.5em;width:1.5em;margin-top:-.75em;line-height:1.5 !important;text-align:center;color:#cc2a18;border:1px solid #cc2a18;-webkit-border-radius:10em;border-radius:10em;-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;-ms-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}

img/validation.svg

@@ -27,19 +27,19 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="27.048703"
-     inkscape:cy="2.9250227"
+     inkscape:cx="-12.009478"
+     inkscape:cy="68.328459"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
-     showgrid="false"
+     showgrid="true"
      borderlayer="true"
      inkscape:showpageshadow="false"
      showguides="false"
      inkscape:guide-bbox="true"
      inkscape:window-width="1197"
      inkscape:window-height="781"
-     inkscape:window-x="3012"
-     inkscape:window-y="199"
+     inkscape:window-x="2752"
+     inkscape:window-y="196"
      inkscape:window-maximized="0"
      showborder="true"
      inkscape:object-nodes="false"
@@ -541,7 +541,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>

index.php

@@ -223,11 +223,18 @@
         }
       },
 
-      onSubmit: function(invalid) {
+      onSubmit: function(invalid, e) {
+        e.preventDefault();
         $('#invalid').show().text(invalid ? (invalid +' invalid fields') : 'All good!');
+      },
+
+      steps: {
+        fadeSpeed: 300
       }
     });
 
+
+
     $('form.idealforms').find('input, select, textarea').on('change keyup', function() {
       $('#invalid').hide();
     });

js/extensions/steps/idealsteps.js

@@ -14,8 +14,8 @@
     wrap: '.idealsteps-wrap',
     step: '.idealsteps-step',
     activeClass: 'idealsteps-step-active',
-    before: null,
-    after: null,
+    before: $.noop,
+    after: $.noop,
     fadeSpeed: 0
   };
 
@@ -41,7 +41,9 @@
 
       this.$navItems.click(function(e) {
         e.preventDefault();
-        self.go(self.$navItems.index(this));
+        if (! $(this).is('.'+ self.opts.activeClass)) {
+          self.go(self.$navItems.index(this));
+        }
       });
     },
 
@@ -75,12 +77,12 @@
       if (idx >= this.$steps.length) idx = 0;
       if (idx < 0) idx = this.$steps.length-1;
 
-      if (this.opts.before) this.opts.before.call(this, idx);
+      this.opts.before.call(this, idx);
 
       this.$navItems.removeClass(active).eq(idx).addClass(active);
-      this.$steps.fadeOut(fadeSpeed).eq(idx).fadeIn(fadeSpeed);
+      this.$steps.hide().eq(idx).fadeIn(fadeSpeed);
 
-      if (this.opts.after) this.opts.after.call(this, idx);
+      this.opts.after.call(this, idx);
     },
 
     prev: function() {

js/extensions/steps/steps.ext.js

@@ -17,8 +17,8 @@ module.exports = {
       wrap: '.idealsteps-wrap',
       step: '.idealsteps-step',
       activeClass: 'idealsteps-step-active',
-      before: null,
-      after: null,
+      before: $.noop,
+      after: $.noop,
       fadeSpeed: 0,
 
       i18n: {

js/private.js

@@ -20,7 +20,6 @@ module.exports = {
     this.addRules(this.opts.rules || {});
 
     this.$form.submit(function(e) {
-      e.preventDefault();
       self._validateAll();
       self.focusFirstInvalid();
       self.opts.onSubmit.call(self, self.getInvalid().length, e);

styl/idealsteps.styl

@@ -5,6 +5,7 @@
   box-sizing: border-box
 
 .idealsteps-step
+  display: none
   clearfix()
 
 .idealsteps-nav
@@ -66,6 +67,7 @@
       background: white
       color: valid
       font-weight: bold
+      cursor: default
 
       &:after
         border-left-color: white