<html>
<head>
<meta charset="UTF-8">
<link href="//afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<title>Fairy Story Paste Helper - RJM Programming - March, 2018</title>

<script type='text/javascript'>

var notatend=false, clicked=false;
var prefix="", nothing="", cnotatend="", cnt=0;

function pcae() {
if (document.getElementById("storyboard")) {
if (document.getElementById('mytah')) {
if (document.getElementById('mytah').value != '') {
document.getElementById('mytah').value='';
//placeCaretAtEnd(document.getElementById("storyboard"));
if (document.getElementById('myprefix')) {
prefix=document.getElementById('myprefix').value;
}
if (document.getElementById('mywith')) {
cnotatend=document.getElementById('mywith').value;
}
if (document.getElementById('mynae')) {
if (document.getElementById('mynae').value != '') {
notatend=true;
document.getElementById('mynae').value='';
}
}
if (prefix != "" || notatend == true) clicked=false;
if (prefix == "") {
placeCaret(document.getElementById("storyboard"), notatend);
} else if (cnotatend != "") {
cnt=1;
placeCaret(document.getElementById("storyboard"), cnotatend);
cnotatend="";
} else {
cnt++;
if (cnt == 3) {
prefix="";
placeCaret(document.getElementById("storyboard"), notatend);
}
}
notatend=false;
} else {
fixfirefox();
}
}
}
setTimeout(pcae,3000);
}

function placeCaret(el, isStart) { // thanks to https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
if (!clicked || 1 == 1) {
if (document.getElementById('myprefix')) {
prefix=document.getElementById('myprefix').value;
document.getElementById('myprefix').value="";
}
if (document.getElementById('mywith')) {
cnotatend=document.getElementById('mywith').value;
if (cnotatend != "" && prefix != "") isStart=cnotatend;
document.getElementById('mywith').value="";
}
if (prefix != "") {
if (el.innerHTML.indexOf(prefix) != -1) {
el.innerHTML=el.innerHTML.replace(prefix, prefix + isStart);
prefix+=isStart;
} else if (el.innerHTML.replace(/ /g,' ').indexOf(prefix.replace(/ /g,' ')) != -1) {
el.innerHTML=el.innerHTML.replace(/ /g,' ').replace(prefix.replace(/ /g,' '), prefix.replace(/ /g,' ') + isStart);
prefix+=isStart;
} else {
var words=prefix.replace(/ /g,' ').split(' ');
var firstgo=prefix.replace(/ /g,' '); //.replace(/ /g,' ').replace(words[0] + ' ',' ');
var origfg=prefix;
for (var iij=0; iij<words.length; iij++) {
if (origfg == prefix) {
firstgo=firstgo.replace(/ /g,' ').replace(words[iij] + ' ',' ');
//alert('|' + firstgo + '| ... ' + el.innerHTML.replace(/ /g,' ').indexOf(firstgo) + ' vs |' + el.innerHTML.replace(/ /g,' ') + '|');
if (el.innerHTML.replace(/ /g,' ').indexOf(firstgo) != -1) {
if (firstgo.trim() != '') {
el.innerHTML=el.innerHTML.replace(/ /g,' ').replace(firstgo.replace(/ /g,' '), firstgo.replace(/ /g,' ') + isStart);
prefix=firstgo.replace(/ /g,' ');
}
} else if (el.innerHTML.replace(/ /g,' ').indexOf(firstgo.trim()) != -1) {
if (firstgo.trim() != '') {
el.innerHTML=el.innerHTML.replace(/ /g,' ').replace(firstgo.replace(/ /g,' ').trim(), firstgo.replace(/ /g,' ').trim() + isStart);
prefix=firstgo.replace(/ /g,' ').trim();
}
}
}
}
prefix+=isStart;
}
} else if (1 == 2 && navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
el=el;
} else {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(isStart);
clicked=false;
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(isStart);
clicked=false;
textRange.select();
}
}
}
clicked=false;
}

function fixfirefox() {

if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
if (document.getElementById("storyboard").innerHTML.indexOf('<br>') != -1) {
document.getElementById("storyboard").innerHTML=document.getElementById("storyboard").innerHTML.replace(/\ \;\ \;\<br\>/g,' <BR>').replace(/\<br\>\ \;\ \;/g,' <BR>').replace(/\<br\>\<br\>/g,' <BR>').replace(/\<br\>\ \;\<br\>/g,' <BR>').replace(/\ \;\<br\>/g,' ').replace(/\ \<br\>/g,' ').replace(/\<br\>/g,'');
}
}

}

function getCaretPositionString() { // https://stackoverflow.com/questions/48946330/angular5-get-cursor-position-in-a-contenteditable-div-using-innerhtml-and-pipe
var element = document.querySelector('#storyboard');
var range = window.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
document.getElementById('myprefix').value=preCaretRange.toString();
//alert('|' + ('' + preCaretRange.toString()) + '|');
if (('' + preCaretRange.toString()).length == 0) { document.title='here'; notatend=true; document.getElementById('mynae').value='true'; } else { notatend=false; document.getElementById('mynae').value=''; }
return ('' + preCaretRange.toString()); //.length;
}

function placeCaretAtEnd(el) { // thanks to https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}

function handleEvent(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1 && !notatend) {
document.getElementById("storyboard").innerHTML+='<br>';
}
}
//keepactive();
}
</script>
</head>
<body>
<script type='text/javascript'>

function fit() {
var ip=0;
if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
ip=0;
} else {
document.getElementById('storyboard').focus();
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('mytah').value='x';
}
}

function keepactive() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('mytah').value=document.getElementById('mytah').value;
} else {
document.getElementById('mytah').value='x';
document.getElementById('mynae').value='';
document.getElementById('myprefix').value='';
prefix='';
notatend=false;
}
}

