<!doctype html>
<html>
<head>
<title>Do It Yourself HTML Editor - RJM Programming - January, 2017</title>
<style>
body { overflow:hidden; }
input[type="submit"]:hover { background-color: green; }
</style>
<script type='text/javascript' src='../../../../cookie_get.js?x=xd'></script>
<script type='text/javascript'>
var cnt=1;
var defh="<!doctype html><html><head><title>My HTML and Javascript and CSS" + String.fromCharCode(10) + "</" + "title>" + String.fromCharCode(10) + "<style>" + String.fromCharCode(10) + "</" + "style>" + String.fromCharCode(10) + "<" + "!-" + "- " + "scr" + "ipt type='text/javascript'> alert('Hello World from RJM Programming Dynamic HTML Editor. To not use cookies put space between no and cookies in nocookies. As of today, also, to uncomment the start and end scr" + "ipt tags allows you to try some Javascript scripting.'); " + String.fromCharCode(10) + "</" + "scrip" + "t -" + "-" + ">" + String.fromCharCode(10) + "</" + "head><bo" + "dy>" + String.fromCharCode(10) + "</" + "body>" + String.fromCharCode(10) + "</" + "html>";
var htmlcontent=(location.search.split('htmlcontent=')[1] ? ourdecodeURIComponent(location.search.split('htmlcontent=')[1].split('&')[0]) : defh);
var wois=null;
var lasttitle='',lastvalue='';
var numskey=0;
var nkeys=0;
var cskeyname="", cskeytitle="";
var skeyname=[];
var skeytitle=[];
var skeyvalue=[];
var laste=-1;
var url="";
var emailee="";
var zhr=null, zform=null, img1=null, imgw=0, imgh=0, subthis=[];
var dvalue='', dvaluesmall='', inlineis='';
var mtypes = ["audio/wav","audio/x-wav","audio/x-pn-realaudio","audio/x-mpegurl","audio/x-aiff","audio/mpeg","audio/mid",
"audio/basic","audio/ogg","video/x-sgi-movie","video/x-msvideo","video/quicktime","audio/mp3","video/mp4","video/mpeg",
"video/x-la-asf","video/ogg","video/webm","audio/mp4", "image/jpeg", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tif"];
var mexts = [".wav",".wav",".ram",".m3u",".aiff",".mp3",".rmi",
".snd",".ogg",".movie",".avi",".mov",".mp3",".m4v",".mpeg",
".lsx",".ogv",".webm",".m4a", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tif"];
var skeys=(location.search.split('shortcuts=')[1] ? analyzeshortcuts(ourdecodeURIComponent(location.search.split('shortcuts=')[1].split('&')[0])) : '');
function showStuff() {
if (zhr != null) {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
if (emailee == '') {
//alert(zhr.responseText);
var tagsare=zhr.responseText.split('<td><');
var oselnis=document.getElementById('seln0');
var oselnisih=oselnis.innerHTML;
var thistagis='';
oselnis.innerHTML+='<option title="h5_0" value="' + ('<h5></h5>') + '">' + ('<h5></h5>').replace(/\</g,'<').replace(/\>/g,'>') + '</option>';
oselnis.innerHTML+='<option title="h6_0" value="' + ('<h6></h6>') + '">' + ('<h6></h6>').replace(/\</g,'<').replace(/\>/g,'>') + '</option>';
for (var itags=2; itags<tagsare.length; itags++) {
thistagis='<' + tagsare[itags].split('>')[0] + '>';
if (oselnisih.toLowerCase().indexOf(tagsare[itags].split('>')[0].toLowerCase() + '_0') == -1) {
oselnis.innerHTML+='<option title="' + tagsare[itags].split('>')[0].toLowerCase() + '_0" value="' + thistagis + '</' + thistagis.substring(1) + '">' + (thistagis + '</' + thistagis.substring(1)).replace(/\</g,'<').replace(/\>/g,'>') + '</option>';
}
}
} else if ((emailee + ' ').substring(0,1).toUpperCase() == (emailee + ' ').substring(0,1) && (emailee + ' ').substring(1).substring(0,1).toLowerCase() == (emailee + ' ').substring(1).substring(0,1)) {
alert('Email sent to ' + emailee);
} else {
alert('Email sent to ' + emailee + ' ... ' + zhr.responseText);
}
zhr=null;
}
}
}
}
function fsckit(ocb,userdone) {
if (ocb.checked) {
if (lasttitle != '' && lastvalue != '') {
//alert(skeyname.length + " Ctrl_" + lasttitle.substring(0,1).toUpperCase() + ' ... vs ... ' + cskeyname);
if ((yourcontains(skeyname, "Ctrl_" + lasttitle.substring(0,1).toUpperCase()) == -1 && userdone != 0) || (yourcontains(skeyname, "Ctrl_" + lasttitle.substring(0,1).toUpperCase()) != -1 && userdone == 0)) {
//alert(lasttitle + ' ... Vs ... ' + cskeyname);
if (userdone != 0) {
skeyname.push('Ctrl_' + lasttitle.substring(0,1).toUpperCase());
skeytitle.push(lasttitle);
skeyvalue.push(lastvalue);
//alert('Ctrl_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue);
}
numskey++;
document.getElementById('selshortcuts').size=numskey;
document.getElementById('selshortcuts').innerHTML+='<option value="' + lasttitle + '">Ctrl_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue.replace(/</g,'<').replace(/>/g,'>');
lastvalue='';
} else if ((yourcontains(skeyname, "Alt_" + lasttitle.substring(0,1).toUpperCase()) == -1 && userdone != 0) || (yourcontains(skeyname, "Ctrl_" + lasttitle.substring(0,1).toUpperCase()) != -1 && userdone == 0)) {
//alert(lasttitle + ' ... VS ... ' + cskeyname);
if (userdone != 0) {
skeyname.push('Alt_' + lasttitle.substring(0,1).toUpperCase());
skeytitle.push(lasttitle);
skeyvalue.push(lastvalue);
//alert('Alt_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue);
}
numskey++;
document.getElementById('selshortcuts').size=numskey;
document.getElementById('selshortcuts').innerHTML+='<option value="' + lasttitle + '">Alt_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue.replace(/</g,'<').replace(/>/g,'>');
lastvalue='';
} else {
if (userdone != 0) alert('Sorry, no shortcut keys left for this.');
}
if (lastvalue == '') {
if (document.getElementById('shortcuts').value == '') {
document.getElementById('shortcuts').value += lasttitle;
lasttitle='';
} else {
document.getElementById('shortcuts').value += ';' + lasttitle;
lasttitle='';
}
}
}
ocb.checked=false;
}
}
function checksck(biginid) {
var inid=biginid.split(' title="')[1].split('"')[0];
//alert(skeys + ' ... vs ... ' + inid);
//document.title = ' ' + inid + ' ... vs ... ' + cskeytitle;
if ((';' + skeys + ';').indexOf(';' + inid + ';') != -1) {
var ij=yourcontains(skeytitle, inid);
var vinid=biginid.split(' value="')[1].split('"')[0];
skeyvalue[ij] = vinid;
//alert(skeyvalue[0]);
lastvalue=vinid;
lasttitle=inid;
document.getElementById('sckit').checked=true;
fsckit(document.getElementById('sckit'),0);
return biginid.replace('</option>', ' (' + skeyname[ij] + ')</option>');
}
return biginid;
}
function checkshortcut(e) { // thanks to http://stackoverflow.com/questions/2511388/how-can-i-add-a-javascript-keyborad-shortcut-to-an-existing-javascript-function
var e = e || window.event;
if (skeyname.length > 0) {
var found=-1;
for (var kis=65; kis<(65 + 26); kis++) {
if ((e.ctrlKey && e.which == kis) || (laste == 17 && e.which == kis)) {
found=yourcontains(skeyname, "Ctrl_" + String.fromCharCode(kis).toUpperCase());
//document.title=cskeyname + ' ... ' + found + String.fromCharCode(kis).toUpperCase();
} else if ((e.altKey && e.which == kis) || (laste == 18 && e.which == kis)) {
found=yourcontains(skeyname, "Alt_" + String.fromCharCode(kis).toUpperCase());
//document.title=cskeyname + ' .. ' + found + String.fromCharCode(kis).toUpperCase();
}
}
if (found >= 0) {
placeatcursor(skeyvalue[found],null,1);
return false;
}
}
laste=e.which;
if (laste == 17 || laste == 18) return false;
return false;
}
function analyzeshortcuts(inkeys) {
var donesofar=';', nnkeys=0, ourdelim='';
var extendern, withinsk, skbits=inkeys.split(';');
for (var isk=0; isk<skbits.length; isk++) {
withinsk=skbits[isk].split('|');
extendern=eval(withinsk[0].split('_')[1]);
if (donesofar.indexOf(';Ctrl_' + withinsk[0].split('_')[0].toUpperCase()) == -1) {
// alert(nnkeys + ' Ctrl_' + withinsk[0].toUpperCase().split('_')[0]);
cskeyname=cskeyname + ourdelim + 'Ctrl_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1);
cskeytitle=cskeytitle + ourdelim + withinsk[0];
ourdelim='|';
donesofar+='Ctrl_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1) + ';';
} else if (donesofar.indexOf(';Alt_' + withinsk[0].toUpperCase().split('_')[0]) == -1) {
cskeyname=cskeyname + ourdelim + 'Alt_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1);
cskeytitle=cskeytitle + ourdelim + withinsk[0];
ourdelim='|';
donesofar+='Alt_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1) + ';';
}
}
skeyname=cskeyname.split('|');
skeytitle=cskeytitle.split('|');
skeyvalue=cskeytitle.split('|');
return inkeys;
}
function ourdecodeURIComponent(inf) {
return decodeURIComponent(inf.replace(/\+/g,'%20'));
}
function yourcontains(ourarr,ourwhat) {
var retval=-1;
for (var i=0; i<ourarr.length; i++) {
if (ourarr[i] == ourwhat) return i;
}
return retval;
}
function perhapsfix() {
if (document.getElementById('myform').action.indexOf('.php') == -1) {
if (document.getElementById('htmlcontent').value.indexOf("<s" + "cript") != -1) {
document.getElementById('myform').action=document.getElementById('myform').action.replace('.html','.php').replace('.htm','.php');
} else {
setTimeout(perhapsfix, 1000);
}
}
}
function perhapsdel() {
if (document.getElementById('delthis').value != "") {
var huhd=new Date();
var dv = document.getElementById('delthis').value;
document.getElementById('delthis').value='';
//alert('./do_away_with_the_boring_bits.php?delthis=' + encodeURIComponent(dv) + '&dt=' + encodeURIComponent(huhd.toLocaleDateString() + huhd.toLocaleTimeString()));
document.getElementById('ihtmldelthis').src='./do_away_with_the_boring_bits.php?delthis=' + encodeURIComponent(dv) + '&dt=' + encodeURIComponent(huhd.toLocaleDateString() + huhd.toLocaleTimeString());
}
//setTimeout(perhapsdel,1100);
}
function loadgame() {
var prefix="", wdth="250px;", suffix="";
document.getElementById('myform').action=document.URL.split('?')[0].split('#')[0];
perhapsdel();
if (defh != htmlcontent) {
//wois=window.open('','_blank','top=50,left=50,width=400,height=400');
//wois.document.write(htmlcontent);
var x = document.getElementById("ihtmlcontent");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.head.innerHTML = htmlcontent.replace(/<HEAD>/g,'<head>').replace(/<\/HEAD>/g,'<\/head>').replace("/head","head").split("<head>")[1];
if (htmlcontent.toLowerCase().indexOf("<body>") == -1 && htmlcontent.toLowerCase().indexOf("<body ") != -1) {
var bbitsare=" " + htmlcontent.replace(/<BODY>/g,'<body>').replace(/<\/BODY>/g,'<\/body>').replace("/body","body").split("<body ")[1].split(">")[0] + ">";
y.body.innerHTML = '<div' + bbitsare + htmlcontent.replace(/<BODY>/g,'<body>').replace(/<\/BODY>/g,'<\/body>').replace("/body","body").replace('<body' + bbitsare,'<body>').split("<body>")[1] + '</div>';
} else {
y.body.innerHTML = htmlcontent.replace(/<BODY>/g,'<body>').replace(/<\/BODY>/g,'<\/body>').replace("/body","body").split("<body>")[1];
}
//x.contentWindow.location.reload(true);
}
document.getElementById('htmlcontent').value=htmlcontent;
document.getElementById('htmlcontent').innerHTML=htmlcontent;
//document.getElementById('dhtmlcontent').innerHTML=htmlcontent;
if (htmlcontent.indexOf("<s" + "cript") != -1) {
document.getElementById('myform').action=document.getElementById('myform').action.replace('.html','.php').replace('.htm','.php');
} else {
perhapsfix();
}
var selis="";
var pretypes=["br", "hr", "b", "i", "meta", "script", "link", "title", "style", "p", "a", "h1", "h2", "h3", "h4", "span", "div", "table", "tbody", "tr", "th", "td", "input", "form"];
var types=["p", "a", "img", "h1", "h2", "h3", "h4", "span", "div", "table", "tbody", "tr", "th", "td", "input", "form", "select", "option", "ul", "ol", "li", "video", "audio", "iframe"];
var extenders=["", " id=p1", " class=cp", " title=''", " style=''", " type=''", " href=''", " src=''", " value=''", " action=''", " method='GET'"];
var templatehelp="<p></p>", nexttemplatehelp;
prefix=checksck('<option title="_0" value="">Optionally select HTML element below ...' + suffix + '</option>');
prefix+=checksck('<option title="title_0" value="<title></title>"><title></title> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="meta_0" value="<meta />"><meta /> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="link_0" value="<link type=text/css href=></link>"><link type=text/css href=></link> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="script_0" value="<scr' + 'ipt type=text/javascript src=></scr' + 'ipt>"><script type=text/javascript src=></script> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="br_0" value="<br>"><br> (from here on have cursor with body)' + suffix + '</option>');
prefix+=checksck('<option title="hr_0" value="<hr>"><hr>' + suffix + '</option>');
prefix+=checksck('<option title="b_0" value="<b></b>"><b></b>' + suffix + '</option>');
prefix+=checksck('<option title="i_0" value="<i></i>"><i></i>' + suffix + '</option>');
for (var jj=0; jj<extenders.length; jj++) {
selis='<SELECT id="seln' + jj + '" style="background-color:pink;width:' + wdth + '" onchange="placeatcursor(this.value,this,0);">' + prefix + '</SELECT>';
wdth='60px;';
if (jj<eval(-1 + extenders.length)) {
prefix=checksck('<option title="_' + jj + '" value="">+ ' + extenders[eval(1 + jj)] + suffix + '</option>');
}
nexttemplatehelp=templatehelp;
for (var kk=0; kk<types.length; kk++) {
selis=selis.replace('</SELECT>',checksck('<option title="' + nexttemplatehelp.substring(1).replace('>',' ').split(' ')[0] + '_' + jj + '" value="' + nexttemplatehelp + '">' + nexttemplatehelp.replace(/</g,'<').replace(/>/g,'>') + suffix + '</option>') + '</SELECT>');
if (kk<eval(-1 + types.length)) nexttemplatehelp=nexttemplatehelp.replace(types[kk],types[kk + 1]).replace('/' + types[kk], '/' + types[kk + 1]);
}
//alert(selis);
if (selis.indexOf("<") != -1) document.getElementById('myspan').innerHTML+=selis;
if (jj<eval(-1 + extenders.length)) templatehelp=templatehelp.replace('></', extenders[eval(1 + jj)] + '></');
}
document.getElementById('sckit').readonly=true;
}
function placeatcursor(what,owhat,issck) {
var one=0, kpos, lwhat;
if (owhat != null) document.getElementById('sckit').readonly=false;
if (issck == 0) {
lasttitle=owhat.options[owhat.selectedIndex].title;
lastvalue=what;
}
if (what != '') {
var pb=what.substring(1).replace('>',' ').split(' ');
if (pb.length > 1) {
if (pb.length > 2) {
if (pb[2] == "class=cp" && pb[0] != "p") {
what=what.replace('class=cp', 'class=c' + pb[0]);
}
}
if (pb[1].replace('id=','') == (pb[0] + '1')) {
what=what.replace('=' + pb[0] + '1', '=' + pb[0] + '' + eval(cnt));
cnt++;
} else if (pb[1].replace('id=','') == ('p1')) {
what=what.replace('=p1', '=' + pb[0] + '' + eval(cnt));
cnt++;
}
}
lwhat=what.length;
if (what.indexOf('</') != -1) {
lwhat=what.indexOf('</');
}
kpos=wherearewe(document.getElementById('htmlcontent'));
if (owhat == null) {
kpos--;
one=1;
}
document.getElementById('htmlcontent').value = document.getElementById('htmlcontent').value.replace(document.getElementById('htmlcontent').value.substring(0,eval(one + kpos)),document.getElementById('htmlcontent').value.substring(0,kpos) + what);
setwherearewe(document.getElementById('htmlcontent'), eval(lwhat + kpos));
}
}
function wherearewe(ota) { // thanks to http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
// Initialize
var ipos = 0;
if (document.selection) { // IE Support
// Set focus on the element
ota.focus();
// To get cursor position, get empty selection range
var oselis = document.selection.createRange();
// Move selection start to 0 position
oselis.moveStart('character', -ota.value.length);
// The caret position is selection length
ipos = oselis.text.length;
} else if (ota.selectionStart || ota.selectionStart == '0') { // Firefox support
ipos = ota.selectionStart;
}
// Return results
//alert(ipos);
return ipos;
}
function setwherearewe(ota, wota) { // thanks to http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
if (ota.setSelectionRange) {
ota.setSelectionRange(wota, wota);
} else if (ota.createTextRange) {
var range = ota.createTextRange();
range.collapse(true);
range.moveEnd('character', wota);
range.moveStart('character', wota);
range.select();
}
// Return cursor position
ota.focus();
//document.title=ota.value.length + ' vs ' + wota;
return wota;
}
function relative_to_absolute(inth) {
var huhs, posthuhs, ii, m, delimis=" ";
var uubits=url.split("?");
if (url == "") return inth;
if (uubits[0].indexOf("/") != -1) {
var uuubits=uubits[0].split("/");
if (uuubits[eval(uuubits.length - 1)] != "") {
if (uuubits[eval(uuubits.length - 1)].indexOf(".") != -1) {
uubits[0] = uubits[0].replace("/" + uuubits[eval(uuubits.length - 1)], "/");
} else {
uubits[0] += "/";
}
}
}
var uudirname=uubits[0];
var outth = inth;
var ideas = new Array(" href='", ' href="', " Href='", ' Href="', " HREF='", ' HREF="', " href=", " Href=", " HREF=", " src='", ' src="', " Src='", ' Src="', " SRC='", ' SRC="', " src=", " Src=", " SRC=");
if (uudirname != "" && url != "") {
for (m=0; m<ideas.length; m++) {
huhs = inth.split(ideas[m]);
if (huhs.length > 1) {
for (ii=eval(huhs.length - 1); ii>=1; ii--) {
delimis=ideas[m].substring(eval(ideas[m].length - 1), eval(ideas[m].length));
if (delimis == "=") delimis=" ";
posthuhs=huhs[ii].trim().replace(">"," ").replace(/mailto:/g, "http:").replace(/javascript:none;/g, "http:").split(delimis);
if (posthuhs[0].length > 0) {
if (posthuhs[0].substring(0,1) == "#" || posthuhs[0].substring(0,4).toLowerCase().replace(/file/g, "http").toLowerCase() == "http") {
outth = outth;
} else if (posthuhs[0].substring(0,1) != "/" && posthuhs[0].substring(0,1) != "'" && posthuhs[0].substring(0,1) != '"') {
while (outth.indexOf(posthuhs[0]) != -1) {
outth=outth.replace(posthuhs[0], "youwill-never-ever-findthis");
}
outth=outth.replace(/youwill-never-ever-findthis/g, uudirname + posthuhs[0]);
//alert(posthuhs[0] + " To " + uudirname + posthuhs[0]);
} else if (posthuhs[0].substring(1,2) != "/" && posthuhs[0].substring(0,1) != "'" && posthuhs[0].substring(0,1) != '"') {
while (outth.indexOf(posthuhs[0]) != -1) {
outth=outth.replace(posthuhs[0], "youwill-never-ever-findthis");
}
outth=outth.replace(/youwill-never-ever-findthis/g, uudirname.substring(0, eval(uudirname.length - 1)) + posthuhs[0]);
//alert(posthuhs[0] + " to " + uudirname.substring(0, eval(uudirname.length - 1)) + posthuhs[0]);
}
}
}
}
}
}
return outth;
}
function validateit(oform) {
if (document.getElementById('htmlcontent').value.indexOf('<?') != -1) {
if (encodeURIComponent(document.getElementById('htmlcontent').value).length > 900) {
oform.target='_blank';
oform.method='POST';
} else {
oform.target='_blank';
oform.method='GET';
}
oform.action=oform.action.replace('.html','.php').replace('.htm','.php');
document.getElementById('dhtmlcontent').style.backgroundColor='lightblue';
document.getElementById('dhtmlcontent').innerHTML="<p>Think, if you haven't already done so, you need to install a <a target=_blank title=MAMP href=http://mamp.info>MAMP</a> local web server.</p><br><br><p>Then download this file and copy to the MAMP htdocs folder and call it <i>doityourself.php</i> (if that's okay?) and access it via this ...<br><br><a target=_top title=doityourself.php href=http://localhost:8888/doityourself.php>live run</a><br><br> link.</p>";
} else if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('no cookies') != -1 || document.getElementById('htmlcontent').value.indexOf('<s' + 'cript') != -1 || encodeURIComponent(document.getElementById('htmlcontent').value).length > 900) {
var ourmethod='GET';
if (encodeURIComponent(document.getElementById('htmlcontent').value).length > 900) ourmethod='POST';
if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('no cookies') == -1) {
if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('nocookies') != -1) {
document.getElementById('htmlcontent').value = document.getElementById('htmlcontent').value.replace('nocookies','no cookies');
}
}
if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('<s' + 'script') != -1) {
if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('nocookies') != -1) {
document.getElementById('htmlcontent').value = document.getElementById('htmlcontent').value.replace('nocookies','no cookies');
}
}
url=document.getElementById('urlprefix').value;
document.getElementById('htmlcontent').value=relative_to_absolute(document.getElementById('htmlcontent').value);
oform.target='_self';
oform.method=ourmethod;
oform.action=oform.action.replace('.html','.php').replace('.htm','.php');
}
return true;
}
function convertoBase64Image(img) { // thanks to https://stackoverflow.com/questions/24972617/using-localstorage-base64-image-in-chrome-content-script
// Create an empty canvas element
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to guess the
// original format, but be aware the using "image/jpg" will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL; //.replace(/^data:image\/(png|jpg);base64,/, "");
}
function ajaxit() {
var urlis='HTTP://dev.to/flippedcoding/the-ultimate-html5-tag-list-4i2a';
zhr = new XMLHttpRequest();
zform=new FormData();
zform.append('tags', urlis);
zhr.open('post', document.URL.replace('.html','.php').replace('.htm','.php'), true);
zhr.onreadystatechange = showStuff;
zhr.send(zform);
}
function emailit() {
var avalues=[],ivalues=0, imagenameidea='', prei='', pidea='URL(', iexts=0, mediais='img', mimeis='';
var thisext='';
dvalue='';
dvaluesmall='';
inlineis='';
dvaluesmall=document.getElementById('htmlcontent').value.replace(/\'\/\//g, "'http://").replace(/\"\/\//g, '"http://');
dvalue=dvaluesmall;
//alert(document.getElementById('htmlcontent').value.toLowerCase().replace(/\'/g,'').replace(/\"/g,'').replace(/http\:/g,'').replace(/https\:/g,'').replace(/www\./g,'').replace(/\/\//g,''));
if (document.getElementById('htmlcontent').value.toLowerCase().replace(/\'/g,'').replace(/\"/g,'').replace(/http\:/g,'').replace(/https\:/g,'').replace(/www\./g,'').replace(/\/\//g,'').indexOf('url(rjmprogramming.com.au/') != -1) {
avalues=document.getElementById('htmlcontent').value.split('rjmprogramming.com.au/');
//alert(avalues.length);
for (ivalues=1; ivalues<avalues.length; ivalues++) {
mediais='img';
imagenameidea=avalues[ivalues].split(')')[0];
pidea='URL(';
if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf('url(') != -1) { pidea='url('; }
if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf('Url(') != -1) { pidea='Url('; }
if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf(' src=') != -1) { pidea=' src='; }
if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf(' Src=') != -1) { pidea=' Src='; }
if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf(' SRC=') != -1) { pidea=' SRC='; }
if (avalues[eval(-1 + ivalues)].indexOf(pidea) != -1) {
prei=avalues[eval(-1 + ivalues)].split(pidea)[eval(-1 + avalues[eval(-1 + ivalues)].split(pidea).length)];
//alert(prei);
mediais='';
if (avalues[ivalues].split(prei.substring(0,1))[0].indexOf('.') != -1) {
thisext='.' + avalues[ivalues].split(prei.substring(0,1))[0].split('.')[eval(-1 + avalues[ivalues].split(prei.substring(0,1))[0].split('.').length)];
for (iexts=0; iexts<mexts.length; iexts++) {
if (thisext.toLowerCase() == mexts[iexts]) {
mediais=mtypes[iexts].split('/')[0].replace('image', 'img');
mimeis=mtypes[iexts];
}
}
if (prei != '') {
if (mediais == '' || avalues[ivalues].split(prei.substring(0,1))[0].toLowerCase().replace('?', '.htm').replace('#', '.htm').replace('.cgi', '.htm').replace('.asp', '.htm').replace('.php', '.htm').indexOf('.htm') != -1) {
prei=prei;
} else if (prei.substring(0,1) == "'" || prei.substring(0,1) == '"') {
imagenameidea=prei.substring(1) + 'rjmprogramming.com.au/' + avalues[ivalues].split(prei.substring(0,1))[0];
if (inlineis == '') {
inlineis=imagenameidea; //'../' + avalues[ivalues].split(prei.substring(0,1))[0];
} else {
inlineis+=',' + imagenameidea; //'../' + avalues[ivalues].split(prei.substring(0,1))[0];
}
//alert(imagenameidea);
img1 = document.createElement(mediais);
if (mediais == 'audio' || mediais == 'video') {
img1.type=mimeis;
}
img1.title=subthis.length;
subthis.push(imagenameidea);
if (mimeis.indexOf('im') == 0) {
img1.onload = function() { imgw=img1.width; imgh=img1.height; dvalue=dvalue.replace(subthis[eval('' + img1.title)], convertoBase64Image(img1).replace(/\+/g,'%20')); };
img1.src = imagenameidea;
}
} else {
//alert(imagenameidea);
if (inlineis == '') {
inlineis=imagenameidea; //'../' + imagenameidea.split('rjmprogramming.com.au/')[1];
} else {
inlineis+=',' + imagenameidea; //'../' + imagenameidea.split('rjmprogramming.com.au/')[1];
}
img1 = document.createElement(mediais);
if (mediais == 'audio' || mediais == 'video') {
img1.type=mimeis;
}
img1.title=subthis.length;
subthis.push(imagenameidea);
if (mimeis.indexOf('im') == 0) {
img1.onload = function() { imgw=img1.width; imgh=img1.height; dvalue=dvalue.replace(subthis[eval('' + img1.title)], "'" + convertoBase64Image(img1).replace(/\+/g,'%20') + "'"); };
img1.src = imagenameidea;
}
}
}
}
}
}
}
emailee=prompt("Enter email address to try to receive the HTML you have below (noting that Inline HTML Emails only work for very simple HTML, so to force email attachment start with an uppercase character then lowercase), that will get a subject 'Inline HTML Test'", emailee);
if (emailee == null) { emailee=''; }
if (emailee.indexOf('@') != -1) {
if ((emailee + ' ').substring(0,1).toUpperCase() == (emailee + ' ').substring(0,1) && (emailee + ' ').substring(1).substring(0,1).toLowerCase() == (emailee + ' ').substring(1).substring(0,1)) {
emailee=emailee; // ie. HTML attachment
} //else {
//zform.append('inline', '');
//}
setTimeout(andthen, 2000);
//zform.append('htmlis', dvalue);
//zhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
//zhr.onreadystatechange = showStuff;
//zhr.send(zform);
}
}
function andthen() {
zhr = new XMLHttpRequest();
zform=new FormData();
//if ((emailee + ' ').substring(0,1).toUpperCase() == (emailee + ' ').substring(0,1) && (emailee + ' ').substring(1).substring(0,1).toLowerCase() == (emailee + ' ').substring(1).substring(0,1)) {
// emailee=emailee; // ie. HTML attachment
//} else {
// zform.append('inline', '');
//}
//zform.append('to', emailee);
zform.append('to', emailee);
if ((emailee + ' ').substring(0,1).toUpperCase() == (emailee + ' ').substring(0,1) && (emailee + ' ').substring(1).substring(0,1).toLowerCase() == (emailee + ' ').substring(1).substring(0,1)) {
zform.append('subject', 'HTML Attachment Test');
zform.append('htmlis', dvaluesmall);
} else {
zform.append('subject', 'Inline HTML Test');
zform.append('inline', inlineis);
zform.append('htmlis', dvaluesmall); //dvalue);
}
zhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
zhr.onreadystatechange = showStuff;
zhr.send(zform);
inlineis='';
//alert(dvalue);
subthis=[];
}
function srcdocit() {
//alert(document.getElementById('htmlcontent').value);
document.getElementById('isrcdoc').style.display='block';
document.getElementById('isrcdoc').srcdoc=document.getElementById('htmlcontent').value;
location.href='#isrcdoc';
}
document.addEventListener('keyup', checkshortcut, false);
</script>
</head>
<body onload=" loadgame(); ajaxit(); " style='background-color:yellow;'>
<div id=dcookies_okay><input type=hidden id=cookies_okay value=''></input></div>
<table style='width:100%;background-color:orange;' border=8><tbody><tr><td><h1>Try Your Own HTML ... as <input onclick=emailit(); type=button value='Inline Email'></input> ... as <input onclick=srcdocit(); type=button value='Iframe Srcdoc'></input></h1>
<h3>RJM Programming - January, 2017</h3>
<span id='myspan' style='background-color:pink;'>Shortcut? <input type=checkbox id='sckit' onchange='fsckit(this,1);'></input></span>
<table style='height:500px;'><tbody><tr><td style='vertical-align:top;'>
<div style='height:60px;overflow:auto;-webkit-overflow-scrolling:touch;'><iframe src='./legend_via_map.htm' style='width:100%;height:60px;' scrolling='no' frameborder=0></iframe></div>
<form id='myform' action='./do_away_with_the_boring_bits.html' method='GET' onsubmit='return validateit(this);'>
HTML: <textarea cols=100 rows=17 type=text name=htmlcontent id=htmlcontent value=""></textarea><br>
<table><tbody><tr><td>
<input type=submit id=manage value='Try your HTML and Javascript and CSS Above'></input></td><td> <select id='selshortcuts'></select></td></tr></tbody></table>
<span id='spanshortcuts' style='display:none;'>Shortcuts: <input type=text name=shortcuts id=shortcuts value=></input></span>
<input type=hidden name=urlprefix id=urlprefix value=''></input>
</form>
</td><td style='height:100%;'>
<div id=dhtmlcontent style='height:100%;'><iframe src='about:blank' name='ihtmlcontent' id='ihtmlcontent' style='height:650px; background-color:lightblue;'></iframe></div>
<iframe src='about:blank' name='ihtmldelthis' id='ihtmldelthis' style='display:none;'></iframe>
<input type=hidden name=delthis id=delthis value=''></input>
</td></tr></tbody></table>
<iframe srcdoc='' id='isrcdoc' style='display:none;width:100%;height:900px;'></iframe>
</body>
</html>