{"id":44905,"date":"2019-05-09T03:01:26","date_gmt":"2019-05-08T17:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44905"},"modified":"2019-05-08T22:15:03","modified_gmt":"2019-05-08T12:15:03","slug":"wordpress-blog-collaborative-annotated-email-user-experience-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-collaborative-annotated-email-user-experience-tutorial\/","title":{"rendered":"WordPress Blog Collaborative Annotated Email User Experience Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Blog Collaborative Annotated Email User Experience Tutorial<\/p><\/div>\n

Did you try yesterday’s WordPress Blog Collaborative Annotated Email Tutorial<\/a> highlighting of text Annotated Email functionality? If you did, you might have found a “hair trigger” timed user experience. You had a very small amount of time to decide on any amendments “by hand” to your email.<\/p>\n

On this, did you notice how we relied on a Javascript prompt<\/a> window to garner an email address off the user? There is method in this “kludginess”. We wanted the highlighting not to be destroyed by a change of focus. The downside though, is that the whole time you spend answering contributes to any setTimeout<\/i><\/a> based timing we have going before we automatically make the highlighting functionality menu disappear. Today, we control that, waiting an extra 10 seconds or so after that for the user to start entering their own Annotated Email content, should they wish, and the HTML div contenteditable<\/a>=true is reminded by a new onchange<\/i> replenishment of the delay that the user is still writing … a bit like with SMSes and those blinking dots telling you the other SMSer is writing something (but not as cute here, looks wise, alas).<\/p>\n

Again, into the WordPress (changed PHP<\/a> rjmprogramming-multi-lookup.php<\/a>) plugin or header.php the changed (header.php<\/b>) code involves new Javascript (that dynamically creates HTML) as per …<\/p>\n


\nvar mpn='', eod='', aec='', withindiv=0<\/b>;
\n
\nfunction emaileeis(inideais) {
\n var presm='', postsm='';
\n if (inideais.indexOf(':') != -1) {
\n presm=inideais.split(':')[0] + ':';
\n postsm=inideais.replace(presm,'');
\n } else if (inideais.indexOf('?to=') != -1) {
\n presm=inideais.split('?to=')[0] + '?to=';
\n if (inideais.indexOf('&') != -1) {
\n postsm=inideais.replace(presm,'').replace(inideais.split('?to=')[1].split('&')[0],'');
\n }
\n } else if (inideais.indexOf('&') != -1) {
\n presm=inideais.split('&')[0] + '&';
\n postsm=inideais.replace(presm,'');
\n } else {
\n presm=inideais.split('?')[0];
\n postsm=inideais.replace(presm,'');
\n }
\n if (eod == '') {
\n if (inideais.indexOf('?to=') != -1) {
\n eod=inideais.split('?to=')[1].split('&')[0];
\n }
\n var pwithindiv=withindiv;
\n withindiv=9000;<\/b>
\n eod=prompt('Enter email address', eod);
\n if (pwithindiv == 0) {
\n withindiv=0.9999;
\n } else {
\n withindiv=pwithindiv;
\n }<\/b>
\n if (eod == null) {
\n eod='';
\n }
\n }
\n return presm + encodeURIComponent(eod) + postsm;
\n}
\n
\nfunction smsee(inideais) {
\n var presm='', postsm='';
\n if (inideais.indexOf(':') != -1) {
\n presm=inideais.split(':')[0] + ':';
\n }
\n if (inideais.indexOf('&') != -1) {
\n postsm='&' + inideais.split('&')[1];
\n }
\n if (mpn == '') {
\n if (inideais.indexOf(':') != -1) {
\n mpn=inideais.split(':')[1].split('&')[0];
\n }
\n var pwithindiv=withindiv;
\n withindiv=9000;<\/b>
\n mpn=prompt('Enter phone number for SMS (or Cancel to do it at the Messager app', mpn);
\n if (pwithindiv == 0) {
\n withindiv=0.9999;
\n } else {
\n withindiv=pwithindiv;
\n }<\/b>
\n if (mpn == null) {
\n mpn='';
\n }
\n }
\n return presm + mpn + postsm;
\n}
\n
\nfunction lookforhighlight() {
\n var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', opis='', fourhundred=300, isfx='0', otit='';
\n if (hight == ' ') {
\n setTimeout(lfhlater, 5000);
\n hight='';
\n xcbackc=cookieHHVal('linktoothers');
\n if (xcbackc != '') {
\n oharr=xcbackc.split('|');
\n }
\n }
\n if (('' + withindiv).indexOf('.') != -1) {
\n setTimeout(lookforhighlight, eval(('' + withindiv).split('.')[1]));
\n withindiv=eval(('' + withindiv).split('.')[0]);
\n return;
\n } else if (withindiv != 0) {
\n setTimeout(lookforhighlight, withindiv);
\n return;
\n } else {
\n setTimeout(lookforhighlight, usualdelay);
\n }<\/b>
\n var xsel=window.getSelection().toString();
\n if (xsel.length == 0) {
\n try {
\n xsel=document.selection.createRange().htmlText;
\n xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
\n xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
\n } catch(ertw) {
\n xsel='';
\n }
\n } else {
\n xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
\n xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
\n if (xsel != hight && xsel != '') {
\n oRange = window.getSelection().getRangeAt(0); \/\/get the text range
\n oRect = oRange.getBoundingClientRect();
\n s_top = ('' + oRect.top).replace('px','') + 'px';
\n s_left = ('' + oRect.left).replace('px','') + 'px';
\n if (s_top != '0px') {
\n fourhundred=eval('' + s_top.replace('px',''));
\n s_top='0px';
\n var dse='', dde='';
\n if (document.scrollingElement) {
\n if (document.scrollingElement.scrollTop) {
\n dse=('' + document.scrollingElement.scrollTop);
\n }
\n }
\n if (document.documentElement) {
\n if (document.documentElement.scrollTop) {
\n dde=('' + document.documentElement.scrollTop);
\n }
\n }
\n if (dse != '') {
\n fourhundred+=eval('' + dse.replace('px',''));
\n isfx='0';
\n } else if (dde != '') {
\n fourhundred+=eval('' + dde.replace('px',''));
\n isfx='0';
\n } else if (('' + window.scrollY) != '') {
\n fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
\n isfx='0';
\n } else if (('' + window.pageYOffset) != '') {
\n fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
\n isfx='0';
\n } else {
\n isfx=('' + document.body.scrollTop).replace('px','');
\n if (isfx.replace('0','') == '') {
\n isfx=('' + document.scrollingElement.scrollTop).replace('px','');
\n if (isfx.replace('0','') == '') {
\n isfx=('' + window.scrollY).replace('px','');
\n if (isfx.replace('0','') == '') {
\n isfx=('' + window.pageYOffset).replace('px','');
\n }
\n }
\n }
\n }
\n fourhundred+=100;
\n }
\n }
\n }
\n if (xsel != hight && xsel != '') {
\n hight=xsel;
\n if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
\n if (aec == '') {
\n aec=' 📧 <div id=daec contenteditable=true onblur=\"withindiv=0<\/b>;\" onchange=\"withindiv=9000;\"<\/b> onclick=\"withindiv=9000<\/b>; event.stopPropagation();\">  <\/div>';
\n } else if (document.getElementById('daec') && document.getElementById('b_hfloater_annotated_email')) {
\n aec=document.getElementById('b_hfloater_annotated_email').innerHTML;
\n }
\n if (aec.indexOf('<mark>' + hight + '<\/mark>') == -1) {
\n if ((' ' + aec).slice(-14).substring(0,1).replace('?','.').replace('!','.') == '.') {
\n aec=aec.replace('<\/div>', '   <mark>' + hight + '<\/mark><\/div>');
\n } else {
\n aec=aec.replace('<\/div>', ' <mark>' + hight + '<\/mark><\/div>');
\n }
\n }
\n if (document.getElementById('hfloater')) {
\n if (document.getElementById('hfloater').innerHTML == '') {
\n document.getElementById('hfloater').style.position='absolute';
\n document.getElementById('hfloater').style.top=s_top;
\n document.getElementById('hfloater').style.left=s_left;
\n document.getElementById('hfloater').style.zIndex='87';
\n document.getElementById('hfloater').style.backgroundColor='rgba(255,165,0,0.9)';
\n document.getElementById('hfloater').style.border='1px solid purple';
\n document.getElementById('hfloater').style.padding='2px 2px 2px 2px';
\n document.getElementById('hfloater').style.display='block';
\n document.getElementById('hfloater').innerHTML='<b>Wikipedia <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/wikipedia.org\/wiki\/Main_Page\" title=\"\/\/wikipedia.org\/wiki\/\" target=_blank onmouseover=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'_'\" + ');\" ontouchstart=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'_'\" + ');\" id=b_hfloater_wikipedia>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Google Translate <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/translate.google.com\" title=\"\/\/translate.google.com\/#view=home&op=translate&sl=auto&tl=en&text=\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(hight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(hight);\" id=b_hfloater_google_translate>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Free Dictionary <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.thefreedictionary.com\/\" title=\"\/\/www.thefreedictionary.com\/\" target=_blank onmouseover=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'+'\" + ');\" id=b_hfloater_free_dictionary>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Google Search <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.google.com\/\" title=\"\/\/www.google.com\/search?q=\" target=_blank onmouseover=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'+'\" + ');\" id=b_hfloater_google_search>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Tag Search <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.rjmprogramming.com.au\/ITblog\/\" title=\"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/\" target=_blank onmouseover=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'-'\" + ');\" id=b_hfloater_tag_search>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Category Search <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.rjmprogramming.com.au\/ITblog\/\" title=\"\/\/www.rjmprogramming.com.au\/ITblog\/category\/\" target=_blank onmouseover=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'-'\" + ');\" id=b_hfloater_category_search>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Tag First Word Search <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.rjmprogramming.com.au\/ITblog\/\" title=\"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/\" target=_blank onmouseover=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'-'\" + ').replace(' + \"'-','\/?wopenall='\" + ');\" ontouchstart=\"this.href=this.title + hight.replace(\/\\ \/g,' + \"'-'\" + ').replace(' + \"'-','\/?wopenall='\" + ');\" id=b_hfloater_tag_first_word_search>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Posting Title Search <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.rjmprogramming.com.au\/itblog\/match\/mapper.php\" title=\"\/\/www.rjmprogramming.com.au\/itblog\/match\/mapper.php?pm=\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(hight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(hight);\" id=b_hfloater_posting_title_search>' + hight + '<\/a><\/b><br>';
\n
\n document.getElementById('hfloater').innerHTML+='<b>Email <a class=\"hlclass\" style=\"inline-block;\" href=\"mailto:?subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28' + encodeURIComponent(document.URL) + '%29&body=\" title=\"mailto:?subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29&body=\" target=_blank onmouseover=\"this.href=emaileeis(this.title) + encodeURIComponent(hight);\" ontouchstart=\"this.href=emaileeis(this.title) + encodeURIComponent(hight);\" id=b_hfloater_email>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class=\"hlclass\" style=\"inline-block;\" href=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28' + encodeURIComponent(document.URL) + '%29%0a&body=\" title=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29%0a&body=\" target=aeciframe onmouseover=\"this.href=emaileeis(this.title).replace(this.title.slice(-6), encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)) + this.title.slice(-6)) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));\" ontouchstart=\"this.href=emaileeis(this.title).replace(this.title.slice(-6), encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)) + this.title.slice(-6)) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));\" id=b_hfloater_annotated_email>' + aec + '<\/a><\/b><iframe name=aeciframe style=display:none; src=#><\/iframe><br>';<\/b>
\n document.getElementById('hfloater').innerHTML+='<b>SMS <a class=\"hlclass\" style=\"inline-block;\" href=\"sms:&body=\" title=\"sms:&body=\" target=_blank onmouseover=\"this.href=smsee(this.title) + encodeURIComponent(hight);\" ontouchstart=\"this.href=smsee(this.title) + encodeURIComponent(hight);\" id=b_hfloater_sms>' + hight + '<\/a><\/b><br>';
\n
\n document.getElementById('hfloater').innerHTML+='<b>Navigate to Link About <a class=\"hlclass\" style=\"inline-block;text-decoration:underline;cursor:pointer;\" title=\" \" onclick=\"thisasearch(this.innerHTML,this);\" onmouseover=\"thisasearch(this.innerHTML,this);\" ontouchstart=\"thisasearch(this.innerHTML,this);\" id=b_hfloater_posting_a_search>' + hight + '<\/a><\/b><br>';
\n document.getElementById('hfloater').innerHTML+='<b>Display\/Copy Link About <a class=\"hlclass\" style=\"inline-block;text-decoration:underline;cursor:pointer;\" title=\" \" onclick=\"thisacopysearch(this.innerHTML,this);\" onmouseover=\"thisacopysearch(this.innerHTML,this);\" ontouchstart=\"thisacopysearch(this.innerHTML,this);\" id=b_hfloater_posting_a_copy_search>' + hight + '<\/a><\/b><br>';
\n if (oharr.length >= 1) {
\n for (var ioharr=0; ioharr<oharr.length; ioharr++) {
\n otit='Other Link ' + eval(1 + ioharr);
\n if (oharr[ioharr].indexOf('#') != -1) {
\n otit=oharr[ioharr].split('#')[1].trim();
\n }
\n if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
\n opis=hight.replace(\/\\ \/g,' + \\\"'-'\\\" + ');
\n document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\\\"inline-block;\\\" href=\\\"' + oharr[ioharr].split('#')[0].trim() + '\\\" title=\\\"' + oharr[ioharr].split('#')[0].trim() + '\\\" target=_blank onmouseover=\\\"this.href=this.title + hhopis(String.fromCharCode(45));\\\" ontouchstart=\\\"this.href=this.title + hhopis(String.fromCharCode(45));\\\" id=b_hfloater_' + xcookcnt + '>' + hight + '<\/a><\/b><br>';
\n } else if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
\n opis=hight.replace(\/\\ \/g,' + \\\"'+'\\\" + ');
\n document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\\\"inline-block;\\\" href=\\\"' + oharr[ioharr].split('#')[0].trim() + '\\\" title=\\\"' + oharr[ioharr].split('#')[0].trim() + '\\\" target=_blank onmouseover=\\\"this.href=this.title + hhopis(String.fromCharCode(43));\\\" ontouchstart=\\\"this.href=this.title + hhopis(String.fromCharCode(43));\\\" id=b_hfloater_' + xcookcnt + '>' + hight + '<\/a><\/b><br>';
\n } else {
\n document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\\\"inline-block;\\\" href=\\\"' + oharr[ioharr].split('#')[0].trim() + '\\\" title=\\\"' + oharr[ioharr].split('#')[0].trim() + '\\\" target=_blank onmouseover=\\\"this.href=this.title + encodeURIComponent(hight);\\\" ontouchstart=\\\"this.href=this.title + encodeURIComponent(hight);\\\" id=b_hfloater_' + xcookcnt + '>' + hight + '<\/a><\/b><br>';
\n }
\n xcookcnt++;
\n }
\n }
\n document.getElementById('hfloater').innerHTML+='<b><input title=\\\"Add your own into HTTP Cookies\\\" type=button onclick=cookiePutHHVal(xcookblank); value=+><\/input> <input title=\\\"Remove all HTTP Cookie URLs\\\" type=button onclick=cookiePutHHVal(xcookblank.trim()); value=-><\/input><\/b><br>';
\n } else {
\n document.getElementById('b_hfloater_wikipedia').innerHTML=hight;
\n document.getElementById('b_hfloater_google_translate').innerHTML=hight;
\n document.getElementById('b_hfloater_free_dictionary').innerHTML=hight;
\n document.getElementById('b_hfloater_google_search').innerHTML=hight;
\n document.getElementById('b_hfloater_tag_search').innerHTML=hight;
\n document.getElementById('b_hfloater_category_search').innerHTML=hight;
\n document.getElementById('b_hfloater_tag_first_word_search').innerHTML=hight;
\n document.getElementById('b_hfloater_posting_title_search').innerHTML=hight;
\n
\n document.getElementById('b_hfloater_email').innerHTML=hight;
\n document.getElementById('b_hfloater_annotated_email').innerHTML=aec;
\n document.getElementById('b_hfloater_sms').innerHTML=hight;
\n
\n document.getElementById('b_hfloater_posting_a_search').innerHTML=hight;
\n document.getElementById('b_hfloater_posting_a_copy_search').innerHTML=hight;
\n
\n if (xcookcnt > 0) {
\n for (var icook=0; icook<xcookcnt; icook++) {
\n document.getElementById('b_hfloater_' + icook).innerHTML=hight;
\n }
\n }
\n document.getElementById('hfloater').style.top=s_top;
\n document.getElementById('hfloater').style.left=s_left;
\n document.getElementById('hfloater').style.display='block';
\n }
\n }
\n } else if (xsel == '') {
\n if (document.getElementById('hfloater')) {
\n document.getElementById('hfloater').style.display='none';
\n }
\n hight='';
\n }
\n}
\n<\/code><\/p>\n

Some email clients baulk at downloading HTML attachments, so the other change today is to append the wording of the email’s inherent HTML to the email subject, so if an emailee is unlucky in this way, they can still get “second prize” … but no cigar!<\/p>\n

\n

Previous relevant WordPress Blog Collaborative Annotated Email Tutorial<\/a> is shown below.<\/p>\n

\"WordPress<\/a>

WordPress Blog Collaborative Annotated Email Tutorial<\/p><\/div>\n

Further to WordPress Plugin Primer Tutorial<\/a> of recent times, we’re adding to that “highlighting of blog text” (dynamic menu) the options …<\/p>\n