Thinking on yesterday’s Pandoc on AlmaLinux Conversion Multiple Tutorial progress with our public facing Pandoc interfacing inhouse PHP Document Conversion web application we thought it might be good to have a day where we think about what my Under 7’s coach used to call …
Oompha
… and we went forward on this combining several of our favourite web work concepts, they being …
- emojis
- SVG
- background images
- text rotation
- colour
- opacity
- text shadow
… and, let’s be honest, it’s usually not one of our favourite, but useful today adding to the CSS ideas above …
background-repeat: repeat;
Then we applied CSS …
<?php echo ”
<style>
.docx {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>docx</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.doc {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>doc</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.html {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>html</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.odt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>odt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.pdf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>pdf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.rtfd {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>rtfd</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.rtf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>rtf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.txt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>txt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ydocx {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>docx</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ydoc {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>doc</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yhtml {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>html</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yodt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>odt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ypdf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>pdf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yrtfd {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>rtfd</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yrtf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>rtf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ytxt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>txt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
</style>
“; ?>
… that worked on the input files table cell background and classes starting with a “y” on output document format submit button background. Then for continuity we wrote Javascript from the parent non-PDF processing to style the called (the tweaked php_calls_pdfimages.php) PDF processing in a remote control style (iframe onload event Javascript function style of approach (which click of link below can have you styling the code below)) …
<?php echo ”
var newouts=['dopdf','dovideo','doag','dohtml','doxml','doexcel','doword','dopowerpoint'];
var newouws=['image', 'video','agif', 'html', 'xml', 'xlsx', 'docx', 'pptx'];
function inform(iois) {
if (iois) {
inaconto = (iois.contentWindow || iois.contentDocument);
if (inaconto != null) {
if (inaconto.document) { inaconto = inaconto.document; }
if (inaconto.body != null) {
var spansare=inaconto.getElementsByTagName('span');
for (var ijkh=0; ijkh<spansare.length; ijkh++) {
if (spansare[ijkh].outerHTML.indexOf(' ondblclick=') != -1 && spansare[ijkh].outerHTML.indexOf(' onclick=') == -1) {
if (spansare[ijkh].outerHTML.indexOf('install=') != -1) {
spansare[ijkh].setAttribute('data-name', spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0]);
if (spansare[ijkh].getAttribute('data-name') == 'pdfimages') {
spansare[ijkh].title+=' Click for Pdfimages information';
spansare[ijkh].onclick=function(event){ window.open('//www.xpdfreader.com/pdfimages-man.html', '_blank', 'top=150,left=150,height=500,width=500'); };
} else {
//spansare[ijkh].title+=' Click for ' + event.target.getAttribute('data-name').substring(0,1).toUpperCase() + event.target.getAttribute('data-name').substring(1).toLowerCase() + ' information';
spansare[ijkh].title+='. Click for ' + spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0].substring(0,1).toUpperCase() + spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0].substring(1).toLowerCase() + ' information';
spansare[ijkh].onclick=function(event){ window.open('//www.' + event.target.getAttribute('data-name') + '.org', '_blank', 'top=150,left=150,height=500,width=500'); };
}
//alert(spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0]);
}
}
}
var stys=document.getElementsByTagName('style');
var stmore=''. txis='', ky=0, siz='';
for (var jsy=0; jsy<stys.length; jsy++) {
stmore='';
if (('' + stys[jsy].innerHTML).indexOf('<svg') != -1) {
if (('' + stys[jsy].innerHTML.split('}')[0]).indexOf('<svg') != -1 && ('' + stys[jsy].innerHTML.split('}')[0]).indexOf('</text></svg>') != -1) {
txis='>' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + '</text>';
//alert('Try to find ' + '.y' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + ' {');
if (('' + stys[jsy].innerHTML).indexOf('.y' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + ' {') != -1) {
siv='.y' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + ' {';
for (ky=0; ky<newouts.length; ky++) {
stmore+=String.fromCharCode(10) + ' .y' + newouts[ky] + ' { ' + stys[jsy].innerHTML.split(siv)[1].split('}')[0].replace(txis, '>' + newouws[ky] + '</text>') + ' } ' + String.fromCharCode(10);
}
} else {
for (ky=0; ky<newouts.length; ky++) {
stmore+=String.fromCharCode(10) + ' .y' + newouts[ky] + ' { ' + stys[jsy].innerHTML.split('{')[1].split('}')[0].replace(txis, '>' + newouws[ky] + '</text>') + ' } ' + String.fromCharCode(10);
}
}
}
inaconto.body.innerHTML+='<style> ' + stys[jsy].innerHTML.replace(/lightgreen/g,'transparent').replace(/yellow/g,'transparent').replace(/blue/g,'orange').replace(/0\.6/g,'0.9') + stmore.replace(/lightgreen/g,'transparent').replace(/yellow/g,'transparent').replace(/blue/g,'orange').replace(/0\.6/g,'0.9') + ' </style>';
if (inaconto.getElementById('thewords')) {
if (('' + inaconto.getElementById('thewords').outerHTML).indexOf(' class=') == -1) {
inaconto.getElementById('thewords').className='pdf';
inaconto.getElementById('thewords').style.textShadow='-2px 2px 2px #ff2d95';
}
}
if (inaconto.getElementById('mysbut')) {
if (('' + inaconto.getElementById('mysbut').outerHTML).indexOf(' class=') == -1) {
inaconto.getElementById('mysbut').className='ydopdf';
inaconto.getElementById('mysbut').style.textShadow='-1px 1px 1px #ff2d95';
setInterval(inacheck, 4000);
}
}
}
}
}
}
}
}
function inacheck() {
var xnewouts=\",'dopdf','dovideo','doag','dohtml','doxml','doexcel','doword','dopowerpoint',\";
if (inaconto) {
var csofar='', xx='';
var cbsare=inaconto.getElementsByTagName('input');
//document.title='count ' + xnewouts + ' is ' + cbsare.length;
for (var icb=0; icb<cbsare.length; icb++) {
if (('' + cbsare[icb].type) == 'checkbox') {
if (cbsare[icb].checked) {
if (('' + cbsare[icb].id) != '') {
//xx+=' ' + '' + cbsare[icb].id;
if (xnewouts.replace(/\'/g,'').indexOf(',' + cbsare[icb].id + ',') != -1) {
//xx+='=' + '' + cbsare[icb].id;
if (csofar == '') {
csofar='y' + cbsare[icb].id;
} else {
csofar+=' y' + cbsare[icb].id;
}
}
}
}
}
}
//document.title='count is ' + cbsare.length + ' ' + xx + ' and csofar=' + csofar;
if (csofar != '' && csofar != ('' + inaconto.getElementById('mysbut').className)) {
inaconto.getElementById('mysbut').className=csofar;
}
}
}
“; ?>
… in our changed for multiple input file selections macos_textutil_convert.php PHP web application you can also try below.
Previous relevant Pandoc on AlmaLinux Conversion Multiple Tutorial is shown below.
The “theme word” of today’s blog posting adding to yesterday’s Pandoc on AlmaLinux Conversion Sharing Tutorial is …
multiple
… in the sense of …
- allowing for multiple sharing conduits whether they be email and/or SMS recipients
- allowing for multiple browsed for input file selections which involved a tweaked client_browsing.htm local file browsing helperer outerer
… in terms of our public facing Pandoc interfacing inhouse PHP Document Conversion web application. But, did we mention, downloading to a local Apache/PHP/MySql web server such as MAMP is a good alternative environment approach, that is?
Also, we’ve added to the PDF (output, that is) format smarts by filling in fields of that accompanying PDF Conversion web application we introduced yesterday, if the user selects to output to PDF, and follows through on this, in our changed for multiple input file selections macos_textutil_convert.php PHP web application you can also try below.
Did you know?
You may have noticed a few uses for hashtagging in this project …
- used extensively for email (where it appears to us to be of more practical use in so far as saved email links can be clicked much later to reconstruct output files … that is) and SMS link URLs
- used to help populate input data items when multiple browsed for files are selected and new popup windows need that help
- navigating from non-PDF parts of the webpage to PDF parts … more your traditional use of hashtags … #that is
Just note, though, it could be that the web browser cache is not your friend here, and you may want a PHP $_GET (ie. ? delimited) argument with some randomosity to accompany any “lonely hashtags” out there!
And just before we go …
var mylocationhash='';
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,'').trim() == '') { // sometimes it's because ...
if (('' + document.URL).indexOf('#') != -1) {
if (('' + document.URL).split('#')[1].trim() != '') {
mylocationhash=decodeURIComponent(('' + document.URL).split('#')[1]); // your hashtagging is contained in document.URL ...
}
}
} else {
mylocationhash=decodeURIComponent(('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,'')); // versus it existing in location.hash
}
Previous relevant Pandoc on AlmaLinux Conversion Guises Tutorial is shown below.
It pans out yesterday’s Pandoc on AlmaLinux Conversions Primer Tutorial revisit start to our …
Pandoc document conversion
… interfacing PHP web application involves more than a two day job. Today, before any PDF input or any new format thinking, we took an interest in the way a user may want to use the output formats …
- html
- txt … which Pandoc knows as plain
… as we found “talents” for each, those being …
- html … is better when there are UTF-8 characters involved in the converted data
- txt … which Pandoc knows as plain … is useful in a pair of guises …
- with line feeds
- without line feeds
… depending on what use the user sees with this data, and because we want to restrict the user to internal use only data displays, we wanted to have a means by which these three “guises” were available to the user in an HTML div element (which is more flexible than a textarea element) to serve these purposes, as well as popup window HTML presentations where those UTF-8 characters can be more easily controlled.
The day gets quickly used up with issues like this, we find, regarding the changed macos_textutil_convert.php PHP web application you can also try below.
Previous relevant Pandoc on AlmaLinux Conversions Primer Tutorial is shown below.
Yesterday’s Word to HTML to CSV Delimitation Primer Tutorial offered a timely reminder that not only …
- LibreOffice and Microsoft Office software applications offer exports of document formats to HTML … but, also, open source gives us …
- (what is now possible to offer in a public sense because of the recent AlmaLinux installation (you can read more about at Pandoc Install and Public Face Tutorial) of) Pandoc command line application we can use to convert input document formats such as *.doc* and *.html and *.txt to others … and down the track …
- tomorrow’s job can involve the interfacing of another inhouse “open source using” web application so that input *.pdf is possible here too
For security purposes we restrict where output files end up to …
/tmp/
… as you might surmise would be a wise move. The user ends up relying on the changed macos_textutil_convert.php PHP web application itself, that way, to display the outputted data (created via command line Pandoc commands performed on the RJM Programming AlmaLinux web server via PHP exec calls) for them.
In making this happen, exporting to PDF, we found that we additionally had to install to the AlmaLinux web server …
dnf install texlive
… the best “heads up” for this after reading the Pandoc error message being this useful webpage, thanks.
Previous relevant Word to HTML to CSV Delimitation Primer Tutorial is shown below.
The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …
- Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
- (any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
- PHP … is very good at the delimiter processing bits that allow the programmer be useful …
- converting … the data into other guises, the one that interested us being …
- CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts
… and to do useful delimiter work in PHP you need to know, or suss out, “what happens”, or evidence of that … think hex dumps (where $dr is a PHP variable containing an HTML file record) …
<?php
echo bin2hex($dr) . "\n";
// ... gave, in our case, output such as ...
// c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020546f74616c207c20c2a020c2a02036302c30333220c2a020c2a020c2a03130302e3030
?>
And so we line up all the useful contributors …
- CP3O
- C2A0
- R2D2
- … … …
Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!
Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …
Non-breaking space
… scenario programmers of HTML will know can be those …
… HTML entities in your webpage content. Well, now, at least to us, that all makes sense. But, for our job, that could be the tip of the “UTF-8 headache” situation! We know we’re only interested in ascii data characters for the conversion job we are trying to do. Is there a way to simplify this “middleperson” HTML data content? Well, this other useful link … got us to use …
<?php
$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);
?>
… helped us with …
- sanity
- simplification
… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …
- input Word report … we are calling from_word_to_html.html … say …
- containing spreadsheetable data …
- we wanted to extract into …
- individual CSV files … ready to …
- open as useful spreadsheets … and perhaps onto some chart production …
- processing via command line command …
php dostuff.php
… where that PHP is (very informally) … - dostuff.php
… in case these ideas interest you?!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
WordPress Blog Comments URL Right Click Popup Check Tutorial
WordPress Blog Comments URL Right Click Popup Check Tutorial
In the past we have only mildly changed the administration section of our TwentyTen themed WordPress.org blog (you are currently reading) here at RJM Programming, and some of that involved new WordPress plugins, as you can read a bit about with WordPress Blog Data URI in Post Plugin Tutorial.
We maintain that blog within an “admin” part of the WordPress blog, and any changes we’d put in a “des
sert island wish list” usually just absorb and move on, but we thought we’d improve on …WordPress comment moderation
… by allowing myself (well, thanks awfully, I don’t really know what to say) the chance to …
… because, even if we wanted to argue with the great Akismet (we use and are very happy with around here) calling it spam, one of the steps we’d want to investigate would be to rule out a potential “broken link”, and this is a way to check for that.
Now, what we discovered marrying “a wish” with “an action plan” was that …
… with our action plan moving to “deployment” via PHP (writes Javascript) admin-header.php modified code …
<?php
<script type="text/javascript">
document.body.className = document.body.className.replace('no-js','js');
setTimeout(function(){
if (document.body.innerHTML.indexOf('Comments</h1>') != -1) {
var als=document.getElementsByTagName('a');
for (var ials=0; ials<als.length; ials++) {
if (('' + als[ials].href).indexOf('http') == 0 && ('' + als[ials].href).replace('wordpress.org','rjmprogramming.com.au').indexOf('rjmprogramming.com.au') == -1) {
als[ials].oncontextmenu=function(evt){ window.open(evt.target.href, '_blank', 'left=' + eval(-500 + eval('' + screen.width)) + ',top=0,width=500,height=200'); };
}
}
}
}, 6000);
</script>
?>
Pretty straightforward really, and perhaps of interest to some WordPress.org comment moderators out there!
Previous relevant WordPress Blog Data URI in Post Plugin Tutorial is shown below.
WordPress Blog Data URI in Post Plugin Tutorial
Today, we’ve got another WordPress plugin to suit the TwentyTen themed blog you are reading, adding onto those described at WordPress Blog Collaborative Annotated Email FormData Post Tutorial.
This plugin suits the Content Editor creating the posts in the administration end of the WordPress TwentyTen themed blog, when they desire to add a data URI, rather than an absolute URL or relative URL (which would probably involve an upload). To use data URIs will make your blog posts independent of web server file arrangements, but if you are looking for this to save (web server) diskspace, this might be a mute point. The diskspace could still be used up by the MySql database storing the data URI in its base64 encoding.
What does our PHP plugin call on to do its
thangthing?And so we have for you today rjmprogramming-data-uri-helper.php PHP source code that goes into this plugin should you want to write your own version for a theme that isn’t the WordPress TwentyTen theme (looking for those TwentyTen “id”s and “className”s as changepoints), and/or view us using it with today’s animated GIF presentation.
Previous relevant WordPress Blog Collaborative Annotated Email FormData Post Tutorial is shown below.
WordPress Blog Collaborative Annotated Email FormData Post Tutorial
Yesterday’s WordPress Blog Collaborative Annotated Email User Experience Tutorial helped with practicalities regarding user experience with this WordPress Blog highlighting of text accumulated into the body (as HTML attachment) and subject (as text) of an Annotated Email form of collaborative communication.
The “subject” extension here makes it all the more important to try to look out for long email URLs that will exceed the web server limit here. When too long, that …
… and today we do not write out any discrete HTML form element to do this (when required), but instead resort to the wonderfully powerful combination of …
… to be used by the new dynamic thinking Javascript function as below …
function iftoolongpost(prefixu, restsub, restu) {
var prefixrest=prefixu.replace('&body=', encodeURIComponent(restsub) + '&body=') + restu;
if ((prefixrest).length > 900) {
// dynamic form
var xhr = new XMLHttpRequest();
var form=new FormData();
form.append('to', decodeURIComponent(prefixrest.split('to=')[1].split('&')[0]));
form.append('subject', decodeURIComponent(prefixrest.split('subject=')[1].split('&')[0]));
form.append('body', decodeURIComponent(prefixrest.split('body=')[1].split('&')[0]));
xhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
xhr.send(form);
// end of dynamic form
location.href='#hfloater';
} else {
document.getElementById('aeciframe').src=prefixrest;
}
}
… called in that different calling arrangement as per …
document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class="hlclass" style="inline-block;cursor:pointer;text-decoration:none;" onclick="iftoolongpost(this.title, encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)), encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60)))));" data-href="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28' + encodeURIComponent(document.URL) + '%29%0a&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29%0a&body=" target=aeciframe onmouseover="this.title=emaileeis(this.title);" ontouchstart="this.title=emaileeis(this.title);" id=b_hfloater_annotated_email>' + aec + '</a></b><iframe id=aeciframe name=aeciframe style=display:none; src=#></iframe><br>';
… featuring in changed PHP rjmprogramming-multi-lookup.php plugin and/or changed TwentyTen theme header.php file.
Previous relevant WordPress Blog Collaborative Annotated Email User Experience Tutorial is shown below.
WordPress Blog Collaborative Annotated Email User Experience Tutorial
Did you try yesterday’s WordPress Blog Collaborative Annotated Email Tutorial 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.
On this, did you notice how we relied on a Javascript prompt 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 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=true is reminded by a new onchange 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).
Again, into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …
var mpn='', eod='', aec='', withindiv=0;
function emaileeis(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
postsm=inideais.replace(presm,'');
} else if (inideais.indexOf('?to=') != -1) {
presm=inideais.split('?to=')[0] + '?to=';
if (inideais.indexOf('&') != -1) {
postsm=inideais.replace(presm,'').replace(inideais.split('?to=')[1].split('&')[0],'');
}
} else if (inideais.indexOf('&') != -1) {
presm=inideais.split('&')[0] + '&';
postsm=inideais.replace(presm,'');
} else {
presm=inideais.split('?')[0];
postsm=inideais.replace(presm,'');
}
if (eod == '') {
if (inideais.indexOf('?to=') != -1) {
eod=inideais.split('?to=')[1].split('&')[0];
}
var pwithindiv=withindiv;
withindiv=9000;
eod=prompt('Enter email address', eod);
if (pwithindiv == 0) {
withindiv=0.9999;
} else {
withindiv=pwithindiv;
}
if (eod == null) {
eod='';
}
}
return presm + encodeURIComponent(eod) + postsm;
}
function smsee(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
}
if (inideais.indexOf('&') != -1) {
postsm='&' + inideais.split('&')[1];
}
if (mpn == '') {
if (inideais.indexOf(':') != -1) {
mpn=inideais.split(':')[1].split('&')[0];
}
var pwithindiv=withindiv;
withindiv=9000;
mpn=prompt('Enter phone number for SMS (or Cancel to do it at the Messager app', mpn);
if (pwithindiv == 0) {
withindiv=0.9999;
} else {
withindiv=pwithindiv;
}
if (mpn == null) {
mpn='';
}
}
return presm + mpn + postsm;
}
function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', opis='', fourhundred=300, isfx='0', otit='';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
xcbackc=cookieHHVal('linktoothers');
if (xcbackc != '') {
oharr=xcbackc.split('|');
}
}
if (('' + withindiv).indexOf('.') != -1) {
setTimeout(lookforhighlight, eval(('' + withindiv).split('.')[1]));
withindiv=eval(('' + withindiv).split('.')[0]);
return;
} else if (withindiv != 0) {
setTimeout(lookforhighlight, withindiv);
return;
} else {
setTimeout(lookforhighlight, usualdelay);
}
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != hight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=100;
}
}
}
if (xsel != hight && xsel != '') {
hight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (aec == '') {
aec=' 📧 <div id=daec contenteditable=true onblur="withindiv=0;" onchange="withindiv=9000;" onclick="withindiv=9000; event.stopPropagation();"> </div>';
} else if (document.getElementById('daec') && document.getElementById('b_hfloater_annotated_email')) {
aec=document.getElementById('b_hfloater_annotated_email').innerHTML;
}
if (aec.indexOf('<mark>' + hight + '</mark>') == -1) {
if ((' ' + aec).slice(-14).substring(0,1).replace('?','.').replace('!','.') == '.') {
aec=aec.replace('</div>', ' <mark>' + hight + '</mark></div>');
} else {
aec=aec.replace('</div>', ' <mark>' + hight + '</mark></div>');
}
}
if (document.getElementById('hfloater')) {
if (document.getElementById('hfloater').innerHTML == '') {
document.getElementById('hfloater').style.position='absolute';
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.zIndex='87';
document.getElementById('hfloater').style.backgroundColor='rgba(255,165,0,0.9)';
document.getElementById('hfloater').style.border='1px solid purple';
document.getElementById('hfloater').style.padding='2px 2px 2px 2px';
document.getElementById('hfloater').style.display='block';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
if (oharr.length >= 1) {
for (var ioharr=0; ioharr<oharr.length; ioharr++) {
otit='Other Link ' + eval(1 + ioharr);
if (oharr[ioharr].indexOf('#') != -1) {
otit=oharr[ioharr].split('#')[1].trim();
}
if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'-'\" + ');
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>';
} else if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'+'\" + ');
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>';
} else {
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>';
}
xcookcnt++;
}
}
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>';
} else {
document.getElementById('b_hfloater_wikipedia').innerHTML=hight;
document.getElementById('b_hfloater_google_translate').innerHTML=hight;
document.getElementById('b_hfloater_free_dictionary').innerHTML=hight;
document.getElementById('b_hfloater_google_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_search').innerHTML=hight;
document.getElementById('b_hfloater_category_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_first_word_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_title_search').innerHTML=hight;
document.getElementById('b_hfloater_email').innerHTML=hight;
document.getElementById('b_hfloater_annotated_email').innerHTML=aec;
document.getElementById('b_hfloater_sms').innerHTML=hight;
document.getElementById('b_hfloater_posting_a_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_a_copy_search').innerHTML=hight;
if (xcookcnt > 0) {
for (var icook=0; icook<xcookcnt; icook++) {
document.getElementById('b_hfloater_' + icook).innerHTML=hight;
}
}
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('hfloater')) {
document.getElementById('hfloater').style.display='none';
}
hight='';
}
}
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!
Previous relevant WordPress Blog Collaborative Annotated Email Tutorial is shown below.
WordPress Blog Collaborative Annotated Email Tutorial
Further to WordPress Plugin Primer Tutorial of recent times, we’re adding to that “highlighting of blog text” (dynamic menu) the options …
… and we think the last of these has good scope for collaborative thoughts and usages. Want to try it out? You’re here, ready. Just highlight some text to get started.
Into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …
var mpn='', eod='', aec='', withindiv=false;
function emaileeis(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
postsm=inideais.replace(presm,'');
} else if (inideais.indexOf('?to=') != -1) {
presm=inideais.split('?to=')[0] + '?to=';
if (inideais.indexOf('&') != -1) {
postsm=inideais.replace(presm,'').replace(inideais.split('?to=')[1].split('&')[0],'');
}
} else if (inideais.indexOf('&') != -1) {
presm=inideais.split('&')[0] + '&';
postsm=inideais.replace(presm,'');
} else {
presm=inideais.split('?')[0];
postsm=inideais.replace(presm,'');
}
if (eod == '') {
if (inideais.indexOf('?to=') != -1) {
eod=inideais.split('?to=')[1].split('&')[0];
}
eod=prompt('Enter email address', eod);
if (eod == null) {
eod='';
}
}
return presm + encodeURIComponent(eod) + postsm;
}
function smsee(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
}
if (inideais.indexOf('&') != -1) {
postsm='&' + inideais.split('&')[1];
}
if (mpn == '') {
if (inideais.indexOf(':') != -1) {
mpn=inideais.split(':')[1].split('&')[0];
}
mpn=prompt('Enter phone number for SMS (or Cancel to do it at the Messager app', mpn);
if (mpn == null) {
mpn='';
}
}
return presm + mpn + postsm;
}
function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', opis='', fourhundred=300, isfx='0', otit='';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
xcbackc=cookieHHVal('linktoothers');
if (xcbackc != '') {
oharr=xcbackc.split('|');
}
}
setTimeout(lookforhighlight, usualdelay);
if (withindiv) { return; }
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != hight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=100;
}
}
}
if (xsel != hight && xsel != '') {
hight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (aec == '') {
aec=' 📧 <div id=daec contenteditable=true onblur="withindiv=false;" onclick="withindiv=true; event.stopPropagation();"> </div>';
} else if (document.getElementById('daec') && document.getElementById('b_hfloater_annotated_email')) {
aec=document.getElementById('b_hfloater_annotated_email').innerHTML;
}
if (aec.indexOf('<mark>' + hight + '</mark>') == -1) {
if ((' ' + aec).slice(-14).substring(0,1).replace('?','.').replace('!','.') == '.') {
aec=aec.replace('</div>', ' <mark>' + hight + '</mark></div>');
} else {
aec=aec.replace('</div>', ' <mark>' + hight + '</mark></div>');
}
}
if (document.getElementById('hfloater')) {
if (document.getElementById('hfloater').innerHTML == '') {
document.getElementById('hfloater').style.position='absolute';
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.zIndex='87';
document.getElementById('hfloater').style.backgroundColor='rgba(255,165,0,0.9)';
document.getElementById('hfloater').style.border='1px solid purple';
document.getElementById('hfloater').style.padding='2px 2px 2px 2px';
document.getElementById('hfloater').style.display='block';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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>';
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&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29&body=" target=aeciframe onmouseover="this.href=emaileeis(this.title) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));" ontouchstart="this.href=emaileeis(this.title) + 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>'; 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>';
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>';
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>';
if (oharr.length >= 1) {
for (var ioharr=0; ioharr<oharr.length; ioharr++) {
otit='Other Link ' + eval(1 + ioharr);
if (oharr[ioharr].indexOf('#') != -1) {
otit=oharr[ioharr].split('#')[1].trim();
}
if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'-'\" + ');
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>';
} else if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'+'\" + ');
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>';
} else {
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>';
}
xcookcnt++;
}
}
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>';
} else {
document.getElementById('b_hfloater_wikipedia').innerHTML=hight;
document.getElementById('b_hfloater_google_translate').innerHTML=hight;
document.getElementById('b_hfloater_free_dictionary').innerHTML=hight;
document.getElementById('b_hfloater_google_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_search').innerHTML=hight;
document.getElementById('b_hfloater_category_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_first_word_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_title_search').innerHTML=hight;
document.getElementById('b_hfloater_email').innerHTML=hight;
document.getElementById('b_hfloater_annotated_email').innerHTML=aec;
document.getElementById('b_hfloater_sms').innerHTML=hight;
document.getElementById('b_hfloater_posting_a_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_a_copy_search').innerHTML=hight;
if (xcookcnt > 0) {
for (var icook=0; icook<xcookcnt; icook++) {
document.getElementById('b_hfloater_' + icook).innerHTML=hight;
}
}
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('hfloater')) {
document.getElementById('hfloater').style.display='none';
}
hight='';
}
}
Previous relevant WordPress Plugin Primer Tutorial is shown below.
WordPress Plugin Primer Tutorial
Normally we make changes to this TwentyTen themed WordPress blog by changing that theme’s wp-content/themes/twentyten/header.php file. But today we show you how to write the PHP code needed to write a WordPress.org admin login plugin to create a hyperlink to a Wikipedia page regarding any text you have highlighted on your WordPress admin area webpage.
We thank …
… and we think you should read …
For us, with our very simple rjmprogramming-wikipedia-lookup.php plugin, we only needed the one piece of PHP to sit in the current WordPress wp-content/plugins directory, and then immediately be accessible to the WordPress blog admin area’s Plugins -> Activate option …
<?php
/**
* @package Rjmprogramming_Wikipedia_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Wikipedia Lookup
Description: Float a Wikipedia lookup link for highlighted text of an admin webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: http://www.rjmprogramming.com.au/
*/
// This creates the Wikipedia lookup hyperlink
function rjmprogramming_wikipedia_lookup() {
$wikipedia_page = "Wikipedia Main Page";
echo '<a target="_blank" title="Wikipedia lookup of ..." onmouseover="var xsel=' .
"''" . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' .
' xsel=document.selection.createRange().htmlText;' .
' } if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' .
"'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " ontouchstart="var xsel=' .
'; xsel=window.getSelection().toString(); if (xsel.length == 0) {' .
' xsel=document.selection.createRange().htmlText; }' .
' if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" .
' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " id="rjmprogramming_wikipedia_lookup"' .
' href="//wikipedia.org/wiki/Main_Page">' . $wikipedia_page . '</a>';
}
// Now we set that function up to execute when the admin_notices action is called
add_action( 'admin_notices', 'rjmprogramming_wikipedia_lookup' );
// We need some CSS to position the hyperlink
function rjmprogramming_wikipedia_css() {
// This makes sure that the positioning is also good for right-to-left languages
$x = is_rtl() ? 'left' : 'right';
echo "
<style type='text/css'>
#rjmprogramming_wikipedia_lookup {
float: $x;
padding-$x: 15px;
padding-top: 5px;
margin: 0;
font-size: 11px;
}
</style>
";
}
add_action( 'admin_footer', 'rjmprogramming_wikipedia_css' );
?>
We hope this is of interest to you.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.