<html>
<head>
<script type=text/javascript>
var cds=['Cell 0', 'Cell 1', (location.search.split('arr2=')[1] ? decodeURIComponent(location.search.split('arr2=')[1]).split('&')[0] : 'Line of Doves'), 'Cell 3', (location.search.split('arr4=')[1] ? decodeURIComponent(location.search.split('arr4=')[1]).split('&')[0] : 'Border of Trains'), 'Cell 5', (location.search.split('arr6=')[1] ? decodeURIComponent(location.search.split('arr6=')[1]).split('&')[0] : 'Background of Andorra Flags')];
var ops=[1.0, 1.0, 0.2];
var lastih='', lastio=-1;
function postc(incv) {
while (incv.indexOf(String.fromCharCode(10)) != -1) { incv=incv.replace(String.fromCharCode(10),'<br>'); }
return incv;
}
function fancystuff() {
var rects=[];
if (cds[2] != 'Line of Doves' && document.getElementById('spanone').innerHTML != cds[2]) {
document.getElementById('spanone').innerHTML=postc(cds[2]);
}
if (cds[4] != 'Border of Trains' && document.getElementById('spantwo').innerHTML != cds[4]) {
document.getElementById('spantwo').innerHTML=postc(cds[4]);
}
if (cds[6] != 'Background of Andorra Flags' && document.getElementById('spanthree').innerHTML != cds[6]) {
document.getElementById('spanthree').innerHTML=postc(cds[6]);
}
var trs=document.getElementsByTagName('tr');
var ths=document.getElementsByTagName('th');
document.body.style.backgroundColor='#fffaff';
for (var j=0; j<cds.length; j++) {
if (cds[j].indexOf(String.fromCharCode(10)) != -1) {
cds[j]=cds[j].replace(String.fromCharCode(10),'<br>');
}
}
for (var jjjfs=0; jjjfs<ths.length; jjjfs++) {
rects.push(ths[jjjfs].getBoundingClientRect());
ths[jjjfs].style.position='absolute';
ths[jjjfs].style.top='' + rects[eval(-1 + rects.length)].top + 'px';
ths[jjjfs].style.left='' + rects[eval(-1 + rects.length)].left + 'px';
ths[jjjfs].style.width='' + rects[eval(-1 + rects.length)].width + 'px';
ths[jjjfs].style.height='' + rects[eval(-1 + rects.length)].height + 'px';
trs[0].style.height='' + rects[eval(-1 + rects.length)].height + 'px';
if (jjjfs == 1) { ths[jjjfs].innerHTML+=' (and foreground context)'; }
}
rects=[];
var tds=document.getElementsByTagName('td');
for (var jjfs=0; jjfs<tds.length; jjfs++) {
rects.push(tds[jjfs].getBoundingClientRect());
if (eval(jjfs % 2) == 0) {
tds[jjfs].style.position='absolute';
tds[jjfs].style.top='' + rects[eval(-1 + rects.length)].top + 'px';
tds[jjfs].style.left='' + rects[eval(-1 + rects.length)].left + 'px';
tds[jjfs].style.width='' + rects[eval(-1 + rects.length)].width + 'px';
tds[jjfs].style.height='' + rects[eval(-1 + rects.length)].height + 'px';
}
}
//alert(document.body.innerHTML);
//var woo=window.open('','_blank','top=100,left=100,width=600,height=600');
//woo.document.write('<html><body>' + document.body.innerHTML + '</body></html>');
var kfs=1, minus30='';
if (1 == 1) {
var ifs=document.getElementsByTagName('iframe');
for (var jfs=0; jfs<ifs.length; jfs++) {
rects.push(ifs[jfs].getBoundingClientRect());
ifs[jfs].style.opacity='' + ops[jfs];
ifs[jfs].style.position='absolute';
ifs[jfs].style.top='' + rects[kfs].top + 'px';
ifs[jfs].style.left='' + rects[1].left + 'px';
ifs[jfs].style.width='' + rects[kfs].width + 'px';
ifs[jfs].style.height='' + rects[kfs].height + 'px';
ifs[jfs].style.border='1px dashed red';
minus30='-' + eval(eval(eval('' + cds[eval(1 + kfs)].split('<br>')[0].length) * 3.75));
//alert(minus30);
//alert('<p style="position:absolute;top:' + eval(-30 + eval('' + rects[kfs].top) + eval(eval('' + rects[kfs].height) / 2)) + 'px;left:' + eval(eval('' + minus30) + eval('' + rects[1].left) + eval(eval('' + rects[kfs].width) / 2)) + 'px;">' + cds[eval(1 + kfs)] + '</p>');
document.getElementById('tdiv').innerHTML+='<p style="position:absolute;top:' + eval(eval(-15 - 15 * eval('' + cds[eval(1 + kfs)].split('<br>').length)) + eval('' + rects[kfs].top) + eval(eval('' + rects[kfs].height) / 2)) + 'px;left:' + eval(eval('' + minus30) + eval('' + rects[1].left) + eval(eval('' + rects[kfs].width) / 2)) + 'px;">' + cds[eval(1 + kfs)] + '</p>';
kfs+=2;
}
}
}
function ask(sois) {
var huhi=prompt('Optionally enter an image URL ( as needs be, suffix by &width=[preferredWidth]&height=[preferredHeight] and/or &background=y ) and/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ? Cancel if it is wording you want to change to the left there.','');
if (huhi == null) { huhi=''; }
if (huhi.trim() != '') {
if (document.URL.indexOf('rjmprogramming.com.au') == -1 && sois.title.indexOf('rjmprogramming.com.au') != -1) {
sois.title=document.URL.substring(0,8) + document.URL.substring(8).split('/')[0] + sois.title.split('rjmprogramming.com.au')[1];
}
if (huhi.indexOf('#') != -1) {
var huhis=huhi.split('#')[1];
for (var ihuhis=0; ihuhis<huhis.length; ihuhis++) {
if (eval('' + ihuhis) < eval('' + huhis.length)) {
if (huhis.substring(ihuhis).substring(0,1).replace('0','').replace('1','').replace('2','').replace('3','').replace('4','').replace('5','').replace('6','').replace('7','').replace('8','').replace('9','').replace(',','') != '') {
huhi=huhi.replace('#' + huhis.split(huhis.substring(ihuhis).substring(0,1))[0], '');
huhis=huhis.split(huhis.substring(ihuhis).substring(0,1))[0];
}
}
}
if (huhis == '') {
if (sois.title.indexOf('?insvg=') != -1) {
sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'');
} else if (sois.title.indexOf('&insvg=') != -1) {
sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'');
}
} else if (sois.title.indexOf('?insvg=') != -1) {
sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'?insvg=' + encodeURIComponent(huhis));
} else if (sois.title.indexOf('&insvg=') != -1) {
sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'&insvg=' + encodeURIComponent(huhis));
} else if (sois.title.indexOf('?') != -1) {
sois.title=sois.title.replace('?','?insvg=' + encodeURIComponent(huhis) + '&');
} else {
sois.title=sois.title.split('#')[0] + '?insvg=' + encodeURIComponent(huhis);
}
}
if (huhi.split('&')[0].split('#')[0].trim() != '') {
if (sois.title.indexOf('?image=') != -1) {
sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');
} else if (sois.title.indexOf('&image=') != -1) {
sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');
}
sois.title+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');
} else if (sois.title.indexOf('?image=') != -1) {
sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');
} else if (sois.title.indexOf('&image=') != -1) {
sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');
}
document.getElementById(sois.id.replace('span','if')).src=sois.title; //+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');
}
}
function snapshot(sio) {
lastih=sio.innerHTML;
lastio=-1;
for (var iuh=0; iuh<cds.length; iuh++) {
if (lastih == cds[iuh]) { lastio=iuh; } else if (sio.innerHTML.indexOf(' of ') != -1) { if (lastih.split(' of ')[0] == cds[iuh].split(' of ')[0]) { lastio=iuh; } }
}
}
function newwords(sio) {
if (lastih != sio.innerHTML && lastio >= 0) {
cds[lastio]=sio.innerHTML.replace(/\ \;/g,' ').replace(/\<br\>/g,String.fromCharCode(10));
//alert('cds[' + lastio + ']=' + cds[lastio]);
var documentURL=document.URL.split('#')[0].split('?arr' + lastio + '=')[0].split('&arr' + lastio + '=')[0];
location.href=(documentURL + '&arr' + lastio + '=' + encodeURIComponent(cds[lastio])).replace('.html&','.html?').replace('.htm&','.htm?'); // fancystuff();
//} else {
//alert('lastio=' + lastio);
}
}
</script>
</head>
<body onload='fancystuff();'>
<h1>Making Use of Emoji Borders and Backgrounds</h1>
<h3>RJM Programming - January, 2022</h3>
<h4>Thanks to <a target=_blank title='https://stackoverflow.com/questions/1623242/problem-with-dynamic-svg-image-generation' href='//stackoverflow.com/questions/1623242/problem-with-dynamic-svg-image-generation'>Problem with dynamic SVG image generation</a></h4>
<table id=emtable>
<tr><th title='Clicks below allow for image inclusion'>Description</th><th>Iframe</th></tr>
<tr><td style='vertical-align:top;'><span onblur=newwords(this); onfocus=snapshot(this); contenteditable=true id=spanone onclick='ask(this);' title="//www.rjmprogramming.com.au/inline_svg.php?insvg=128330&width=260">Line of Doves of Peace Emojis</span></td><td><iframe id=ifone src="//www.rjmprogramming.com.au/inline_svg.php?insvg=128330&width=260"></iframe></td></tr>
<tr><td style='vertical-align:top;'><span onblur=newwords(this); onfocus=snapshot(this); contenteditable=true id=spantwo onclick='ask(this);' title="//www.rjmprogramming.com.au/inline_svg.php?insvg=128646&width=260&height=120">Border of Train Emojis</span></td><td><iframe id=iftwo src="//www.rjmprogramming.com.au/inline_svg.php?insvg=128646&width=260&height=120"></iframe></td></tr>
<tr><td style='vertical-align:top;'><span onblur=newwords(this); onfocus=snapshot(this); contenteditable=true id=spanthree onclick='ask(this);' title="//www.rjmprogramming.com.au/inline_svg.php?insvg=127462,127465&width=260&height=120&background=">Background Flag of Andorra Emojis</span></td><td><iframe id=ifthree src="//www.rjmprogramming.com.au/inline_svg.php?insvg=127462,127465&width=260&height=120&background="></iframe></td></tr>
</table>
<div id=tdiv></div>
</body>
</html>