Skip to content

Commit 1d63180

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 1d63180

4 files changed

Lines changed: 240 additions & 59 deletions

File tree

‎dist/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);

‎dist/jquery.typer.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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);

0 commit comments

Comments
 (0)