JSFiddle - React, Tailwind, and code Playground
HTML
var showState = function (domEl) {
_jq(domEl).text(_jq(domEl).text() === "[-]" ? "[+]" : "[-]");
};
<body >
<p>
<a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a>
</p>
<p>
<a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a>
</p>
<p>
<a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return showState(this);">[+]</a> <a class="expand" onclick="return...
CSS
body
{
font-size: 11px;
font-family: tahoma;
margin: 0;
padding: 0;
border: 0;
}
#content
{
padding: 5px;
width: 200px;
}
#buttons
{
padding-left: 40px;
}
.updpnl{}
.expand
{
font-family: Courier ;
cursor: pointer;
pointer: hand;
line-height: 2em;
}
JavaScript
var showState = function (domEl) {
jQuery(domEl).text(_jq(domEl).text() === "[-]" ? "[+]" : "[-]");
};
_addListener = function () {
var ref = arguments[0];
var args = Array.prototype.slice.call(arguments, 1, arguments.length);
var interval = 100;
var params = [];
if (args.length > 1) {
params = args.slice(0, args.length - 1);
interval = args[args.length - 1];
} else if (args.length > 0) {
params = args.slice(0, args.length);
}
var intervalId;
var listener = function () {
if (ref.Listen.apply(this, params) === true) {
clearInterval(intervalId);
ref.Do.call(this, ref.State);
}
};
intervalId = setInterval(listener, interval);
listener();
};
var _listenChain = function (obj) {
if (obj.before) {
obj.before();
}
var resolveChain = function (cnt, ttl) {
//console.log(["_listenChain", "Listen", "resolveChain", "cnt", cnt, "ttl", ttl, "key", key]);
if (cnt >= ttl)
return true;
if (obj.chain[cnt]() === true) {
//console.log(["_listenChain", "Listen", "resolveChain", "key", key]);
return true;
} else if (cnt > 0 && obj.chain[cnt - 1]() === false) {
ref = 0;
obj.onClear();
}
return false;
};
var ref = -1;
var listener = {
"Listen": resolveChain,
"Do": function (state) {
console.log(["_listenChain", "ref,obj.chain.length", ref, obj.chain.length, "(ref <= obj.chain.length)", (ref <= obj.chain.length)]);
if (ref <= obj.chain.length) {
continueListening();
} else {
obj.onClear();
if (obj.after) {
obj.after();
}
if (obj.exec() === true) {
_listenChain(obj);
}
}
}
};
var continueListening = function...