🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP
Sign In

htmltypist.js

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

htmltypist.js - npm Package Compare versions

Comparing version
1.0.1
to
1.1.0
+1
-1
dist/typist.js

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

window.Typist=window.Typist||function(){},function(){'use strict';if(window.addEventListener&&window.requestAnimationFrame){var e='[data-typist]',t='typist',n='cursor',a=1,r=0,i=80,s=50,l=2e3,d=1,o=window.IntersectionObserver&&window.CustomEvent?new IntersectionObserver(function(e){e.forEach(function(e){if(!(e.intersectionRatio<d)){var t=new CustomEvent('typist',{detail:{element:e.target}});document.dispatchEvent(t)}})},{threshold:d}):null,c=function(e){var n=this;if(e=e||{},n.element=e.element||null,n.element&&1===n.element.nodeType&&n.element.dataset&&!n.element.classList.contains(t)&&(n.text=n.getText(),n.text.length)){var d=n.element.dataset;n.repeat=parseFloat(e.typist||d.typist)||1/0,n.cursor=parseFloat(e.cursor||d.cursor)||a,n.sequence=o?e.sequence||d.sequence:null,n.delayStart=parseFloat(e.delayStart||d.delayStart)||r,n.delayType=parseFloat(e.delayType||d.delayType)||i,n.delayEnd=parseFloat(e.delayEnd||d.delayEnd)||l,n.delayVariance=parseFloat(e.delayVariance||d.delayVariance)||s,n.element.innerHTML='',n.element.classList.add(t),n.item=0,n.char=0,n.dir=1,!o||n.delayStart>=0&&!n.sequence?n.start():(o.observe(n.element),document.addEventListener('typist',function(e){(!n.sequence&&e.detail.element===n.element||document.querySelector('[data-sequence="'+n.sequence+'"]')===n.element)&&(o.unobserve(n.element),n.start())},!1))}};c.prototype.start=function(){var e=this;e.started||(e.started=!0,setTimeout(function(){e.cursor>0&&e.element.classList.add(n),e.typeText()},e.delayStart>0?e.delayStart:1))},c.prototype.typeText=function(){var e,t=this,a=t.text[t.item],r=a.length,i=(t.item+1)%t.text.length,s=0;if(t.char+=t.dir,(!t.char||t.char>=r)&&(t.dir*=-1),t.char||(t.item=i),e=a.slice(0,t.char),-1===t.dir&&t.text.length>1&&!t.text[i].indexOf(e)&&(t.item=i,t.dir=1),t.char>=r){if(i||t.repeat--,s=t.repeat?t.delayEnd:0,t.sequence){var l=new CustomEvent('typist',{detail:{sequence:t.sequence}});t.sequence=null,t.element.removeAttribute('data-sequence'),document.dispatchEvent(l)}}else s=t.dir>0?Math.random()*(2*t.delayVariance)-t.delayVariance+t.delayType:t.delayType-t.delayVariance;requestAnimationFrame(function(){t.element.textContent=e,s?setTimeout(function(){t.typeText()},s):1===t.cursor&&t.element.classList.remove(n)})},c.prototype.getText=function(){var e,t=[],n=this.element.children;for(e=0;e<n.length;e++)a(n[e]);return t.length||a(this.element),t.length?t:null;function a(e){var n=e.textContent.trim();n&&t.push(n)}},window.Typist=c,window.addEventListener('DOMContentLoaded',function(){for(var t=document.querySelectorAll(e),n=0;n<t.length;n++)new c({element:t[n]})},!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)}}();
{
"name": "htmltypist.js",
"version": "1.0.1",
"version": "1.1.0",
"description": "web page typing effect animation",
"main": "dist/typist.js",
"files": ["dist/typist.css"],
"files": [
"dist/typist.css"
],
"scripts": {

@@ -26,4 +28,5 @@ "build": "npm i && gulp",

"license": "MIT",
"browserslist": ["> 1%", "ie 11"],
"devDependencies": {
"autoprefixer": "^9.5.1",
"autoprefixer": "^9.6.0",
"cssnano": "^4.1.10",

@@ -30,0 +33,0 @@ "gulp": "^4.0.2",

@@ -21,4 +21,4 @@ # typist.js

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/htmltypist.js@1.0.1/dist/typist.css">
<script src="https://cdn.jsdelivr.net/npm/htmltypist.js@1.0.1/dist/typist.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/htmltypist.js/dist/typist.css">
<script src="https://cdn.jsdelivr.net/npm/htmltypist.js/dist/typist.js"></script>
```

@@ -129,1 +129,13 @@

1. IE11 does not support data-sequence names and data-delay-start="-1" to animate when in view.
## Version history
### v1.1.0, 4 June 2019
* improved loading and IntersectionObserver
* reduced file size
### v1.0.1, 30 May 2019
* initial release