Skip to content

Commit

Permalink
Fix loopDelay weirdness, allow same functionality as nextStringDelay.
Browse files Browse the repository at this point in the history
  • Loading branch information
alexmacarthur committed May 3, 2018
1 parent dc6fc18 commit d59e8e0
Show file tree
Hide file tree
Showing 8 changed files with 203 additions and 126 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -299,12 +299,12 @@ new TypeIt('#element', {
| cursorSpeed | (number in milliseconds) The blinking speed of the cursor. | 1000 |
| cursorChar | (string) The character used for the cursor. HTML works too! | pipe |
| 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 |
| nextStringDelay | (number in milliseconds or array) The amount of time (milliseconds) between typing the next string when multiple strings are defined. You may either pass a number in milliseconds, or an array of values. The first value will be used as the delay before a new string starts, and the second value will be used as the delay after a string ends. For example, passing `[1000, 2000]` will tell TypeIt to pause 1000ms before typing a new string, and wait 2000ms after a string has just completed. | 750 |
| nextStringDelay | (number in milliseconds or array) The amount of time (milliseconds) between typing strings when multiple are defined. You may either pass a number in milliseconds, or an array of values. The first value will be used as the delay before a new string starts, and the second value will be used as the delay after a string has just ended. For example, passing `[1000, 2000]` will tell TypeIt to pause 1000ms before typing a new string, and wait 2000ms after a string has just completed. This would be equivalent to `instance.type('String 1').pause(2000).delete().pause(1000).type('String 2')`. If a number is passed, that value will be halved. | 750 |
| autoStart | (boolean) Determines if the instance will typing automatically on page load, or only when the target element becomes visible in the viewport. If you don't want instances far down on the page to begin until they're visible, set this option to `false.` | true |
| 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 |
| loopDelay | (number in milliseconds or array) The amount of time between looping over a string or set of strings again. This option behaves identically to `nextStringDelay`. If an array is passed, the first value will be the time before typing begins again (after the set of strings has been deleted), and the second value will be the time immediately after the set of strings has finished typing, before they're deleted to restart. If left undefined, the `nextStringDelay` option will be used. | false |
| html | (boolean) Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally. | true |

#### Changing Option Defaults
Expand Down
97 changes: 57 additions & 40 deletions dist/typeit.es.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
*
* typeit - The most versatile animated typing utility on the planet.
* Author: Alex MacArthur <alex@macarthur.me> (https://macarthur.me)
* Version: v5.9.0
* Version: v5.10.0
* URL: https://typeitjs.com
* License: GPL-2.0
*
Expand Down Expand Up @@ -81,7 +81,7 @@ window.TypeItDefaults = {
startDelete: false,
nextStringDelay: 750,
loop: false,
loopDelay: 750,
loopDelay: false,
html: true,
autoStart: true,
callback: false,
Expand Down Expand Up @@ -140,21 +140,15 @@ var Instance = function () {
this.style = "display:inline;position:relative;font:inherit;color:inherit;";
this.element = element;
this.setOptions(options, window.TypeItDefaults, false);
this.checkElement();
this.setNextStringDelay();
this.prepareTargetElement();
this.prepareDelay("nextStringDelay");
this.prepareDelay("loopDelay");

this.options.strings = toArray(this.options.strings);
this.options.strings = removeComments(this.options.strings);

//-- We don't have anything. Get out of here.
if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
if (!this.prepareStrings()) {
return;
}

this.element.innerHTML = "\n <span style=\"" + this.style + "\" class=\"ti-container\"></span>\n ";

this.element.setAttribute("data-typeitid", this.id);
this.elementContainer = this.element.querySelector("span");
this.prepareDOM();

if (this.options.startDelete) {
this.insert(this.stringsToDelete);
Expand All @@ -170,11 +164,41 @@ var Instance = function () {
}

/**
* Reset the instance to new status.
* Prepares strings for processing.
*/


createClass(Instance, [{
key: "prepareStrings",
value: function prepareStrings() {
this.options.strings = toArray(this.options.strings);
this.options.strings = removeComments(this.options.strings);

//-- We don't have anything. Get out of here.
if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
return false;
}

return true;
}

/**
* Performs DOM-related work to prepare for typing.
*/

}, {
key: "prepareDOM",
value: function prepareDOM() {
this.element.innerHTML = "\n <span style=\"" + this.style + "\" class=\"ti-container\"></span>\n ";
this.element.setAttribute("data-typeitid", this.id);
this.elementContainer = this.element.querySelector("span");
}

/**
* Reset the instance to new status.
*/

}, {
key: "reset",
value: function reset() {
return new Instance(this.element, this.id, this.options, this.typeit);
Expand All @@ -196,33 +220,24 @@ var Instance = function () {
return this.options.html ? this.elementContainer.innerHTML : this.elementContainer.innerText;
}

//-- Reset the contents of the element.
if (this.options.html) {
this.elementContainer.innerHTML = content;
} else {
this.elementContainer.innerText = content;
}
this.elementContainer[this.options.html ? "innerHTML" : "innerText"] = content;

return content;
}

/**
* Based on options, set the before and after values for the delay that is inserted when typing new strings.
*/

}, {
key: "setNextStringDelay",
value: function setNextStringDelay() {
var isArray = Array.isArray(this.options.nextStringDelay);
key: "prepareDelay",
value: function prepareDelay(delayType) {
var delay = this.options[delayType];

if (!delay) return;

var halfDelay = !isArray ? this.options.nextStringDelay / 2 : null;
var isArray = Array.isArray(delay);
var halfDelay = !isArray ? delay / 2 : null;

this.options.nextStringDelay = {
before: isArray ? this.options.nextStringDelay[0] : halfDelay,
after: isArray ? this.options.nextStringDelay[1] : halfDelay,
total: isArray ? this.options.nextStringDelay.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}) : this.options.nextStringDelay
this.options[delayType] = {
before: isArray ? delay[0] : halfDelay,
after: isArray ? delay[1] : halfDelay,
total: isArray ? delay[0] + delay[1] : delay
};
}
}, {
Expand Down Expand Up @@ -291,9 +306,10 @@ var Instance = function () {
string = string[0];
}

//-- @todo Improve this check by using regex.
//-- If an opening HTML tag is found and we're not already printing inside a tag
if (this.options.html && startsWith(string[0], "<") && !startsWith(string[0], "</")) {
//-- Create node of that string name.
//-- Create node of that string name, by regexing for the closing tag.
var matches = string[0].match(/\<(.*?)\>/);
var _doc = document.implementation.createHTMLDocument("");
_doc.body.innerHTML = "<" + matches[1] + "></" + matches[1] + ">";
Expand Down Expand Up @@ -415,8 +431,8 @@ var Instance = function () {
*/

}, {
key: "checkElement",
value: function checkElement() {
key: "prepareTargetElement",
value: function prepareTargetElement() {
var _this2 = this;

//-- If any of the existing children nodes have .ti-container, clear it out because this is a remnant of a previous instance.
Expand Down Expand Up @@ -676,12 +692,13 @@ var Instance = function () {
}

if (this.options.loop) {
var delay = this.options.loopDelay ? this.options.loopDelay : this.options.nextStringDelay;
this.queueDeletions(this.contents());
this.generateQueue([this.pause, this.options.loopDelay / 2]);
this.generateQueue([this.pause, delay.before]);

setTimeout(function () {
_this7.next();
}, this.options.loopDelay / 2);
}, delay.after);

return;
}
Expand Down
97 changes: 57 additions & 40 deletions dist/typeit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
*
* typeit - The most versatile animated typing utility on the planet.
* Author: Alex MacArthur <alex@macarthur.me> (https://macarthur.me)
* Version: v5.9.0
* Version: v5.10.0
* URL: https://typeitjs.com
* License: GPL-2.0
*
Expand Down Expand Up @@ -87,7 +87,7 @@
startDelete: false,
nextStringDelay: 750,
loop: false,
loopDelay: 750,
loopDelay: false,
html: true,
autoStart: true,
callback: false,
Expand Down Expand Up @@ -146,21 +146,15 @@
this.style = "display:inline;position:relative;font:inherit;color:inherit;";
this.element = element;
this.setOptions(options, window.TypeItDefaults, false);
this.checkElement();
this.setNextStringDelay();
this.prepareTargetElement();
this.prepareDelay("nextStringDelay");
this.prepareDelay("loopDelay");

this.options.strings = toArray(this.options.strings);
this.options.strings = removeComments(this.options.strings);

//-- We don't have anything. Get out of here.
if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
if (!this.prepareStrings()) {
return;
}

this.element.innerHTML = "\n <span style=\"" + this.style + "\" class=\"ti-container\"></span>\n ";

this.element.setAttribute("data-typeitid", this.id);
this.elementContainer = this.element.querySelector("span");
this.prepareDOM();

if (this.options.startDelete) {
this.insert(this.stringsToDelete);
Expand All @@ -176,11 +170,41 @@
}

/**
* Reset the instance to new status.
* Prepares strings for processing.
*/


createClass(Instance, [{
key: "prepareStrings",
value: function prepareStrings() {
this.options.strings = toArray(this.options.strings);
this.options.strings = removeComments(this.options.strings);

//-- We don't have anything. Get out of here.
if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
return false;
}

return true;
}

/**
* Performs DOM-related work to prepare for typing.
*/

}, {
key: "prepareDOM",
value: function prepareDOM() {
this.element.innerHTML = "\n <span style=\"" + this.style + "\" class=\"ti-container\"></span>\n ";
this.element.setAttribute("data-typeitid", this.id);
this.elementContainer = this.element.querySelector("span");
}

/**
* Reset the instance to new status.
*/

}, {
key: "reset",
value: function reset() {
return new Instance(this.element, this.id, this.options, this.typeit);
Expand All @@ -202,33 +226,24 @@
return this.options.html ? this.elementContainer.innerHTML : this.elementContainer.innerText;
}

//-- Reset the contents of the element.
if (this.options.html) {
this.elementContainer.innerHTML = content;
} else {
this.elementContainer.innerText = content;
}
this.elementContainer[this.options.html ? "innerHTML" : "innerText"] = content;

return content;
}

/**
* Based on options, set the before and after values for the delay that is inserted when typing new strings.
*/

}, {
key: "setNextStringDelay",
value: function setNextStringDelay() {
var isArray = Array.isArray(this.options.nextStringDelay);
key: "prepareDelay",
value: function prepareDelay(delayType) {
var delay = this.options[delayType];

if (!delay) return;

var halfDelay = !isArray ? this.options.nextStringDelay / 2 : null;
var isArray = Array.isArray(delay);
var halfDelay = !isArray ? delay / 2 : null;

this.options.nextStringDelay = {
before: isArray ? this.options.nextStringDelay[0] : halfDelay,
after: isArray ? this.options.nextStringDelay[1] : halfDelay,
total: isArray ? this.options.nextStringDelay.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}) : this.options.nextStringDelay
this.options[delayType] = {
before: isArray ? delay[0] : halfDelay,
after: isArray ? delay[1] : halfDelay,
total: isArray ? delay[0] + delay[1] : delay
};
}
}, {
Expand Down Expand Up @@ -297,9 +312,10 @@
string = string[0];
}

//-- @todo Improve this check by using regex.
//-- If an opening HTML tag is found and we're not already printing inside a tag
if (this.options.html && startsWith(string[0], "<") && !startsWith(string[0], "</")) {
//-- Create node of that string name.
//-- Create node of that string name, by regexing for the closing tag.
var matches = string[0].match(/\<(.*?)\>/);
var _doc = document.implementation.createHTMLDocument("");
_doc.body.innerHTML = "<" + matches[1] + "></" + matches[1] + ">";
Expand Down Expand Up @@ -421,8 +437,8 @@
*/

}, {
key: "checkElement",
value: function checkElement() {
key: "prepareTargetElement",
value: function prepareTargetElement() {
var _this2 = this;

//-- If any of the existing children nodes have .ti-container, clear it out because this is a remnant of a previous instance.
Expand Down Expand Up @@ -682,12 +698,13 @@
}

if (this.options.loop) {
var delay = this.options.loopDelay ? this.options.loopDelay : this.options.nextStringDelay;
this.queueDeletions(this.contents());
this.generateQueue([this.pause, this.options.loopDelay / 2]);
this.generateQueue([this.pause, delay.before]);

setTimeout(function () {
_this7.next();
}, this.options.loopDelay / 2);
}, delay.after);

return;
}
Expand Down
Loading

0 comments on commit d59e8e0

Please sign in to comment.