Skip to content

Commit

Permalink
refactored some of the options, so that options are bound to instance…
Browse files Browse the repository at this point in the history 
…, revamped and expanded test.html
  • Loading branch information
@kontur
kontur committed Mar 29, 2015
1 parent 61f1516 commit 82c002c
Show file tree
Hide file tree
Showing 2 changed files with 214 additions and 40 deletions.
43 changes: 25 additions & 18 deletions src/jquery.typer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,8 @@ String.prototype.rightChars = function(n){
intervalHandle,
typerInterval;

spanWithColor = function(color, backgroundColor) {
if (color === 'rgba(0, 0, 0, 0)') {
color = 'rgb(255, 255, 255)';
}

spanWithColor = function(color, backgroundColor) {
return $('<span></span>')
.css('color', color)
.css('background-color', backgroundColor);
Expand Down Expand Up @@ -100,7 +97,8 @@ String.prototype.rightChars = function(n){
position = $e.data('highlightPosition'),
leftText,
highlightedText,
rightText;
rightText,
options = $e.data('options');

if (!isNumber(position)) {
position = $e.data('rightStop') + 1;
Expand All @@ -120,8 +118,8 @@ String.prototype.rightChars = function(n){
$e.html(leftText)
.append(
spanWithColor(
$e.data('backgroundColor'),
opts.tapeColor === 'auto' ? $e.data('primaryColor') : opts.tapeColor
options.highlightColor === 'auto' ? $e.css('background-color') : options.highlightColor,
options.backgroundColor === 'auto' ? $e.css('color') : options.backgroundColor
)
.append(highlightedText)
)
Expand All @@ -139,30 +137,31 @@ String.prototype.rightChars = function(n){

return function($e) {
var targets;
var options = $e.data('options');

if ($e.data('typing')) {
return;
}

try {
targets = JSON.parse($e.attr(opts.typerDataAttr)).targets;
targets = JSON.parse($e.attr(options.typerDataAttr)).targets;
} catch (e) {}

if (typeof targets === "undefined") {
targets = $.map($e.attr(opts.typerDataAttr).split(','), function (e) {
targets = $.map($e.attr(options.typerDataAttr).split(','), function (e) {
return $.trim(e);
});
}

if (opts.typerOrder === 'random') {
if (options.typerOrder === 'random') {
$e.typeTo(targets[Math.floor(Math.random()*targets.length)]);
}
else if (opts.typerOrder === 'sequential') {
else if (options.typerOrder === 'sequential') {
$e.typeTo(targets[last]);
last = (last < targets.length - 1) ? last + 1 : 0;
}
else {
console.error("Type order of '" + opts.typerOrder + "' not supported");
console.error("Type order of '" + options.typerOrder + "' not supported");
clearInterval(intervalHandle);
}
};
Expand All @@ -173,10 +172,15 @@ String.prototype.rightChars = function(n){
$.fn.typer = function(options) {
var $elements = $(this);

if ($elements.length < 1) {
return;
}

opts = jQuery.extend({}, $.fn.typer.defaults, options);

return $elements.each(function () {
var $e = $(this);
$e.data('options', opts);

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

$.fn.typeTo = function (newString) {
$.fn.typeTo = function (newString, options) {
var
$e = $(this),
currentText = $e.text(),
i = 0,
j = 0;
j = 0
opts = jQuery.extend({}, $.fn.typer.defaults, options, $e.data('options'));

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

$e.data({
options: opts,
oldLeft: currentText.substring(0, i),
oldRight: currentText.rightChars(j - 1),
leftStop: i,
rightStop: currentText.length - j,
primaryColor: opts.tapeColor === 'auto' ? $e.data('primaryColor') : opts.tapeColor,
backgroundColor: $e.css('background-color'),
//primaryColor: opts.backgroundColor === 'auto' ? $e.data('primaryColor') : opts.backgroundColor,
//backgroundColor: $e.css('background-color'),
text: newString
});

Expand Down Expand Up @@ -271,8 +277,9 @@ String.prototype.rightChars = function(n){
typerDataAttr : 'data-typer-targets',
typerInterval : 2000,
debug : false,
tapeColor : 'auto',
typerOrder : 'random',
backgroundColor : 'auto',
highlightColor : 'auto',
typerOrder : 'random'
};

})(jQuery);
211 changes: 189 additions & 22 deletions test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,202 @@
<head>
<title>jquery.typer.js test page</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="src/jquery.typer.js"></script>
<style type="text/css">
h3 { color: blue; }
.cyan { background-color: cyan; padding: 1em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="src/jquery.typer.js"></script>
<style type="text/css">
body {
margin: 3em auto;
max-width: 40em;
}
#color-highlight {
color: #0b97c4;
}

#color-background {
background: #0b97c4;
}

.example {
min-height: 5em;
margin-bottom: 3em;
}

.background {
background-color: #ccc;
padding: 0.25em;
}

button {
margin: 1em 0;
}

h2 {
margin: 0 0 0.5em;
}

p {
font-family: monospace;
margin: 0;
}

.example > code {
background: #eee;
display: inline-block;
padding: 1em 0.5em;
margin: 0.5em 0;
min-width: 30em;
white-space: pre;
}
</style>
<body>

<h1>Hello, World!</h1>
<h2 data-typer-targets="Hello,Hi,Hola,Hallo,Haai,Ola,Kaixo,Moni,Aloha,Bonjour,Ciao,Hej">Welcome</h2>
<h1>Typer testing and samples!</h1>


<div class="example">
<h2>Default with <code>data-typer-targets</code></h2>

<p id="default" data-typer-targets="Hello,Hi,Hola,Hallo,Haai,Ola,Kaixo,Moni,Aloha,Bonjour,Ciao,Hej">Welcome</p>
<script>
$(function () {
$("#default").typer();
});
</script>
</div>


<div class="example">
<h2>Default, automatically using the element's text color as <code>highlightColor</code></h2>
<code>$("#element").typer();</code>

<p id="color-highlight" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$("#color-highlight").typer();
});
</script>
</div>


<div class="example">
<h2>Default, automatically using the element's text color as <code>highlightColor</code></h2>
<code>$("#element").typer();</code>

<p id="color-background" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$("#color-background").typer();
});
</script>
</div>


<div class="example">
<h2>With option <code>backgroundColor</code></h2>
<code>$("#element").typer({
backgroundColor: 'orange'
});
</code>

<p id="background-color" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$('#background-color').typer({
backgroundColor: 'orange'
});
});
</script>
</div>


<div class="example">
<h2>With option <code>highlightColor</code></h2>
<code>$("#element").typer({
highlightColor: 'orange'
});
</code>

<p id="highlight-color" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$('#highlight-color').typer({
highlightColor: 'orange'
});
});
</script>
</div>


<div class="example">
<h2>With option <code>highlightColor</code> and <code>backgroundColor</code> combined</h2>
<code>$("#element").typer({
highlightColor: 'orange',
backgroundColor: 'purple'
});
</code>
<p id="highlight-background-color" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$('#highlight-background-color').typer({
highlightColor: 'orange',
backgroundColor: 'purple'
});
});
</script>
</div>


<div class="example">
<h2>With option <code>random</code></h2>
<span>Randomize the strings in <code>data-typer-targets="lorem,ipsum,dol,solor"</code></span>
<code>$("#element").typer({
typerOrder: 'random'
});</code>

<p id="order-random" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$("#order-random").typer({
typerOrder: 'random'
});
});
</script>
</div>


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

<h3 data-typer-targets="foobar,lorem,ipsum">Hello World!</h3>
<p id="order-sequential" data-typer-targets="lorem,ipsum,dol,solor">Hello World!</p>
<script>
$(function () {
$("#order-sequential").typer({
typerOrder: 'sequential'
});
});
</script>
</div>

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

<p id="test"></p>
<div class="example">
<h2>Using <code>.typeTo()</code></h2>
<code>$("#element").typeTo("Hello Typer!");</code>
<p id="type-to"></p>
<button id="type-to-start">Type to!</button>
<script>
$(function () {
$('#type-to').typeTo('Hello Typer!');
$('#type-to-start').click(function () {
$('#type-to').html('').typeTo('Hello Typer!')
});
});
</script>
</div>

<script>
$(function () {
$('[data-typer-targets]').typer({
tapeColor: 'orange'
});

$('#test').typeTo('Hello World');
});
</script>
</body>
</html>

0 comments on commit 82c002c

Please sign in to comment.