Skip to content

Commit f68fdf7

Browse files
committed
Good first pass. $.fn.typer() isn't implemented yet.
0 parents  commit f68fdf7

File tree

3 files changed

+165
-0
lines changed

3 files changed

+165
-0
lines changed

README.md

Whitespace-only changes.

src/jquery.typer.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
(function($) {
2+
var
3+
options = {
4+
highlightSpeed: 20,
5+
typeSpeed: 100,
6+
clearDelay: 500,
7+
typeDelay: 200,
8+
clearOnHighlight: true
9+
},
10+
highlight,
11+
clearText,
12+
backspace,
13+
type,
14+
spanWithColor,
15+
clearDelay,
16+
typeDelay,
17+
clearData,
18+
isNumber;
19+
20+
getHighlightInterval = function () {
21+
return options.highlightSpeed;
22+
};
23+
24+
getTypeInterval = function () {
25+
return options.typeSpeed;
26+
},
27+
28+
clearDelay = function () {
29+
return options.clearDelay;
30+
},
31+
32+
typeDelay = function () {
33+
return options.typeDelay;
34+
}
35+
36+
spanWithColor = function(color, backgroundColor) {
37+
if (color === 'rgba(0, 0, 0, 0)') {
38+
color = 'rgb(255, 255, 255)';
39+
}
40+
41+
return $('<span></span>')
42+
.css('color', color)
43+
.css('background-color', backgroundColor);
44+
};
45+
46+
isNumber = function (n) {
47+
return !isNaN(parseFloat(n)) && isFinite(n);
48+
};
49+
50+
clearData = function ($e) {
51+
$e
52+
.data('typePosition', null)
53+
.data('highlightPosition', null)
54+
.data('stopAt', null)
55+
.data('primaryColor', null)
56+
.data('backgroundColor', null)
57+
.data('text', null);
58+
};
59+
60+
type = function ($e) {
61+
var
62+
position = $e.data('typePosition'),
63+
text = $e.data('text');
64+
65+
if (!isNumber(position)) {
66+
position = $e.data('stopAt');
67+
}
68+
69+
if (position >= text.length) {
70+
clearData($e);
71+
return;
72+
}
73+
74+
$e.text($e.text() + text.substring(position, position + 1));
75+
76+
$e.data('typePosition', position + 1);
77+
78+
setTimeout(function () {
79+
type($e);
80+
}, getTypeInterval());
81+
};
82+
83+
clearText = function ($e) {
84+
$e.find('span').remove();
85+
86+
setTimeout(function () {
87+
type($e);
88+
}, typeDelay());
89+
};
90+
91+
highlight = function ($e) {
92+
var
93+
position = $e.data('highlightPosition'),
94+
plainText,
95+
highlightedText;
96+
97+
if (!isNumber(position)) {
98+
position = $e.text().length;
99+
}
100+
101+
if (position <= $e.data('stopAt')) {
102+
setTimeout(function () {
103+
clearText($e);
104+
}, clearDelay());
105+
return;
106+
}
107+
108+
plainText = $e.text().substring(0, position - 1);
109+
highlightedText = $e.text().substring(position - 1);
110+
111+
$e.html(plainText);
112+
113+
$e.append(
114+
spanWithColor(
115+
$e.data('backgroundColor'),
116+
$e.data('primaryColor')
117+
)
118+
.append(highlightedText)
119+
);
120+
121+
$e.data('highlightPosition', position - 1);
122+
123+
setTimeout(function () {
124+
return highlight($e);
125+
}, getHighlightInterval());
126+
};
127+
128+
$.fn.typer = function() {
129+
130+
};
131+
132+
$.fn.typeTo = function (newString) {
133+
var
134+
$e = $(this),
135+
currentText = $e.text(),
136+
i = 0;
137+
138+
if (currentText !== $e.html()) {
139+
console.error("Typer does not work on elements with child elements.");
140+
return;
141+
}
142+
143+
while (currentText.charAt(i) === newString.charAt(i)) {
144+
i++;
145+
}
146+
147+
$e.data('stopAt', i);
148+
$e.data('primaryColor', $e.css('color'));
149+
$e.data('backgroundColor', $e.css('background-color'));
150+
$e.data('text', newString);
151+
highlight($e);
152+
};
153+
})(jQuery);

test.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
</head>
5+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
6+
<script src="/src/jquery.typer.js"></script>
7+
<body>
8+
9+
<h1>Hello, World!</h1>
10+
<h2>Greetings Human</h2>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)