neodigm/a_human_typing_terminal.js

## a_human_typing_terminal.js
"use strict";
//  Progressively type rows of text as if entered by a human

var doHumanTyping = (function(_d){
  var oTerms = {}, aTerms = [];
  var oSetI = null, INTERX = 38;

  return {
    "play": function(_query, _fCB){
      var elTerm = _d.querySelector(_query);
      var elTmpl = _d.querySelector("[data-a-human-typing-tmpl='"+elTerm.dataset.aHumanTyping+"']");
      if( elTerm && elTmpl ){
        oTerms = {
          "term": elTerm, "CB": _fCB,
          "nRows": elTmpl.dataset.aHumanTypingRows,
          "nCurrPar": 0, "nCurrChr": 0, "sMUall": "", "sMU": "",
          "aPars": [].slice.call(elTmpl.querySelectorAll("P"))
            .map(function(para){ // Make arrays from templ paragraphs
            return para.innerHTML.split("");
          })
        };
        aTerms.push(oTerms);
        oSetI = setInterval( doHumanTyping.tick, INTERX);
      }
    },
    "tick": function(){
      //var sMU = "";
      aTerms.forEach(function( oT ){
        if( doHumanTyping.f1210() > 6){
          oT.sMU = "<p>";
          oT.sMU += oT.aPars[ oT.nCurrPar ].slice(0, oT.nCurrChr++).join("");
          oT.sMU += "</p>";
          if( oT.nCurrChr == (oT.aPars[ oT.nCurrPar ].length + 1) ){
            oT.nCurrChr = 0; // reset char and paragraph
            if( ++oT.nCurrPar !== (oT.aPars.length) ) oT.sMUall += oT.sMU;
          }
          oT.term.innerHTML = oT.sMUall + oT.sMU;
          }
        });
    },
    "f1210": function(){ return (Math.floor(Math.random() * (10) + 1)); }
  }
})(document);

doHumanTyping.play(".js-term-1",function(){
  doHumanTyping.play(".js-term-1");
});
doHumanTyping.play(".js-term-2");


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Groovy</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  </head>
  <body>
    <article class="js-term-1 l-term-type-cont"
    data-a-human-typing="seo">
    </article>
    <article class="js-term-2 l-term-type-cont"
    data-a-human-typing="ppc">
    </article>

    <output class="hidden" data-a-human-typing-tmpl="seo"
    data-a-human-typing-rows="4">
<p>Effective Digital Marketing</p>
<p>Our work helps both large and small companies find new customers in a more effective manner.</p>
<p>We envision, manage, design, program, and deliver.</p>
<p>Accept nothing less than the most powerful next-generation SEO platform, with cutting-edge technology and service innovations that deliver the future of organic search result positioning.</p>
<p>qqqq</p>
<p>qqqq</p>
<p>qqqq</p>
    </output>

<output class="hidden" data-a-human-typing-tmpl="ppc"
    data-a-human-typing-rows="2">
<p>If you discovered a resource that would increase customer loyalty, as well as lower customer engagement costs, wouldn't you use it? Your company's Web site is a resource that has great potential to reach these goals, but may be relatively untapped.</p>
<p>Truly effective Web sites are an elusive goal for most organizations.</p>
<p>There’s never been a more perfect storm of change — or a more perfect confluence of opportunities to seize.</p>
<p>Let us build you a tweaked-into-oblivion swiss army chainsaw website that persuades and converts.</p>
</output>
    <script src="script.js"></script>
<style>
      .l-term-type-cont {
  background-color: #000;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
  min-height: 66px;
  min-width: 256px;
}
.l-term-type-cont P {
  color: #e3eaa5;
  font-size: 18px;
  font-family: 'Share Tech Mono', monospace;
  line-height: .98;
  margin: 2px 2px 8px 2px;
}
.hidden, .hide {
  display: none;
}
</style>
  </body>
