<!doctype html>
<html>
<head>
<title>Do It Yourself HTML Editor - RJM Programming - January, 2017</title>
<style>
input[type="submit"]:hover { background-color: green; }
</style>
<script type='text/javascript' src='../../../../cookie_get.js'></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'); " + 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;
function ourdecodeURIComponent(inf) {
return decodeURIComponent(inf).replace(/\+/g,' ');
}
function ourcontains(ourarr,ourwhat) {
var retval=false;
for (var i=0; i<ourarr.length; i++) {
if (ourarr[i] == ourwhat) return true;
}
return retval;
}
function loadgame() {
var prefix="", wdth="250px;";
document.getElementById('myform').action=document.URL.split('?')[0].split('#')[0];
if (htmlcontent != defh) {
//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","head").split("<head>")[1];
y.body.innerHTML = htmlcontent.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;
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='<option value=>Optionally select HTML element below ...</option>';
prefix+='<option value="<title></title>"><title></title> (have cursor in header)</option>';
prefix+='<option value="<meta />"><meta /> (have cursor in header)</option>';
prefix+='<option value="<link type=text/css href=></link>"><link type=text/css href=></link> (have cursor in header)</option>';
prefix+='<option value="<scr' + 'ipt type=text/javascript src=></scr' + 'ipt>"><script type=text/javascript src=></script> (have cursor in header)</option>';
prefix+='<option value="<br>"><br> (from here on have cursor with body)</option>';
prefix+='<option value="<hr>"><hr></option>';
prefix+='<option value="<b></b>"><b></b></option>';
prefix+='<option value="<i></i>"><i></i></option>';
for (var jj=0; jj<extenders.length; jj++) {
selis='<SELECT style="background-color:pink;width:' + wdth + '" onchange="placeatcursor(this.value);">' + prefix + '</SELECT>';
wdth='60px;';
if (jj<eval(-1 + extenders.length)) prefix='<option value=>+ ' + extenders[eval(1 + jj)] + '</option>';
nexttemplatehelp=templatehelp;
for (var kk=0; kk<types.length; kk++) {
selis=selis.replace('</SELECT>','<option value="' + nexttemplatehelp + '">' + nexttemplatehelp.replace(/</g,'<').replace(/>/g,'>') + '</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)] + '></');
}
}
function placeatcursor(what) {
var kpos, lwhat;
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'));
document.getElementById('htmlcontent').value = document.getElementById('htmlcontent').value.replace(document.getElementById('htmlcontent').value.substring(0,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;
}
</script>
</head>
<body onload=" loadgame(); " 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</h1>
<h3>RJM Programming - January, 2017</h3>
<span id='myspan' style='background-color:pink;'></span>
<table style='height:500px;'><tbody><tr><td>
<form id='myform' action='./do_away_with_the_boring_bits.html' method='GET'>
HTML: <textarea cols=100 rows=17 type=text name=htmlcontent id=htmlcontent value=""></textarea><br>
<input type=hidden name=b2 value=></input>
<input type=submit id=manage value='Try your HTML and Javascript and CSS Above'></input><br><br><br>
</form>
</td><td style='height:100%;'>
<div id=dhtmlcontent style='height:100%;'><iframe src='about:blank' id='ihtmlcontent' style='height:400px; background-color:lightblue;'></iframe></div>
</td></tr></tbody></table>
</body>
</html>