Skip to content

Commit

Permalink
Improve how TypeIt is initalized, misc.
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexmacarthur
alexmacarthur committed Jun 6, 2016
1 parent 917f0ad commit 89cedfd
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 98 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ To get started, first select a license:

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/4.0.0/typeit.min.js` or `https://cdnjs.cloudflare.com/ajax/libs/typeit/4.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.1/typeit.min.js` or `https://cdnjs.cloudflare.com/ajax/libs/typeit/4.0.1/typeit.min.js` on your page.
* <strong><a href="https://www.npmjs.com/package/typeit">npm:</a></strong> Install with `npm install typeit`.

### Hook It Up
Expand Down Expand Up @@ -126,6 +126,7 @@ There are a number of options you may use to customize typeIt.
| cursorSpeed | (number in milliseconds) The blinking speed of the cursor. | 1000 |
| breakLines | (boolean) Choose whether you want multiple strings to be printed on top of each other (`breakLines: true`), or if you want each string to be deleted and replaced by the next one (`breakLines: false`). | true |
| breakDelay | (number in milliseconds) The amount of time between typing multiple strings. | 750 |
| startDelete | (boolean) Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. | false |
| startDelay | (number in milliseconds) The amount of time before the plugin begins typing after initalizing. | 250 |
| loop | (boolean) Have your string or strings continuously loop after completing. | false |
| loopDelay | (number in milliseconds) The amount of time between looping over a string or set of strings again. | 750 |
Expand Down
97 changes: 50 additions & 47 deletions dev/typeit.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* jQuery TypeIt
* @author Alex MacArthur (http://macarthur.me)
* @version 4.0.0
* @version 4.1.0
* @copyright 2016 Alex MacArthur
* @description Types out a given string or strings.
*/
Expand All @@ -13,34 +13,34 @@
$.fn.typeIt = function(opt){
return this.each(function(){
var $t = $(this);
if($t.data('typeit') === undefined) {
$t.data('typeit', new $.typeIt($t, opt));
}
$t.data('typeit', new $.typeIt($t, opt));
});
};

$.typeIt = function(el, opt) {
this.d = {
strings: 'You need a string!',
strings: [],
speed: 100,
lifeLike: true,
cursor: true,
cursorSpeed: 1000,
breakLines: true,
breakDelay: 750,
startDelay: 250,
startDelete: false,
loop: false,
loopDelay: 750,
html: true,
autoStart: true,
callback: function(){}
};

this.pruned = false;
this.queue = [];
this.queueIndex = 0;
this.hasStarted = false;
this.inTag = false;
this.stringsToDelete = '';
this.style = 'style="display:inline;position:relative;font:inherit;color:inherit;"';
this.s = $.extend({}, this.d, opt);
this.el = el;
this._init();
Expand All @@ -49,50 +49,63 @@
$.typeIt.prototype = {

_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.el.find('.ti-container, .ti-cursor, .ti-placeholder').remove();
this._elCheck();
this.s.strings = this._toArray(this.s.strings);
this.el.html('<i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i><span ' + this.style + ' class="ti-container"></span>');
this.tel = this.el.find('span');

this.insert = function(c) {
this.tel.append(c);
};

if(this.s.startDelete) {
this.tel.html(this.stringsToDelete);
this.queue.push([this.delete]);
}

for(i = 0; i < this.s.strings.length; i++) {

this.queue.push([this.type, this.s.strings[i]]);

if(i < (this.s.strings.length - 1)) {

var curPos = this.queue.length;
this.queue.push([this.s.breakLines ? this.break : this.delete]);

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]);
}
}
}
this._generateQueue();
this._kickoff();
},

_kickoff : function() {
this._cursor();

if(this.s.autoStart) {
this._begin();
this._startQueue();
} else {
if(this._isVisible()) {
this.hasStarted = true;
this._begin();
this._startQueue();
} else {
$doc.on('scroll', function() {
if(this._isVisible() && !this.hasStarted) {
this.hasStarted = true;
this._begin();
this._startQueue();
}
}.bind(this));
}
}
},
},

_generateQueue : function() {
for(i = 0; i < this.s.strings.length; i++) {

this.queue.push([this.type, this.s.strings[i]]);

_begin : function() {
this._cursor();
if(i < (this.s.strings.length - 1)) {
var curPos = this.queue.length;
this.queue.push([this.s.breakLines ? this.break : this.delete]);

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]);
}
}
}
},

_startQueue : function() {
this._to(function() {
this._executeQueue();
}.bind(this), this.s.startDelay);
Expand Down Expand Up @@ -121,7 +134,7 @@
// _randomize the timeout each time, if that's your thing
this._random(this);

// "_print" the stringacter
// "_print" the character
// 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)){

Expand Down Expand Up @@ -306,8 +319,10 @@
},

_elCheck : function() {
if(this.el.html().length > 0) {
if(!this.s.startDelete && this.el.html().length > 0) {
this.s.strings = this.el.html().trim();
} else if(this.s.startDelete) {
this.stringsToDelete = this.el.html();
}
},

Expand All @@ -317,11 +332,11 @@

_cursor : function() {
if(this.s.cursor) {
this.el.append('<span ' + this.style + 'class="c">|</span>');
this.el.append('<span ' + this.style + 'class="ti-cursor">|</span>');
var s = this.s.cursorSpeed;
var t = this;
(function loop() {
t.el.find('.c').fadeTo(s/2, 0).fadeTo(s/2, 1);
t.el.find('.ti-cursor').fadeTo(s/2, 0).fadeTo(s/2, 1);
t._to(loop, s);
})();
}
Expand Down Expand Up @@ -379,48 +394,36 @@
}
};

$.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;
Expand Down
2 changes: 1 addition & 1 deletion dev/typeit.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 89cedfd

Please sign in to comment.