<html>
<head>
<title>Contenteditable outerHTML Ideas - RJM Programming - March, 2022</title>
<meta id="myviewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes" >
<style>
td { border: 2px solid red; width: 33%; height:33%; }
th { border: 2px solid red; width: 33%; height:33%; }
div.indiv { font-size: 12px; background-color: yellow; opacity: 0.9; }

span {
transform: rotate(45deg);
}

.aglow {
-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;
}
}

body {
min-height: 91vh;
min-height: webkit-fill-available;
}

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

function doglow() {
if (glower) {
if (('' + glower.className).indexOf('glow') == -1) {
glower.className+=' aglow';
spans[eval(-1 + eval(('' + glower.outerHTML.split(' id="div')[1].split('"')[0])))].innerHTML=glower.className.replace('indiv','');
}
}
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;
spans[eval(-1 + eval(('' + tdo.name).replace('td','')))].innerHTML=divo.className.replace('indiv','');
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;
var shadowrect=null;
var zi='';
var fifty='50';

//alert(-9);

if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert('bh=' + document.body.getBoundingClientRect().height + ' th=' + document.getElementById('mytable').getBoundingClientRect().height);
document.getElementById('mytable').style.height='' + eval(-170 + screen.height) + 'px';
//alert('Bh=' + document.body.getBoundingClientRect().height + ' Th=' + document.getElementById('mytable').getBoundingClientRect().height);
} else {
//alert(0);
fifty='40';
document.getElementById('mytable').style.height='91vh';
//zi='z-index:123;';
//document.getElementById('mytable').style.zIndex='123';
//alert(-7);
}

tds=document.getElementsByTagName('td');

shadowrect=document.getElementById('mytable').getBoundingClientRect();
shadowtable=document.getElementById('mytable').outerHTML.replace('mytable', 'shadowtable').replace(' style="', ' style="position:absolute;top:' + shadowrect.top + 'px;left:' + shadowrect.left + 'px;opacity:0.5;z-index:-9;').replace(/\<td\>/g, '<td style="opacity:0.5;border: 1px solid transparent; vertical-align: middle; text-align: center;transform: rotate(45deg);font-size:' + fifty + 'px;"><span></span>');

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.';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert(1);
//tds[ii].style.zIndex='123';
//tds[ii].addEventListener('click', function(event){ tdobj=event.target; setTimeout(pretdclicked, 50); }, false);
tds[ii].onclick = function(event){ tdobj=event.target; setTimeout(pretdclicked, 50); };
//alert(ii);
} else {
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="' + zi + '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,'>');
}
document.getElementById('dshadow').innerHTML=shadowtable;
spans=document.getElementsByTagName('span');
}

</script>

</head>
<body onload=" tablehit();">
<table border=10 id=mytable style="width:100%;height:91%;" 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=dshadow></div>
<div id=dkeys></div>
</body>
</html>