Socket
Socket
Sign inDemoInstall

typeit

Package Overview
Dependencies
Maintainers
1
Versions
119
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typeit - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

dev/jquery-2.1.4.min.js
dev/typeit.js
dev/typeit.min.js
dist/jquery-2.1.4.min.js

540

dist/typeit.js
/**
* jQuery TypeIt
* @author Alex MacArthur (http://macarthur.me)
* @version 3.0.1
* @version 4.0.0
* @copyright 2016 Alex MacArthur

@@ -11,14 +11,16 @@ * @description Types out a given string or strings.

$.fn.typeIt = function(opt, cb){
return this.each(function(){
$(this).data("typeit", new $.fn.typeIt.tClass($(this), opt, cb));
});
var $doc = $(document);
$.fn.typeIt = function(opt){
return this.each(function(){
var $t = $(this);
if($t.data('typeit') === undefined) {
$t.data('typeit', new $.typeIt($t, opt));
}
});
};
// Accepts element, options, and callback function.
$.fn.typeIt.tClass = function(e, o, c) {
var t = this;
t.d = {
strings: 'Your default string.',
$.typeIt = function(el, opt) {
this.d = {
strings: 'You need a string!',
speed: 100,

@@ -33,221 +35,170 @@ lifeLike: true,

loopDelay: 750,
html: true
};
t.dd = {
strings: e.data('typeitStrings'),
speed: e.data('typeitSpeed'),
lifeLike: e.data('typeitLifelike'),
cursor: e.data('typeitCursor'),
cursorSpeed: e.data('typeitCursorspeed'),
breakLines: e.data('typeitBreaklines'),
breakDelay: e.data('typeitBreakdelay'),
startDelay: e.data('typeitStartdelay'),
loop: e.data('typeitLoop'),
loopDelay: e.data('typeitLoopdelay'),
html: e.data('typeitHtml')
html: true,
autoStart: true,
callback: function(){}
};
t.s = $.extend({}, t.d, o, t.dd);
t.el = e;
t.cb = c;
t.valCB(t);
t.elCheck(t);
t.init(t, o);
this.pruned = false;
this.queue = [];
this.queueIndex = 0;
this.hasStarted = false;
this.inTag = false;
this.s = $.extend({}, this.d, opt);
this.el = el;
this._init();
};
var p = $.fn.typeIt.tClass.prototype;
$.typeIt.prototype = {
p.init = function(t){
t.CI = 0;
t.SEI = 0;
t.SI = 0;
t.SA = [];
t.BD = t.s.breakDelay;
t.span = '<span style="display:inline-block;width:0;height:0;overflow:hidden;">_</span>';
_init : function() {
this.style = 'style="display:inline;position:relative;font:inherit;color:inherit;"';
this._elCheck();
this.s.strings = this._toArray(this.s.strings);
this.el.html('<span ' + this.style + '></span>');
this.tel = this.el.find('span');
this.insert = function(c) {
this.tel.append(c);
};
t.toArr(t);
t.rake(t);
for(i = 0; i < this.s.strings.length; i++) {
t.el.html('<span style="display:inline;position:relative;font:inherit;"></span>');
t.tel = t.el.find('span');
t.insert = function(c) { t.tel.append(c); };
this.queue.push([this.type, this.s.strings[i]]);
t.cursor(t);
t.to(function() {
t.type(t);
}.bind(t), t.s.startDelay);
};
if(i < (this.s.strings.length - 1)) {
p.valCB = function(t) {
t.cb = t.cb === undefined ? function(){return;} : t.cb;
};
var curPos = this.queue.length;
this.queue.push([this.s.breakLines ? this.break : this.delete]);
p.to = function(fn, t) {
setTimeout(function() {
fn();
}.bind(t), t);
};
if(this.s.breakLines) {
this.queue.splice(curPos, 0, [this.pause, this.s.breakDelay/2]);
this.queue.splice(curPos + 2, 0, [this.pause, this.s.breakDelay/2]);
}
}
}
p.elCheck = function(t) {
if(t.el.html().length > 0) {
t.s.strings = t.el.html().trim();
if(this.s.autoStart) {
this._begin();
} else {
if(this._isVisible()) {
this.hasStarted = true;
this._begin();
} else {
$doc.on('scroll', function() {
if(this._isVisible() && !this.hasStarted) {
this.hasStarted = true;
this._begin();
}
}.bind(this));
}
}
};
},
p.toArr = function(t) {
var s = t.s.strings;
t.SA = s.constructor === Array ? s.slice(0) : s.split('<br>');
};
_begin : function() {
this._cursor();
this._to(function() {
this._executeQueue();
}.bind(this), this.s.startDelay);
},
p.cursor = function(t) {
if(t.s.cursor) {
t.el.append('<i class="c">|</i>');
var s = t.s.cursorSpeed;
(function loop() {
t.el.find('.c').fadeTo(s/2, 0).fadeTo(s/2, 1);
t.to(loop, s);
})();
/*
Pass in a string, and loop over that string until empty. Then return true.
*/
type : function(string, rake){
// set default 'rake' value
rake = typeof rake === 'undefined' ? true : rake;
// convert to array
string = this._toArray(string);
// if it's designated, rake that bad boy for HTML tags and stuff
if(rake) {
string = this._rake(string);
string = string[0];
}
};
/*
Convert each string in the array to a sub-array. While happening, search the subarrays for HTML tags.
When a complete tag is found, slice the subarray to get the complete tag, insert it at the correct index,
and delete the range of indexes where the indexed tag used to be.
*/
p.rake = function(t) {
// do the work that matters
this.tTO = setTimeout(function() {
for(var i = 0; i < t.SA.length; i++) {
t.SA[i] = t.SA[i].split('');
// _randomize the timeout each time, if that's your thing
this._random(this);
if(t.s.html) {
t.tPos = [];
var p = t.tPos;
t.SEI = 0;
var tag;
var en = false;
for(var j = 0; j < t.SA[i].length; j++) {
// "_print" the stringacter
// if an opening HTML tag is found and we're not already pringing inside a tag
if(this.s.html && (string[0].indexOf('<') !== -1 && string[0].indexOf('</') === -1) && (!this.inTag)){
if(t.SA[i][j] === '<' || t.SA[i][j] === '&') {
p[0] = j;
en = t.SA[i][j] === '&' ? true : false;
// loop the string to find where the tag ends
for(var i = string.length - 1; i >= 0; i--) {
if(string[i].indexOf('</') !== -1) {
this.tagCount = 1;
this.tagDuration = i;
}
}
if(t.SA[i][j] === '>' || (t.SA[i][j] === ';' && en)) {
p[1] = j;
j = 0;
tag = (t.SA[i].slice(p[0], p[1]+1)).join('');
t.SA[i].splice(p[0], (p[1]-p[0]+1), tag);
en = false;
}
}
this._makeNode(string[0]);
} else {
this._print(string[0]);
}
}
};
p.random = function(t) {
var s = t.s.speed;
var r = s/2;
t.DT = (t.s.lifeLike) ? Math.abs(Math.random() * ((s+r) - (s-r)) + (s-r)) : s;
};
// shorten it
string.splice(0, 1);
p.type = function(t){
t.curStr = t.SA[t.SI];
var csLen = t.curStr.length;
var saLen = t.SA.length;
t.tTO = t.to(function () {
t.random(t);
var chr = t.SA[t.SI][t.CI];
if(chr.indexOf('<') !== -1 && chr.indexOf('</') === -1 && t.s.html){
t.makeNode(t, chr);
// if there's more to it, run again until fully printed
if(string.length) {
this.type(string, false);
} else{
this._executeQueue();
}
t.print(t, chr);
t.CI++;
// More chars to be typed.
if (t.CI < csLen) {
t.type(t);
}.bind(this), this.DT);
},
// More strings to be typed.
} else if(saLen > 1) {
t.CI = 0;
pause : function(time) {
time = time === undefined ? this.s.breakDelay : time;
this._to(function() {
this._executeQueue();
}.bind(this), time);
},
// Multiple strings ending.
if(t.SI + 1 === saLen) {
t.end(t);
break : function() {
this.insert('<br>');
this._executeQueue();
},
// Strings still to go, breakLines = false
} else if((t.SI + 1 < saLen) && !t.s.breakLines){
t.to(function(){
t.delete(t);
}.bind(t), t.BD);
mergeSet : function(s) {
this.s = $.extend({}, this.s, s);
this._executeQueue();
},
// Strings still to go, breakLines = true
} else if (t.SI + 1 < saLen && t.s.breakLines){
t.SI++;
t.to(function(){
t.insert('<br>');
t.to(function(){
t.type(t);
}.bind(t), t.BD);
}.bind(t), t.BD);
}
// No more strings.
_print : function(chr) {
if(this.inTag) {
$(this.tag, this.el).last().append(chr);
if(this.tagCount < this.tagDuration) {
this.tagCount++;
} else {
t.end(t);
this.inTag = false;
}
}.bind(t), t.DT);
};
/*
Get the start & ending positions of the string inside HTML opening & closing angle brackets,
and then create a DOM element of that string/tag name.
*/
p.makeNode = function(t, chr) {
t.SEI = 0;
t.tPos[0] = t.CI + 1;
for(var d = t.CI; d < t.curStr.length; d++){
if(t.curStr[d].indexOf('</') !== -1) {
t.tPos[1] = d - 1;
break;
}
}
t.tag = $($.parseHTML(chr));
t.print(t, t.tag);
t.inTag = true;
};
p.end = function(t) {
if(t.s.loop){
t.to(function(){
t.delete(t);
}.bind(t), t.s.loopDelay);
} else {
t.cb();
}
};
p.print = function(t, chr) {
if(t.inTag) {
var chr2 = t.curStr[t.tPos[0] + t.SEI];
$(t.tag, t.el).last().append(chr2);
t.inTag = (t.tPos[1] === t.tPos[0] + t.SEI - 1) ? false : true;
t.SEI++;
} else {
this.insert(chr);
}
};
},
/*
/*
If show cursor is enabled, move array starting point for the for loop back one,
so that the loop will not find the closing tag and delete the cursor.
*/
p.delete = function(t, undefined) {
t.dTO = t.to(function () {
t.random(t);
var a = t.tel.html().split("");
for (var n = a.length - 1; n > -1; n--) {
if((a[n] === '>' || a[n] === ';') && t.s.html) {
delete : function(chars) {
this.dTO = setTimeout(function() {
this._random();
var a = this.tel.html().split("");
var amount = chars === undefined || chars === null ? a.length-1 : chars + 1;
// cut the array by a character
for (var n = a.length-1; n > -1; n--) {
if((a[n] === '>' || a[n] === ';') && this.s.html) {
for(var o = n; o > -1; o--) {

@@ -283,30 +234,199 @@

}
else {
a.splice(n, 1);
a.pop();
break;
}
}
// if we've found an empty set of HTML tags...
if(this.tel.html().indexOf('></') > -1) {
for (var i = this.tel.html().indexOf('></')-2; i >= 0; i--) {
if(a[i] === '<') {
a.splice(i, a.length-i);
break;
}
}
}
t.tel.html(a.join(''));
this.tel.html(a.join(''));
if(t.tel.text().length <= 1){
t.tel.html('');
}
// characters still in the string.
if (amount > (chars === undefined ? 0 : 2)) {
this.delete(chars === undefined ? undefined : chars-1);
} else {
this._executeQueue();
}
}.bind(this), this.DT/3);
},
// Characters still in the string.
if (t.tel.text().length > 0) {
t.delete(t);
// Strings still in the array.
} else if(t.SA[t.SI+1] !== undefined){
t.SI++;
t.type(t);
_isVisible : function() {
var $win = $(window);
// Last string, start over if loop = true.
} else if (t.s.loop){
t.init(t);
var docTop = $win.scrollTop();
var docBottom = docTop + $win.height();
var elTop = this.el.offset().top;
var elBottom = elTop + this.el.height();
return ((elBottom <= docBottom) && (elTop >= docTop));
},
/*
Advance the function queue to execute the next function after the previous one has finished.
*/
_executeQueue : function() {
if(this.queueIndex < this.queue.length) {
var thisFunc = this.queue[this.queueIndex];
this.queueIndex++;
// delay execution if looping back to the beginning of the queue.
if(this.isLooping && this.queueIndex === 1) {
this._to(function() {
thisFunc[0].bind(this)(thisFunc[1]);
}.bind(this), this.s.loopDelay/2);
} else {
thisFunc[0].bind(this)(thisFunc[1]);
}
}.bind(t), t.DT/3);
};
} else {
if(this.s.loop) {
this.queueIndex = 0;
this.isLooping = true;
this._to(function() {
this.delete();
}.bind(this), this.s.loopDelay/2);
} else {
this.s.callback();
}
}
},
}(jQuery));
_to : function(fn, time) {
setTimeout(function() {
fn();
}.bind(this), time);
},
_elCheck : function() {
if(this.el.html().length > 0) {
this.s.strings = this.el.html().trim();
}
},
_toArray : function(str) {
return str.constructor === Array ? str.slice(0) : str.split('<br>');
},
_cursor : function() {
if(this.s.cursor) {
this.el.append('<span ' + this.style + 'class="c">|</span>');
var s = this.s.cursorSpeed;
var t = this;
(function loop() {
t.el.find('.c').fadeTo(s/2, 0).fadeTo(s/2, 1);
t._to(loop, s);
})();
}
},
_random : function() {
var s = this.s.speed;
var r = s/2;
this.DT = this.s.lifeLike ? Math.abs(Math.random() * ((s+r) - (s-r)) + (s-r)) : s;
},
/*
Convert each string in the array to a sub-array. While happening, search the subarrays for HTML tags.
When a complete tag is found, slice the subarray to get the complete tag, insert it at the correct index,
and delete the range of indexes where the indexed tag used to be.
*/
_rake : function(array) {
for(var i = 0; i < array.length; i++) {
array[i] = array[i].split('');
if(this.s.html) {
this.tPos = [];
var p = this.tPos;
var tag;
var en = false;
for(var j = 0; j < array[i].length; j++) {
if(array[i][j] === '<' || array[i][j] === '&') {
p[0] = j;
en = array[i][j] === '&' ? true : false;
}
if(array[i][j] === '>' || (array[i][j] === ';' && en)) {
p[1] = j;
j = 0;
tag = (array[i].slice(p[0], p[1]+1)).join('');
array[i].splice(p[0], (p[1]-p[0]+1), tag);
en = false;
}
}
}
}
return array;
},
/*
Get the start & ending positions of the string inside HTML opening & closing angle brackets,
and then create a DOM element of that string/tag name.
*/
_makeNode : function(char) {
this.tag = $($.parseHTML(char));
this._print(this.tag);
this.inTag = true;
}
};
$.prep = function(i) {
if(i !== undefined && !i.pruned) {
i.queue.shift();
i.pruned = true;
}
};
$.fn.tiType = function(str){
var i = $(this).data('typeit');
$.prep(i);
if (i === undefined) return $doc;
i.queue.push([i.type, str]);
return this;
};
$.fn.tiDelete = function(num){
var i = $(this).data('typeit');
$.prep(i);
if (i === undefined) return $doc;
i.queue.push([i.delete, num]);
return this;
};
$.fn.tiPause = function(time){
var i = $(this).data('typeit');
$.prep(i);
if (i === undefined) return $doc;
i.queue.push([i.pause, time]);
return this;
};
$.fn.tiBreak = function(){
var i = $(this).data('typeit');
$.prep(i);
if (i === undefined) return $doc;
i.queue.push([i.break]);
return this;
};
$.fn.tiSettings = function(settings) {
var i = $(this).data('typeit');
$.prep(i);
if (i === undefined) return $doc;
i.queue.push([i.mergeSet, settings]);
return this;
};
}(jQuery));

2

dist/typeit.min.js

@@ -1,1 +0,1 @@

!function(t,e){t.fn.typeIt=function(e,n){return this.each(function(){t(this).data("typeit",new t.fn.typeIt.tClass(t(this),e,n))})},t.fn.typeIt.tClass=function(e,n,i){var a=this;a.d={strings:"Your default string.",speed:100,lifeLike:!0,cursor:!0,cursorSpeed:1e3,breakLines:!0,breakDelay:750,startDelay:250,loop:!1,loopDelay:750,html:!0},a.dd={strings:e.data("typeitStrings"),speed:e.data("typeitSpeed"),lifeLike:e.data("typeitLifelike"),cursor:e.data("typeitCursor"),cursorSpeed:e.data("typeitCursorspeed"),breakLines:e.data("typeitBreaklines"),breakDelay:e.data("typeitBreakdelay"),startDelay:e.data("typeitStartdelay"),loop:e.data("typeitLoop"),loopDelay:e.data("typeitLoopdelay"),html:e.data("typeitHtml")},a.s=t.extend({},a.d,n,a.dd),a.el=e,a.cb=i,a.valCB(a),a.elCheck(a),a.init(a,n)};var n=t.fn.typeIt.tClass.prototype;n.init=function(t){t.CI=0,t.SEI=0,t.SI=0,t.SA=[],t.BD=t.s.breakDelay,t.span='<span style="display:inline-block;width:0;height:0;overflow:hidden;">_</span>',t.toArr(t),t.rake(t),t.el.html('<span style="display:inline;position:relative;font:inherit;"></span>'),t.tel=t.el.find("span"),t.insert=function(e){t.tel.append(e)},t.cursor(t),t.to(function(){t.type(t)}.bind(t),t.s.startDelay)},n.valCB=function(t){t.cb=t.cb===e?function(){}:t.cb},n.to=function(t,e){setTimeout(function(){t()}.bind(e),e)},n.elCheck=function(t){t.el.html().length>0&&(t.s.strings=t.el.html().trim())},n.toArr=function(t){var e=t.s.strings;t.SA=e.constructor===Array?e.slice(0):e.split("<br>")},n.cursor=function(t){if(t.s.cursor){t.el.append('<i class="c">|</i>');var e=t.s.cursorSpeed;!function n(){t.el.find(".c").fadeTo(e/2,0).fadeTo(e/2,1),t.to(n,e)}()}},n.rake=function(t){for(var e=0;e<t.SA.length;e++)if(t.SA[e]=t.SA[e].split(""),t.s.html){t.tPos=[];var n=t.tPos;t.SEI=0;for(var i,a=!1,r=0;r<t.SA[e].length;r++)("<"===t.SA[e][r]||"&"===t.SA[e][r])&&(n[0]=r,a="&"===t.SA[e][r]?!0:!1),(">"===t.SA[e][r]||";"===t.SA[e][r]&&a)&&(n[1]=r,r=0,i=t.SA[e].slice(n[0],n[1]+1).join(""),t.SA[e].splice(n[0],n[1]-n[0]+1,i),a=!1)}},n.random=function(t){var e=t.s.speed,n=e/2;t.DT=t.s.lifeLike?Math.abs(Math.random()*(e+n-(e-n))+(e-n)):e},n.type=function(t){t.curStr=t.SA[t.SI];var e=t.curStr.length,n=t.SA.length;t.tTO=t.to(function(){t.random(t);var i=t.SA[t.SI][t.CI];-1!==i.indexOf("<")&&-1===i.indexOf("</")&&t.s.html&&t.makeNode(t,i),t.print(t,i),t.CI++,t.CI<e?t.type(t):n>1?(t.CI=0,t.SI+1===n?t.end(t):t.SI+1<n&&!t.s.breakLines?t.to(function(){t["delete"](t)}.bind(t),t.BD):t.SI+1<n&&t.s.breakLines&&(t.SI++,t.to(function(){t.insert("<br>"),t.to(function(){t.type(t)}.bind(t),t.BD)}.bind(t),t.BD))):t.end(t)}.bind(t),t.DT)},n.makeNode=function(e,n){e.SEI=0,e.tPos[0]=e.CI+1;for(var i=e.CI;i<e.curStr.length;i++)if(-1!==e.curStr[i].indexOf("</")){e.tPos[1]=i-1;break}e.tag=t(t.parseHTML(n)),e.print(e,e.tag),e.inTag=!0},n.end=function(t){t.s.loop?t.to(function(){t["delete"](t)}.bind(t),t.s.loopDelay):t.cb()},n.print=function(e,n){if(e.inTag){var i=e.curStr[e.tPos[0]+e.SEI];t(e.tag,e.el).last().append(i),e.inTag=e.tPos[1]===e.tPos[0]+e.SEI-1?!1:!0,e.SEI++}else this.insert(n)},n["delete"]=function(t,e){t.dTO=t.to(function(){t.random(t);for(var n=t.tel.html().split(""),i=n.length-1;i>-1;i--){if(">"!==n[i]&&";"!==n[i]||!t.s.html){n.splice(i,1);break}for(var a=i;a>-1;a--){if("<br>"===n.slice(a-3,a+1).join("")){n.splice(a-3,4);break}if("&"===n[a]){n.splice(a,i-a+1);break}if("<"===n[a]&&">"!==n[a-1]){if(";"===n[a-1])for(var r=a-1;r>-1;r--)if("&"===n[r]){n.splice(r,a-r);break}n.splice(a-1,1);break}}break}t.tel.html(n.join("")),t.tel.text().length<=1&&t.tel.html(""),t.tel.text().length>0?t["delete"](t):t.SA[t.SI+1]!==e?(t.SI++,t.type(t)):t.s.loop&&t.init(t)}.bind(t),t.DT/3)}}(jQuery);
!function(t,e){var s=t(document);t.fn.typeIt=function(i){return this.each(function(){var s=t(this);s.data("typeit")===e&&s.data("typeit",new t.typeIt(s,i))})},t.typeIt=function(i,e){this.d={strings:"You need a string!",speed:100,lifeLike:!0,cursor:!0,cursorSpeed:1e3,breakLines:!0,breakDelay:750,startDelay:250,loop:!1,loopDelay:750,html:!0,autoStart:!0,callback:function(){}},this.pruned=!1,this.queue=[],this.queueIndex=0,this.hasStarted=!1,this.inTag=!1,this.s=t.extend({},this.d,e),this.el=i,this._init()},t.typeIt.prototype={_init:function(){for(this.style='style="display:inline;position:relative;font:inherit;color:inherit;"',this._elCheck(),this.s.strings=this._toArray(this.s.strings),this.el.html("<span "+this.style+"></span>"),this.tel=this.el.find("span"),this.insert=function(t){this.tel.append(t)},i=0;i<this.s.strings.length;i++)if(this.queue.push([this.type,this.s.strings[i]]),i<this.s.strings.length-1){var t=this.queue.length;this.queue.push([this.s.breakLines?this["break"]:this["delete"]]),this.s.breakLines&&(this.queue.splice(t,0,[this.pause,this.s.breakDelay/2]),this.queue.splice(t+2,0,[this.pause,this.s.breakDelay/2]))}this.s.autoStart?this._begin():this._isVisible()?(this.hasStarted=!0,this._begin()):s.on("scroll",function(){this._isVisible()&&!this.hasStarted&&(this.hasStarted=!0,this._begin())}.bind(this))},_begin:function(){this._cursor(),this._to(function(){this._executeQueue()}.bind(this),this.s.startDelay)},type:function(t,i){i="undefined"==typeof i?!0:i,t=this._toArray(t),i&&(t=this._rake(t),t=t[0]),this.tTO=setTimeout(function(){if(this._random(this),this.s.html&&-1!==t[0].indexOf("<")&&-1===t[0].indexOf("</")&&!this.inTag){for(var i=t.length-1;i>=0;i--)-1!==t[i].indexOf("</")&&(this.tagCount=1,this.tagDuration=i);this._makeNode(t[0])}else this._print(t[0]);t.splice(0,1),t.length?this.type(t,!1):this._executeQueue()}.bind(this),this.DT)},pause:function(t){t=t===e?this.s.breakDelay:t,this._to(function(){this._executeQueue()}.bind(this),t)},"break":function(){this.insert("<br>"),this._executeQueue()},mergeSet:function(i){this.s=t.extend({},this.s,i),this._executeQueue()},_print:function(i){this.inTag?(t(this.tag,this.el).last().append(i),this.tagCount<this.tagDuration?this.tagCount++:this.inTag=!1):this.insert(i)},"delete":function(t){this.dTO=setTimeout(function(){this._random();for(var i=this.tel.html().split(""),s=t===e||null===t?i.length-1:t+1,n=i.length-1;n>-1;n--){if(">"!==i[n]&&";"!==i[n]||!this.s.html){i.pop();break}for(var h=n;h>-1;h--){if("<br>"===i.slice(h-3,h+1).join("")){i.splice(h-3,4);break}if("&"===i[h]){i.splice(h,n-h+1);break}if("<"===i[h]&&">"!==i[h-1]){if(";"===i[h-1])for(var u=h-1;u>-1;u--)if("&"===i[u]){i.splice(u,h-u);break}i.splice(h-1,1);break}}break}if(this.tel.html().indexOf("></")>-1)for(var r=this.tel.html().indexOf("></")-2;r>=0;r--)if("<"===i[r]){i.splice(r,i.length-r);break}this.tel.html(i.join("")),s>(t===e?0:2)?this["delete"](t===e?e:t-1):this._executeQueue()}.bind(this),this.DT/3)},_isVisible:function(){var i=t(window),e=i.scrollTop(),s=e+i.height(),n=this.el.offset().top,h=n+this.el.height();return s>=h&&n>=e},_executeQueue:function(){if(this.queueIndex<this.queue.length){var t=this.queue[this.queueIndex];this.queueIndex++,this.isLooping&&1===this.queueIndex?this._to(function(){t[0].bind(this)(t[1])}.bind(this),this.s.loopDelay/2):t[0].bind(this)(t[1])}else this.s.loop?(this.queueIndex=0,this.isLooping=!0,this._to(function(){this["delete"]()}.bind(this),this.s.loopDelay/2)):this.s.callback()},_to:function(t,i){setTimeout(function(){t()}.bind(this),i)},_elCheck:function(){this.el.html().length>0&&(this.s.strings=this.el.html().trim())},_toArray:function(t){return t.constructor===Array?t.slice(0):t.split("<br>")},_cursor:function(){if(this.s.cursor){this.el.append("<span "+this.style+'class="c">|</span>');var t=this.s.cursorSpeed,i=this;!function e(){i.el.find(".c").fadeTo(t/2,0).fadeTo(t/2,1),i._to(e,t)}()}},_random:function(){var t=this.s.speed,i=t/2;this.DT=this.s.lifeLike?Math.abs(Math.random()*(t+i-(t-i))+(t-i)):t},_rake:function(t){for(var i=0;i<t.length;i++)if(t[i]=t[i].split(""),this.s.html){this.tPos=[];for(var e,s=this.tPos,n=!1,h=0;h<t[i].length;h++)("<"===t[i][h]||"&"===t[i][h])&&(s[0]=h,n="&"===t[i][h]?!0:!1),(">"===t[i][h]||";"===t[i][h]&&n)&&(s[1]=h,h=0,e=t[i].slice(s[0],s[1]+1).join(""),t[i].splice(s[0],s[1]-s[0]+1,e),n=!1)}return t},_makeNode:function(i){this.tag=t(t.parseHTML(i)),this._print(this.tag),this.inTag=!0}},t.prep=function(t){t===e||t.pruned||(t.queue.shift(),t.pruned=!0)},t.fn.tiType=function(i){var n=t(this).data("typeit");return t.prep(n),n===e?s:(n.queue.push([n.type,i]),this)},t.fn.tiDelete=function(i){var n=t(this).data("typeit");return t.prep(n),n===e?s:(n.queue.push([n["delete"],i]),this)},t.fn.tiPause=function(i){var n=t(this).data("typeit");return t.prep(n),n===e?s:(n.queue.push([n.pause,i]),this)},t.fn.tiBreak=function(){var i=t(this).data("typeit");return t.prep(i),i===e?s:(i.queue.push([i["break"]]),this)},t.fn.tiSettings=function(i){var n=t(this).data("typeit");return t.prep(n),n===e?s:(n.queue.push([n.mergeSet,i]),this)}}(jQuery);

71

gulpfile.js

@@ -1,2 +0,1 @@

// load our plugins
var gulp = require('gulp');

@@ -8,45 +7,61 @@ var jshint = require('gulp-jshint');

var rename = require("gulp-rename");
var browserSync = require('browser-sync');
var cp = require('child_process');
// check JavaScript
gulp.task('build', function (done) {
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
gulp.task('rebuild', ['build'], function () {
browserSync.reload();
});
gulp.task('browserSync', ['sass','scripts','build'], function() {
browserSync({
server: {
baseDir: '_site'
}
});
});
gulp.task('jshint',function(){
gulp.src('src/typeit.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
gulp.src('dev/typeit.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// minify JavaScript and put it into /dist
gulp.task('scripts', function() {
gulp.src('src/typeit.js')
gulp.src('dev/typeit.js')
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('typeit.min.js'))
.pipe(gulp.dest('dist'));
.pipe(gulp.dest('dev'))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('_includes'));
// minify demo scripts
gulp.src('src/scripts.js')
gulp.src('assets/js/scripts.js')
.pipe(uglify())
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest('src'));
// put the unminified JavaScript into /dist
gulp.src('src/typeit.js')
.pipe(gulp.dest('dist'));
.pipe(gulp.dest('_includes'));
});
gulp.task('demoSass',function(){
// compile our local demo SCSS
gulp.src('src/style.scss')
gulp.task('sass',function(){
gulp.src('assets/scss/style.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('src'));
.pipe(autoprefix('last 3 versions'))
.pipe(gulp.dest('_includes'));
});
// run our default gulp tasks and watch for changes
gulp.task('default', ['jshint','scripts','demoSass'], function() {
gulp.task('watchSite', function() {
gulp.watch('assets/js/*.js', ['jshint', 'scripts', 'rebuild']);
gulp.watch(['index.html', '_layouts/*', '_includes/*', 'docs/*'], ['rebuild']);
gulp.watch('assets/scss/**/*.scss', ['sass', 'rebuild']);
});
// watch for JavaScript changes
gulp.watch('src/*.js', ['jshint', 'scripts']);
gulp.task('default', ['browserSync', 'watchSite']);
// watch for SASS changes
gulp.watch('src/**/*.scss', ['demoSass']);
});
gulp.task('develop', ['scripts'], function() {
gulp.watch('dev/*', ['jshint', 'scripts']);
});

14

package.json
{
"name": "typeit",
"version": "3.0.1",
"version": "4.0.0",
"license": "GPL-2.0",
"author": "Alex MacArthur <alex@macarthur.me>",
"description": "A lightweight, easy-to-implement jQuery animated typing plugin that types text for you.",
"description": "A versatile, easy-to-implement jQuery animated typing plugin that types text for you.",
"license": "General Public License",

@@ -17,10 +17,11 @@ "repository": {

"typewriter",
"type effect"
"type effect",
"text effects"
],
"main": "dist/typeit.min.js",
"bugs": {
"url": "https://github.com/gitcom/repo/issues"
"url": "https://github.com/alexmacarthur/typeit/issues"
},
"dependencies": {
"jquery": "^1.11.3"
"jquery": "^1.8.0"
},

@@ -33,4 +34,5 @@ "devDependencies": {

"gulp-sass": "^2.0.4",
"gulp-rename": "^1.2.2"
"gulp-rename": "^1.2.2",
"browser-sync": "^2.9.11"
}
}

202

README.md

@@ -1,103 +0,78 @@

# TypeIt: A jQuery Animated Typing Plugin
# TypeIt: The Most Versatile jQuery Animated Typing Plugin on the Planet
### Description
A lightweight jQuery plugin that outputs text like it's being typed. It allows you to type single strings, multiple strings that stack, multiple strings that delete & replace each other, and even HTML tags &amp; entities. You can also loop strings or sets of strings continuously.
---
### Table of Contents
- [Overview](#overview)
- [Choose a License](#choose-a-license)
- [Setup](#setup)
- [Simple Usage](#simple-usage)
- [Advanced Usage (Chaining Companion Functions)](#advanced-usage)
- [Options](#options)
- [Contributions](#contributions)
- [Documentation (offsite)](http://macarthur.me/typeit/docs)
---
## Overview
TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags &amp; entities.
For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to tweak your typing down to the smallest character, enabling you to type not just a few strings of text, but an entire narrative, with complete control over speed, characters, line breaks, deletions, pauses, everything.
### Some of the Perks
* Capable of looping your string(s).
* Features JavaScript fallback / SEO optimization option for your strings.
* Multiple easy ways to set up & initialize.
* Capable of handling several unique instances on a single page.
* By default, handles HTML tags (including your custom classes, ID's, etc.) with ease.
* Choose to start typing only when your element becomes visible on the screen.
* Loop your string(s) continuously.
* Define you strings via JSON or in the HTML (useful in case user doesn't have JavaScript enabled).
* Create several unique instances on a single page.
* Handle HTML tags (including those with classes, ID's, etc.) and entities with ease.
* Use companion functions to chain individual commands together to fine tune your typing.
* Supported by jQuery 1.8.0 or higher.
* Lightweight. (~3.5kb, single JavaScript file)
* Lightweight. (~5kb, single JavaScript file)
### Demo
### Demos
Checkout several demos and a sandbox where you can try it out at <a href="http://macarthur.me/typeit">macarthur.me/typeit</a>.
## Getting Started
### Documentation
View the full documentation for using TypeIt here: <a href="http://macarthur.me/typeit/docs">macarthur.me/typeit/docs</a>.
### Download the Plugin
## Choose a License
To get started, first select a license:
* Personal - [FREE](#setup)
* Single Commercial License - [Purchase Here](http://www.uplabs.com/posts/typeit-a-jquery-animated-typing-plugin)
* Extended Commercial License - [Purchase Here](http://www.uplabs.com/posts/typeit-a-jquery-animated-typing-plugin)
## Setup
### Get the Code
Get it from this repo, or from the following sources:
* <strong><a href="https://www.jsdelivr.com/projects/jquery.typeit">CDN:</a></strong> Include `https://cdn.jsdelivr.net/jquery.typeit/3.0.0/typeit.min.js` on your page.
* <strong><a href="https://www.jsdelivr.com/projects/jquery.typeit">CDN:</a></strong> Include `https://cdn.jsdelivr.net/jquery.typeit/4.0.0/typeit.min.js` on your page.
* <strong><a href="https://www.npmjs.com/package/typeit">npm:</a></strong> Install with `npm install typeit`.
### Prepare to Initialize on Your Site
### Hook It Up
1. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. More on that later.)
1. Load jQuery and typeit.js on your page.
```<span class="type-it"></span>```
2. Load jQuery and typeit.js on your page.
```
```html
<script src="jquery-2.1.4.min.js"></script>
<script src="typeit.js"></script>
```
2. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. More on that later.)
You're ready to start typing!
## Usage
### Calling TypeIt on Your Site
You can modify the options for the plugin in two different ways -- either by inserting them directly into the function call, or by using data-* attributes.
#### About Using Settings Object
* When using a single string, you can just wrap it in quotation marks (or in an array; it doesn't matter).
* When using multiple strings, it's recommended that you place them in an array (Ex: `strings: ['String #1','String #2']`). You can optionally place them in quotation marks, separated by `<br>` tags, however.
Example:
``
<span class="type-it"></span>
``
```
$('.type-it').typeIt({
strings: 'Enter your string here!',
speed: 300,
lifeLike: false,
cursor: true
});
```html
<span class="type-it"></span>
```
#### About Using Data-* Attributes
* Make sure the names are all lowercase.
* When using multiple strings, wrap your array of strings inside single quotation marks. Ex: `data-typeit-strings='["string #1", "string #2"]'`
You're ready to start typing!
Example:
## Simple Usage
```
<span class="type-it"
data-typeit-strings="A new string to type."
data-typeit-speed="100"
data-typeit-lifelike="true"
data-typeit-cursor="true">
In it's simplest use, just call `typeIt()` on any element and include your [options](#options).
</span>
```
Example:
``
$('.type-it').typeIt();
``
You can also define what to type a third way -- by simply filling the element with a string or strings of text. This is convenient because if a user doesn't have JavaScript enabled, they'll still be able to read the text, and the text will be available for SEO purposes. **Note: by default, the plugin will use the string that's in the element. If strings are defined either in the function call or data-* attributes, they will be overridden.**
```
<span class="type-it">This is the string that will be typed.</span>
```
### Typing Multiple Strings
Aside from simply typing a single string, you can configure TypeIt to type multiple strings. If you define your strings within your HTML element, just separate them with `<br>` tags:
```
<span class="type-it">Here is a string. <br>And here is another!</span>
```
If they're defined in the settings object, it's possible to put them inside quotation marks separated by `<br>` tags, but it's recommended that you use an array:
```
```js
$('.type-it').typeIt({

@@ -108,51 +83,35 @@ strings: ['Enter your string here!', 'Another string!']

By default, multiple strings will stack on top of each other (breakLines = true). However, you can also set them to delete and replace each other:
## Advanced Usage
To control your typing down to the smallest character, there are five companion functions available to use. Simply chain them together following a typeIt() call on an element, and your chain will execute. You can define your global settings within the function call like usual, and can even change settings on the fly throughout the chain.
```
For example:
```js
$('.type-it').typeIt({
strings: ['Enter your string here!', 'Another string!'],
breakLines: false
});
speed: 900,
lifeLike: false,
autoStart: false
})
.tiType('I am typing slowly,')
.tiSettings({speed: 100})
.tiType('but now I am typing pretty fasst')
.tiDelete(2)
.tiType('t!');
```
### Handling HTML Tags
TypeIt will handle HTML tags in your strings, as long as they're only one level deep:
```
// GOOD! :)
$('.typeit-box').typeIt({
strings: '<h1 class="your-class">This is a string!</h1>',
}
```
### Companion Functions
```
// BAD! :(
$('.typeit-box').typeIt({
strings: '<h1 class="your-class"><span>This is a string!</span></h1>',
}
```
| Function | Arguments | Description
| ------------- | ------------- | ------------- |
| tiType() | (string) Characters (including those wrapped in HTML) to be typed. | Will type the characters. |
| tiDelete() | (number) Number of characters to be deleted from what's already been typed. | Will delete the number of
| tiPause() | (number) Number of milliseconds to pause before continuing. | Will pause the specified number of milliseconds.|
| tiPause() | (number) Number of milliseconds to pause before continuing. | Will pause the specified number of milliseconds.|
| tiBreak() | (none) | Will break the typing to a new line.|
And it'll also handle HTML entities:
```
$('.typeit-box').typeIt({
strings: '<h1 class="your-class">One thing &amp; another!<h1>',
}
```
## Options
To disable all HTML rendering, set 'html' to false.
You can modify the options for the plugin by passging in JSON.
### Using a Callback Function
TypeIt allows you to use a custom callback function when you've completed typing. To use one, simply add it as the second argument when it's initialized. **Note: if you've enabled `loop`, this is useless.**
```
$('.typeit-box').typeIt({
strings: 'Here is a string!',
}, function() {
console.log('This is your callback function!');
});
```
## Options
There are a number of options you may use to customize typeIt.

@@ -174,12 +133,11 @@

## Contributions
## Ideas for Improvement?
This project is setup with Gulp to lint & minify the JavaScript. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js, npm, and Gulp are installed on your computer):
Let me know! Otherwise, play with it yourself. Gulp is configured to check & minify the JavaScript. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js, npm, and Gulp are installed on your computer):
```
npm install
gulp
gulp develop
```
## Donate
## Donations

@@ -186,0 +144,0 @@ If I've made your life eaiser in some way by creating this thing and want to kick a small "thank you" my way, I'd very much appreciate it!

index.html
sandbox/index.html
src/img/favicon.ico
src/img/og-logo.jpg
src/jquery-2.1.4.min.js
src/scripts.js
src/scripts.min.js
src/scss/_computer.scss
src/scss/_extends.scss
src/scss/_features-list.scss
src/scss/_footer.scss
src/scss/_header.scss
src/scss/_keyframes.scss
src/scss/_main.scss
src/scss/_mixins.scss
src/scss/_normalize.scss
src/scss/_tryit.scss
src/scss/_variables.scss
src/style.css
src/style.scss
src/typeit.js
.npmignore

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc