Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

typeit

Package Overview
Dependencies
Maintainers
1
Versions
121
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 4.4.1 to 5.0.0

.babelrc
CODE_OF_CONDUCT.md
index.html
src/instance.js
src/typeit.js
webpack.config.js

930

dist/typeit.js

@@ -1,33 +0,204 @@

/**
* jQuery TypeIt
* @author Alex MacArthur (http://macarthur.me)
* @version 4.4.1
* @copyright 2017 Alex MacArthur
* @description Types out a given string or strings.
/*!
*
* typeit - The most versatile animated typing utility on the planet.
* Author: Alex MacArthur <alex@macarthur.me> (https://macarthur.me)
* Version: v5.0.0
* URL: https://typeitjs.com
* License: GPL-2.0
*
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["TypeIt"] = factory();
else
root["TypeIt"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
/* jslint browser: true */
/* globals jQuery:false */
"use strict";
(function($, undefined) {
'use strict';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var $doc = $(document);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
$.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');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Instance = __webpack_require__(1).default;
module.exports = function () {
function TypeIt(element, options) {
_classCallCheck(this, TypeIt);
this.elements = [];
this.instances = [];
if ((typeof element === "undefined" ? "undefined" : _typeof(element)) === "object") {
//-- There's only one!
if (element.length === undefined) {
this.elements.push(element);
} else {
//-- It's already an array!
this.elements = element;
}
$t.data('typeit', new $.typeIt($t, opt));
});
};
}
$.typeIt = function(el, opt) {
this.d = {
//-- Convert to array of elements.
if (typeof element === "string") {
this.elements = document.querySelectorAll(element);
}
this.createInstances(options);
}
_createClass(TypeIt, [{
key: "createInstances",
value: function createInstances(options) {
var _this = this;
[].slice.call(this.elements).forEach(function (element) {
_this.instances.push(new Instance(element, options));
});
}
}, {
key: "pushAction",
value: function pushAction(func) {
var argument = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
this.instances.forEach(function (instance) {
instance.queue.push([instance[func], argument]);
});
}
}, {
key: "type",
value: function type(string) {
this.pushAction("type", string);
return this;
}
}, {
key: "delete",
value: function _delete(numCharacters) {
this.pushAction("delete", numCharacters);
return this;
}
}, {
key: "empty",
value: function empty() {
this.pushAction("empty");
return this;
}
}, {
key: "pause",
value: function pause(ms) {
this.pushAction("pause", ms);
return this;
}
}, {
key: "break",
value: function _break() {
this.pushAction("break");
return this;
}
}, {
key: "options",
value: function options(_options) {
this.pushAction("setOptions", _options);
return this;
}
}]);
return TypeIt;
}();
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Instance = function () {
function Instance(element, options) {
_classCallCheck(this, Instance);
this.defaults = {
strings: [],

@@ -40,6 +211,5 @@ speed: 100,

breakLines: true,
breakDelay: 750,
deleteDelay: 750,
startDelay: 250,
startDelete: false,
nextStringDelay: 750,
loop: false,

@@ -49,5 +219,6 @@ loopDelay: 750,

autoStart: true,
callback: function() {}
callback: function callback() {}
};
this.id = "";
this.queue = [];

@@ -57,199 +228,399 @@ this.queueIndex = 0;

this.inTag = false;
this.stringsToDelete = '';
this.stringsToDelete = "";
this.style = 'style="display:inline;position:relative;font:inherit;color:inherit;"';
this.s = $.extend({}, this.d, opt);
this.el = el;
this._init();
};
this.element = element;
$.typeIt.prototype = {
this.setOptions(options, this.defaults);
this.init();
}
_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;line-height:0;visibility:hidden;overflow:hidden;">.</i><span ' + this.style + ' class="ti-container"></span>');
this.tel = this.el.find('span');
_createClass(Instance, [{
key: "init",
value: function init() {
this.checkElement();
this.insert = function(c) {
this.tel.append(c);
};
this.options.strings = this.toArray(this.options.strings);
if (this.s.startDelete) {
this.tel.html(this.stringsToDelete);
//-- We don't have anything. Get out of here.
if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
return;
}
this.element.innerHTML = '<i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i><span ' + this.style + ' class="ti-container"></span>';
this.id = this.generateHash();
this.element.dataset["typeitid"] = this.id;
this.elementContainer = this.element.querySelector("span");
if (this.options.startDelete) {
this.insert(this.stringsToDelete);
this.queue.push([this.delete]);
this.insertPauseIntoQueue(1);
}
this._generateQueue();
this._kickoff();
},
this.generateQueue();
this.kickoff();
}
}, {
key: "generateQueue",
value: function generateQueue() {
for (var i = 0; i < this.options.strings.length; i++) {
this.queue.push([this.type, this.options.strings[i]]);
_kickoff: function() {
this._cursor();
if (i < this.options.strings.length - 1) {
this.queue.push([this.options.breakLines ? this.break : this.delete]);
this.insertPauseIntoQueue(this.queue.length);
}
}
}
}, {
key: "insertPauseIntoQueue",
value: function insertPauseIntoQueue(position) {
var halfDelay = this.options.nextStringDelay / 2;
this.queue.splice(position - 1, 0, [this.pause, halfDelay]);
this.queue.splice(position + 2, 0, [this.pause, halfDelay]);
}
}, {
key: "kickoff",
value: function kickoff() {
this.cursor();
if (this.s.autoStart) {
this._startQueue();
if (this.options.autoStart) {
this.startQueue();
} else {
if (this._isVisible()) {
if (this.isVisible()) {
this.hasStarted = true;
this._startQueue();
this.startQueue();
} else {
$doc.on('scroll', function() {
if (this._isVisible() && !this.hasStarted) {
this.hasStarted = true;
this._startQueue();
var that = this;
window.addEventListener("scroll", function checkForStart(event) {
if (that.isVisible() && !that.hasStarted) {
that.hasStarted = true;
that.startQueue();
event.currentTarget.removeEventListener(event.type, checkForStart);
}
}.bind(this));
});
}
}
},
}
}, {
key: "startQueue",
value: function startQueue() {
var _this = this;
_generateQueue: function() {
for (var i = 0; i < this.s.strings.length; i++) {
setTimeout(function () {
_this.executeQueue();
}, this.options.startDelay);
}
}, {
key: "isVisible",
value: function isVisible() {
var coordinates = this.element.getBoundingClientRect();
this.queue.push([this.type, this.s.strings[i]]);
var viewport = {
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
};
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]);
}
//-- Element extends outside of viewport.
if (coordinates.right > viewport.width || coordinates.bottom > viewport.height) {
return false;
}
},
_startQueue: function() {
this._to(function() {
this._executeQueue();
}.bind(this), this.s.startDelay);
},
//-- Top or left aren't visible.
if (coordinates.top < 0 || coordinates.left < 0) {
return false;
}
return true;
}
}, {
key: "generateHash",
value: function generateHash() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
}, {
key: "cursor",
value: function cursor() {
if (!this.options.cursor) return;
var hash = this.generateHash();
var styleBlock = document.createElement("style");
var styles = "\n @keyframes blink-" + hash + " {\n 0% {opacity: 0}\n 49%{opacity: 0}\n 50% {opacity: 1}\n }\n\n [data-typeitid='" + this.id + "'] .ti-cursor {\n animation: blink-" + hash + " " + this.options.cursorSpeed / 1000 + "s infinite;\n }\n ";
styleBlock.appendChild(document.createTextNode(styles));
document.head.appendChild(styleBlock);
this.element.insertAdjacentHTML("beforeend", "<span " + this.style + 'class="ti-cursor">|</span>');
}
/**
* Appends string to element container.
*/
}, {
key: "insert",
value: function insert(content) {
var toChildNode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (toChildNode) {
this.elementContainer.lastChild.insertAdjacentHTML("beforeend", content);
} else {
this.elementContainer.insertAdjacentHTML("beforeend", content);
}
}
/**
* Converts a string to an array, if it's not already.
*
* @return array
*/
}, {
key: "toArray",
value: function toArray(string) {
return string.constructor === Array ? string.slice(0) : string.split("<br>");
}
/**
* Depending on if we're starting by deleting an existing string or typing
* from nothing, set a specific variable to what's in the HTML.
*/
}, {
key: "checkElement",
value: function checkElement() {
if (!this.options.startDelete && this.element.innerHTML.length > 0) {
this.options.strings = this.element.innerHTML.trim();
} else {
this.stringsToDelete = this.element.innerHTML;
}
}
}, {
key: "break",
value: function _break() {
this.insert("<br>");
this.executeQueue();
}
}, {
key: "pause",
value: function pause(time) {
var _this2 = this;
time = time === undefined ? this.options.nextStringDelay : time;
setTimeout(function () {
_this2.executeQueue();
}, time);
}
/*
Pass in a string, and loop over that string until empty. Then return true.
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.
*/
type: function(string, rake) {
// set default 'rake' value
rake = typeof rake === 'undefined' ? true : rake;
}, {
key: "rake",
value: function rake(array) {
var _this3 = this;
// convert to array
string = this._toArray(string);
return array.map(function (item) {
//-- Convert string to array.
item = item.split("");
// if it's designated, rake that bad boy for HTML tags and stuff
//-- If we're parsing HTML, group tags into their own array items.
if (_this3.options.html) {
var tPosition = [];
var tag = void 0;
var isEntity = false;
for (var j = 0; j < item.length; j++) {
if (item[j] === "<" || item[j] === "&") {
tPosition[0] = j;
isEntity = item[j] === "&";
}
if (item[j] === ">" || item[j] === ";" && isEntity) {
tPosition[1] = j;
j = 0;
tag = item.slice(tPosition[0], tPosition[1] + 1).join("");
item.splice(tPosition[0], tPosition[1] - tPosition[0] + 1, tag);
isEntity = false;
}
}
}
return item;
});
}
}, {
key: "print",
value: function print(character) {
if (this.inTag) {
this.insert(character, true);
if (this.tagCount < this.tagDuration) {
this.tagCount++;
} else {
this.inTag = false;
}
} else {
this.insert(character);
}
}
/**
* Pass in a string, and loop over that string until empty. Then return true.
*/
}, {
key: "type",
value: function type(string) {
var _this4 = this;
var rake = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
string = this.toArray(string);
//-- If it's designated, rake that bad boy for HTML tags and stuff.
if (rake) {
string = this._rake(string);
string = this.rake(string);
string = string[0];
}
// do the work that matters
this.tTO = setTimeout(function() {
this.typingTimeout = setTimeout(function () {
//-- Randomize the timeout each time, if that's your thing.
_this4.setPace(_this4);
// 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
//-- If an opening HTML tag is found and we're not already printing inside a tag
if (_this4.options.html && string[0].indexOf("<") !== -1 && string[0].indexOf("</") === -1 && !_this4.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;
if (string[i].indexOf("</") !== -1) {
_this4.tagCount = 1;
_this4.tagDuration = i;
}
}
this._makeNode(string[0]);
_this4.inTag = true;
//-- Create node of that string name.
var matches = string[0].match(/\<(.*?)\>/);
var doc = document.implementation.createHTMLDocument();
doc.body.innerHTML = "<" + matches[1] + "></" + matches[1] + ">";
//-- Add that new node to the element.
_this4.elementContainer.appendChild(doc.body.children[0]);
} else {
this._print(string[0]);
_this4.print(string[0]);
}
// shorten it
//-- Shorten it by one character.
string.splice(0, 1);
// if there's more to it, run again until fully printed
//-- If there's more to it, run again until fully printed.
if (string.length) {
this.type(string, false);
_this4.type(string, false);
} else {
this._executeQueue();
_this4.executeQueue();
}
}, this.typePace);
}
}.bind(this), this.typePace);
},
/**
* Removes helper elements with certain classes from the TypeIt element.
*/
pause: function(time) {
time = time === undefined ? this.s.breakDelay : time;
this._to(function() {
this._executeQueue();
}.bind(this), time);
},
}, {
key: "removeHelperElements",
value: function removeHelperElements() {
var _this5 = this;
break: function() {
this.insert('<br>');
this._executeQueue();
},
var helperElements = this.element.querySelectorAll(".ti-container, .ti-cursor, .ti-placeholder");
[].forEach.call(helperElements, function (helperElement) {
_this5.element.removeChild(helperElement);
});
}
}, {
key: "setOptions",
value: function setOptions(settings) {
var defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
mergeSet: function(s) {
this.s = $.extend({}, this.s, s);
this._executeQueue();
},
var mergedSettings = {};
_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);
if (defaults === null) {
defaults = this.options;
}
},
/*
Empty the existing text, clearing it instantly.
*/
empty: function() {
this.tel.html('');
this._executeQueue();
},
for (var attrname in defaults) {
mergedSettings[attrname] = defaults[attrname];
}
/*
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) {
for (var _attrname in settings) {
mergedSettings[_attrname] = settings[_attrname];
}
this.deleteTimeout = setTimeout(function() {
this.options = mergedSettings;
this._setPace();
//-- If we've already started, I must be a step in the queue,
//-- and can continue once finished.
if (this.hasStarted) {
this.executeQueue();
}
}
}, {
key: "randomInRange",
value: function randomInRange(value, range) {
return Math.abs(Math.random() * (value + range - (value - range)) + (value - range));
}
}, {
key: "setPace",
value: function setPace() {
var typeSpeed = this.options.speed;
var deleteSpeed = this.options.deleteSpeed !== undefined ? this.options.deleteSpeed : this.options.speed / 3;
var typeRange = typeSpeed / 2;
var deleteRange = deleteSpeed / 2;
var a = this.tel.html().split("");
this.typePace = this.options.lifeLike ? this.randomInRange(typeSpeed, typeRange) : typeSpeed;
this.deletePace = this.options.lifeLike ? this.randomInRange(deleteSpeed, deleteRange) : deleteSpeed;
}
}, {
key: "delete",
value: function _delete() {
var _this6 = this;
var amount = chars === undefined || chars === null ? a.length - 1 : chars + 1;
var chars = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
// cut the array by a character
for (var n = a.length - 1; n > -1; n--) {
this.deleteTimeout = setTimeout(function () {
_this6.setPace();
if ((a[n] === '>' || a[n] === ';') && this.s.html) {
var textArray = _this6.elementContainer.innerHTML.split("");
var amount = chars === null ? textArray.length - 1 : chars + 1;
//-- Cut the array by a character.
for (var n = textArray.length - 1; n > -1; n--) {
if ((textArray[n] === ">" || textArray[n] === ";") && _this6.options.html) {
for (var o = n; o > -1; o--) {
if (a.slice(o - 3, o + 1).join('') === '<br>') {
a.splice(o - 3, 4);
if (textArray.slice(o - 3, o + 1).join("") === "<br>") {
textArray.splice(o - 3, 4);
break;
}
if (a[o] === '&') {
a.splice(o, n - o + 1);
if (textArray[o] === "&") {
textArray.splice(o, n - o + 1);
break;
}
if (a[o] === '<') {
if (a[o - 1] !== '>') {
if (a[o - 1] === ';') {
if (textArray[o] === "<") {
if (textArray[o - 1] !== ">") {
if (textArray[o - 1] === ";") {
for (var p = o - 1; p > -1; p--) {
if (a[p] === '&') {
a.splice(p, o - p);
if (textArray[p] === "&") {
textArray.splice(p, o - p);
break;

@@ -260,3 +631,3 @@ }

a.splice(o - 1, 1);
textArray.splice(o - 1, 1);
break;

@@ -268,13 +639,12 @@ }

} else {
a.pop();
textArray.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);
//-- If we've found an empty set of HTML tags...
if (_this6.elementContainer.innerHTML.indexOf("></") > -1) {
for (var i = _this6.elementContainer.innerHTML.indexOf("></") - 2; i >= 0; i--) {
if (textArray[i] === "<") {
textArray.splice(i, textArray.length - i);
break;

@@ -285,54 +655,28 @@ }

this.tel.html(a.join(''));
_this6.elementContainer.innerHTML = textArray.join("");
// characters still in the string.
if (amount > (chars === undefined ? 0 : 2)) {
this.delete(chars === undefined ? undefined : chars - 1);
//-- Characters still in the string.
if (amount > (chars === null ? 0 : 2)) {
_this6.delete(chars === null ? null : chars - 1);
} else {
this._executeQueue();
_this6.executeQueue();
}
}.bind(this), this.deletePace);
},
}, this.deletePace);
}
_isVisible: function() {
var win = $(window);
/*
Empty the existing text, clearing it instantly.
*/
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
}, {
key: "empty",
value: function empty() {
this.elementContainer.innerHTML = "";
this.executeQueue();
}
}, {
key: "executeQueue",
value: function executeQueue() {
var _this7 = this;
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) {

@@ -342,155 +686,33 @@ var thisFunc = this.queue[this.queueIndex];

// delay execution if looping back to the beginning of the queue.
//-- 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);
setTimeout(function () {
thisFunc[0].call(_this7, thisFunc[1]);
}, this.options.loopDelay / 2);
} else {
thisFunc[0].bind(this)(thisFunc[1]);
thisFunc[0].call(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();
return;
}
},
_toArray: function(str) {
return str.constructor === Array ? str.slice(0) : str.split('<br>');
},
this.options.callback();
_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);
})();
if (this.options.loop) {
this.queueIndex = 0;
this.isLooping = true;
setTimeout(function () {
_this7.delete();
}, this.options.loopDelay / 2);
}
},
_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;
};
return Instance;
}();
$.fn.tiEmpty = function() {
var i = $(this).data('typeit');
if (i === undefined) return $doc;
i.queue.push([i.empty]);
return this;
};
exports.default = Instance;
$.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));
/***/ })
/******/ ]);
});

11

dist/typeit.min.js

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

!function(t,e){"use strict";var i=t(document);t.fn.typeIt=function(i){return this.each(function(){var s=t(this),h=s.data("typeit");h!==e&&(clearTimeout(h.tTO),clearTimeout(h.dTO),s.removeData("typeit")),s.data("typeit",new t.typeIt(s,i))})},t.typeIt=function(i,s){this.d={strings:[],speed:100,deleteSpeed:e,lifeLike:!0,cursor:!0,cursorSpeed:1e3,breakLines:!0,breakDelay:750,deleteDelay:750,startDelay:250,startDelete:!1,loop:!1,loopDelay:750,html:!0,autoStart:!0,callback:function(){}},this.queue=[],this.queueIndex=0,this.hasStarted=!1,this.inTag=!1,this.stringsToDelete="",this.style='style="display:inline;position:relative;font:inherit;color:inherit;"',this.s=t.extend({},this.d,s),this.el=i,this._init()},t.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;line-height:0;visibility:hidden;overflow:hidden;">.</i><span '+this.style+' class="ti-container"></span>'),this.tel=this.el.find("span"),this.insert=function(t){this.tel.append(t)},this.s.startDelete&&(this.tel.html(this.stringsToDelete),this.queue.push([this["delete"]])),this._generateQueue(),this._kickoff()},_kickoff:function(){this._cursor(),this.s.autoStart?this._startQueue():this._isVisible()?(this.hasStarted=!0,this._startQueue()):i.on("scroll",function(){this._isVisible()&&!this.hasStarted&&(this.hasStarted=!0,this._startQueue())}.bind(this))},_generateQueue:function(){for(var t=0;t<this.s.strings.length;t++)if(this.queue.push([this.type,this.s.strings[t]]),t<this.s.strings.length-1){var e=this.queue.length,i=this.s.breakLines?this.s.breakDelay:this.s.deleteDelay;this.queue.push([this.s.breakLines?this["break"]:this["delete"]]),this.queue.splice(e,0,[this.pause,i/2]),this.queue.splice(e+2,0,[this.pause,i/2])}},_startQueue:function(){this._to(function(){this._executeQueue()}.bind(this),this.s.startDelay)},type:function(t,e){e="undefined"==typeof e||e,t=this._toArray(t),e&&(t=this._rake(t),t=t[0]),this.tTO=setTimeout(function(){if(this._setPace(this),this.s.html&&t[0].indexOf("<")!==-1&&t[0].indexOf("</")===-1&&!this.inTag){for(var e=t.length-1;e>=0;e--)t[e].indexOf("</")!==-1&&(this.tagCount=1,this.tagDuration=e);this._makeNode(t[0])}else this._print(t[0]);t.splice(0,1),t.length?this.type(t,!1):this._executeQueue()}.bind(this),this.typePace)},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(e){this.s=t.extend({},this.s,e),this._executeQueue()},_print:function(e){this.inTag?(t(this.tag,this.el).last().append(e),this.tagCount<this.tagDuration?this.tagCount++:this.inTag=!1):this.insert(e)},empty:function(){this.tel.html(""),this._executeQueue()},"delete":function(t){this.deleteTimeout=setTimeout(function(){this._setPace();for(var i=this.tel.html().split(""),s=t===e||null===t?i.length-1:t+1,h=i.length-1;h>-1;h--){if(">"!==i[h]&&";"!==i[h]||!this.s.html){i.pop();break}for(var n=h;n>-1;n--){if("<br>"===i.slice(n-3,n+1).join("")){i.splice(n-3,4);break}if("&"===i[n]){i.splice(n,h-n+1);break}if("<"===i[n]&&">"!==i[n-1]){if(";"===i[n-1])for(var r=n-1;r>-1;r--)if("&"===i[r]){i.splice(r,n-r);break}i.splice(n-1,1);break}}break}if(this.tel.html().indexOf("></")>-1)for(var u=this.tel.html().indexOf("></")-2;u>=0;u--)if("<"===i[u]){i.splice(u,i.length-u);break}this.tel.html(i.join("")),s>(t===e?0:2)?this["delete"](t===e?e:t-1):this._executeQueue()}.bind(this),this.deletePace)},_isVisible:function(){var e=t(window),i={top:e.scrollTop(),left:e.scrollLeft()};i.right=i.left+e.width(),i.bottom=i.top+e.height();var s=this.el.outerHeight(),h=this.el.outerWidth();if(!h||!s)return!1;var n=this.el.offset();n.right=n.left+h,n.bottom=n.top+s;var r=!(i.right<n.left||i.left>n.right||i.bottom<n.top||i.top>n.bottom);if(!r)return!1;var u={top:Math.min(1,(n.bottom-i.top)/s),bottom:Math.min(1,(i.bottom-n.top)/s),left:Math.min(1,(n.right-i.left)/h),right:Math.min(1,(i.right-n.left)/h)};return u.left*u.right>=1&&u.top*u.bottom>=1},_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,e){setTimeout(function(){t()}.bind(this),e)},_elCheck:function(){!this.s.startDelete&&this.el.html().replace(/(\r\n|\n|\r)/gm,"").length>0?this.s.strings=this.el.html().trim():this.s.startDelete&&(this.stringsToDelete=this.el.html())},_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="ti-cursor">|</span>');var t=this.s.cursorSpeed,e=this;!function i(){e.el.find(".ti-cursor").fadeTo(t/2,0).fadeTo(t/2,1),e._to(i,t)}()}},_setPace:function(){var t=this.s.speed,i=this.s.deleteSpeed!==e?this.s.deleteSpeed:this.s.speed/3,s=t/2,h=i/2;this.typePace=this.s.lifeLike?this._randomInRange(t,s):t,this.deletePace=this.s.lifeLike?this._randomInRange(i,h):i},_randomInRange:function(t,e){return Math.abs(Math.random()*(t+e-(t-e))+(t-e))},_rake:function(t){for(var e=0;e<t.length;e++)if(t[e]=t[e].split(""),this.s.html){this.tPos=[];for(var i,s=this.tPos,h=!1,n=0;n<t[e].length;n++)"<"!==t[e][n]&&"&"!==t[e][n]||(s[0]=n,h="&"===t[e][n]),(">"===t[e][n]||";"===t[e][n]&&h)&&(s[1]=n,n=0,i=t[e].slice(s[0],s[1]+1).join(""),t[e].splice(s[0],s[1]-s[0]+1,i),h=!1)}return t},_makeNode:function(e){this.tag=t(t.parseHTML(e)),this._print(this.tag),this.inTag=!0}},t.fn.tiType=function(s){var h=t(this).data("typeit");return h===e?i:(h.queue.push([h.type,s]),this)},t.fn.tiEmpty=function(){var s=t(this).data("typeit");return s===e?i:(s.queue.push([s.empty]),this)},t.fn.tiDelete=function(s){var h=t(this).data("typeit");return h===e?i:(h.queue.push([h["delete"],s]),this)},t.fn.tiPause=function(s){var h=t(this).data("typeit");return h===e?i:(h.queue.push([h.pause,s]),this)},t.fn.tiBreak=function(){var s=t(this).data("typeit");return s===e?i:(s.queue.push([s["break"]]),this)},t.fn.tiSettings=function(s){var h=t(this).data("typeit");return h===e?i:(h.queue.push([h.mergeSet,s]),this)}}(jQuery);
/*!
*
* typeit - The most versatile animated typing utility on the planet.
* Author: Alex MacArthur <alex@macarthur.me> (https://macarthur.me)
* Version: v5.0.0
* URL: https://typeitjs.com
* License: GPL-2.0
*
*/
(function(a,b){'object'==typeof exports&&'object'==typeof module?module.exports=b():'function'==typeof define&&define.amd?define([],b):'object'==typeof exports?exports.TypeIt=b():a.TypeIt=b()})(this,function(){return function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=0)}([function(a,b,c){'use strict';function d(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var e='function'==typeof Symbol&&'symbol'==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&'function'==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?'symbol':typeof a},f=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),g=c(1).default;a.exports=function(){function a(b,c){d(this,a),this.elements=[],this.instances=[],'object'===('undefined'==typeof b?'undefined':e(b))&&(void 0===b.length?this.elements.push(b):this.elements=b),'string'==typeof b&&(this.elements=document.querySelectorAll(b)),this.createInstances(c)}return f(a,[{key:'createInstances',value:function(a){var b=this;[].slice.call(this.elements).forEach(function(c){b.instances.push(new g(c,a))})}},{key:'pushAction',value:function(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null;this.instances.forEach(function(c){c.queue.push([c[a],b])})}},{key:'type',value:function(a){return this.pushAction('type',a),this}},{key:'delete',value:function(a){return this.pushAction('delete',a),this}},{key:'empty',value:function(){return this.pushAction('empty'),this}},{key:'pause',value:function(a){return this.pushAction('pause',a),this}},{key:'break',value:function(){return this.pushAction('break'),this}},{key:'options',value:function(a){return this.pushAction('setOptions',a),this}}]),a}()},function(a,b){'use strict';function c(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}Object.defineProperty(b,'__esModule',{value:!0});var d=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),e=function(){function a(b,d){c(this,a),this.defaults={strings:[],speed:100,deleteSpeed:void 0,lifeLike:!0,cursor:!0,cursorSpeed:1e3,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,autoStart:!0,callback:function(){}},this.id='',this.queue=[],this.queueIndex=0,this.hasStarted=!1,this.inTag=!1,this.stringsToDelete='',this.style='style="display:inline;position:relative;font:inherit;color:inherit;"',this.element=b,this.setOptions(d,this.defaults),this.init()}return d(a,[{key:'init',value:function(){this.checkElement(),this.options.strings=this.toArray(this.options.strings),1<=this.options.strings.length&&''===this.options.strings[0]||(this.element.innerHTML='<i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i><span '+this.style+' class="ti-container"></span>',this.id=this.generateHash(),this.element.dataset.typeitid=this.id,this.elementContainer=this.element.querySelector('span'),this.options.startDelete&&(this.insert(this.stringsToDelete),this.queue.push([this.delete]),this.insertPauseIntoQueue(1)),this.generateQueue(),this.kickoff())}},{key:'generateQueue',value:function(){for(var a=0;a<this.options.strings.length;a++)this.queue.push([this.type,this.options.strings[a]]),a<this.options.strings.length-1&&(this.queue.push([this.options.breakLines?this.break:this.delete]),this.insertPauseIntoQueue(this.queue.length))}},{key:'insertPauseIntoQueue',value:function(a){var b=this.options.nextStringDelay/2;this.queue.splice(a-1,0,[this.pause,b]),this.queue.splice(a+2,0,[this.pause,b])}},{key:'kickoff',value:function(){if(this.cursor(),this.options.autoStart)this.startQueue();else if(this.isVisible())this.hasStarted=!0,this.startQueue();else{var a=this;window.addEventListener('scroll',function b(c){a.isVisible()&&!a.hasStarted&&(a.hasStarted=!0,a.startQueue(),c.currentTarget.removeEventListener(c.type,b))})}}},{key:'startQueue',value:function(){var a=this;setTimeout(function(){a.executeQueue()},this.options.startDelay)}},{key:'isVisible',value:function(){var a=this.element.getBoundingClientRect(),b={height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth};return a.right>b.width||a.bottom>b.height?!1:0>a.top||0>a.left?!1:!0}},{key:'generateHash',value:function(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}},{key:'cursor',value:function(){if(this.options.cursor){var a=this.generateHash(),b=document.createElement('style'),c='\n @keyframes blink-'+a+' {\n 0% {opacity: 0}\n 49%{opacity: 0}\n 50% {opacity: 1}\n }\n\n [data-typeitid=\''+this.id+'\'] .ti-cursor {\n animation: blink-'+a+' '+this.options.cursorSpeed/1e3+'s infinite;\n }\n ';b.appendChild(document.createTextNode(c)),document.head.appendChild(b),this.element.insertAdjacentHTML('beforeend','<span '+this.style+'class="ti-cursor">|</span>')}}},{key:'insert',value:function(a){var b=1<arguments.length&&void 0!==arguments[1]&&arguments[1];b?this.elementContainer.lastChild.insertAdjacentHTML('beforeend',a):this.elementContainer.insertAdjacentHTML('beforeend',a)}},{key:'toArray',value:function(a){return a.constructor===Array?a.slice(0):a.split('<br>')}},{key:'checkElement',value:function(){!this.options.startDelete&&0<this.element.innerHTML.length?this.options.strings=this.element.innerHTML.trim():this.stringsToDelete=this.element.innerHTML}},{key:'break',value:function(){this.insert('<br>'),this.executeQueue()}},{key:'pause',value:function(a){var b=this;a=void 0===a?this.options.nextStringDelay:a,setTimeout(function(){b.executeQueue()},a)}},{key:'rake',value:function(a){var b=this;return a.map(function(a){if(a=a.split(''),b.options.html)for(var c=[],d=void 0,e=!1,f=0;f<a.length;f++)('<'===a[f]||'&'===a[f])&&(c[0]=f,e='&'===a[f]),('>'===a[f]||';'===a[f]&&e)&&(c[1]=f,f=0,d=a.slice(c[0],c[1]+1).join(''),a.splice(c[0],c[1]-c[0]+1,d),e=!1);return a})}},{key:'print',value:function(a){this.inTag?(this.insert(a,!0),this.tagCount<this.tagDuration?this.tagCount++:this.inTag=!1):this.insert(a)}},{key:'type',value:function(a){var b=this,c=1<arguments.length&&void 0!==arguments[1]?arguments[1]:!0;a=this.toArray(a),c&&(a=this.rake(a),a=a[0]),this.typingTimeout=setTimeout(function(){if(b.setPace(b),b.options.html&&-1!==a[0].indexOf('<')&&-1===a[0].indexOf('</')&&!b.inTag){for(var c=a.length-1;0<=c;c--)-1!==a[c].indexOf('</')&&(b.tagCount=1,b.tagDuration=c);b.inTag=!0;var d=a[0].match(/\<(.*?)\>/),e=document.implementation.createHTMLDocument();e.body.innerHTML='<'+d[1]+'></'+d[1]+'>',b.elementContainer.appendChild(e.body.children[0])}else b.print(a[0]);a.splice(0,1),a.length?b.type(a,!1):b.executeQueue()},this.typePace)}},{key:'removeHelperElements',value:function(){var a=this,b=this.element.querySelectorAll('.ti-container, .ti-cursor, .ti-placeholder');[].forEach.call(b,function(b){a.element.removeChild(b)})}},{key:'setOptions',value:function(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,c={};for(var d in null===b&&(b=this.options),b)c[d]=b[d];for(var e in a)c[e]=a[e];this.options=c,this.hasStarted&&this.executeQueue()}},{key:'randomInRange',value:function(a,b){return Math.abs(Math.random()*(a+b-(a-b))+(a-b))}},{key:'setPace',value:function(){var a=this.options.speed,b=void 0===this.options.deleteSpeed?this.options.speed/3:this.options.deleteSpeed;this.typePace=this.options.lifeLike?this.randomInRange(a,a/2):a,this.deletePace=this.options.lifeLike?this.randomInRange(b,b/2):b}},{key:'delete',value:function(){var a=this,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;this.deleteTimeout=setTimeout(function(){a.setPace();for(var c=a.elementContainer.innerHTML.split(''),d=null===b?c.length-1:b+1,e=c.length-1;-1<e;e--)if(('>'===c[e]||';'===c[e])&&a.options.html){for(var f=e;-1<f;f--){if('<br>'===c.slice(f-3,f+1).join('')){c.splice(f-3,4);break}if('&'===c[f]){c.splice(f,e-f+1);break}if('<'===c[f]&&'>'!==c[f-1]){if(';'===c[f-1])for(var g=f-1;-1<g;g--)if('&'===c[g]){c.splice(g,f-g);break}c.splice(f-1,1);break}}break}else{c.pop();break}if(-1<a.elementContainer.innerHTML.indexOf('></'))for(var h=a.elementContainer.innerHTML.indexOf('></')-2;0<=h;h--)if('<'===c[h]){c.splice(h,c.length-h);break}a.elementContainer.innerHTML=c.join(''),d>(null===b?0:2)?a.delete(null===b?null:b-1):a.executeQueue()},this.deletePace)}},{key:'empty',value:function(){this.elementContainer.innerHTML='',this.executeQueue()}},{key:'executeQueue',value:function(){var a=this;if(this.queueIndex<this.queue.length){var b=this.queue[this.queueIndex];return this.queueIndex++,void(this.isLooping&&1===this.queueIndex?setTimeout(function(){b[0].call(a,b[1])},this.options.loopDelay/2):b[0].call(this,b[1]))}this.options.callback(),this.options.loop&&(this.queueIndex=0,this.isLooping=!0,setTimeout(function(){a.delete()},this.options.loopDelay/2))}}]),a}();b.default=e}])});

45

package.json
{
"name": "typeit",
"version": "4.4.1",
"version": "5.0.0",
"description": "The most versatile animated typing utility on the planet.",
"author": "Alex MacArthur <alex@macarthur.me> (https://macarthur.me)",
"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"
"bugs": {
"url": "https://github.com/alexmacarthur/typeit/issues"
},
"homepage": "https://typeitjs.com",
"main": "dist/typeit.js",
"scripts": {
"watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js && prettier src/* --write",
"unminified": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
"minified": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
"build": "yarn run unminified && yarn run minified && prettier src/* --write"
},
"keywords": [
"jquery",
"javascript",
"animated",

@@ -20,18 +27,16 @@ "typing",

],
"main": "dist/typeit.min.js",
"bugs": {
"url": "https://github.com/alexmacarthur/typeit/issues"
"repository": {
"type": "git",
"url": "git+https://github.com/alexmacarthur/typeit.git"
},
"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"
"@babel/core": "^7.0.0-beta.32",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babili-webpack-plugin": "^0.1.2",
"banner-webpack-plugin": "^0.2.3",
"prettier": "^1.8.2",
"webpack": "^3.8.1"
}
}

100

README.md

@@ -1,7 +0,5 @@

<pre>Update: TypeIt is fully compatible with jQuery 3.2.1+!</pre>
<pre>Update: TypeIt is now vanilla JavaScript, and no longer dependent upon jQuery!</pre>
# TypeIt: The Most Versatile jQuery Animated Typing Plugin on the Planet
# TypeIt: The Most Versatile JavaScript Animated Typing Utility on the Planet
---
### Table of Contents

@@ -15,3 +13,3 @@ - [Overview](#overview)

- [Contributions](#contributions)
- [Documentation (offsite)](http://macarthur.me/typeit/docs)
- [Documentation (offsite)](https://typeitjs.com/docs)

@@ -22,27 +20,27 @@ ---

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.
TypeIt is the most versatile JavaScript animated typing utility on the planet. With simple, straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain HTML.
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.
For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to a single character, enabling you to type an dynamic narrative, with complete control over speed changes, line breaks, deletions, and pauses.
### Some of the Perks
* Choose to start typing only when your element becomes visible on the screen.
* Choose to start typing only when your container 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.
* Define you strings via an options object or in the HTML (useful in case user doesn't have JavaScript enabled, as well as for SEO).
* Use a single TypeIt instance to control several different elements on a 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. (~2.2kb, gzipped)
* Ready to be included via JS module, or as a separate script loaded on your page.
* No dependencies!
### Demos
Checkout several demos and a sandbox where you can try it out at <a href="http://macarthur.me/typeit">macarthur.me/typeit</a>.
Checkout several demos and a sandbox where you can try it out at <a href="https://typeitjs.com">typeitjs.com</a>.
### Documentation
View the full documentation for using TypeIt here: <a href="http://macarthur.me/typeit/docs">macarthur.me/typeit/docs</a>.
View the full documentation for using TypeIt here: <a href="https://typeitjs.com/docs">typeitjs.com/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)
Using TypeIt for an open source or personal project is completely free. To use it in a commercial project, purchase a single license, or an unlimited license that'll never expire, no matter how many times you use it.
* Personal or Open Source - [FREE](#setup)
* Single Commercial License - [Purchase Here](https://www.uplabs.com/posts/typeit-a-jquery-animated-typing-plugin)
* Extended Commercial License - [Purchase Here](https://www.uplabs.com/posts/typeit-a-jquery-animated-typing-plugin)

@@ -55,16 +53,19 @@ ## Setup

* <strong><a href="https://www.jsdelivr.com/projects/jquery.typeit">CDN:</a></strong> Include `https://cdn.jsdelivr.net/npm/typeit@4.4.1/dist/typeit.min.js` or `https://cdnjs.cloudflare.com/ajax/libs/typeit/4.4.1/typeit.min.js` on your page.
* <strong><a href="https://www.npmjs.com/package/typeit">npm:</a></strong> Install with `npm install typeit`.
* <strong><a href="https://cdnjs.com/libraries/typeit">CDN:</a></strong> Include `https://cdnjs.cloudflare.com/ajax/libs/typeit/{ VERSION }/typeit.min.js` on your page.
* <strong><a href="https://www.npmjs.com/package/typeit">npm / yarn:</a></strong> Install with `npm install typeit` or `yarn install typeit` and import into your project with `import TypeIt from 'typeit'`.
### Hook It Up
1. Load jQuery and typeit.js on your page.
1. Load TypeIt into your page or application.
```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>.)
or
```js
import TypeIt from 'typeit';
```
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="https://typeitjs.com/docs">full documentation</a>.)
```html

@@ -78,3 +79,3 @@ <span class="type-it"></span>

In it's simplest use, just call `typeIt()` on any element and include your [options](#options).
At its simplest use, just create a new TypeIt instance, pass an empty element, and define your [options](#options).

@@ -84,3 +85,3 @@ Example:

```js
$('.type-it').typeIt({
new TypeIt('.type-it', {
strings: ['Enter your string here!', 'Another string!']

@@ -91,3 +92,3 @@ });

## 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.
To control a typewriter effect to the smallest character, pause, speed, or more, there are six companion functions available. Simply chain them together on an instance of TypeIt, and your chain will execute. You'll be able to create a dynamic, realistic narrative with just a few lines of code.

@@ -97,3 +98,3 @@ For example:

```js
$('.type-it').typeIt({
new TypeIt('.type-it', {
speed: 900,

@@ -103,7 +104,7 @@ lifeLike: false,

})
.tiType('I am typing slowly,')
.tiSettings({speed: 100})
.tiType('but now I am typing pretty fasst')
.tiDelete(2)
.tiType('t!');
.type('I am typing slowly,')
.options({speed: 100})
.type('but now I am typing pretty fasst')
.delete(2)
.type('t!');
```

@@ -115,11 +116,9 @@

| ------------- | ------------- | ------------- |
| 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.|
| type() | (string) Characters (including those wrapped in HTML) to be typed. | Will type the characters. |
| delete() | (number) Number of characters to be deleted from what's already been typed. | Will delete the specified number of characters. |
| empty() | (none) | Will instantly delete everything that has already been typed.
| pause() | (number) Number of milliseconds to pause before continuing. | Will pause the specified number of milliseconds.|
| break() | (none) | Will break the typing to a new line.|
| options() | (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

@@ -129,3 +128,3 @@

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>.
There are a number of options you may use to customize TypeIt. For more details on these options, view the <a href="https://typeitjs.com/docs">full documentation</a>.

@@ -141,4 +140,3 @@ | Option | Description | Default Value

| 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 |
| nextStringDelay | (number in milliseconds) The amount of time (milliseconds) between typing the next string when multiple strings are defined. | 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 |

@@ -153,14 +151,2 @@ | startDelay | (number in milliseconds) The amount of time before the plugin begins typing after initalizing. | 250 |

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>
Please do! The code is available on Github. Spin it up, make a PR, and let's improve TypeIt together!
dev/typeit.js
dev/typeit.min.js
gulpfile.js
yarn.lock

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