htmltypist.js - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

dist/typist.css

@@ -1,1 +0,1 @@
-.typist.cursor:after{content:"|";font-weight:600;color:#c00;animation:cursorFlash 1s linear infinite}@keyframes cursorFlash{20%,80%{opacity:1}40%,60%{opacity:0}}
+.cursor:after{content:"|";font-weight:600;color:#c00;animation:cursorFlash 1s linear infinite}@keyframes cursorFlash{20%,80%{opacity:1}40%,60%{opacity:0}}

dist/typist.js

@@ -1,1 +0,1 @@
-window.Typist=window.Typist||function(){},function(){'use strict';var e=window,t=e.addEventListener,n=document;if(t&&e.requestAnimationFrame){var r={element:'[data-typist]',cls:'typist',clsCursor:'cursor',cursor:1,delayStart:0,delayType:80,delayVariance:50,delayEnd:2e3,viewThreshold:1},d=e.IntersectionObserver&&e.CustomEvent?new function(){var e=null,d=[];this.observe=function(t){e?e.observe(t):d.push(t)},this.unobserve=function(t){e?e.unobserve(t):d=d.filter(function(e){return e!==t})},t('load',function(){var t;for(e=new IntersectionObserver(function(e){e.forEach(function(e){if(!(e.intersectionRatio<r.viewThreshold)){var t=new CustomEvent('typist',{detail:{node:e.target}});n.dispatchEvent(t)}})},{threshold:r.viewThreshold});t=d.shift();)e.observe(t)},!1)}:null,o=function(e){var t=this;if(e=e||{},t.node=e.element||null,t.cl=t.node&&t.node.classList,t.node&&1===t.node.nodeType&&t.node.dataset&&!t.cl.contains(r.cls)&&(t.text=function(){var e,n=[],r=t.node.children;for(e=0;e<r.length;e++)d(r[e]);n.length||d(t.node);return n.length?n:null;function d(e){var t=e.textContent.trim();t&&n.push(t)}}(),t.text.length)){var o=t.node.dataset;t.rep=1*(e.typist||o.typist)||1/0,t.cur=1*(e.cursor||o.cursor)||r.cursor,t.seq=d?e.sequence||o.sequence:null,t.dS=1*(e.delayStart||o.delayStart)||r.delayStart,t.dT=1*(e.delayType||o.delayType)||r.delayType,t.dE=1*(e.delayEnd||o.delayEnd)||r.delayEnd,t.dV=1*(e.delayVariance||o.delayVariance)||r.delayVariance,t.node.innerHTML='',t.cl.add(r.cls),t.i=0,t.c=0,t.d=1,!d||t.dS>=0&&!t.seq?t.start():((t.dS<0||t.node===s())&&d.observe(t.node),n.addEventListener('typist',function(e){(e.detail.node===t.node||t.seq===e.detail.seq&&t.node===s())&&(d.unobserve(t.node),t.start())},!1))}function s(){return t.seq?n.querySelector('[data-sequence="'+t.seq+'"]'):0}};o.prototype.start=function(){var e=this;function t(){var d,o=e.text[e.i],s=o.length,i=(e.i+1)%e.text.length,a=0;if(e.c+=e.d,(!e.c||e.c>=s)&&(e.d*=-1),e.c||(e.i=i),d=o.slice(0,e.c),-1===e.d&&e.text.length>1&&!e.text[i].indexOf(d)&&(e.i=i,e.d=1),e.c>=s){if(i||e.rep--,a=e.rep?e.dE:0,e.seq){var l=new CustomEvent('typist',{detail:{seq:e.seq}});e.seq=null,e.node.removeAttribute('data-sequence'),n.dispatchEvent(l)}}else a=e.d>0?Math.random()*(2*e.dV)-e.dV+e.dT:e.dT-e.dV;requestAnimationFrame(function(){e.node.textContent=d,a?setTimeout(t,a):1===e.cur&&e.cl.remove(r.clsCursor)})}setTimeout(function(){e.cur>0&&e.cl.add(r.clsCursor),t()},Math.max(1,e.dS))},e.Typist=o,t('DOMContentLoaded',function(){for(var e=n.querySelectorAll(r.element),t=0;t<e.length;t++)new o({element:e[t]})},!1)}}();
+!function(){'use strict';if(window.addEventListener&&window.requestAnimationFrame&&window.IntersectionObserver&&window.CustomEvent){var e='typist',t=[['repeat',1/0],['sequence',null],['cursor','cursor'],['cursorShow',1],['delete',0],['delayStart',0],['delayType',100],['delayDelete',50],['delayVary',.5],['delayEnd',2e3]],n=new function(){var e=null,t=[];this.observe=function(n){e?e.observe(n):t.push(n)},this.unobserve=function(n){e?e.unobserve(n):t=t.filter(function(e){return e!==n})},window.addEventListener('load',function(){var n;for(e=new IntersectionObserver(function(e){e.forEach(function(e){var t=e.intersectionRatio;if(!(t>0&&t<1)){var n=new CustomEvent('typist',{detail:{element:e.target,inview:!!t}});document.dispatchEvent(n)}})},{threshold:[0,1]});n=t.shift();)e.observe(n)},!1)},i=function(i){if(i&&1===i.nodeType&&i.dataset&&!i.dataset[e]){var r=this;i.dataset[e]=1,s(i,r),r.element=i,r.text=function(){var e,t=[],n=r.element.children;for(e=0;e<n.length;e++)i(n[e]);return t.length||i(r.element),t.length?t:null;function i(e){var n={str:e.textContent.trim()};n.str&&(s(e,n),t.push(n))}}(),r.text.length&&(r.element.innerHTML='',r.active=!1,r.inview=!1,r.item=0,r.chr=0,r.dir=1,document.addEventListener('typist',function(e){var t=e.detail;t.element&&t.element!==r.element||t.sequence&&t.sequence!==r.sequence||(void 0!==t.inview&&(r.inview=t.inview),r.active||r.sequence&&r.element!==document.querySelector('[data-typist-sequence="'+r.sequence+'"]')||(r.cursorShow&&r.element.classList.add(r.cursor),r.go()))},!1),n.observe(r.element))}function s(n,i){t.forEach(function(t){var s=t[0];i[s]=n.dataset[e+s.substring(0,1).toUpperCase()+s.substring(1)],void 0===i[s]&&(i[s]=r[s]||t[1]),isNaN(i[s])||(i[s]=+i[s])})}};i.prototype.go=function(e){var t=this;if(t.active=t.inview,t.inview){var i,r,s=t.text[t.item],o=s.str.length,a=(t.item+1)%t.text.length,c=0;if(!e&&s.delayStart&&!t.chr&&t.dir>0)setTimeout(function(){t.go(!0)},s.delayStart);else{if(t.chr+=t.dir,(!t.chr||t.chr>=o)&&(t.dir*=-1),t.chr||(t.item=a),i=s.str.slice(0,t.chr),-1===t.dir&&t.text.length>1&&!s.delete&&!t.text[a].str.indexOf(i)&&(t.item=a,t.dir=1),t.chr>=o)s.repeat&&s.repeat--,c=s.repeat?s.delayEnd:0,t.sequence&&(r=new CustomEvent('typist',{detail:{sequence:t.sequence}}),t.sequence=null,t.element.removeAttribute('data-typist-sequence'));else{var u=t.dir>0?s.delayType:s.delayDelete;c=Math.max(1,Math.round(2*(Math.random()-.5)*s.delayVary*u)+u)}requestAnimationFrame(function(){t.element.textContent=i,c?setTimeout(function(){t.go()},c):(1===s.cursorShow&&t.element.classList.remove(t.cursor),n.unobserve(t.element)),r&&document.dispatchEvent(r)})}}},window.Typist=i,window.addEventListener('DOMContentLoaded',function(){for(var t=document.getElementsByClassName(e),n=0;n<t.length;n++)new i(t[n])},!1)}}();

package.json

 {
   "name": "htmltypist.js",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "web page typing effect animation",
-  "main": "dist/typist.js",
+  "browser": "dist/typist.js",
   "files": [
-    "dist/typist.css"
+    "dist/**/*"
   ],
@@ -9,0 +9,0 @@ "scripts": {

README.md

@@ -9,6 +9,6 @@ # typist.js
 
-* lightweight: 2,600 bytes of JavaScript, 160 bytes of optional CSS
+* lightweight: 2,800 bytes of JavaScript, 160 bytes of optional CSS
 * no external dependencies - works with any framework
-* easy to configure from HTML or JavaScript
-* works in all modern browsers (IE11+)
+* easy to configure from HTML
+* works in all modern browsers
 * progressively-enhanced to avoid failure in older browsers.
@@ -28,12 +28,12 @@
 
-To apply a typing effect to any element, add a `data-typist` attribute:
+To apply a typing effect to any element, add `class="typist"` to any element:
 
 ```html
-<p data-typist="">Type and retype this paragraph forever!</p>
+<p class="typist">Type and retype this paragraph forever!</p>
 ```
 
-Pass a numeric value to the attribute to retype that number of times:
+A number of data attributes are available. For example, set `data-typist-repeat="1"` to type once only:
 
 ```html
-<p data-typist="1">This paragraph is typed once.</p>
+<p class="typist" data-typist-repeat="1">This paragraph is typed once.</p>
 ```
@@ -47,3 +47,3 @@
 ```html
-<p data-typist="">
+<p class="typist">
   <span>This is typed first.</span>
@@ -60,8 +60,6 @@ <span>This is typed second.</span>
 
-typist.js can be dynamically applied in JavaScript by passing a single element in an option object:
+typist.js can be dynamically applied in JavaScript by passing a single element to a new `Typist` object:
 
 ```js
-new Typist({
-  element: document.getElementById('myelement')
-});
+new Typist( document.getElementById('myelement') );
 ```
@@ -72,14 +70,17 @@
 
-The following options can be set as HTML5 attributes or JavaScript object options:
+The following options can be set as HTML5 attributes on any child element or the parent to set across all child elements:
 
-|HTML5 attribute|JS object option|description|
-|-|-|-|
-|`data-typist=""`|`element: node`|set element(s) to type|
-|`data-typist="N"`|`typist: N`|repeat typing N times. Omit to repeat forever (the default).|
-|`data-cursor="N"`|`cursor: N`|set 0 for no cursor, 1 to show cursor until typing completes, or 2 to show cursor forever (default 1)|
-|`data-delay-start="N"`|`delayStart: N`|delay typing for N milliseconds or pass -1 to delay typing until the element is scrolled into view (default 0)|
-|`data-delay-end="N"`|`delayEnd: N`|pause for N milliseconds before typing the next item (default 2000)|
-|`data-delay-type="N"`|`delayType: N`|pause for N milliseconds between each character (default 80)|
-|`data-delay-variance="N"`|`delayVariance: N`|randomly vary the typing speed by N milliseconds (default 50 - each character therefore appears at 30ms to 130ms intervals)|
-|`data-sequence="NAME"`|`delaySequence: NAME`|elements with the same NAME are typed in order - each will complete one animation before the next element is typed|
+|HTML5 attribute|description|
+|-|-|
+|`class="typist"`|set element to type|
+|`data-typist-repeat="N"`|repeat typing N times (default: repeat forever)|
+|`data-typist-delay-start="M"`|delay typing for M milliseconds after the element is scrolled into view (0)|
+|`data-typist-delay-type="M"`|pause for M milliseconds between each character (100)|
+|`data-typist-delay-delete="M"`|pause for M milliseconds between delete keypresses (50)|
+|`data-typist-delay-vary="F"`|randomly vary the typing speed (0.5 - characters are therefore typed between 50ms and 150ms)|
+|`data-typist-delay-end="M"`|pause for M milliseconds before typing the next item (2000)|
+|`data-typist-delete="N"`|0 to retain existing text where possible, 1 to delete all (0)|
+|`data-typist-cursor="CLASS"`|cursor style CSS class (cursor)|
+|`data-typist-cursor-show="N"`|0 for no cursor, 1 to show cursor until typing completes, 2 to show cursor forever (1)|
+|`data-typist-sequence="NAME"`|type elements in page DOM order - each completes one animation before the next element is typed|
 
@@ -90,5 +91,5 @@ The following named sequence example types each list item in turn when the first is scrolled into view:
 <ul>
-  <li data-typist="1" data-sequence="mylist" data-delay-start="-1">item one</li>
-  <li data-typist="1" data-sequence="mylist">item two</li>
-  <li data-typist="1" data-sequence="mylist">item three</li>
+  <li class="typist" data-typist-repeat="1" data-typist-sequence="mylist">item one</li>
+  <li class="typist" data-typist-repeat="1" data-typist-sequence="mylist">item two</li>
+  <li class="typist" data-typist-repeat="1" data-typist-sequence="mylist">item three</li>
 </ul>
@@ -101,23 +102,9 @@ ```
 <p
-  data-typist="3"
-  data-delay-start="-1"
-  data-delay-type="400"
-  data-delay-variance="100">This will be typed.</p>
+  class="typist"
+  data-typist-repeat="3"
+  data-typist-delay-type="400"
+  data-typist-delay-vary="0.25">This will be typed.</p>
 ```
 
-This alternative is functionally identical:
 
-```html
-<p id="myelement">This will be typed.</p>
-<script>
-new Typist({
-  element: document.getElementById('myelement'),
-  typist: 3,
-  delayStart: -1,
-  delayType: 400,
-  delayVariance: 100
-});
-</script>
-```
-
 ## CSS options
@@ -132,5 +119,4 @@
 
-1. Default settings can be changed in the init variable.
-1. Older browsers (IE10 and below) show all text and do not animate.
-1. IE11 does not support data-sequence names and data-delay-start="-1" to animate when in view.
+1. Default settings can be changed in the propDefault variable.
+1. Older browsers (IE11 and below) show all text and do not animate.
 
@@ -140,2 +126,10 @@
 
+### v2.0.0, 20 June 2019
+
+* typing factors can be overridden on child elements
+* new deletion delay
+* improved performance, only types when in view
+* removed IE support
+* simpler to use, but incompatible with v1.x
+
 ### v1.1.0, 4 June 2019
@@ -142,0 +136,0 @@

No alert changes

Improved metrics

Total package byte prevSize

9684

2.45%

Worsened metrics

Number of lines in readme file

134

-4.29%

No dependency changes