<!doctype html>
<html>
<head>
<title>Textarea Pointing - RJM Programming - December, 2017</title>
<script type='text/javascript'>
var focusto='motherboard';
var nextsuffix='2';
var firstoh='', x, y;
var dscriptih='<style> </style>';
var fontf='Verdana';
var fonts='12px';
var fontc='#000000';
var fontw='normal';
var lastfontf='Verdana';
var lastfonts='12px';
var lastfontc='#000000';
var lastfontw='normal';
function clone() {
var secondoh=firstoh.replace("z-index:1;","z-index:" + nextsuffix + ";").replace(" ", " class='mboard" + nextsuffix + "' ");
//secondoh=secondoh.replace(/300/g,"100");
secondoh=secondoh.replace("top:0px;","top:" + y + "px;");
secondoh=secondoh.replace("left:0px;","left:" + x + "px;");
secondoh=secondoh.replace(/motherboard/g,"motherboard" + nextsuffix);
secondoh=secondoh.replace("font-family:" + fontf + ";","font-family:" + document.getElementById('fontf').value + ";");
secondoh=secondoh.replace("font-size:" + fonts + ";","font-size:" + document.getElementById('fonts').value + ";");
secondoh=secondoh.replace("font-weight:" + fontw + ";","font-weight:" + document.getElementById('fontw').value + ";");
secondoh=secondoh.replace("color:" + fontc + ";","color:" + document.getElementById('fontc').value + ";");
secondoh=secondoh.replace("font-family:" + fontf + ";","font-family:" + document.getElementById('fontf').value + ";");
secondoh=secondoh.replace("font-size:" + fonts + ";","font-size:" + document.getElementById('fonts').value + ";");
secondoh=secondoh.replace("font-weight:" + fontw + ";","font-weight:" + document.getElementById('fontw').value + ";");
secondoh=secondoh.replace("color:" + fontc + ";","color:" + document.getElementById('fontc').value + ";");
secondoh=secondoh.replace("font-family:" + lastfontf + ";","font-family:" + document.getElementById('fontf').value + ";");
secondoh=secondoh.replace("font-size:" + lastfonts + ";","font-size:" + document.getElementById('fonts').value + ";");
secondoh=secondoh.replace("font-weight:" + lastfontw + ";","font-weight:" + document.getElementById('fontw').value + ";");
secondoh=secondoh.replace("color:" + lastfontc + ";","color:" + document.getElementById('fontc').value + ";");
secondoh=secondoh.replace("font-family:" + lastfontf + ";","font-family:" + document.getElementById('fontf').value + ";");
secondoh=secondoh.replace("font-size:" + lastfonts + ";","font-size:" + document.getElementById('fonts').value + ";");
secondoh=secondoh.replace("font-weight:" + lastfontw + ";","font-weight:" + document.getElementById('fontw').value + ";");
secondoh=secondoh.replace("color:" + lastfontc + ";","color:" + document.getElementById('fontc').value + ";");
//alert("color:" + fontc + ";" + "," + "color:" + document.getElementById('fontc').value + ";" + " " + secondoh);
dscriptih=dscriptih.replace('</style>', ' .mboard' + nextsuffix + ' { width: calc(85% - ' + x + 'px); } </style>');
document.getElementById('dscript').innerHTML=dscriptih;
focusto="motherboard" + nextsuffix;
nextsuffix='' + eval(eval(nextsuffix) + 1);
return secondoh;
}
function clicksup(event) {
//alert('You clicked');
var thissuffix=nextsuffix;
var prevval=document.getElementById(focusto).value;
var prevo=document.getElementById(focusto);
if (event.clientX || event.clientY) {
x = event.clientX;
y = event.clientY;
} else {
x = event.pageX;
y = event.pageY;
}
if (1 == 1) {
document.getElementById('d' + thissuffix).innerHTML=clone() + "<div id='d" + eval(1 + eval(thissuffix)) + "'></div>";
} else {
document.getElementById('myform').innerHTML+=clone();
}
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-family:" + fontf + ";","font-family:" + document.getElementById('fontf').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-size:" + fonts + ";","font-size:" + document.getElementById('fonts').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-weight:" + fontw + ";","font-weight:" + document.getElementById('fontw').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("color:" + fontc + ";","color:" + document.getElementById('fontc').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-family:" + lastfontf + ";","font-family:" + document.getElementById('fontf').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-size:" + lastfonts + ";","font-size:" + document.getElementById('fonts').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-weight:" + lastfontw + ";","font-weight:" + document.getElementById('fontw').value + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("color:" + lastfontc + ";","color:" + document.getElementById('fontc').value + ";");
//alert(prevo.id + ' ... ' + prevval);
//prevo.value=prevval;
prevo.innerHTML=prevval;
dofocus();
//alert(document.getElementById('myform').innerHTML);
}
function dofocus() {
if (firstoh == '') {
firstoh=document.getElementById(focusto).outerHTML;
//alert(firstoh);
document.getElementById(focusto).style.width='85%';
document.getElementById(focusto).style.height='100vh';
}
document.getElementById(focusto).focus();
}
function altit(tv,ti) {
if (ti == 'fontf') {
document.getElementById(focusto).style.fontFamily=tv;
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-family:" + fontf + ";","font-family:" + tv + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-family:" + lastfontf + ";","font-family:" + tv + ";");
lastfontf=tv;
} else if (ti == 'fonts') {
document.getElementById(focusto).style.fontSize=tv;
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-size:" + fontf + ";","font-size:" + tv + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-size:" + lastfontf + ";","font-size:" + tv + ";");
lastfonts=tv;
} else if (ti == 'fontc') {
document.getElementById(focusto).style.color=tv;
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("color:" + fontc + ";","color:" + tv + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("color:" + lastfontc + ";","color:" + tv + ";");
lastfontc=tv;
} else if (ti == 'fontw') {
document.getElementById(focusto).style.fontWeight=tv;
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-weight:" + fontw + ";","font-weight:" + tv + ";");
document.getElementById(focusto).alt=document.getElementById(focusto).alt.replace("font-weight:" + lastfontw + ";","font-weight:" + tv + ";");
lastfontw=tv;
document.getElementById('fontf').focus();
}
return tv;
}
function lotsforthefuture(oform) {
// Lots for later
// End of ... Lots for later
return true;
}
</script>
</head>
<body onload='dofocus();'>
<form onsubmit='return lotsforthefuture(this);' id='myform' action='./textarea_pointing.html' method='GET'>
<textarea alt='font-family:Verdana;font-size:12px;color:#000000;font-weight:normal;' onclick='clicksup(event);' title='Base Textarea to type away on or click/touch to reposition text' style='font-family:Verdana;font-size:12px;font-weight:normal;color:#000000;border:0px solid yellow;border-right:1px solid red;z-index:1;position:absolute;background-color:transparent;top:0px;left:0px;height:100vh;' id='motherboard' name='motherboard' cols=300 rows=300>
</textarea>
<input type='submit' id='mysubmit' value='Draw This' style='display:none;'></input>
<div id='d2'></div>
</form>
<div id='menu' style='background-color:yellow;position:absolute;left:85%;width:15%;top:0px;height:100vh;'><h1> Textarea <br> Pointing</h1><h3> RJM Programming</h3><h3> December, 2017</h3>
Font Family: <input style='margin-left:20px;' onblur="document.getElementById(focusto).style.fontFamily=altit(this.value,this.id);" type='text' id='fontf' value='Verdana'></input><br>
Font Size: <input style='margin-left:20px;' onblur="document.getElementById(focusto).style.fontSize=altit(this.value,this.id);" type='text' id='fonts' value='12px'></input><br>
Font Colour: <input style='margin-left:20px;' onchange="document.getElementById(focusto).style.color=altit(this.value,this.id);" onblur="document.getElementById(focusto).style.color=altit(this.value,this.id);" type='color' id='fontc' value='black'></input><br>
Font Weight: <input style='margin-left:20px;' onblur="document.getElementById(focusto).style.fontWeight=altit(this.value,this.id);" type='text' id='fontw' value='normal'></input><br>
<input style='margin-left:-2000px' type='text' id='offtheradar' value=''></input><br>
</div>
<div id='dscript'></div>
</body>
</html>