{"id":54725,"date":"2022-01-26T03:01:00","date_gmt":"2022-01-25T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54725"},"modified":"2022-01-26T08:03:45","modified_gmt":"2022-01-25T22:03:45","slug":"personalized-links-external-javascript-hotlinking-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/personalized-links-external-javascript-hotlinking-tutorial\/","title":{"rendered":"Personalized Links External Javascript Hotlinking Tutorial"},"content":{"rendered":"
\"Personalized<\/a>

Personalized Links External Javascript Hotlinking Tutorial<\/p><\/div>\n

Another layer of functionality onto the external Javascript arrangements of yesterday’s WordPress Blog Personalized Links Tutorial<\/a> is to reimagine the arrangements of the user of that “Personalized Links” (pretty much standalone (but more independently standalone today)<\/font>) external Javascript, that being this WordPress Blog, but to decouple some of the external Javascript logic away from WordPress Blog dependence, and onto “www openness” (or external Javascript hotlinking)<\/font> and emoji placement flexibility<\/font> …<\/p>\n


\n<script type='text\/javascript' src='\/\/www.rjmprogramming.com.au<\/font>\/personal_links.js?wordingis=[innerHTMLmatchEmojisAppendToVia]<\/font>'><\/script>
\n<\/code><\/p>\n

This new “wordingis” argument can also exist at the web browser address bar level too. All this being practical, the only other dependency (other than an unlucky clash of Javascript variable names used)<\/font> is the existence of “window.localStorage” with enough of that storage available for the user to add their …<\/p>\n


\n[URL]#[Hardcoding]
\n<\/code><\/p>\n

… couplings processed by the changed<\/a> personal_links.js<\/a> external Javascript. We hope you can find a way to use this clientside logic.<\/p>\n

\n

\n

Previous relevant WordPress Blog Personalized Links Tutorial<\/a> is shown below.<\/p>\n

\"WordPress<\/a>

WordPress Blog Personalized Links Tutorial<\/p><\/div>\n

Writing these blog postings there are potential links we’re bound to forget to place into the blog postings. This is fairly subjective, because one person’s link interest might trigger another person’s “ho hum” alert (and we all know the wooooorrrrrlllldddd needs more lerts)<\/font>. Today, we want to offer the user the opportunity to create their own …<\/p>\n


\npersonalized links
\n<\/code><\/p>\n

… saved to …<\/p>\n


\nwindow.localStorage<\/a>
\n<\/code><\/p>\n

… and, thereby, being intersessional by nature.<\/p>\n

The user picks “hardcodings” (probably best to include surrounding space characters) in amongst the webpage wording that can turn into a “personalized link” via a single personal_links.js<\/a> external Javascript (only needing change to our TwentyTen theme’s header.php …<\/p>\n


\n<script type='text\/javascript' src='\/personal_links.js?rand=<?php echo rand(0,1986754); ?>'><\/script>
\n<\/code><\/p>\n

) … containing …<\/p>\n


\n\/\/ personal_links.js
\n\/\/ RJM Programming
\n\/\/ January, 2022
\n
\n var retvwpp='';
\n var retplinks=[];
\n var pltextstr='';
\n if (window.localStorage) {
\n var wp_ls=location.search.split('wpplgro=')[1] ? decodeURIComponent(location.search.split('wpplgro=')[1]).split('&')[0] : ''
\n if (wp_ls != '') {
\n localStorage.removeItem('wp_personal_links');
\n retvwpp='';
\n } else if (getwpplgro() != '') {
\n var retvis=(retvwpp);
\n if (retvis != '') {
\n pltextstr='';
\n retplinks=retvis.split('`');
\n for (var irg=0; irg<retplinks.length; irg++) {
\n if (retplinks[irg].indexOf('#') != -1) {
\n if (pltextstr == '') { pltextstr='`'; }
\n pltextstr+=(retplinks[irg].split('#')[1]) + '`';
\n }
\n }
\n setTimeout(andsogolooking, 5000);
\n }
\n }
\n

\n if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au\/itblog') != -1) {
\n setTimeout(preaskwpplgro, 7000);
\n }
\n

\n }
\n

\n function reverse(s) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/958908\/how-do-you-reverse-a-string-in-place-in-javascript
\n return s.split(\"\").reverse().join(\"\");
\n }
\n