function modeofuse() {
var wtw='';
var bits=document.URL.split('?emoji=');
if (document.URL.indexOf('?') == -1) {
wtw+='<h1>Fairy Story Paste Helper<a target="_self" href="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php" title="Home">.</a></h1>' + String.fromCharCode(13);
wtw+='<h3>RJM Programming - March, 2018</h3>' + String.fromCharCode(13);
if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
wtw+='<h4>Your Fairy Story follows ... good luck, and please double up on your Enter keys, optionally clicking helper links for Emoji placement ...</h4>' + String.fromCharCode(13);
} else {
wtw+='<h4>Your Fairy Story follows ... good luck, optionally clicking helper links for Emoji placement ...</h4>' + String.fromCharCode(13);
}
wtw+='' + String.fromCharCode(13);
wtw+='<div onkeydown="keepactive();" onclick="prefix=nothing; clicked=true; prefix=getCaretPositionString(); " contenteditable="true" style="background-color:yellow;width:98%;height:200px;border:10px groove red;padding:3px 3px 3px 3px;" id="storyboard">Once upon a time </div>' + String.fromCharCode(13);
wtw+='' + String.fromCharCode(13);
wtw+='<details open><summary></summary><table style="width:100%;height:260px;" border=2><tr>' + String.fromCharCode(13);
wtw+='<td style="width:48%;background-color:pink;">' + String.fromCharCode(13);
wtw+='<iframe id="fsac1" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=skull%2Cghost%2Calien%2Cimp%2Cangel%2Cprincess%2Ccrystal_ball%2Cjapanese_ogre%2Cspace_invader%2Cjapanese_goblin&outans=Skull%2CGhost%2CAlien%2CAngry+Face+with+Horns%2CBaby+Angel%2CPriness%2CCrystal+Ball%2COgre%2CAlien+Monster%2CGoblin&heading=Fairy+Story+Characters&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=2033817289"></iframe>' + String.fromCharCode(13);
wtw+='</td><td style="width:48%;background-color:orange;">' + String.fromCharCode(13);
wtw+='<iframe id="fsac2" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=man&outans=&heading=Fairy+Story+People&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=311259562"></iframe>' + String.fromCharCode(13);
wtw+='</td></tr></table></details><details open><summary></summary><table style="width:100%;height:260px;" border=2><tr><td style="width:48%;background-color:cyan;">' + String.fromCharCode(13);
wtw+='<iframe id="fsac3" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=clock&outans=&heading=Fairy+Story+Times&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=1390790034"></iframe>' + String.fromCharCode(13);
wtw+='</td><td style="width:48%;background-color:magenta;">' + String.fromCharCode(13);
wtw+='<iframe id="fsac4" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=automobile%2Cvehicle%2Ctractor%2Cambulance%2Cbicycle%2Cpolice%2Cconstruction%2Ctraffic%2Ctruck%2Ctram%2Cbus%2Chelicopter%2Cboat%2Cplane%2C&outans=&heading=Fairy+Story+Transport&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=285342407"></iframe>' + String.fromCharCode(13);
wtw+='</td></tr></table></details>' + String.fromCharCode(13);
wtw+='' + String.fromCharCode(13);
wtw+='<textarea style="display:none;" rows=1 cols=120 id="mytah" value=""></textarea>' + String.fromCharCode(13);
wtw+='<textarea style="display:none;" rows=1 cols=120 id="myprefix" value=""></textarea>' + String.fromCharCode(13);
wtw+='<textarea style="display:none;" rows=1 cols=120 id="mywith" value=""></textarea>' + String.fromCharCode(13);
wtw+='<textarea style="display:none;" rows=1 cols=120 id="mynae" value=""></textarea>' + String.fromCharCode(13);
document.write(wtw);
setTimeout(fit,2000);
pcae();
} else if (bits.length == 2) {
var rest="";
if ((decodeURIComponent(bits[1]) + " ").substring(0,1) == "/") {
rest=decodeURIComponent(bits[1]).substring(1).split('&')[0].split('#')[0].split('<')[0];
} else {
rest=decodeURIComponent(bits[1]).split('&')[0].split('#')[0].split('<')[0];
}
if (decodeURIComponent(bits[1]).indexOf('<') != -1) {
if (top.document.getElementById('storyboard')) {
if (top.document.getElementById('myprefix').value != '') {
clicked=false;
cnotatend=decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + ' ';
top.document.getElementById('mywith').value=cnotatend;
//placeCaret(top.document.getElementById('storyboard'),decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + ' ');
} else if (top.document.getElementById('mynae').value != '') {
top.document.getElementById('storyboard').innerHTML=decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + ' ' + top.document.getElementById('storyboard').innerHTML;
} else {
top.document.getElementById('storyboard').innerHTML+=decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + ' ';
}
if (top.document.getElementById('mytah')) top.document.getElementById('mytah').value='x';
//placeCaretAtEnd(top.document.getElementById('storyboard'));
}
} else if (top.document.getElementById('storyboard')) {
if (top.document.getElementById('myprefix').value != '') {
clicked=false;
cnotatend='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i> ';
top.document.getElementById('mywith').value=cnotatend;
//placeCaret(top.document.getElementById('storyboard'),'<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i> ');
} else if (top.document.getElementById('mynae').value != '') {
top.document.getElementById('storyboard').innerHTML='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i> ' + top.document.getElementById('storyboard').innerHTML;
} else {
top.document.getElementById('storyboard').innerHTML+='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i> ';
}
if (top.document.getElementById('mytah')) top.document.getElementById('mytah').value='x';
//placeCaretAtEnd(top.document.getElementById('storyboard'));
}
}
}

modeofuse();
</script>



</body>
</html>