Skip to content

Commit 82c002c

Browse files
konturkontur
committed
refactored some of the options, so that options are bound to instance, revamped and expanded test.html
1 parent 61f1516 commit 82c002c

2 files changed

Lines changed: 214 additions & 40 deletions

File tree

‎src/jquery.typer.js‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,8 @@ String.prototype.rightChars = function(n){
2626
intervalHandle,
2727
typerInterval;
2828

29-
spanWithColor = function(color, backgroundColor) {
30-
if (color === 'rgba(0, 0, 0, 0)') {
31-
color = 'rgb(255, 255, 255)';
32-
}
3329

30+
spanWithColor = function(color, backgroundColor) {
3431
return $('<span></span>')
3532
.css('color', color)
3633
.css('background-color', backgroundColor);
@@ -100,7 +97,8 @@ String.prototype.rightChars = function(n){
10097
position = $e.data('highlightPosition'),
10198
leftText,
10299
highlightedText,
103-
rightText;
100+
rightText,
101+
options = $e.data('options');
104102

105103
if (!isNumber(position)) {
106104
position = $e.data('rightStop') + 1;
@@ -120,8 +118,8 @@ String.prototype.rightChars = function(n){
120118
$e.html(leftText)
121119
.append(
122120
spanWithColor(
123-
$e.data('backgroundColor'),
124-
opts.tapeColor === 'auto' ? $e.data('primaryColor') : opts.tapeColor
121+
options.highlightColor === 'auto' ? $e.css('background-color') : options.highlightColor,
122+
options.backgroundColor === 'auto' ? $e.css('color') : options.backgroundColor
125123
)
126124
.append(highlightedText)
127125
)
@@ -139,30 +137,31 @@ String.prototype.rightChars = function(n){
139137

140138
return function($e) {
141139
var targets;
140+
var options = $e.data('options');
142141

143142
if ($e.data('typing')) {
144143
return;
145144
}
146145

147146
try {
148-
targets = JSON.parse($e.attr(opts.typerDataAttr)).targets;
147+
targets = JSON.parse($e.attr(options.typerDataAttr)).targets;
149148
} catch (e) {}
150149

151150
if (typeof targets === "undefined") {
152-
targets = $.map($e.attr(opts.typerDataAttr).split(','), function (e) {
151+
targets = $.map($e.attr(options.typerDataAttr).split(','), function (e) {
153152
return $.trim(e);
154153
});
155154
}
156155

157-
if (opts.typerOrder === 'random') {
156+
if (options.typerOrder === 'random') {
158157
$e.typeTo(targets[Math.floor(Math.random()*targets.length)]);
159158
}
160-
else if (opts.typerOrder === 'sequential') {
159+
else if (options.typerOrder === 'sequential') {
161160
$e.typeTo(targets[last]);
162161
last = (last < targets.length - 1) ? last + 1 : 0;
163162
}
164163
else {
165-
console.error("Type order of '" + opts.typerOrder + "' not supported");
164+
console.error("Type order of '" + options.typerOrder + "' not supported");
166165
clearInterval(intervalHandle);
167166
}
168167
};
@@ -173,10 +172,15 @@ String.prototype.rightChars = function(n){
173172
$.fn.typer = function(options) {
174173
var $elements = $(this);
175174

175+
if ($elements.length < 1) {
176+
return;
177+
}
178+
176179
opts = jQuery.extend({}, $.fn.typer.defaults, options);
177180

178181
return $elements.each(function () {
179182
var $e = $(this);
183+
$e.data('options', opts);
180184

181185
if (typeof $e.attr(opts.typerDataAttr) === "undefined") {
182186
return;
@@ -189,12 +193,13 @@ String.prototype.rightChars = function(n){
189193
});
190194
};
191195

192-
$.fn.typeTo = function (newString) {
196+
$.fn.typeTo = function (newString, options) {
193197
var
194198
$e = $(this),
195199
currentText = $e.text(),
196200
i = 0,
197-
j = 0;
201+
j = 0
202+
opts = jQuery.extend({}, $.fn.typer.defaults, options, $e.data('options'));
198203

199204
if (currentText === newString) {
200205
if (opts.debug === true) {
@@ -225,12 +230,13 @@ String.prototype.rightChars = function(n){
225230
newString = newString.substring(i, newString.length - j + 1);
226231

227232
$e.data({
233+
options: opts,
228234
oldLeft: currentText.substring(0, i),
229235
oldRight: currentText.rightChars(j - 1),
230236
leftStop: i,
231237
rightStop: currentText.length - j,
232-
primaryColor: opts.tapeColor === 'auto' ? $e.data('primaryColor') : opts.tapeColor,
233-
backgroundColor: $e.css('background-color'),
238+
//primaryColor: opts.backgroundColor === 'auto' ? $e.data('primaryColor') : opts.backgroundColor,
239+
//backgroundColor: $e.css('background-color'),
234240
text: newString
235241
});
236242

@@ -271,8 +277,9 @@ String.prototype.rightChars = function(n){
271277
typerDataAttr : 'data-typer-targets',
272278
typerInterval : 2000,
273279
debug : false,
274-
tapeColor : 'auto',
275-
typerOrder : 'random',
280+
backgroundColor : 'auto',
281+
highlightColor : 'auto',
282+
typerOrder : 'random'
276283
};
277284

278285
})(jQuery);

‎test.html‎

Lines changed: 189 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,202 @@
33
<head>
44
<title>jquery.typer.js test page</title>
55
</head>
6-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
7-
<script src="src/jquery.typer.js"></script>
8-
<style type="text/css">
9-
h3 { color: blue; }
10-
.cyan { background-color: cyan; padding: 1em; }
11-
</style>
6+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
7+
<script src="src/jquery.typer.js"></script>
8+
<style type="text/css">
9+
body {
10+
margin: 3em auto;
11+
max-width: 40em;
12+
}
13+
#color-highlight {
14+
color: #0b97c4;
15+
}
16+
17+
#color-background {
18+
background: #0b97c4;
19+
}
20+
21+
.example {
22+
min-height: 5em;
23+
margin-bottom: 3em;
24+
}
25+
26+
.background {
27+
background-color: #ccc;
28+
padding: 0.25em;
29+
}
30+
31+
button {
32+
margin: 1em 0;
33+
}
34+
35+
h2 {
36+
margin: 0 0 0.5em;
37+
}
38+
39+
p {
40+
font-family: monospace;
41+
margin: 0;
42+
}
43+
44+
.example > code {
45+
background: #eee;
46+
display: inline-block;
47+
padding: 1em 0.5em;
48+
margin: 0.5em 0;
49+
min-width: 30em;
50+
white-space: pre;
51+
}
52+
</style>
1253
<body>
1354

14-
<h1>Hello, World!</h1>
15-
<h2 data-typer-targets="Hello,Hi,Hola,Hallo,Haai,Ola,Kaixo,Moni,Aloha,Bonjour,Ciao,Hej">Welcome</h2>
55+
<h1>Typer testing and samples!</h1>
56+
57+
58+
<div class="example">
59+
<h2>Default with <code>data-typer-targets</code></h2>
60+
61+
<p id="default" data-typer-targets="Hello,Hi,Hola,Hallo,Haai,Ola,Kaixo,Moni,Aloha,Bonjour,Ciao,Hej">Welcome</p>
62+
<script>
63+
$(function () {
64+
$("#default").typer();
65+
});
66+
</script>
67+
</div>
68+
69+
70+
<div class="example">
71+
<h2>Default, automatically using the element's text color as <code>highlightColor</code></h2>
72+
<code>$("#element").typer();</code>
73+
74+
<p id="color-highlight" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
75+
<script>
76+
$(function () {
77+
$("#color-highlight").typer();
78+
});
79+
</script>
80+
</div>
81+
82+
83+
<div class="example">
84+
<h2>Default, automatically using the element's text color as <code>highlightColor</code></h2>
85+
<code>$("#element").typer();</code>
86+
87+
<p id="color-background" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
88+
<script>
89+
$(function () {
90+
$("#color-background").typer();
91+
});
92+
</script>
93+
</div>
94+
95+
96+
<div class="example">
97+
<h2>With option <code>backgroundColor</code></h2>
98+
<code>$("#element").typer({
99+
backgroundColor: 'orange'
100+
});
101+
</code>
102+
103+
<p id="background-color" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
104+
<script>
105+
$(function () {
106+
$('#background-color').typer({
107+
backgroundColor: 'orange'
108+
});
109+
});
110+
</script>
111+
</div>
112+
113+
114+
<div class="example">
115+
<h2>With option <code>highlightColor</code></h2>
116+
<code>$("#element").typer({
117+
highlightColor: 'orange'
118+
});
119+
</code>
120+
121+
<p id="highlight-color" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
122+
<script>
123+
$(function () {
124+
$('#highlight-color').typer({
125+
highlightColor: 'orange'
126+
});
127+
});
128+
</script>
129+
</div>
130+
131+
132+
<div class="example">
133+
<h2>With option <code>highlightColor</code> and <code>backgroundColor</code> combined</h2>
134+
<code>$("#element").typer({
135+
highlightColor: 'orange',
136+
backgroundColor: 'purple'
137+
});
138+
</code>
139+
<p id="highlight-background-color" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
140+
<script>
141+
$(function () {
142+
$('#highlight-background-color').typer({
143+
highlightColor: 'orange',
144+
backgroundColor: 'purple'
145+
});
146+
});
147+
</script>
148+
</div>
149+
150+
151+
<div class="example">
152+
<h2>With option <code>random</code></h2>
153+
<span>Randomize the strings in <code>data-typer-targets="lorem,ipsum,dol,solor"</code></span>
154+
<code>$("#element").typer({
155+
typerOrder: 'random'
156+
});</code>
157+
158+
<p id="order-random" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
159+
<script>
160+
$(function () {
161+
$("#order-random").typer({
162+
typerOrder: 'random'
163+
});
164+
});
165+
</script>
166+
</div>
167+
16168

17-
<h2 data-typer-targets="abcdefgfedcba,afgfa">Welcome</h2>
169+
<div class="example">
170+
<h2>With option <code>sequential</code></h2>
171+
<span>Type the strings in <code>data-typer-targets="lorem,ipsum,dol,solor"</code> in sequence</span>
172+
<code>$("#element").typer({
173+
typerOrder: 'sequential'
174+
});</code>
18175

19-
<h3 data-typer-targets="foobar,lorem,ipsum">Hello World!</h3>
176+
<p id="order-sequential" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
177+
<script>
178+
$(function () {
179+
$("#order-sequential").typer({
180+
typerOrder: 'sequential'
181+
});
182+
});
183+
</script>
184+
</div>
20185

21-
<div class="cyan">
22-
<h3 data-typer-targets="foobar,lorem,ipsum">Hello World!</h3>
23-
</div>
24186

25-
<p id="test"></p>
187+
<div class="example">
188+
<h2>Using <code>.typeTo()</code></h2>
189+
<code>$("#element").typeTo("Hello Typer!");</code>
190+
<p id="type-to"></p>
191+
<button id="type-to-start">Type to!</button>
192+
<script>
193+
$(function () {
194+
$('#type-to').typeTo('Hello Typer!');
195+
$('#type-to-start').click(function () {
196+
$('#type-to').html('').typeTo('Hello Typer!')
197+
});
198+
});
199+
</script>
200+
</div>
26201

27-
<script>
28-
$(function () {
29-
$('[data-typer-targets]').typer({
30-
tapeColor: 'orange'
31-
});
32202

33-
$('#test').typeTo('Hello World');
34-
});
35-
</script>
36203
</body>
37204
</html>

0 commit comments

Comments
 (0)