From 27e460ab866b9d7a6436453e3a85ecd87e73a15a Mon Sep 17 00:00:00 2001 From: Johannes Neumeier Date: Sun, 13 Jan 2013 22:48:12 +0200 Subject: [PATCH 01/12] added debug option (default false) --- .gitignore | 1 + src/jquery.typer.js | 11 ++++++++--- test.html | 5 +++-- 3 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e970233 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.project \ No newline at end of file diff --git a/src/jquery.typer.js b/src/jquery.typer.js index 9c59e25..7ae48a9 100644 --- a/src/jquery.typer.js +++ b/src/jquery.typer.js @@ -19,7 +19,8 @@ String.prototype.rightChars = function(n){ typeDelay : 200, clearOnHighlight : true, typerDataAttr : 'data-typer-targets', - typerInterval : 2000 + typerInterval : 2000, + debug : false }, highlight, clearText, @@ -199,12 +200,16 @@ String.prototype.rightChars = function(n){ j = 0; if (currentText === newString) { - console.log("Our strings our equal, nothing to type"); + if ($.typer.options.debug === true) { + console.log("Our strings our equal, nothing to type"); + } return; } if (currentText !== $e.html()) { - console.error("Typer does not work on elements with child elements."); + if ($.typer.options.debug === true) { + console.error("Typer does not work on elements with child elements."); + } return; } diff --git a/test.html b/test.html index a9311f0..d6eed6e 100644 --- a/test.html +++ b/test.html @@ -1,9 +1,10 @@ + jquery.typer.js test page - - + +

Hello, World!

From 75c9266ef3410b8bfd9c42bf04ac6910a6bd156a Mon Sep 17 00:00:00 2001 From: Johannes Neumeier Date: Mon, 13 May 2013 22:39:06 +0300 Subject: [PATCH 02/12] added option tapeColor --- README.md | 3 ++- src/jquery.typer.js | 7 ++++--- test.html | 20 ++++++++++++++++++-- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3be0145..2b4d069 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,8 @@ There are some options that are available to you as well: typeDelay : 200, clearOnHighlight : true, typerDataAttr : 'data-typer-targets', - typerInterval : 2000 + typerInterval : 2000, + tapeColor : 'auto' // 'auto' or a css color value } ``` diff --git a/src/jquery.typer.js b/src/jquery.typer.js index 9c59e25..8482796 100644 --- a/src/jquery.typer.js +++ b/src/jquery.typer.js @@ -19,7 +19,8 @@ String.prototype.rightChars = function(n){ typeDelay : 200, clearOnHighlight : true, typerDataAttr : 'data-typer-targets', - typerInterval : 2000 + typerInterval : 2000, + tapeColor : 'auto' }, highlight, clearText, @@ -130,7 +131,7 @@ String.prototype.rightChars = function(n){ .append( spanWithColor( $e.data('backgroundColor'), - $e.data('primaryColor') + $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor ) .append(highlightedText) ) @@ -224,7 +225,7 @@ String.prototype.rightChars = function(n){ $e.data('oldRight', currentText.rightChars(j - 1)); $e.data('leftStop', i); $e.data('rightStop', currentText.length - j); - $e.data('primaryColor', $e.css('color')); + $e.data('primaryColor', $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor); $e.data('backgroundColor', $e.css('background-color')); $e.data('text', newString); highlight($e); diff --git a/test.html b/test.html index a9311f0..1cf9fc3 100644 --- a/test.html +++ b/test.html @@ -2,8 +2,12 @@ - - + + +

Hello, World!

@@ -11,9 +15,21 @@

Welcome

+

Hello World!

+ +
+

Hello World!

+
+ +

+ From 22f99deac504a835ab0f5bf1406cbc985a4de0c6 Mon Sep 17 00:00:00 2001 From: Johannes Neumeier Date: Tue, 14 May 2013 16:33:14 +0300 Subject: [PATCH 03/12] updated script src tags --- test.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test.html b/test.html index d6eed6e..46640d4 100644 --- a/test.html +++ b/test.html @@ -3,7 +3,7 @@ jquery.typer.js test page - + From 9ba3c270401b3ef0ac596d2be669e80b030dbe25 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 23 Aug 2013 23:58:15 -0400 Subject: [PATCH 04/12] Add the ability for typer.js to rewrite the whole string rather than being 'smart' about it. In certain cases it looks better if the whole string is replaced rather than the difference. --- src/jquery.typer.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/jquery.typer.js b/src/jquery.typer.js index d1520cc..d7fd92d 100644 --- a/src/jquery.typer.js +++ b/src/jquery.typer.js @@ -18,6 +18,7 @@ String.prototype.rightChars = function(n){ clearDelay : 500, typeDelay : 200, clearOnHighlight : true, + highlightEverything: true, typerDataAttr : 'data-typer-targets', typerInterval : 2000 }, @@ -211,12 +212,14 @@ String.prototype.rightChars = function(n){ $e.data('typing', true); - while (currentText.charAt(i) === newString.charAt(i)) { - i++; - } + if ($.typer.options.highlightEverything !== true) { + while (currentText.charAt(i) === newString.charAt(i)) { + i++; + } - while (currentText.rightChars(j) === newString.rightChars(j)) { - j++; + while (currentText.rightChars(j) === newString.rightChars(j)) { + j++; + } } newString = newString.substring(i, newString.length - j + 1); From 9703db16ca1a88cf1f45f470624428838b0e3da3 Mon Sep 17 00:00:00 2001 From: gerard sychay Date: Wed, 4 Sep 2013 23:58:56 -0400 Subject: [PATCH 05/12] Add 'typerOrder' option with possible values: 'random', 'sequential' --- README.md | 1 + src/jquery.typer.js | 48 ++++++++++++++++++++++++++++++--------------- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 3be0145..273e979 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ There are some options that are available to you as well: typeDelay : 200, clearOnHighlight : true, typerDataAttr : 'data-typer-targets', + typerOrder : 'random', // or 'sequential' typerInterval : 2000 } ``` diff --git a/src/jquery.typer.js b/src/jquery.typer.js index d1520cc..a6f0bc7 100644 --- a/src/jquery.typer.js +++ b/src/jquery.typer.js @@ -19,6 +19,7 @@ String.prototype.rightChars = function(n){ typeDelay : 200, clearOnHighlight : true, typerDataAttr : 'data-typer-targets', + typerOrder : 'random', typerInterval : 2000 }, highlight, @@ -33,6 +34,7 @@ String.prototype.rightChars = function(n){ typeWithAttribute, getHighlightInterval, getTypeInterval, + intervalHandle, typerInterval; spanWithColor = function(color, backgroundColor) { @@ -144,25 +146,39 @@ String.prototype.rightChars = function(n){ }, getHighlightInterval()); }; - typeWithAttribute = function ($e) { - var targets; + typeWithAttribute = (function () { + var last = 0; - if ($e.data('typing')) { - return; - } + return function($e) { + var targets; - try { - targets = JSON.parse($e.attr($.typer.options.typerDataAttr)).targets; - } catch (e) {} + if ($e.data('typing')) { + return; + } - if (typeof targets === "undefined") { - targets = $.map($e.attr($.typer.options.typerDataAttr).split(','), function (e) { - return $.trim(e); - }); - } + try { + targets = JSON.parse($e.attr($.typer.options.typerDataAttr)).targets; + } catch (e) {} - $e.typeTo(targets[Math.floor(Math.random()*targets.length)]); - }; + if (typeof targets === "undefined") { + targets = $.map($e.attr($.typer.options.typerDataAttr).split(','), function (e) { + return $.trim(e); + }); + } + + if ($.typer.options.typerOrder == 'random') { + $e.typeTo(targets[Math.floor(Math.random()*targets.length)]); + } + else if ($.typer.options.typerOrder == 'sequential') { + $e.typeTo(targets[last]); + last = (last < targets.length - 1) ? last + 1 : 0; + } + else { + console.error("Type order of '" + $.typer.options.typerOrder + "' not supported"); + clearInterval(intervalHandle); + } + } + })(); // Expose our options to the world. $.typer = (function () { @@ -186,7 +202,7 @@ String.prototype.rightChars = function(n){ } typeWithAttribute($e); - setInterval(function () { + intervalHandle = setInterval(function () { typeWithAttribute($e); }, typerInterval()); }); From a7a96fd315762c846cec7da439cae44605be1d56 Mon Sep 17 00:00:00 2001 From: Johannes Neumeier Date: Sat, 7 Dec 2013 20:54:51 +0200 Subject: [PATCH 06/12] amendment to previous commit that contained a typo --- src/jquery.typer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jquery.typer.js b/src/jquery.typer.js index 13f5399..10c7d22 100644 --- a/src/jquery.typer.js +++ b/src/jquery.typer.js @@ -232,7 +232,7 @@ String.prototype.rightChars = function(n){ oldRight: currentText.rightChars(j - 1), leftStop: i, rightStop: currentText.length - j, - primaryColor: $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor), + primaryColor: $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor, backgroundColor: $e.css('background-color'), text: newString }); From 394a849ca97ae575ef4600e9f596ea0bc66901ea Mon Sep 17 00:00:00 2001 From: Johannes Neumeier Date: Sat, 15 Mar 2014 15:16:32 +0200 Subject: [PATCH 07/12] added bower.json and dist folder --- bower.json | 29 ++++ dist/jquery.typer.js | 285 +++++++++++++++++++++++++++++++++++++++ dist/jquery.typer.min.js | 1 + 3 files changed, 315 insertions(+) create mode 100644 bower.json create mode 100644 dist/jquery.typer.js create mode 100644 dist/jquery.typer.min.js diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..42cb3c3 --- /dev/null +++ b/bower.json @@ -0,0 +1,29 @@ +{ + "name": "jquery-typer", + "version": "1.0.0", + "homepage": "https://github.com/kontur/jquery.typer.js", + "authors": [ + "Various", + "check github repo" + ], + "description": "JQuery plugin for typing out text", + "main": "./src/jquery.typer.js", + "keywords": [ + "JQuery", + "plugin", + "text", + "typewriter" + ], + "license": "MIT", + "dependencies": { + "jquery": "1.11.0" + }, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "app/bower_components", + "test", + "tests" + ] +} diff --git a/dist/jquery.typer.js b/dist/jquery.typer.js new file mode 100644 index 0000000..cb4c94d --- /dev/null +++ b/dist/jquery.typer.js @@ -0,0 +1,285 @@ +String.prototype.rightChars = function(n){ + if (n <= 0) { + return ""; + } + else if (n > this.length) { + return this; + } + else { + return this.substring(this.length, this.length - n); + } +}; + +(function($) { + var + options = { + highlightSpeed : 20, + typeSpeed : 100, + clearDelay : 500, + typeDelay : 200, + clearOnHighlight : true, + highlightEverything: true, + typerDataAttr : 'data-typer-targets', + typerInterval : 2000, + debug : false, + tapeColor : 'auto', + typerOrder : 'random', + }, + highlight, + clearText, + backspace, + type, + spanWithColor, + clearDelay, + typeDelay, + clearData, + isNumber, + typeWithAttribute, + getHighlightInterval, + getTypeInterval, + intervalHandle, + typerInterval; + + spanWithColor = function(color, backgroundColor) { + if (color === 'rgba(0, 0, 0, 0)') { + color = 'rgb(255, 255, 255)'; + } + + return $('') + .css('color', color) + .css('background-color', backgroundColor); + }; + + isNumber = function (n) { + return !isNaN(parseFloat(n)) && isFinite(n); + }; + + clearData = function ($e) { + $e.removeData([ + 'typePosition', + 'highlightPosition', + 'leftStop', + 'rightStop', + 'primaryColor', + 'backgroundColor', + 'text', + 'typing' + ]); + }; + + type = function ($e) { + var + // position = $e.data('typePosition'), + text = $e.data('text'), + oldLeft = $e.data('oldLeft'), + oldRight = $e.data('oldRight'); + + // if (!isNumber(position)) { + // position = $e.data('leftStop'); + // } + + if (!text || text.length === 0) { + clearData($e); + return; + } + + + $e.text( + oldLeft + + text.charAt(0) + + oldRight + ).data({ + oldLeft: oldLeft + text.charAt(0), + text: text.substring(1) + }); + + // $e.text($e.text() + text.substring(position, position + 1)); + + // $e.data('typePosition', position + 1); + + setTimeout(function () { + type($e); + }, getTypeInterval()); + }; + + clearText = function ($e) { + $e.find('span').remove(); + + setTimeout(function () { + type($e); + }, typeDelay()); + }; + + highlight = function ($e) { + var + position = $e.data('highlightPosition'), + leftText, + highlightedText, + rightText; + + if (!isNumber(position)) { + position = $e.data('rightStop') + 1; + } + + if (position <= $e.data('leftStop')) { + setTimeout(function () { + clearText($e); + }, clearDelay()); + return; + } + + leftText = $e.text().substring(0, position - 1); + highlightedText = $e.text().substring(position - 1, $e.data('rightStop') + 1); + rightText = $e.text().substring($e.data('rightStop') + 1); + + $e.html(leftText) + .append( + spanWithColor( + $e.data('backgroundColor'), + $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor + ) + .append(highlightedText) + ) + .append(rightText); + + $e.data('highlightPosition', position - 1); + + setTimeout(function () { + return highlight($e); + }, getHighlightInterval()); + }; + + typeWithAttribute = (function () { + var last = 0; + + return function($e) { + var targets; + + if ($e.data('typing')) { + return; + } + + try { + targets = JSON.parse($e.attr($.typer.options.typerDataAttr)).targets; + } catch (e) {} + + if (typeof targets === "undefined") { + targets = $.map($e.attr($.typer.options.typerDataAttr).split(','), function (e) { + return $.trim(e); + }); + } + + if ($.typer.options.typerOrder == 'random') { + $e.typeTo(targets[Math.floor(Math.random()*targets.length)]); + } + else if ($.typer.options.typerOrder == 'sequential') { + $e.typeTo(targets[last]); + last = (last < targets.length - 1) ? last + 1 : 0; + } + else { + console.error("Type order of '" + $.typer.options.typerOrder + "' not supported"); + clearInterval(intervalHandle); + } + } + })(); + + // Expose our options to the world. + $.typer = (function () { + return { options: options }; + })(); + + $.extend($.typer, { + options: options + }); + + //-- Methods to attach to jQuery sets + + $.fn.typer = function() { + var $elements = $(this); + + return $elements.each(function () { + var $e = $(this); + + if (typeof $e.attr($.typer.options.typerDataAttr) === "undefined") { + return; + } + + typeWithAttribute($e); + intervalHandle = setInterval(function () { + typeWithAttribute($e); + }, typerInterval()); + }); + }; + + $.fn.typeTo = function (newString) { + var + $e = $(this), + currentText = $e.text(), + i = 0, + j = 0; + + if (currentText === newString) { + if ($.typer.options.debug === true) { + console.log("Our strings our equal, nothing to type"); + } + return $e; + } + + if (currentText !== $e.html()) { + if ($.typer.options.debug === true) { + console.error("Typer does not work on elements with child elements."); + } + return $e; + } + + $e.data('typing', true); + + if ($.typer.options.highlightEverything !== true) { + while (currentText.charAt(i) === newString.charAt(i)) { + i++; + } + + while (currentText.rightChars(j) === newString.rightChars(j)) { + j++; + } + } + + newString = newString.substring(i, newString.length - j + 1); + + $e.data({ + oldLeft: currentText.substring(0, i), + oldRight: currentText.rightChars(j - 1), + leftStop: i, + rightStop: currentText.length - j, + primaryColor: $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor, + backgroundColor: $e.css('background-color'), + text: newString + }); + + highlight($e); + + return $e; + }; + + //-- Helper methods. These can one day be customized further to include things like ranges of delays. + + getHighlightInterval = function () { + return $.typer.options.highlightSpeed; + }; + + getTypeInterval = function () { + return $.typer.options.typeSpeed; + }, + + clearDelay = function () { + return $.typer.options.clearDelay; + }, + + typeDelay = function () { + return $.typer.options.typeDelay; + }; + + typerInterval = function () { + return $.typer.options.typerInterval; + }; +})(jQuery); diff --git a/dist/jquery.typer.min.js b/dist/jquery.typer.min.js new file mode 100644 index 0000000..fe54741 --- /dev/null +++ b/dist/jquery.typer.min.js @@ -0,0 +1 @@ +String.prototype.rightChars=function(n){return 0>=n?"":n>this.length?this:this.substring(this.length,this.length-n)},function($){var highlight,clearText,type,spanWithColor,clearDelay,typeDelay,clearData,isNumber,typeWithAttribute,getHighlightInterval,getTypeInterval,intervalHandle,typerInterval,options={highlightSpeed:20,typeSpeed:100,clearDelay:500,typeDelay:200,clearOnHighlight:!0,highlightEverything:!0,typerDataAttr:"data-typer-targets",typerInterval:2e3,debug:!1,tapeColor:"auto",typerOrder:"random"};spanWithColor=function(color,backgroundColor){return"rgba(0, 0, 0, 0)"===color&&(color="rgb(255, 255, 255)"),$("").css("color",color).css("background-color",backgroundColor)},isNumber=function(n){return!isNaN(parseFloat(n))&&isFinite(n)},clearData=function($e){$e.removeData(["typePosition","highlightPosition","leftStop","rightStop","primaryColor","backgroundColor","text","typing"])},type=function($e){var text=$e.data("text"),oldLeft=$e.data("oldLeft"),oldRight=$e.data("oldRight");return text&&0!==text.length?($e.text(oldLeft+text.charAt(0)+oldRight).data({oldLeft:oldLeft+text.charAt(0),text:text.substring(1)}),setTimeout(function(){type($e)},getTypeInterval()),void 0):(clearData($e),void 0)},clearText=function($e){$e.find("span").remove(),setTimeout(function(){type($e)},typeDelay())},highlight=function($e){var leftText,highlightedText,rightText,position=$e.data("highlightPosition");return isNumber(position)||(position=$e.data("rightStop")+1),position<=$e.data("leftStop")?(setTimeout(function(){clearText($e)},clearDelay()),void 0):(leftText=$e.text().substring(0,position-1),highlightedText=$e.text().substring(position-1,$e.data("rightStop")+1),rightText=$e.text().substring($e.data("rightStop")+1),$e.html(leftText).append(spanWithColor($e.data("backgroundColor"),"auto"===$.typer.options.tapeColor?$e.data("primaryColor"):$.typer.options.tapeColor).append(highlightedText)).append(rightText),$e.data("highlightPosition",position-1),setTimeout(function(){return highlight($e)},getHighlightInterval()),void 0)},typeWithAttribute=function(){var last=0;return function($e){var targets;if(!$e.data("typing")){try{targets=JSON.parse($e.attr($.typer.options.typerDataAttr)).targets}catch(e){}"undefined"==typeof targets&&(targets=$.map($e.attr($.typer.options.typerDataAttr).split(","),function(e){return $.trim(e)})),"random"==$.typer.options.typerOrder?$e.typeTo(targets[Math.floor(Math.random()*targets.length)]):"sequential"==$.typer.options.typerOrder?($e.typeTo(targets[last]),last=last Date: Thu, 20 Mar 2014 18:17:06 -0700 Subject: [PATCH 08/12] Move options to defaults to let users set options by passing an object. --- src/jquery.typer.js | 110 +++++++++++++++++++++----------------------- test.html | 6 +-- 2 files changed, 55 insertions(+), 61 deletions(-) diff --git a/src/jquery.typer.js b/src/jquery.typer.js index cb4c94d..01d4b62 100644 --- a/src/jquery.typer.js +++ b/src/jquery.typer.js @@ -11,34 +11,21 @@ String.prototype.rightChars = function(n){ }; (function($) { - var - options = { - highlightSpeed : 20, - typeSpeed : 100, - clearDelay : 500, - typeDelay : 200, - clearOnHighlight : true, - highlightEverything: true, - typerDataAttr : 'data-typer-targets', - typerInterval : 2000, - debug : false, - tapeColor : 'auto', - typerOrder : 'random', - }, - highlight, - clearText, - backspace, - type, - spanWithColor, - clearDelay, - typeDelay, - clearData, - isNumber, - typeWithAttribute, - getHighlightInterval, - getTypeInterval, - intervalHandle, - typerInterval; + var opts, + highlight, + clearText, + backspace, + type, + spanWithColor, + clearDelay, + typeDelay, + clearData, + isNumber, + typeWithAttribute, + getHighlightInterval, + getTypeInterval, + intervalHandle, + typerInterval; spanWithColor = function(color, backgroundColor) { if (color === 'rgba(0, 0, 0, 0)') { @@ -83,7 +70,6 @@ String.prototype.rightChars = function(n){ return; } - $e.text( oldLeft + text.charAt(0) + @@ -136,7 +122,7 @@ String.prototype.rightChars = function(n){ .append( spanWithColor( $e.data('backgroundColor'), - $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor + opts.tapeColor === 'auto' ? $e.data('primaryColor') : opts.tapeColor ) .append(highlightedText) ) @@ -160,47 +146,40 @@ String.prototype.rightChars = function(n){ } try { - targets = JSON.parse($e.attr($.typer.options.typerDataAttr)).targets; + targets = JSON.parse($e.attr(opts.typerDataAttr)).targets; } catch (e) {} if (typeof targets === "undefined") { - targets = $.map($e.attr($.typer.options.typerDataAttr).split(','), function (e) { + targets = $.map($e.attr(opts.typerDataAttr).split(','), function (e) { return $.trim(e); }); } - if ($.typer.options.typerOrder == 'random') { + if (opts.typerOrder == 'random') { $e.typeTo(targets[Math.floor(Math.random()*targets.length)]); } - else if ($.typer.options.typerOrder == 'sequential') { + else if (opts.typerOrder == 'sequential') { $e.typeTo(targets[last]); last = (last < targets.length - 1) ? last + 1 : 0; } else { - console.error("Type order of '" + $.typer.options.typerOrder + "' not supported"); + console.error("Type order of '" + opts.typerOrder + "' not supported"); clearInterval(intervalHandle); } - } - })(); - - // Expose our options to the world. - $.typer = (function () { - return { options: options }; + }; })(); - $.extend($.typer, { - options: options - }); - //-- Methods to attach to jQuery sets - $.fn.typer = function() { + $.fn.typer = function(options) { var $elements = $(this); + opts = jQuery.extend({}, $.fn.typer.defaults, options); + return $elements.each(function () { var $e = $(this); - if (typeof $e.attr($.typer.options.typerDataAttr) === "undefined") { + if (typeof $e.attr(opts.typerDataAttr) === "undefined") { return; } @@ -219,14 +198,14 @@ String.prototype.rightChars = function(n){ j = 0; if (currentText === newString) { - if ($.typer.options.debug === true) { + if (opts.debug === true) { console.log("Our strings our equal, nothing to type"); } return $e; } if (currentText !== $e.html()) { - if ($.typer.options.debug === true) { + if (opts.debug === true) { console.error("Typer does not work on elements with child elements."); } return $e; @@ -234,7 +213,7 @@ String.prototype.rightChars = function(n){ $e.data('typing', true); - if ($.typer.options.highlightEverything !== true) { + if (opts.highlightEverything !== true) { while (currentText.charAt(i) === newString.charAt(i)) { i++; } @@ -251,7 +230,7 @@ String.prototype.rightChars = function(n){ oldRight: currentText.rightChars(j - 1), leftStop: i, rightStop: currentText.length - j, - primaryColor: $.typer.options.tapeColor === 'auto' ? $e.data('primaryColor') : $.typer.options.tapeColor, + primaryColor: opts.tapeColor === 'auto' ? $e.data('primaryColor') : opts.tapeColor, backgroundColor: $e.css('background-color'), text: newString }); @@ -264,22 +243,37 @@ String.prototype.rightChars = function(n){ //-- Helper methods. These can one day be customized further to include things like ranges of delays. getHighlightInterval = function () { - return $.typer.options.highlightSpeed; + return opts.highlightSpeed; }; getTypeInterval = function () { - return $.typer.options.typeSpeed; - }, + return opts.typeSpeed; + }; clearDelay = function () { - return $.typer.options.clearDelay; - }, + return opts.clearDelay; + }; typeDelay = function () { - return $.typer.options.typeDelay; + return opts.typeDelay; }; typerInterval = function () { - return $.typer.options.typerInterval; + return opts.typerInterval; }; + + $.fn.typer.defaults = { + highlightSpeed : 20, + typeSpeed : 100, + clearDelay : 500, + typeDelay : 200, + clearOnHighlight : true, + highlightEverything : true, + typerDataAttr : 'data-typer-targets', + typerInterval : 2000, + debug : false, + tapeColor : 'auto', + typerOrder : 'random', + }; + })(jQuery); diff --git a/test.html b/test.html index 888cda2..7e45879 100644 --- a/test.html +++ b/test.html @@ -26,9 +26,9 @@

Hello World!

- - + + + -

Hello, World!

-

Welcome

+

Typer testing and samples!

+ + +
+

Default with data-typer-targets

+ +

Welcome

+ +
+ + +
+

Default, automatically using the element's text color as highlightColor

+ $("#element").typer(); + +

Hello World!

+ +
+ + +
+

Default, automatically using the element's text color as highlightColor

+ $("#element").typer(); + +

Hello World!

+ +
+ + +
+

With option backgroundColor

+$("#element").typer({ + backgroundColor: 'orange' +}); + + +

Hello World!

+ +
+ + +
+

With option highlightColor

+$("#element").typer({ + highlightColor: 'orange' +}); + + +

Hello World!

+ +
+ + +
+

With option highlightColor and backgroundColor combined

+$("#element").typer({ + highlightColor: 'orange', + backgroundColor: 'purple' +}); + +

Hello World!

+ +
+ + +
+

With option random

+ Randomize the strings in data-typer-targets="lorem,ipsum,dol,solor" + $("#element").typer({ + typerOrder: 'random' +}); + +

Hello World!

+ +
+ -

Welcome

+
+

With option sequential

+ Type the strings in data-typer-targets="lorem,ipsum,dol,solor" in sequence + $("#element").typer({ + typerOrder: 'sequential' +}); -

Hello World!

+

Hello World!

+ +
-
-

Hello World!

-
-

+
+

Using .typeTo()

+ $("#element").typeTo("Hello Typer!"); +

+ + +
- From 3ab0767a2ce540f4a71a565a464a6227109310a8 Mon Sep 17 00:00:00 2001 From: Johannes Neumeier Date: Tue, 31 Mar 2015 23:08:04 +0300 Subject: [PATCH 12/12] Update bower.json to accept jquery based on minimum version instead of explicit version number --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 42cb3c3..53d44af 100644 --- a/bower.json +++ b/bower.json @@ -16,7 +16,7 @@ ], "license": "MIT", "dependencies": { - "jquery": "1.11.0" + "jquery": ">=1.11.0" }, "ignore": [ "**/.*",