update
This commit is contained in:
Arjun Patel
+1
-1
@@ -69,7 +69,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-12 avatar">
|
<div class="col-md-4 col-xs-12 avatar">
|
||||||
<img class="img-circle" src="Images/profpic.JPG"></img>
|
<img class="img-circle" src="Images/profpic.JPG">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-12 detailsMe">
|
<div class="col-md-4 col-xs-12 detailsMe">
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
node_modules
|
|
||||||
.sass-cache
|
|
||||||
.DS_store*
|
|
||||||
npm-debug.log
|
|
||||||
_site
|
|
||||||
.jekyll-metadata
|
|
||||||
@@ -1,154 +0,0 @@
|
|||||||
<pre>Update: TypeIt is fully compatible with jQuery 3.2.1+!</pre>
|
|
||||||
|
|
||||||
# TypeIt: The Most Versatile jQuery Animated Typing Plugin on the Planet
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 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 & 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
|
|
||||||
* 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. (~5kb, single JavaScript file)
|
|
||||||
|
|
||||||
### Demos
|
|
||||||
Checkout several demos and a sandbox where you can try it out at <a href="http://macarthur.me/typeit">macarthur.me/typeit</a>.
|
|
||||||
|
|
||||||
### Documentation
|
|
||||||
View the full documentation for using TypeIt here: <a href="http://macarthur.me/typeit/docs">macarthur.me/typeit/docs</a>.
|
|
||||||
|
|
||||||
## Choose a License
|
|
||||||
The code is out there to check out and use for any personal project, 100% free. But if you're thinking about using TypeIt commercially, check out the license options below that'll get you full support if it's ever needed.
|
|
||||||
* 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/4.3.0/typeit.min.js` or `https://cdnjs.cloudflare.com/ajax/libs/typeit/4.3.0/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
|
|
||||||
|
|
||||||
1. Load jQuery and typeit.js on your page.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="jquery.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. For more on that, see the <a href="http://macarthur.me/typeit/docs">full documentation</a>.)
|
|
||||||
|
|
||||||
```html
|
|
||||||
<span class="type-it"></span>
|
|
||||||
```
|
|
||||||
|
|
||||||
You're ready to start typing!
|
|
||||||
|
|
||||||
## Simple Usage
|
|
||||||
|
|
||||||
In it's simplest use, just call `typeIt()` on any element and include your [options](#options).
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```js
|
|
||||||
$('.type-it').typeIt({
|
|
||||||
strings: ['Enter your string here!', 'Another string!']
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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({
|
|
||||||
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!');
|
|
||||||
```
|
|
||||||
|
|
||||||
### Companion Functions
|
|
||||||
|
|
||||||
| 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 specified number of characters. |
|
|
||||||
| tiEmpty() | (none) | Will instantly delete everything that has already been typed.
|
|
||||||
| 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.|
|
|
||||||
| tiSettings() | (JSON) Options you'd like to update | Will redefine your options on the fly. This will only work for updating the `speed`, `lifeLike`, and `html` options.|
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Options
|
|
||||||
|
|
||||||
You can modify the options for the plugin by passing in JSON.
|
|
||||||
|
|
||||||
There are a number of options you may use to customize TypeIt. For more details on these options, view the <a href="http://macarthur.me/typeit/docs">full documentation</a>.
|
|
||||||
|
|
||||||
| Option | Description | Default Value
|
|
||||||
| ------------- | ------------- | ------------- |
|
|
||||||
| strings | (string or array) The string(s) to be typed. | 'Your default string.' |
|
|
||||||
| speed | (number in millseconds) The typing speed. | 100 |
|
|
||||||
| deleteSpeed | (number in millseconds) The deletion speed. If left undefined, will be 1/3 of the type speed. | undefined |
|
|
||||||
| lifeLike | (boolean) Will make the typing pace irregular, as if a real person is doing it. | true |
|
|
||||||
| cursor | (boolean) Show a blinking cursor at the end of the string(s). | true |
|
|
||||||
| 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 (milliseconds) between line breaks when typing multiple strings. Only effective when `breakLines: true`. | 750 |
|
|
||||||
| deleteDelay | (number in milliseconds) The amount of time (milliseconds) between deleting the current string and typing the next. Only effective when `breakLines: false`. | 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 |
|
|
||||||
| html | (boolean) Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally. | true |
|
|
||||||
| callback | (function) A function that executes after your typing has completed. | nuthin' |
|
|
||||||
|
|
||||||
## Contributions
|
|
||||||
|
|
||||||
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):
|
|
||||||
|
|
||||||
```
|
|
||||||
npm install
|
|
||||||
gulp
|
|
||||||
```
|
|
||||||
## Donations
|
|
||||||
|
|
||||||
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!
|
|
||||||
|
|
||||||
PayPal: <a href="http://paypal.me/alexmacarthur">paypal.me/alexmacarthur</a>
|
|
||||||
|
|
||||||
Venmo: <a href="https://venmo.com/amacarthur">venmo.com/amacarthur</a>
|
|
||||||
-489
@@ -1,489 +0,0 @@
|
|||||||
/**
|
|
||||||
* jQuery TypeIt
|
|
||||||
* @author Alex MacArthur (http://macarthur.me)
|
|
||||||
* @version 4.4.0
|
|
||||||
* @copyright 2016 Alex MacArthur
|
|
||||||
* @description Types out a given string or strings.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* jslint browser: true */
|
|
||||||
/* globals jQuery:false */
|
|
||||||
|
|
||||||
(function($, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var $doc = $(document);
|
|
||||||
|
|
||||||
$.fn.typeIt = function(opt) {
|
|
||||||
return this.each(function() {
|
|
||||||
var $t = $(this);
|
|
||||||
var tData = $t.data('typeit');
|
|
||||||
if(tData !== undefined) {
|
|
||||||
clearTimeout(tData.tTO);
|
|
||||||
clearTimeout(tData.dTO);
|
|
||||||
$t.removeData('typeit');
|
|
||||||
}
|
|
||||||
$t.data('typeit', new $.typeIt($t, opt));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$.typeIt = function(el, opt) {
|
|
||||||
this.d = {
|
|
||||||
strings: [],
|
|
||||||
speed: 100,
|
|
||||||
deleteSpeed: undefined,
|
|
||||||
lifeLike: true,
|
|
||||||
cursor: true,
|
|
||||||
cursorSpeed: 1000,
|
|
||||||
breakLines: true,
|
|
||||||
breakDelay: 750,
|
|
||||||
deleteDelay: 750,
|
|
||||||
startDelay: 250,
|
|
||||||
startDelete: false,
|
|
||||||
loop: false,
|
|
||||||
loopDelay: 750,
|
|
||||||
html: true,
|
|
||||||
autoStart: true,
|
|
||||||
callback: function() {}
|
|
||||||
};
|
|
||||||
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
|
|
||||||
$.typeIt.prototype = {
|
|
||||||
|
|
||||||
_init: function() {
|
|
||||||
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]);
|
|
||||||
}
|
|
||||||
|
|
||||||
this._generateQueue();
|
|
||||||
this._kickoff();
|
|
||||||
},
|
|
||||||
|
|
||||||
_kickoff: function() {
|
|
||||||
this._cursor();
|
|
||||||
|
|
||||||
if (this.s.autoStart) {
|
|
||||||
this._startQueue();
|
|
||||||
} else {
|
|
||||||
if (this._isVisible()) {
|
|
||||||
this.hasStarted = true;
|
|
||||||
this._startQueue();
|
|
||||||
} else {
|
|
||||||
$doc.on('scroll', function() {
|
|
||||||
if (this._isVisible() && !this.hasStarted) {
|
|
||||||
this.hasStarted = true;
|
|
||||||
this._startQueue();
|
|
||||||
}
|
|
||||||
}.bind(this));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_generateQueue: function() {
|
|
||||||
for (var 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;
|
|
||||||
var delay = this.s.breakLines ? this.s.breakDelay : this.s.deleteDelay;
|
|
||||||
this.queue.push([this.s.breakLines ? this.break : this.delete]);
|
|
||||||
this.queue.splice(curPos, 0, [this.pause, delay / 2]);
|
|
||||||
this.queue.splice(curPos + 2, 0, [this.pause, delay / 2]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_startQueue: function() {
|
|
||||||
this._to(function() {
|
|
||||||
this._executeQueue();
|
|
||||||
}.bind(this), this.s.startDelay);
|
|
||||||
},
|
|
||||||
|
|
||||||
/*
|
|
||||||
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];
|
|
||||||
}
|
|
||||||
|
|
||||||
// do the work that matters
|
|
||||||
this.tTO = setTimeout(function() {
|
|
||||||
|
|
||||||
// randomize the timeout each time, if that's your thing
|
|
||||||
this._setPace(this);
|
|
||||||
|
|
||||||
// "_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)) {
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._makeNode(string[0]);
|
|
||||||
} else {
|
|
||||||
this._print(string[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// shorten it
|
|
||||||
string.splice(0, 1);
|
|
||||||
|
|
||||||
// if there's more to it, run again until fully printed
|
|
||||||
if (string.length) {
|
|
||||||
this.type(string, false);
|
|
||||||
} else {
|
|
||||||
this._executeQueue();
|
|
||||||
}
|
|
||||||
|
|
||||||
}.bind(this), this.typePace);
|
|
||||||
},
|
|
||||||
|
|
||||||
pause: function(time) {
|
|
||||||
time = time === undefined ? this.s.breakDelay : time;
|
|
||||||
this._to(function() {
|
|
||||||
this._executeQueue();
|
|
||||||
}.bind(this), time);
|
|
||||||
},
|
|
||||||
|
|
||||||
break: function() {
|
|
||||||
this.insert('<br>');
|
|
||||||
this._executeQueue();
|
|
||||||
},
|
|
||||||
|
|
||||||
mergeSet: function(s) {
|
|
||||||
this.s = $.extend({}, this.s, s);
|
|
||||||
this._executeQueue();
|
|
||||||
},
|
|
||||||
|
|
||||||
_print: function(chr) {
|
|
||||||
if (this.inTag) {
|
|
||||||
$(this.tag, this.el).last().append(chr);
|
|
||||||
if (this.tagCount < this.tagDuration) {
|
|
||||||
this.tagCount++;
|
|
||||||
} else {
|
|
||||||
this.inTag = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.insert(chr);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/*
|
|
||||||
Empty the existing text, clearing it instantly.
|
|
||||||
*/
|
|
||||||
empty: function() {
|
|
||||||
this.tel.html('');
|
|
||||||
this._executeQueue();
|
|
||||||
},
|
|
||||||
|
|
||||||
/*
|
|
||||||
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.
|
|
||||||
*/
|
|
||||||
delete: function(chars) {
|
|
||||||
|
|
||||||
this.deleteTimeout = setTimeout(function() {
|
|
||||||
|
|
||||||
this._setPace();
|
|
||||||
|
|
||||||
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--) {
|
|
||||||
|
|
||||||
if (a.slice(o - 3, o + 1).join('') === '<br>') {
|
|
||||||
a.splice(o - 3, 4);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a[o] === '&') {
|
|
||||||
a.splice(o, n - o + 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a[o] === '<') {
|
|
||||||
if (a[o - 1] !== '>') {
|
|
||||||
if (a[o - 1] === ';') {
|
|
||||||
for (var p = o - 1; p > -1; p--) {
|
|
||||||
if (a[p] === '&') {
|
|
||||||
a.splice(p, o - p);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.splice(o - 1, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
} else {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.tel.html(a.join(''));
|
|
||||||
|
|
||||||
// characters still in the string.
|
|
||||||
if (amount > (chars === undefined ? 0 : 2)) {
|
|
||||||
this.delete(chars === undefined ? undefined : chars - 1);
|
|
||||||
} else {
|
|
||||||
this._executeQueue();
|
|
||||||
}
|
|
||||||
}.bind(this), this.deletePace);
|
|
||||||
},
|
|
||||||
|
|
||||||
_isVisible: function() {
|
|
||||||
var win = $(window);
|
|
||||||
|
|
||||||
var viewport = {
|
|
||||||
top: win.scrollTop(),
|
|
||||||
left: win.scrollLeft()
|
|
||||||
};
|
|
||||||
viewport.right = viewport.left + win.width();
|
|
||||||
viewport.bottom = viewport.top + win.height();
|
|
||||||
|
|
||||||
var height = this.el.outerHeight();
|
|
||||||
var width = this.el.outerWidth();
|
|
||||||
|
|
||||||
if (!width || !height) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var bounds = this.el.offset();
|
|
||||||
bounds.right = bounds.left + width;
|
|
||||||
bounds.bottom = bounds.top + height;
|
|
||||||
|
|
||||||
var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
|
|
||||||
|
|
||||||
if (!visible) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var deltas = {
|
|
||||||
top: Math.min(1, (bounds.bottom - viewport.top) / height),
|
|
||||||
bottom: Math.min(1, (viewport.bottom - bounds.top) / height),
|
|
||||||
left: Math.min(1, (bounds.right - viewport.left) / width),
|
|
||||||
right: Math.min(1, (viewport.right - bounds.left) / width)
|
|
||||||
};
|
|
||||||
|
|
||||||
return (deltas.left * deltas.right) >= 1 && (deltas.top * deltas.bottom) >= 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
/*
|
|
||||||
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]);
|
|
||||||
}
|
|
||||||
} 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_to: function(fn, time) {
|
|
||||||
setTimeout(function() {
|
|
||||||
fn();
|
|
||||||
}.bind(this), time);
|
|
||||||
},
|
|
||||||
|
|
||||||
_elCheck: function() {
|
|
||||||
if (!this.s.startDelete && this.el.html().replace(/(\r\n|\n|\r)/gm,"").length > 0) {
|
|
||||||
this.s.strings = this.el.html().trim();
|
|
||||||
} else if (this.s.startDelete) {
|
|
||||||
this.stringsToDelete = this.el.html();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_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="ti-cursor">|</span>');
|
|
||||||
var s = this.s.cursorSpeed;
|
|
||||||
var t = this;
|
|
||||||
(function loop() {
|
|
||||||
t.el.find('.ti-cursor').fadeTo(s / 2, 0).fadeTo(s / 2, 1);
|
|
||||||
t._to(loop, s);
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_setPace: function() {
|
|
||||||
var typeSpeed = this.s.speed;
|
|
||||||
var deleteSpeed = this.s.deleteSpeed !== undefined ? this.s.deleteSpeed : this.s.speed / 3;
|
|
||||||
var typeRange = typeSpeed / 2;
|
|
||||||
var deleteRange = deleteSpeed / 2;
|
|
||||||
|
|
||||||
this.typePace = this.s.lifeLike ? this._randomInRange(typeSpeed, typeRange) : typeSpeed;
|
|
||||||
this.deletePace = this.s.lifeLike ? this._randomInRange(deleteSpeed, deleteRange) : deleteSpeed;
|
|
||||||
},
|
|
||||||
|
|
||||||
_randomInRange: function(value, range) {
|
|
||||||
return Math.abs(Math.random() * ((value + range) - (value - range)) + (value - range));
|
|
||||||
},
|
|
||||||
|
|
||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tiType = function(str) {
|
|
||||||
var i = $(this).data('typeit');
|
|
||||||
if (i === undefined) return $doc;
|
|
||||||
i.queue.push([i.type, str]);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tiEmpty = function() {
|
|
||||||
var i = $(this).data('typeit');
|
|
||||||
if (i === undefined) return $doc;
|
|
||||||
i.queue.push([i.empty]);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tiDelete = function(num) {
|
|
||||||
var i = $(this).data('typeit');
|
|
||||||
if (i === undefined) return $doc;
|
|
||||||
i.queue.push([i.delete, num]);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tiPause = function(time) {
|
|
||||||
var i = $(this).data('typeit');
|
|
||||||
if (i === undefined) return $doc;
|
|
||||||
i.queue.push([i.pause, time]);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tiBreak = function() {
|
|
||||||
var i = $(this).data('typeit');
|
|
||||||
if (i === undefined) return $doc;
|
|
||||||
i.queue.push([i.break]);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tiSettings = function(settings) {
|
|
||||||
var i = $(this).data('typeit');
|
|
||||||
if (i === undefined) return $doc;
|
|
||||||
i.queue.push([i.mergeSet, settings]);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
}(jQuery));
|
|
||||||
-23
File diff suppressed because one or more lines are too long
@@ -1,25 +0,0 @@
|
|||||||
var gulp = require('gulp');
|
|
||||||
var jshint = require('gulp-jshint');
|
|
||||||
var uglify = require('gulp-uglify');
|
|
||||||
var rename = require("gulp-rename");
|
|
||||||
|
|
||||||
gulp.task('jshint',function(){
|
|
||||||
gulp.src('dev/typeit.js')
|
|
||||||
.pipe(jshint())
|
|
||||||
.pipe(jshint.reporter('default'));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('scripts', function() {
|
|
||||||
gulp.src('dev/typeit.js')
|
|
||||||
.pipe(gulp.dest('dist'))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(rename('typeit.min.js'))
|
|
||||||
.pipe(gulp.dest('dev'))
|
|
||||||
.pipe(gulp.dest('dist'));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('build', ['jshint', 'scripts']);
|
|
||||||
|
|
||||||
gulp.task('default', ['jshint', 'scripts'], function() {
|
|
||||||
gulp.watch('dev/*', ['jshint', 'scripts']);
|
|
||||||
});
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "typeit",
|
|
||||||
"version": "4.4.0",
|
|
||||||
"license": "GPL-2.0",
|
|
||||||
"author": "Alex MacArthur <alex@macarthur.me>",
|
|
||||||
"description": "The most versatile jQuery animated typing plugin on the planet.",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/alexmacarthur/typeit.git"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"jquery",
|
|
||||||
"animated",
|
|
||||||
"typing",
|
|
||||||
"typewriter",
|
|
||||||
"type effect",
|
|
||||||
"text effects"
|
|
||||||
],
|
|
||||||
"main": "dist/typeit.min.js",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/alexmacarthur/typeit/issues"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"jquery": "^1.8.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"gulp": "^3.8.11",
|
|
||||||
"gulp-jshint": "^1.9.2",
|
|
||||||
"gulp-uglify": "^1.1.0",
|
|
||||||
"gulp-autoprefixer": "^3.0.2",
|
|
||||||
"gulp-sass": "^2.0.4",
|
|
||||||
"gulp-rename": "^1.2.2",
|
|
||||||
"browser-sync": "^2.9.11"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user