-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.inputColorShift.js
119 lines (99 loc) · 2.86 KB
/
jquery.inputColorShift.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
(function($){
$.fn.inputColorShift = function(options) {
var defaults = {
maxlength: 100,
startColor: '#66FF00',
endColor: '#FF3333',
barRightOffset: 20
};
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
obj = $(this);
obj.addClass('inputColorShift');
clearEl = $(document.createElement('div')).addClass('inputColorShiftClearElement');
obj.after(clearEl);
num = $(document.createElement('div')).html(o.maxlength);
num.addClass('charCount');
obj.after(num);
barwidth = parseInt(obj.css('width')) - o.barRightOffset;
bar = $(document.createElement('div')).css('width',barwidth);
bar.css('background-color',o.startColor);
bar.addClass('dumpbar');
obj.after(bar);
obj.keydown(function() {
processKeystroke($(this), o, false);
});
obj.keyup(function(){
processKeystroke($(this), o, true);
});
});
};
})(jQuery);
function processKeystroke(inputEl, options, resetBar) {
inputLength = inputEl.val().length
if(options.maxlength - inputLength >= 0) {
inputEl.parent().find(".dumpbar").css('background-color',calculateBarColor(inputLength,options));
inputEl.parent().find('.charCount').html(options.maxlength - inputLength);
if(resetBar) {
origWidth = parseInt(inputEl.css('width')) - options.barRightOffset;
textPercent = 1 - (inputLength / options.maxlength);
inputEl.parent().find(".dumpbar").css('width',origWidth*textPercent);
}
} else {
// discard input stroke
contents = inputEl.val();
inputEl.focus().val(contents.substr(0, options.maxlength));
}
function calculateBarColor(txtLength, options) {
var widthPercent = (txtLength/options.maxlength);
var startHex = new Array();
for(var i=1; i <= 6; i++) {
endHex = getColorNumber(options.endColor[i]) - getColorNumber(options.startColor[i]);
hexNumber = ( getColorNumber(options.startColor[i]) + Math.floor(endHex * widthPercent) );
startHex[i] = getHexColorValue(hexNumber);
}
var newBGcolor = '#'+ startHex.join("");
return newBGcolor;
}
function getHexColorValue(val) {
var hexArray = new Array();
hexArray[0] = 0;
hexArray[1] = 1;
hexArray[2] = 2;
hexArray[3] = 3;
hexArray[4] = 4;
hexArray[5] = 5;
hexArray[6] = 6;
hexArray[7] = 7;
hexArray[8] = 8;
hexArray[9] = 9;
hexArray[10] = 'A';
hexArray[11] = 'B';
hexArray[12] = 'C';
hexArray[13] = 'D';
hexArray[14] = 'E';
hexArray[15] = 'F';
return hexArray[val];
}
function getColorNumber(val) {
var hexArray = new Array();
hexArray["0"] = 0;
hexArray["1"] = 1;
hexArray["2"] = 2;
hexArray["3"] = 3;
hexArray["4"] = 4;
hexArray["5"] = 5;
hexArray["6"] = 6;
hexArray["7"] = 7;
hexArray["8"] = 8;
hexArray["9"] = 9;
hexArray["A"] = 10;
hexArray["B"] = 11;
hexArray["C"] = 12;
hexArray["D"] = 13;
hexArray["E"] = 14;
hexArray["F"] = 15;
return hexArray[val.toUpperCase()];
}
}