console.clear();
// classie.js
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
/*! modernizr 3.6.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-addtest-atrule-domprefixes-hasevent-mq-prefixed-prefixedcss-prefixedcssvalue-prefixes-setclasses-testallprops-testprop-teststyles !*/
!function(e,n,t){function r(e){var n=x.className,t=Modernizr._config.classPrefix||"";if(b&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),b?x.className.baseVal=n:x.className=n)}function o(e,n){return typeof e===n}function i(){var e,n,t,r,i,s,u;for(var a in S)if(S.hasOwnProperty(a)){if(e=[],n=S[a],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(r=o(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e[i],u=s.split("."),1===u.length?Modernizr[u[0]]=r:(!Modernizr[u[0]]||Modernizr[u[0]]instanceof Boolean||(Modernizr[u[0]]=new Boolean(Modernizr[u[0]])),Modernizr[u[0]][u[1]]=r),_.push((r?"":"no-")+u.join("-"))}}function s(e,n){if("object"==typeof e)for(var t in e)T(e,t)&&s(t,e[t]);else{e=e.toLowerCase();var o=e.split("."),i=Modernizr[o[0]];if(2==o.length&&(i=i[o[1]]),"undefined"!=typeof i)return Modernizr;n="function"==typeof n?n():n,1==o.length?Modernizr[o[0]]=n:(!Modernizr[o[0]]||Modernizr[o[0]]instanceof Boolean||(Modernizr[o[0]]=new Boolean(Modernizr[o[0]])),Modernizr[o[0]][o[1]]=n),r([(n&&0!=n?"":"no-")+o.join("-")]),Modernizr._trigger(e,n)}return Modernizr}function u(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):b?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function f(){var e=n.body;return e||(e=a(b?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var i,s,u,l,c="modernizr",p=a("div"),d=f();if(parseInt(r,10))for(;r--;)u=a("div"),u.id=o?o[r]:c+(r+1),p.appendChild(u);return i=a("style"),i.type="text/css",i.id="s"+c,(d.fake?d:p).appendChild(i),d.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=c,d.fake&&(d.style.background="",d.style.overflow="hidden",l=x.style.overflow,x.style.overflow="hidden",x.appendChild(d)),s=t(p,e),d.fake?(d.parentNode.removeChild(d),x.style.overflow=l,x.offsetHeight):p.parentNode.removeChild(p),!!s}function p(e,n){return!!~(""+e).indexOf(n)}function d(e,n){return function(){return e.apply(n,arguments)}}function v(e,n,t){var r;for(var i in e)if(e[i]in n)return t===!1?e[i]:(r=n[e[i]],o(r,"function")?d(r,t||n):r);return!1}function m(n,t,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,n,t);var i=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(i){var s=i.error?"error":"log";i[s].call(i,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!t&&n.currentStyle&&n.currentStyle[r];return o}function h(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(l(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+l(n[o])+":"+r+")");return i=i.join(" or "),c("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==m(e,null,"position")})}return t}function y(e,n,r,i){function s(){f&&(delete q.style,delete q.modElem)}if(i=o(i,"undefined")?!1:i,!o(r,"undefined")){var l=h(e,r);if(!o(l,"undefined"))return l}for(var f,c,d,v,m,y=["modernizr","tspan","samp"];!q.style&&y.length;)f=!0,q.modElem=a(y.shift()),q.style=q.modElem.style;for(d=e.length,c=0;d>c;c++)if(v=e[c],m=q.style[v],p(v,"-")&&(v=u(v)),q.style[v]!==t){if(i||o(r,"undefined"))return s(),"pfx"==n?v:!0;try{q.style[v]=r}catch(g){}if(q.style[v]!=m)return s(),"pfx"==n?v:!0}return s(),!1}function g(e,n,t,r,i){var s=e.charAt(0).toUpperCase()+e.slice(1),u=(e+" "+j.join(s+" ")+s).split(" ");return o(n,"string")||o(n,"undefined")?y(u,n,r,i):(u=(e+" "+z.join(s+" ")+s).split(" "),v(u,n,t))}function C(e,n,r){return g(e,t,t,n,r)}var _=[],S=[],w={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){S.push({name:e,fn:n,options:t})},addAsyncTest:function(e){S.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=w,Modernizr=new Modernizr;var x=n.documentElement,b="svg"===x.nodeName.toLowerCase(),P=w._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];w._prefixes=P;var E="Moz O ms Webkit",z=w._config.usePrefixes?E.toLowerCase().split(" "):[];w._domPrefixes=z;var T;!function(){var e={}.hasOwnProperty;T=o(e,"undefined")||o(e.call,"undefined")?function(e,n){return n in e&&o(e.constructor.prototype[n],"undefined")}:function(n,t){return e.call(n,t)}}(),w._l={},w.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},w._trigger=function(e,n){if(this._l[e]){var t=this._l[e];setTimeout(function(){var e,r;for(e=0;e<t.length;e++)(r=t[e])(n)},0),delete this._l[e]}},Modernizr._q.push(function(){w.addTest=s});var j=w._config.usePrefixes?E.split(" "):[];w._cssomPrefixes=j;var A=function(n){var r,o=P.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var u=P[s],a=u.toUpperCase()+"_"+r;if(a in i)return"@-"+u.toLowerCase()+"-"+n}return!1};w.atRule=A;var N=function(){function e(e,n){var o;return e?(n&&"string"!=typeof n||(n=a(n||"div")),e="on"+e,o=e in n,!o&&r&&(n.setAttribute||(n=a("div")),n.setAttribute(e,""),o="function"==typeof n[e],n[e]!==t&&(n[e]=t),n.removeAttribute(e)),o):!1}var r=!("onblur"in n.documentElement);return e}();w.hasEvent=N;var L=function(e,n){var t=!1,r=a("div"),o=r.style;if(e in o){var i=z.length;for(o[e]=n,t=o[e];i--&&!t;)o[e]="-"+z[i]+"-"+n,t=o[e]}return""===t&&(t=!1),t};w.prefixedCSSValue=L;var O=function(){var n=e.matchMedia||e.msMatchMedia;return n?function(e){var t=n(e);return t&&t.matches||!1}:function(n){var t=!1;return c("@media "+n+" { #modernizr { position: absolute; } }",function(n){t="absolute"==(e.getComputedStyle?e.getComputedStyle(n,null):n.currentStyle).position}),t}}();w.mq=O;var k=(w.testStyles=c,{elem:a("modernizr")});Modernizr._q.push(function(){delete k.elem});var q={style:k.elem.style};Modernizr._q.unshift(function(){delete q.style});w.testProp=function(e,n,r){return y([e],t,n,r)};w.testAllProps=g;var R=w.prefixed=function(e,n,t){return 0===e.indexOf("@")?A(e):(-1!=e.indexOf("-")&&(e=u(e)),n?g(e,n,t):g(e,"pfx"))};w.prefixedCSS=function(e){var n=R(e);return n&&l(n)};w.testAllProps=C,i(),r(_),delete w.addTest,delete w.addAsyncTest;for(var M=0;M<Modernizr._q.length;M++)Modernizr._q[M]();e.Modernizr=Modernizr}(window,document);
// stepsForm.js
/**
* stepsForm.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
;( function( window ) {
'use strict';
var transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function stepsForm( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
stepsForm.prototype.options = {
onSubmit : function() { return false; }
};
stepsForm.prototype._init = function() {
// current question
this.current = 0;
// questions
this.questions = [].slice.call( this.el.querySelectorAll( 'ol.questions > li' ) );
// total questions
this.questionsCount = this.questions.length;
// show first question
classie.addClass( this.questions[0], 'current' );
// next question control
this.ctrlNext = this.el.querySelector( 'button.next' );
// progress bar
this.progress = this.el.querySelector( 'div.progress' );
// question number status
this.questionStatus = this.el.querySelector( 'span.number' );
// current question placeholder
this.currentNum = this.questionStatus.querySelector( 'span.number-current' );
this.currentNum.innerHTML = Number( this.current + 1 );
// total questions placeholder
this.totalQuestionNum = this.questionStatus.querySelector( 'span.number-total' );
this.totalQuestionNum.innerHTML = this.questionsCount;
// error message
this.error = this.el.querySelector( 'span.error-message' );
// init events
this._initEvents();
};
stepsForm.prototype._initEvents = function() {
var self = this,
// first input
firstElInput = this.questions[ this.current ].querySelector( 'input' ),
// focus
onFocusStartFn = function() {
firstElInput.removeEventListener( 'focus', onFocusStartFn );
classie.addClass( self.ctrlNext, 'show' );
};
// show the next question control first time the input gets focused
firstElInput.addEventListener( 'focus', onFocusStartFn );
// show next question
this.ctrlNext.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._nextQuestion();
} );
// pressing enter will jump to next question
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
// enter
if( keyCode === 13 ) {
ev.preventDefault();
self._nextQuestion();
}
} );
// disable tab
this.el.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
// tab
if( keyCode === 9 ) {
ev.preventDefault();
}
} );
};
stepsForm.prototype._nextQuestion = function() {
if( !this._validade() ) {
return false;
}
// check if form is filled
if( this.current === this.questionsCount - 1 ) {
this.isFilled = true;
}
// clear any previous error messages
this._clearError();
// current question
var currentQuestion = this.questions[ this.current ];
// increment current question iterator
++this.current;
// update progress bar
this._progress();
if( !this.isFilled ) {
// change the current question number/status
this._updateQuestionNumber();
// add class "show-next" to form element (start animations)
classie.addClass( this.el, 'show-next' );
// remove class "current" from current question and add it to the next one
// current question
var nextQuestion = this.questions[ this.current ];
classie.removeClass( currentQuestion, 'current' );
classie.addClass( nextQuestion, 'current' );
}
// after animation ends, remove class "show-next" from form element and change current question placeholder
var self = this,
onEndTransitionFn = function( ev ) {
if( support.transitions ) {
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
if( self.isFilled ) {
self._submit();
}
else {
classie.removeClass( self.el, 'show-next' );
self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
self.questionStatus.removeChild( self.nextQuestionNum );
// force the focus on the next input
nextQuestion.querySelector( 'input' ).focus();
}
};
if( support.transitions ) {
this.progress.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
// updates the progress bar by setting its width
stepsForm.prototype._progress = function() {
this.progress.style.width = this.current * ( 100 / this.questionsCount ) + '%';
}
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {
// first, create next question number placeholder
this.nextQuestionNum = document.createElement( 'span' );
this.nextQuestionNum.className = 'number-next';
this.nextQuestionNum.innerHTML = Number( this.current + 1 );
// insert it in the DOM
this.questionStatus.appendChild( this.nextQuestionNum );
}
// submits the form
stepsForm.prototype._submit = function() {
console.log("submit");
this.options.onSubmit( this.el );
}
// TODO (next version..)
// the validation function
stepsForm.prototype._validade = function() {
// current question´s input
var input = this.questions[ this.current ].querySelector( 'input' ).value;
if( input === '' ) {
this._showError( 'EMPTYSTR' );
return false;
}
return true;
}
// TODO (next version..)
stepsForm.prototype._showError = function( err ) {
var message = '';
switch( err ) {
case 'EMPTYSTR' :
message = 'Please fill the field before continuing';
break;
case 'INVALIDEMAIL' :
message = 'Please fill a valid email address';
break;
// ...
};
this.error.innerHTML = message;
classie.addClass( this.error, 'show' );
}
// clears/hides the current error message
stepsForm.prototype._clearError = function() {
classie.removeClass( this.error, 'show' );
}
// add to global namespace
window.stepsForm = stepsForm;
})( window );
var theForm = document.getElementById("theForm");
new stepsForm(theForm, {
onSubmit: function(form) {
// hide form
classie.addClass(theForm.querySelector(".simform-inner"), "hide");
/*
form.submit()
or
AJAX request (maybe show loading indicator while we don't have an answer..)
*/
Email.send({
SecureToken : "fbd942ff-7e0b-481c-9a3f-6166844b5f8b",
To : '[email protected]',
From : "[email protected]",
Subject : "Received Form",
Body : "This is the content the form received:\n Question#1:"
+ document.getElementById('q1').value
+ "\n Question #2:"
+ document.getElementById('q2').value
+ "\n Question #3:"
+ document.getElementById('q3').value
}).then(
message => alert("Form Sent")
);
// let's just simulate something...
var messageEl = theForm.querySelector(".final-message");
messageEl.innerHTML = "Thank you for your time.";
classie.addClass(messageEl, "show");
}
});
!
