diff --git a/README.md b/README.md index a793b078..3c0f0870 100644 --- a/README.md +++ b/README.md @@ -5,14 +5,16 @@ The Most Versatile JavaScript Animated Typing Utility on the Planet [![Build Status](https://travis-ci.org/alexmacarthur/typeit.svg?branch=master)](https://travis-ci.org/alexmacarthur/typeit) ## Table of Contents -- [Overview](#overview) -- [Choose a License](#choose-a-license) -- [Usage](#Usage) -- [API](#api) -- [Options](#options) -- [Contribute](#contribute) -- [License](#license) -- [Full Documentation (offsite)](https://typeitjs.com/docs) +* [Overview](#overview) +* [Choose a License](#choose-a-license) +* [Usage](#usage) +* [API](#api) + * [Options](#options) + * [Companion Functions](#companion-functions) + * [Other Handy Functions](#other-handy-functions) +* [Contribute](#contribute) +* [License](#license) +* [Full Documentation (offsite)](https://typeitjs.com/docs) ## Overview @@ -106,6 +108,7 @@ To view these functions and how they work, see the [API](#api) section. ### Options +#### Defining Your 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 full documentation. @@ -127,6 +130,19 @@ There are a number of options you may use to customize TypeIt. For more details | 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' | +#### Changing Option Defaults + +If you're creating several instances of TypeIt on a page, and don't wish to repeatedly set an option of the same value for each of them, you can redefine the default options beforehand. Change the default value(s) before creating any instances, and you'll be set. + +```js + window.TypeItDefaults.speed = 50; + + //-- This and all following instances will now have a default speed of 50. + new TypeIt('#id', { + strings: 'A string!' + }); +``` + ### Companion Functions Use these functions to chain typing commands together upon initialization. diff --git a/package.json b/package.json index 2e85b937..ceee38ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "typeit", - "version": "5.1.0", + "version": "5.2.0", "description": "The most versatile animated typing utility on the planet.", "author": "Alex MacArthur (https://macarthur.me)", "license": "GPL-2.0", diff --git a/src/defaults.js b/src/defaults.js new file mode 100644 index 00000000..04be0edb --- /dev/null +++ b/src/defaults.js @@ -0,0 +1,17 @@ +window.TypeItDefaults = { + strings: [], + speed: 100, + deleteSpeed: undefined, + lifeLike: true, + cursor: true, + cursorSpeed: 1000, + breakLines: true, + startDelay: 250, + startDelete: false, + nextStringDelay: 750, + loop: false, + loopDelay: 750, + html: true, + autoStart: true, + callback: function() {} +}; diff --git a/src/instance.js b/src/instance.js index d1f7f874..f6fc75ea 100644 --- a/src/instance.js +++ b/src/instance.js @@ -1,23 +1,7 @@ +import "./defaults.js"; + export default class Instance { constructor(element, id, options) { - this.defaults = { - strings: [], - speed: 100, - deleteSpeed: undefined, - lifeLike: true, - cursor: true, - cursorSpeed: 1000, - breakLines: true, - startDelay: 250, - startDelete: false, - nextStringDelay: 750, - loop: false, - loopDelay: 750, - html: true, - autoStart: true, - callback: function() {} - }; - this.timeouts = []; this.id = id; this.queue = []; @@ -29,7 +13,7 @@ export default class Instance { 'style="display:inline;position:relative;font:inherit;color:inherit;"'; this.element = element; - this.setOptions(options, this.defaults, false); + this.setOptions(options, window.TypeItDefaults, false); this.init(); } diff --git a/tests/typeit.test.js b/tests/typeit.test.js index b9834319..4f5ee05f 100644 --- a/tests/typeit.test.js +++ b/tests/typeit.test.js @@ -36,3 +36,18 @@ test('Destroys instances successfully.', () => { document.body.innerHTML = ''; }); + +test('Redefines defaults correct.', () => { + document.body.innerHTML = + `
' + +
`; + + expect(typeof window.TypeItDefaults).toBe('object'); + + window.TypeItDefaults.speed = 25; + const instance = new TypeIt('#element', {}); + + expect(instance.instances[0].options.speed).toEqual(25); + expect(instance.instances[0].options.speed).not.toEqual(26); +}); diff --git a/yarn.lock b/yarn.lock index 1727caff..6e56e993 100644 --- a/yarn.lock +++ b/yarn.lock @@ -748,11 +748,11 @@ browser-resolve@^1.11.2: resolve "1.1.7" browserslist@^2.1.2: - version "2.9.1" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.1.tgz#b72d3982ab01b5cd24da62ff6d45573886aff275" + version "2.10.0" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.10.0.tgz#bac5ee1cc69ca9d96403ffb8a3abdc5b6aed6346" dependencies: - caniuse-lite "^1.0.30000770" - electron-to-chromium "^1.3.27" + caniuse-lite "^1.0.30000780" + electron-to-chromium "^1.3.28" bser@^2.0.0: version "2.0.0" @@ -780,9 +780,9 @@ camelcase@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" -caniuse-lite@^1.0.30000770: - version "1.0.30000778" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000778.tgz#f1e7cb8b13b1f6744402291d75f0bcd4c3160369" +caniuse-lite@^1.0.30000780: + version "1.0.30000782" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000782.tgz#5b82b8c385f25348745c471ca51320afb1b7f254" caseless@~0.12.0: version "0.12.0" @@ -921,8 +921,8 @@ cookie@0.3.1: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb" core-js@^2.4.0, core-js@^2.5.0: - version "2.5.1" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b" + version "2.5.2" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.2.tgz#bc4648656e7dc9dc80d7d3c7bbc172d96e744e63" core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" @@ -1038,7 +1038,7 @@ ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" -electron-to-chromium@^1.3.27: +electron-to-chromium@^1.3.28: version "1.3.28" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.28.tgz#8dd4e6458086644e9f9f0a1cf32e2a1f9dffd9ee" @@ -1047,10 +1047,10 @@ encodeurl@~1.0.1: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20" errno@^0.1.4: - version "0.1.4" - resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d" + version "0.1.5" + resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.5.tgz#a563781a6052bc2c9ccd89e8cef0eb9506e0c321" dependencies: - prr "~0.0.0" + prr "~1.0.1" error-ex@^1.2.0: version "1.3.1" @@ -2465,8 +2465,8 @@ preserve@^0.2.0: resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" prettier@^1.8.2: - version "1.9.0" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.0.tgz#1a7205bdb6126b30cf8c0a7b2b86997162e1ee3e" + version "1.9.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.1.tgz#41638a0d47c1efbd1b7d5a742aaa5548eab86d70" pretty-format@^21.2.1: version "21.2.1" @@ -2490,9 +2490,9 @@ proxy-addr@~2.0.2: forwarded "~0.1.2" ipaddr.js "1.5.2" -prr@~0.0.0: - version "0.0.0" - resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a" +prr@~1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" pseudomap@^1.0.2: version "1.0.2" @@ -2586,8 +2586,8 @@ regenerate@^1.2.1: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f" regenerator-runtime@^0.11.0: - version "0.11.0" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1" + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" regenerator-transform@^0.10.0: version "0.10.1" @@ -3093,8 +3093,8 @@ uglify-js@^2.6: uglify-to-browserify "~1.0.0" uglify-js@^3.0.9: - version "3.2.1" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.1.tgz#d6427fd45a25fefc5d196689c0c772a6915e10fe" + version "3.2.2" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.2.tgz#870e4b34ed733d179284f9998efd3293f7fd73f6" dependencies: commander "~2.12.1" source-map "~0.6.1"