add Fort.js

This commit is contained in:
Peter Dave Hello
2014-06-13 22:25:56 +08:00
parent e73b7a9af4
commit 7405e2cec6
5 changed files with 186 additions and 0 deletions
+16
View File
@@ -0,0 +1,16 @@
.top {
/*background: #009dff;*/
background: linear-gradient(to right,#009dff 0,#00c8ff 100%);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
height: 4px;
transition: all 1s;
width: 0;
overflow: hidden;
}
.colors {
width: 100%;
height: 4px;
}
+140
View File
@@ -0,0 +1,140 @@
function solid(){
function cback(e) {
var t = [];
for (var n = inputs.length; n--;) {
if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
var i = inputs.length;
var s = document.querySelectorAll(".top");
for (var o = s.length; o--;) {
s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),
inputs = [];
for (var i = forms.length; i--;) {
var els = forms[i].querySelectorAll("input, textarea, select");
for (var j = els.length; j--;) {
classes = els[j].className.replace(/\s+/g, ' ').split(' ');
ignore = false;
for (var k = classes.length; k--;)
{
if (classes[k] == "ignore")
{
ignore = true;
break;
}
}
if (els[j].type != "button" && els[j].type != "submit" && !ignore) {
inputs.push(els[j]);
els[j].addEventListener("input", cback, false);
}
}
}
}
function flash(){
function cback(e) {
var t = [];
for (var n = inputs.length; n--;) {
if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
var i = inputs.length;
var s = document.querySelectorAll(".top");
for (var o = s.length; o--;) {
s[o].style.width = 100 - r / i * 100 + "%";
s[o].style.background = cols[i-r-1];
}
}
var forms = document.querySelectorAll(".form"),
inputs = [];
for (var i = forms.length; i--;) {
var els = forms[i].querySelectorAll("input, textarea, select");
for (var j = els.length; j--;) {
if (els[j].type != "button" && els[j].type != "submit") {
inputs.push(els[j]);
els[j].addEventListener("input", cback, false);
}
}
}
//Edit colors here
var cols = ["#1ABC9C","#EC7063","#3498DB"];
}
function gradient(){
function cback(e) {
var t = [];
for (var n = inputs.length; n--;) {
if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
var i = inputs.length;
var s = document.querySelectorAll(".top");
for (var o = s.length; o--;) {
s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),
inputs = [];
for (var i = forms.length; i--;) {
var els = forms[i].querySelectorAll("input, textarea, select");
for (var j = els.length; j--;) {
if (els[j].type != "button" && els[j].type != "submit") {
inputs.push(els[j]);
els[j].addEventListener("input", cback, false);
}
}
}
}
function sections(){
function cback(e) {
var t = [];
for (var n = inputs.length; n--;) {
if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
var i = inputs.length;
var s = document.querySelectorAll(".top");
for (var o = s.length; o--;) {
s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),
inputs = [];
for (var i = forms.length; i--;) {
var els = forms[i].querySelectorAll("input, textarea, select");
for (var j = els.length; j--;) {
if (els[j].type != "button" && els[j].type != "submit") {
inputs.push(els[j]);
els[j].addEventListener("input", cback, false);
}
}
}
function generateCSSGradient(colours) {
var l = colours.length, i;
for( i=0; i<l; i++) colours[i] = colours[i].join(" ");
return "linear-gradient( to right, "+colours.join(", ")+")";
}
//Edit your colors here. Enter the color twice.
var cols = [
["#1ABC9C","0%"],
["#1ABC9C","33.3%"],
["#EC7063","33.3%"],
["#EC7063","66.6%"],
["#3498DB","66.6%"],
["#3498DB","100%"]
];
document.getElementsByClassName('top').innerHTML = '<div class="colors"></div>';
document.querySelector(".colors").style.background = generateCSSGradient(cols);
var window_width = window.innerWidth + "px";
document.querySelector(".colors").style.width = window_width;
};
+1
View File
@@ -0,0 +1 @@
.top{background:#009dff;position:fixed;z-index:1031;top:0;left:0;height:4px;transition:all 1s;width:0;overflow:hidden;}.colors{width:100%;height:4px;}
+1
View File
@@ -0,0 +1 @@
function solid(){function d(m){var j=[];for(var q=a.length;q--;){if(!a[q].value.length){j.push(a[q])}}var l=j.length;var h=a.length;var k=document.querySelectorAll(".top");for(var p=k.length;p--;){k[p].style.width=100-l/h*100+"%"}}var c=document.querySelectorAll(".form"),a=[];for(var g=c.length;g--;){var f=c[g].querySelectorAll("input, textarea, select");for(var e=f.length;e--;){classes=f[e].className.replace(/\s+/g," ").split(" ");ignore=false;for(var b=classes.length;b--;){if(classes[b]=="ignore"){ignore=true;break}}if(f[e].type!="button"&&f[e].type!="submit"&&!ignore){a.push(f[e]);f[e].addEventListener("input",d,false)}}}}function flash(){function c(m){var j=[];for(var q=a.length;q--;){if(!a[q].value.length){j.push(a[q])}}var l=j.length;var h=a.length;var k=document.querySelectorAll(".top");for(var p=k.length;p--;){k[p].style.width=100-l/h*100+"%";k[p].style.background=g[h-l-1]}}var b=document.querySelectorAll(".form"),a=[];for(var f=b.length;f--;){var e=b[f].querySelectorAll("input, textarea, select");for(var d=e.length;d--;){if(e[d].type!="button"&&e[d].type!="submit"){a.push(e[d]);e[d].addEventListener("input",c,false)}}}var g=["#1ABC9C","#EC7063","#3498DB"]}function gradient(){function c(l){var h=[];for(var p=a.length;p--;){if(!a[p].value.length){h.push(a[p])}}var k=h.length;var g=a.length;var j=document.querySelectorAll(".top");for(var m=j.length;m--;){j[m].style.width=100-k/g*100+"%"}}var b=document.querySelectorAll(".form"),a=[];for(var f=b.length;f--;){var e=b[f].querySelectorAll("input, textarea, select");for(var d=e.length;d--;){if(e[d].type!="button"&&e[d].type!="submit"){a.push(e[d]);e[d].addEventListener("input",c,false)}}}}function sections(){function k(q){var l=[];for(var v=f.length;v--;){if(!f[v].value.length){l.push(f[v])}}var p=l.length;var j=f.length;var m=document.querySelectorAll(".top");for(var u=m.length;u--;){m[u].style.width=100-p/j*100+"%"}}var a=document.querySelectorAll(".form"),f=[];for(var e=a.length;e--;){var c=a[e].querySelectorAll("input, textarea, select");for(var d=c.length;d--;){if(c[d].type!="button"&&c[d].type!="submit"){f.push(c[d]);c[d].addEventListener("input",k,false)}}}function h(n){var j=n.length,m;for(m=0;m<j;m++){n[m]=n[m].join(" ")}return"linear-gradient( to right, "+n.join(", ")+")"}var g=[["#1ABC9C","0%"],["#1ABC9C","33.3%"],["#EC7063","33.3%"],["#EC7063","66.6%"],["#3498DB","66.6%"],["#3498DB","100%"]];document.getElementsByClassName("top").innerHTML='<div class="colors"></div>';document.querySelector(".colors").style.background=h(g);var b=window.innerWidth+"px";document.querySelector(".colors").style.width=b};
+28
View File
@@ -0,0 +1,28 @@
{
"name": "Fort.js",
"title": "Fort.js",
"filename": "fort.min.js",
"version": "1.0.0",
"description": "Modern progress bar for form completion.",
"homepage": "http://colourity.github.io/",
"author": {
"name": "Colourity",
"url": "http://www.colourity.com"
},
"repositories": [
{
"type": "git",
"url": "git://github.com/Colourity/Fort.js"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/Colourity/Fort.js/blob/master/LICENSE"
}
],
"keywords": [
"fort",
"fort.js"
]
}