\n function preaskwpplgro() {
\n var xasare=document.getElementsByTagName('a');
\n for (var ixasare=0; ixasare<xasare.length; ixasare++) {
\n \/\/console.log('0:' + xasare[ixasare].innerHTML + ' ... ' + ('' + xasare[ixasare].href));
\n if (xasare[ixasare].innerHTML.replace('Long hover help available.','Highlighting and long hover help.') == 'Highlighting and long hover help.' && ('' + xasare[ixasare].href).indexOf('#') != -1) {
\n \/\/console.log('1:' + xasare[ixasare].innerHTML + ' ... ' + ('' + xasare[ixasare].href));
\n xasare[ixasare].onmousedown=function() { askwpplgro(); }
\n xasare[ixasare].ontouchdown=function() { askwpplgro(); }
\n xasare[ixasare].innerHTML=xasare[ixasare].innerHTML.replace('.','&#128279;');
\n xasare[ixasare].title+=' Also come here for personalized blog link management functionality. ';
\n }
\n }
\n }
\n

\n function askwpplgro() {
\n var prepeu='', midpeu='';
\n if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au\/itblog')) {
\n prepeu='If contextual help is available for a feature (that you long hover over) of this webpage a new green bordered webpage part will open and on clicking in this and answering Y you can read and interact with a relevant Blog Posting regarding this. To remove (or restore) context help access the All Posts menu Toggle Context Help Mode submenu, as required. ' + String.fromCharCode(10) + ' ';
\n midpeu=' (or enter ? for just personalized link information)';
\n }
\n var peu='?';
\n while (peu == '?') {
\n peu=prompt(prepeu + 'Please enter URL (no hashtags)' + midpeu + ' followed by hashtag (#) then case sensitive wording to associate the URL with (when not already linked) greater than one character long (spaces encouraged). Special URL of . gets its URL from the first matching link found on the webpage. Enter X to clear your URLs.', '');
\n prepeu=retvwpp + String.fromCharCode(10) + String.fromCharCode(10);
\n midpeu='';
\n }
\n if (peu == null) { peu=''; }
\n if (peu.indexOf('#') > 0) {
\n if (peu.split('#')[1].trim() != '') {
\n if (peu.split('#')[0] == '.') {
\n var restp=peu.split('#')[1];
\n var asare=document.getElementsByTagName('a');
\n for (var iasare=0; iasare<asare.length; iasare++) {
\n if (asare[iasare].innerHTML == peu.split('#')[1] && peu.split('#')[0] == '.') {
\n if (('' + asare[iasare].href).replace(\/^null$\/g,'') != '') {
\n if (asare[iasare].href.split('#')[0].indexOf('?') == -1) {
\n peu=asare[iasare].href.split('#')[0] + '?#' + restp;
\n } else {
\n peu=asare[iasare].href.split('#')[0] + '&#' + restp;
\n }
\n }
\n }
\n }
\n }
\n if (eval('' + peu.split('#')[1].length) > 1) {
\n if (peu.indexOf('?') > 0) {
\n setwpplgro(peu.split('?')[0] + '?' + encodeURIComponent(peu.split('?')[1]).replace(\/\\%26\/g,'&').replace(\/\\%23\/g,'#'));
\n } else {
\n setwpplgro(peu.split('#')[0] + '#' + encodeURIComponent(peu.split('#')[1]));
\n }
\n }
\n }
\n retvwpp='';
\n } else if (peu.toLowerCase() == 'x') {
\n localStorage.removeItem('wp_personal_links');
\n }
\n }
\n

\n function setwpplgro(invlu) {
\n if (retvwpp == '') {
\n localStorage.setItem('wp_personal_links', (invlu));
\n andsogolooking();
\n } else {
\n localStorage.removeItem('wp_personal_links');
\n localStorage.setItem('wp_personal_links', (retvwpp) + ('`') + (invlu));
\n andsogolooking();
\n }
\n retvwpp=getwpplgro();
\n }
\n

\n function getwpplgro() {
\n retvwpp=('' + localStorage.getItem('wp_personal_links')).replace(\/^null$\/g,'');
\n if (retvwpp != '') {
\n var retvis=(localStorage.getItem('wp_personal_links')).replace(\/^null$\/g,'');
\n if (retvis != '') {
\n pltextstr='';
\n \/\/alert('retvis=' + retvis);
\n retplinks=retvis.split('`');
\n for (var irg=0; irg<retplinks.length; irg++) {
\n if (retplinks[irg].indexOf('#') != -1) {
\n if (pltextstr == '') { pltextstr='`'; }
\n pltextstr+=(retplinks[irg].split('#')[1]) + '`';
\n }
\n }
\n setTimeout(andsogolooking, 5000);
\n }
\n }
\n return retvwpp;
\n }
\n

