<html>
<head>
<title>Contenteditable outerHTML Ideas - RJM Programming - March, 2022</title>
<style>
td { border: 2px solid red; }
th { border: 2px solid red; }
div.indiv { font-size: 12px; background-color: yellow; }

.glowone {
-webkit-animation: glow 1000s linear 1 alternate;
-moz-animation: glow 1000s linear 1 alternate;
animation: glow 1000s linear 1 alternate;
}

.glow {
-webkit-animation: glow 1s linear infinite alternate;
-moz-animation: glow 1s linear infinite alternate;
animation: glow 1s linear infinite alternate;
}

/* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

@-webkit-keyframes glow {
from {
box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
}

to {
box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
}
}

</style>
<script type='text/javascript'>
var cells=[];
var tds=[];
var glower=null;
var isok=true;
var tdobj=null;
var eio='ease-in-out';
var lastotto=-1;

function doglow() {
if (glower) {
if (('' + glower.className).indexOf('glow') == -1) {
glower.className+=' glowone';
}
}
glower=null;
}

function pretdclicked() {
if (tdobj) {
tdclicked(tdobj);
}
tdobj=null;
}

function ltto() {
if (lastotto >= 0) {
tds[lastotto].onclick=function(event){ glower=glower; };
}
lastotto=-1;
}

function tdclicked(tdo) {
var divid='div' + ('' + tdo.name).replace('td','');
var divo=document.getElementById(divid);
isok=true;
var now = new Date();
var utcSecondsSinceEpoch = Math.round(now.getTime() / 1000);
var huh=true;
if (('' + divo.className).indexOf(' glow') != -1 && ('' + divo.className).indexOf(' move') == -1) {
huh=true;
} else {
huh=confirm('Choose OK for move animation and Cancel for glow animation, within 10 seconds, else ignore this. If you order it as Cancel first an automatic OK can happen with the next click.');
}
var nowt = new Date();
var utcSecondsSinceEpocht = Math.round(nowt.getTime() / 1000);
if (eval(utcSecondsSinceEpocht - utcSecondsSinceEpoch) > 10) { isok=false; }
if (isok) {
if (!huh) {
glower=divo;
doglow();
} else {
if (('' + divo.className).indexOf('move') == -1) {
divo.className+=' move' + ('' + tdo.name).replace('td','');
glower=divo;
if (!huh) { setTimeout(doglow, 2000); }
}
}
}
isok=true;
if (huh) { tds[eval(-1 + eval(('' + tdo.name).replace('td','')))].onclick=function(event){ glower=glower; }; } else { setTimeout(ltto, 15000); }
}

function cit(dele) {
var tdrel=eval(0 + eval(('' + dele.id).replace('div','')));
document.getElementById('prediv' + tdrel).innerHTML=((dele.innerText || dele.contentWindow || dele.contentDocument).replace(/\<\%/g,'<').replace(/\>\;/g,'>')).split('</div>')[0] + (dele.innerText || dele.contentWindow || dele.contentDocument).replace(/\</g,'<').replace(/\>/g,'>') + '</div>';
}

function tablehit() {
var wpush=[], hpush=[];
var wrand=0, hrand=0;
tds=document.getElementsByTagName('td');
for (var ii=0; ii<tds.length; ii++) {
if (eval('' + tds[1].getBoundingClientRect().left) <= eval('' + tds[0].getBoundingClientRect().left)) {
wpush.push(eval(33 + Math.floor(eval(ii / 3)) * 33));
hpush.push(eval(33 + eval(ii % 3) * 33));
} else {
hpush.push(eval(33 + Math.floor(eval(ii / 3)) * 33));
wpush.push(eval(33 + eval(ii % 3) * 33));
}
cells.push(tds[ii].getBoundingClientRect());
tds[ii].name='td' + eval(1 + ii);
tds[ii].title='Click for animation options.';
tds[ii].onclick = function(event){ tdobj=event.target; setTimeout(pretdclicked, 50); };
}
var hcell=eval('' + tds[0].getBoundingClientRect().height);
var wcell=eval('' + tds[0].getBoundingClientRect().width);

document.getElementById('mytable').style.height='' + eval(-40 + screen.height) + 'px';
for (var jj=0; jj<tds.length; jj++) {
hrand=Math.floor(Math.random() * hcell);
while (eval('' + hrand) > eval(2 * eval(eval('' + hcell) / 3))) {
hrand=Math.floor(Math.random() * hcell);
}
wrand=Math.floor(Math.random() * wcell);
while (eval('' + wrand) < eval(eval('' + wcell) / 3)) {
wrand=Math.floor(Math.random() * wcell);
}
tds[jj].innerHTML='<div id=prediv' + eval(1 + jj) + '><div onclick=event.stopPropagation(); class=indiv id=div' + eval(1 + jj) + ' onblur=cit(this); contenteditable=true style="background-color:yellow;position:absolute;top:calc(' + hpush[jj] + '% - ' + hrand + 'px);left:calc(' + wpush[jj] + '% - ' + wrand + 'px);width:' + wrand + 'px;"></div></div>';
document.getElementById('dkeys').innerHTML+='<style id=sty' + eval(1 + jj) + '> .move' + eval(1 + jj) + ' { -webkit-animation: move' + eval(1 + jj) + ' 1s ' + eio + ' infinite alternate; -moz-animation: move' + eval(1 + jj) + ' 1s ' + eio + ' infinite alternate; animation: move' + eval(1 + jj) + ' 1s ' + eio + ' infinite alternate; } @-webkit-keyframes move' + eval(1 + jj) + ' { from { top:calc(' + hpush[jj] + '% - ' + hrand + 'px); left:calc(' + wpush[jj] + '% - ' + wrand + 'px); } to { top:calc(' + hpush[jj] + '% - ' + Math.floor(Math.random() * hcell) + 'px); left:calc(' + wpush[jj] + '% - ' + Math.floor(Math.random() * wcell) + 'px); } } </style> ';

document.getElementById('div' + eval(1 + jj)).innerHTML=document.getElementById('div' + eval(1 + jj)).outerHTML.replace(/\</g,'<').replace(/\>/g,'>');
}
}

</script>

</head>
<body onload="tablehit();">
<table border=10 id=mytable style="width:100%;height:100%;" title="Contenteditable outerHTML Ideas - RJM Programming - March, 2022">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<div id=dkeys></div>
</body>
</html>