{"id":40267,"date":"2018-08-21T03:01:36","date_gmt":"2018-08-20T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40267"},"modified":"2018-08-20T20:19:25","modified_gmt":"2018-08-20T10:19:25","slug":"emoji-border-or-background-image-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-sharing-tutorial\/","title":{"rendered":"Emoji Border or Background Image Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border or Background Image Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/right_bottom_email.jpg\" title=\"Emoji Border or Background Image Sharing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border or Background Image Sharing Tutorial<\/p><\/div>\n<p>We&#8217;re getting in early with &#8220;sharing&#8221; thoughts to augment the usefulness of yesterday&#8217;s <a title='Emoji Border or Background Image Primer Tutorial' href='#ebbipt'>Emoji Border or Background Image Primer Tutorial<\/a>, but think some aspects here will develop further as we turn this web application into more of a &#8220;product&#8221; in future days.<\/p>\n<p>We started the day with thoughts of integrating the HTML5 canvas element into the workings, because it will be integral to future functionality improvements, but found its &#8220;sharing&#8221; capabilities regarding &#8230;<\/p>\n<ul>\n<li>border image &#8230; and\/or &#8230;<\/li>\n<li>background image<\/li>\n<\/ul>\n<p> &#8230; to be harder than we thought, though we have not given up here.  Instead, though, as far as &#8220;sharing&#8221; improvements go, we allow the user to send emails via the client mail application via an HTML &#8220;a&#8221; &#8220;mailto:&#8221; link that we click to set the email functionality off.<\/p>\n<p>Our &#8220;a&#8221; &#8220;mailto:&#8221; link&#8217;s href attribute is populated at two places, those being &#8230;<\/p>\n<ul>\n<li>a remembered href &#8220;prefix&#8221; at the document.body onload event &#8230; starting with the HTML &#8230;<br \/>\n<code><br \/>\n&lt;a href='mailto:?subject=Emoji%20Creation&body=' style='display:none;' id='aemail'&gt;Email&lt;\/a&gt;<br \/>\n<\/code><br \/>\n &#8230; the document.body onload event Javascript logic &#8230;<br \/>\n<code><br \/>\n  var wasa='';<br \/>\n  document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?canvas=');<br \/>\n  wasa=document.getElementById('aemail').href;<br \/>\n<\/code><br \/>\n &#8230; then &#8230;<\/li>\n<li>a calculated &#8220;suffix&#8221; kicked off by the user clicking a new &#8220;Email&#8221; link in amongst the header fields of the web application<\/li>\n<\/ul>\n<p> &#8230; and it is this second &#8220;suffix&#8221; calculation that crystallizes for us, in code, the curiosity that never fails to get our curiosity of this scenario involving the nesting of <a target=_blank title='Javascript encodeURIComponent method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeURIComponent.asp'>encodeURIComponent<\/a> within another encodeURIComponent, as in the Javascript statement &#8230;<\/p>\n<p><code><br \/>\n  document.getElementById('aemail').href=wasa + encodeURIComponent(encodeURIComponent(cis));<br \/>\n  document.getElementById('aemail').click();<br \/>\n<\/code><\/p>\n<p>So that, with an email body section content of &#8230;<\/p>\n<p><code><br \/>\n<a style='word-wrap:break-word;' target=_blank title='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E' href='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E'>https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; triggered by the &#8220;a&#8221; &#8220;mailto:&#8221; link href &#8230;<\/p>\n<p><code><br \/>\n<a style='word-wrap:break-word;' target=_blank title='mailto:?subject=Emoji%20Creation&#038;body=https%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E' href='mailto:?subject=Emoji%20Creation&#038;body=https%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E'>mailto:?subject=Emoji%20Creation&body=https%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; any stray blank characters will cause a broken link, whereas these spaces sometimes survive a pasting into a web browser address bar with proper navigational integrity.  So what goes on with the URL above is &#8230;<\/p>\n<ol>\n<li>the &#8220;mailto:&#8221; brings up the email client application with the To: field left blank &#8230;<\/li>\n<li>the &#8220;?subject=Emoji%20Creation&#8221; fills in a default value of &#8220;Emoji Creation&#8221; (via decodeURIComponent) into the Subject field &#8230;<\/li>\n<li>what follows the &#8220;&#038;body=&#8221; is filled in as the default value in the Body section of the email (via decodeURIComponent) to <a style='word-wrap:break-word;' target=_blank title='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E' href='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E'>https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E<\/a> at the receiving end of the email &#8220;sharing&#8221;<\/li>\n<\/ol>\n<p> &#8230; hence the need for &#8220;encodeURIComponent(encodeURIComponent(cis))&#8221;.<\/p>\n<p>Our HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html-GETME\" title=\"right_bottom.html\">right_bottom.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/right_bottom.html-GETME\" title=\"right_bottom.html\">this way<\/a> today to add in email sharing.<\/p>\n<hr>\n<p id='ebbipt'>Previous relevant <a target=_blank title='Emoji Border or Background Image Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-primer-tutorial\/'>Emoji Border or Background Image Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border or Background Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.jpg\" title=\"Emoji Border or Background Image Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border or Background Image Primer Tutorial<\/p><\/div>\n<p>Have you ever seen an Emoji you&#8217;d really like to use as either a webpage &#8230;<\/p>\n<ul>\n<li>border image &#8230; and\/or &#8230;<\/li>\n<li>background image<\/li>\n<\/ul>\n<p>?  Well, we&#8217;re here to tell you, thanks to the brilliance of <a target=_blank title='Emoji CSS' href='https:\/\/afeld.github.io\/emoji-css\/'>Emoji CSS<\/a> you may already be familiar with us mentioning at <a target=_blank title='Emoji CSS blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Emoji%20CSS'>these blog postings<\/a> &#8230; yes &#8230; this can be done.<\/p>\n<p>Our proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html_GETME\" title=\"right_bottom.html\">right_bottom.html<\/a> HTML and Javascript and CSS most interesting Javascript is &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n<br \/>\n var bmode='border';<br \/>\n<br \/>\n function analyze(tvi) {<br \/>\n   if (tvi.textContent != '') {<br \/>\n     if (tvi.textContent.length &lt;= 2) {<br \/>\n     if (bmode == 'border') {<br \/>\n     document.getElementById('myb').style.borderImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.textContent.<a target=_blank title='Javascript codePointAt information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/codePointAt'>codePointAt<\/a>(0).toString(16) + '.png\")';<br \/>\n     } else {<br \/>\n     document.getElementById('myb').style.backgroundImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.textContent.codePointAt(0).toString(16) + '.png\")';<br \/>\n     }<br \/>\n     } else {<br \/>\n     if (bmode == 'border') {<br \/>\n     document.getElementById('myb').style.borderImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.innerHTML.toLowerCase().replace(\/\\&\/g,'').replace(\/\\#\/g,'') + '.png\")';<br \/>\n     } else {<br \/>\n     document.getElementById('myb').style.backgroundImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.innerHTML.toLowerCase().replace(\/\\&\/g,'').replace(\/\\#\/g,'') + '.png\")';<br \/>\n     }<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; called from the <i>onblur<\/i> event of an HTML div contenteditable=true field there for the user to enter an Emoji of interest ideally via &#8230;<\/p>\n<ul>\n<li>HTML Entity (Hex) value (less the &amp; and # please) &#8230; but should also work for &#8230;<\/li>\n<li>Emoji Placement menu selections that on a MacBook Pro you&#8217;d access via Control-Command-Space<\/li>\n<\/ul>\n<p> &#8230; the toggling between &#8220;border&#8221; and &#8220;background&#8221; available via our oft-used &#8220;-&#8221; sign link in the headers.<\/p>\n<p>Useful, we hope, huh?!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40239' onclick='var dv=document.getElementById(\"d40239\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40239' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40267' onclick='var dv=document.getElementById(\"d40267\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40267' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re getting in early with &#8220;sharing&#8221; thoughts to augment the usefulness of yesterday&#8217;s Emoji Border or Background Image Primer Tutorial, but think some aspects here will develop further as we turn this web application into more of a &#8220;product&#8221; in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-sharing-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2022,2660,2442,281,1606,380,385,1605,562,576,2658,652,860,997,1133,1137,1319],"class_list":["post-40267","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-codepoint","tag-codepointat","tag-contenteditable","tag-css","tag-decodeuricomponent","tag-email","tag-emoji","tag-encodeuricomponent","tag-hexadecimal","tag-html","tag-html-entity","tag-javascript","tag-onblur","tag-programming","tag-share","tag-sharing","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40267"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=40267"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40267\/revisions"}],"predecessor-version":[{"id":40272,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40267\/revisions\/40272"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=40267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=40267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=40267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}