\n function andsogolooking() {
\n var ttsf=[], thiswptext='', rawhwptext='', ideareps=[], jjn, kkn, allokaywpl=false, newbih='', doit=false, addone=1;
\n if (pltextstr != '') {
\n ttsf=pltextstr.substring(0,eval(-1 + eval('' + pltextstr.length))).substring(1).split('`');
\n \/\/alert('two:' + ttsf.length + ' and pltextstr=' + pltextstr + ' and ttsf[0]=' + ttsf[0]);
\n }
\n if (ttsf.length != 0) {
\n thiswptext=(document.body.innerText || document.body.contentWindow || document.body.contentDocument);
\n rawhwptext=document.body.innerHTML;
\n newbih=rawhwptext;
\n \/\/alert('ttsf.length=' + ttsf.length + ':' + ttsf[0] + ' and retplinks.length=' + retplinks.length + ':' + retplinks[0]);
\n }
\n for (jjn=0; jjn<ttsf.length; jjn++) {
\n addone=1;
\n if (ttsf[jjn].trim() != '') {
\n if (thiswptext.indexOf(decodeURIComponent(ttsf[jjn])) != -1) {
\n if (newbih.indexOf(decodeURIComponent(ttsf[jjn])) != -1 && ((retplinks[jjn].split('#')[0].replace(\/\\?$\/g,'').replace(\/\\&$\/g,'') != retplinks[jjn].split('#')[0] || newbih.indexOf('>' + decodeURIComponent(ttsf[jjn]) + '<') == -1)) && newbih.indexOf('\"' + decodeURIComponent(ttsf[jjn]) + '\"') == -1) {
\n ideareps=newbih.split(decodeURIComponent(ttsf[jjn]));
\n allokaywpl=true;
\n for (kkn=0; kkn<ideareps.length; kkn++) {
\n if (eval(1 + kkn) >= eval('' + ideareps.length)) { addone=0; }
\n \/\/if (ttsf[jjn] == 'en') { alert('reverse(ideareps[kkn]=' + reverse(ideareps[kkn])); }
\n if (eval('' + reverse(ideareps[kkn]).indexOf('\"')) > eval('' + reverse(ideareps[kkn]).replace('>','<').indexOf('<'))) {
\n if (ideareps[kkn].slice(-1) != '>' || ideareps[eval(addone + kkn)].substring(0,1) != '<') {
\n if (retplinks[jjn].split('#')[0].replace(\/\\?$\/g,'').replace(\/\\&$\/g,'') != retplinks[jjn].split('#')[0]) {
\n newbih=newbih.replace(ideareps[kkn] + decodeURIComponent(ttsf[jjn]), ideareps[kkn] + '<a target=_blank title=\"Taking you to ' + retplinks[jjn].split('#')[0].replace(\/\\?$\/g,'').replace(\/\\&$\/g,'') + ' as requested\" style=\"color:red;text-decoration-style:dotted;\" href=\"' + retplinks[jjn].split('#')[0].replace(\/\\?$\/g,'').replace(\/\\&$\/g,'') + '\">' + decodeURIComponent(ttsf[jjn]) + '<\/a>');
\n } else {
\n newbih=newbih.replace(ideareps[kkn] + decodeURIComponent(ttsf[jjn]), ideareps[kkn] + '<a target=_blank title=\"Taking you to ' + retplinks[jjn].split('#')[0].replace(\/\\?$\/g,'').replace(\/\\&$\/g,'') + ' as requested\" style=\"color:orange;text-decoration-style:dotted;\" href=\"' + retplinks[jjn].split('#')[0].replace(\/\\?$\/g,'').replace(\/\\&$\/g,'') + '\">' + decodeURIComponent(ttsf[jjn]) + '<\/a>');
\n }
\n doit=true;
\n }
\n }
\n }
\n }
\n }
\n }
\n }
\n if (doit) { document.body.innerHTML=newbih; }
\n }
\n<\/code><\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n