</html>
	"use strict";
	// Progressively type rows of text as if entered by a human

	var doHumanTyping = (function(_d){
	var oTerms = {}, aTerms = [];
	var oSetI = null, INTERX = 38;

	return {
	"play": function(_query, _fCB){
	var elTerm = _d.querySelector(_query);
	var elTmpl = _d.querySelector("[data-a-human-typing-tmpl='"+elTerm.dataset.aHumanTyping+"']");
	if( elTerm && elTmpl ){
	oTerms = {
	"term": elTerm, "CB": _fCB,
	"nRows": elTmpl.dataset.aHumanTypingRows,
	"nCurrPar": 0, "nCurrChr": 0, "sMUall": "", "sMU": "",
	"aPars": [].slice.call(elTmpl.querySelectorAll("P"))
	.map(function(para){ // Make arrays from templ paragraphs
	return para.innerHTML.split("");
	})
	};
	aTerms.push(oTerms);
	oSetI = setInterval( doHumanTyping.tick, INTERX);
	}
	},
	"tick": function(){
	//var sMU = "";
	aTerms.forEach(function( oT ){
	if( doHumanTyping.f1210() > 6){
	oT.sMU = "<p>";
	oT.sMU += oT.aPars[ oT.nCurrPar ].slice(0, oT.nCurrChr++).join("");
	oT.sMU += "</p>";
	if( oT.nCurrChr == (oT.aPars[ oT.nCurrPar ].length + 1) ){
	oT.nCurrChr = 0; // reset char and paragraph
	if( ++oT.nCurrPar !== (oT.aPars.length) ) oT.sMUall += oT.sMU;
	}
	oT.term.innerHTML = oT.sMUall + oT.sMU;
	}
	});
	},
	"f1210": function(){ return (Math.floor(Math.random() * (10) + 1)); }
	}
	})(document);

	doHumanTyping.play(".js-term-1",function(){
	doHumanTyping.play(".js-term-1");
	});
	doHumanTyping.play(".js-term-2");







	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Groovy</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
	</head>
	<body>
	<article class="js-term-1 l-term-type-cont"
	data-a-human-typing="seo">
	</article>
	<article class="js-term-2 l-term-type-cont"
	data-a-human-typing="ppc">
	</article>

	<output class="hidden" data-a-human-typing-tmpl="seo"
	data-a-human-typing-rows="4">
	<p>Effective Digital Marketing</p>
	<p>Our work helps both large and small companies find new customers in a more effective manner.</p>
	<p>We envision, manage, design, program, and deliver.</p>
	<p>Accept nothing less than the most powerful next-generation SEO platform, with cutting-edge technology and service innovations that deliver the future of organic search result positioning.</p>
	<p>qqqq</p>
	<p>qqqq</p>
	<p>qqqq</p>
	</output>

	<output class="hidden" data-a-human-typing-tmpl="ppc"
	data-a-human-typing-rows="2">
	<p>If you discovered a resource that would increase customer loyalty, as well as lower customer engagement costs, wouldn't you use it? Your company's Web site is a resource that has great potential to reach these goals, but may be relatively untapped.</p>
	<p>Truly effective Web sites are an elusive goal for most organizations.</p>
	<p>There’s never been a more perfect storm of change — or a more perfect confluence of opportunities to seize.</p>
	<p>Let us build you a tweaked-into-oblivion swiss army chainsaw website that persuades and converts.</p>
	</output>
	<script src="script.js"></script>
	<style>
	.l-term-type-cont {
	background-color: #000;
	padding: 8px;
	margin: 8px;
	border-radius: 8px;
	min-height: 66px;
	min-width: 256px;
	}
	.l-term-type-cont P {
	color: #e3eaa5;
	font-size: 18px;
	font-family: 'Share Tech Mono', monospace;
	line-height: .98;
	margin: 2px 2px 8px 2px;
	}
	.hidden, .hide {
	display: none;
	}
	</style>
	</body>
	</html>