From d3744575c1da4ef29760d1e8a8eb180761bcf30d Mon Sep 17 00:00:00 2001 From: Matteo Manzinello Date: Mon, 20 May 2019 18:05:42 +0200 Subject: [PATCH] keyboard commands added! g=gmail, o=outlook, spacebarORenter=default, c=copy --- dist/mailgo.js | 30 +++++++++++++++++++----------- dist/mailgo.min.js | 2 +- src/mailgo.js | 25 ++++++++++++++++--------- 3 files changed, 36 insertions(+), 21 deletions(-) diff --git a/dist/mailgo.js b/dist/mailgo.js index 359505a..0bad807 100644 --- a/dist/mailgo.js +++ b/dist/mailgo.js @@ -230,7 +230,11 @@ var mailgoRender = function mailgoRender(mailgo) { copyAction(mail, copyButton); }, false); // show the mailgo - showMailgo(); + showMailgo(); // listener keyDown + + document.body.addEventListener("keydown", function () { + mailgoKeydown(mail, url, mailtoHref, encEmail, copyButton); + }, false); }; // actions @@ -285,7 +289,10 @@ var mailgoCheckRender = function mailgoCheckRender(event) { */ -var mailgoKeydown = function mailgoKeydown(event) { +var mailgoKeydown = function mailgoKeydown(mail, url, mailtoHref, encEmail, copyButton) { + // if mailgo is not showing do nothing + if (mailgoHidden()) return; + switch (event.keyCode) { case 27: // Escape @@ -294,23 +301,23 @@ var mailgoKeydown = function mailgoKeydown(event) { case 71: // g -> open GMail - hideMailgo(); + openGmailAction(mailtoHref); break; case 79: // o -> open Outlook - hideMailgo(); + openOutlookAction(mail, url); break; case 32: case 13: // spacebar or enter -> open default - hideMailgo(); + openDefaultAction(encEmail); break; case 67: // c -> copy - hideMailgo(); + copyAction(mail, copyButton); break; default: @@ -351,16 +358,17 @@ var copyToClipboard = function copyToClipboard(str) { var showMailgo = function showMailgo() { - getE("mailgo").style.display = "flex"; // add mailgoKeydown - - document.body.addEventListener("keydown", mailgoKeydown, false); + getE("mailgo").style.display = "flex"; }; // hide the modal var hideMailgo = function hideMailgo() { - getE("mailgo").style.display = "none"; // remove mailgoKeydown + getE("mailgo").style.display = "none"; +}; // is the modal hidden? - document.body.removeEventListener("keydown", mailgoKeydown, false); + +var mailgoHidden = function mailgoHidden() { + return getE("mailgo").style.display === "none"; }; // decrypt email diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index c5a3fb9..137759f 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -"use strict";var V="0.3.3",MAILTO="mailto:",mailgoCSS=document.createElement("link");mailgoCSS.rel="stylesheet",mailgoCSS.type="text/css",mailgoCSS.href="https://unpkg.com/mailgo@"+V+"/dist/mailgo.min.css",document.head.appendChild(mailgoCSS);var mailgoInit=function(){var e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";var t=document.createElement("div");t.className="mailgo-modal-background",e.appendChild(t);var a=document.createElement("div");a.className="mailgo-modal-content",e.appendChild(a);var o=document.createElement("strong");o.id="mailgo-title",o.className="mailgo-title",a.appendChild(o);var n=document.createElement("div");n.id="mailgo-details",n.className="mailgo-details";var i=document.createElement("p");i.id="mailgo-cc";var d=document.createElement("span");d.className="mailgo-weight-500";var l=document.createTextNode("cc ");d.appendChild(l);var c=document.createElement("span");c.id="mailgo-cc-value",i.appendChild(d),i.appendChild(c),n.appendChild(i);var m=document.createElement("p");m.id="mailgo-bcc";var r=document.createElement("span");r.className="mailgo-weight-500";var s=document.createTextNode("bcc ");r.appendChild(s);var p=document.createElement("span");p.id="mailgo-bcc-value",m.appendChild(r),m.appendChild(p),n.appendChild(m);var g=document.createElement("p");g.id="mailgo-subject";var u=document.createElement("span");u.className="mailgo-weight-500";var h=document.createTextNode("subject");u.appendChild(h);var v=document.createElement("span");v.id="mailgo-subject-value",g.appendChild(u),g.appendChild(v),n.appendChild(g);var C=document.createElement("p");C.id="mailgo-body";var E=document.createElement("span");E.className="mailgo-weight-500";var y=document.createTextNode("body ");E.appendChild(y);var b=document.createElement("span");b.id="mailgo-body-value",C.appendChild(E),C.appendChild(b),n.appendChild(C),a.appendChild(n);var f=document.createElement("a");f.id="mailgo-gmail",f.href="#mailgo-gmail",f.classList.add("mailgo-open"),f.classList.add("mailgo-gmail");var L=document.createTextNode("open in ");f.appendChild(L);var k=document.createElement("span");k.className="mailgo-weight-500";var w=document.createTextNode("Gmail");k.appendChild(w),f.appendChild(k),a.appendChild(f);var A=document.createElement("a");A.id="mailgo-outlook",A.href="#mailgo-outlook",A.classList.add("mailgo-open"),A.classList.add("mailgo-outlook");var x=document.createTextNode("open in ");A.appendChild(x);var N=document.createElement("span");N.className="mailgo-weight-500";var T=document.createTextNode("Outlook");N.appendChild(T),A.appendChild(N),a.appendChild(A);var S=document.createElement("a");S.id="mailgo-open",S.href="#mailgo-open",S.classList.add("mailgo-open"),S.classList.add("mailgo-default");var R=document.createElement("span");R.className="mailgo-weight-500";var I=document.createTextNode("open");R.appendChild(I);var M=document.createTextNode(" default");S.appendChild(R),S.appendChild(M),a.appendChild(S);var O=document.createElement("a");O.id="mailgo-copy",O.href="#mailgo-copy",O.classList.add("mailgo-copy"),O.classList.add("mailgo-weight-500");var j=document.createTextNode("copy");O.appendChild(j),a.appendChild(O);var U=document.createElement("a");U.href="https://mailgo.js.org",U.className="mailgo-by",U.target="_blank",U.rel="noopener noreferrer";var D=document.createTextNode("mailgo.js.org");U.appendChild(D),a.appendChild(U),document.body.appendChild(e),t.addEventListener("click",hideMailgo,!1)},mailgoRender=function(e){var t="",a="",o="",n="",i="",d="",l="";if(e.href&&e.href.toLowerCase().startsWith(MAILTO)){t=decodeURIComponent(e.href.split("?")[0].split(MAILTO)[1].trim()),o=e.href,a=new URL(o);var c=new URLSearchParams(a.search);n=c.get("cc"),i=c.get("bcc"),d=c.get("subject"),l=c.get("body")}else t=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain"),o=MAILTO+encodeURIComponent(t),a=new URL(o),n=e.getAttribute("data-cc-address")+"@"+e.getAttribute("data-cc-domain"),i=e.getAttribute("data-bcc-address")+"@"+e.getAttribute("data-bcc-domain"),d=e.getAttribute("data-subject"),l=e.getAttribute("data-body");if(validateEmail(t)){validateEmail(n)||(n=""),validateEmail(i)||(i="");var m=getE("mailgo-title"),r=(getE("mailgo-details"),getE("mailgo-cc")),s=getE("mailgo-cc-value"),p=getE("mailgo-bcc"),g=getE("mailgo-bcc-value"),u=getE("mailgo-subject"),h=getE("mailgo-subject-value"),v=getE("mailgo-body"),C=getE("mailgo-body-value"),E=getE("mailgo-gmail"),y=getE("mailgo-outlook"),b=getE("mailgo-open"),f=getE("mailgo-copy");m.textContent=t,n?(r.style.display="block",s.textContent=n):r.style.display="none",i?(p.style.display="block",g.textContent=i):p.style.display="none",d?(u.style.display="block",h.textContent=d):u.style.display="none",l?(v.style.display="block",C.textContent=l):v.style.display="none",E.addEventListener("click",function(){openGmailAction(o)},!1),y.addEventListener("click",function(){openOutlookAction(t,a)},!1);var L=encodeEmail(t);b.addEventListener("click",function(){openDefaultAction(L)},!1),f.addEventListener("click",function(e){copyAction(t,f)},!1),showMailgo()}},openGmailAction=function(e){window.open("https://mail.google.com/mail?extsrc=mailto&url="+encodeURIComponent(e),"_blank")},openOutlookAction=function(e,t){window.open("https://outlook.office.com/owa/?rru=compose&to="+encodeURIComponent(e)+t.search.replace(/^[$]/,"&"),"_blank")},openDefaultAction=function(e){mailToEncoded(e)},copyAction=function(e,t){copyToClipboard(e),t.textContent="copied";setTimeout(function(){t.textContent="copy"},999)},mailgoCheckRender=function(e){var t=e.target;document.body.contains(getE("mailgo"))&&(t.href&&t.href.toLowerCase().startsWith(MAILTO)&&!t.classList.contains("no-mailgo")||t.href&&"#mailgo"===t.getAttribute("href").toLowerCase()||t.classList.contains("mailgo")||t.getAttribute("mailgo"))&&(e.preventDefault(),mailgoRender(t))},mailgoKeydown=function(e){switch(e.keyCode){case 27:case 71:case 79:hideMailgo();break;case 32:case 13:case 67:hideMailgo();break;default:return}};document.addEventListener("DOMContentLoaded",mailgoInit,!1),document.body.addEventListener("click",mailgoCheckRender,!1);var validateEmail=function(e){return/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)},copyToClipboard=function(e){var t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);var a=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),a&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(a))},showMailgo=function(){getE("mailgo").style.display="flex",document.body.addEventListener("keydown",mailgoKeydown,!1)},hideMailgo=function(){getE("mailgo").style.display="none",document.body.removeEventListener("keydown",mailgoKeydown,!1)},mailToEncoded=function(e){return window.location.href=MAILTO+atob(e)},encodeEmail=function(e){return btoa(e)},getE=function(e){return document.getElementById(e)}; \ No newline at end of file +"use strict";var V="0.3.3",MAILTO="mailto:",mailgoCSS=document.createElement("link");mailgoCSS.rel="stylesheet",mailgoCSS.type="text/css",mailgoCSS.href="https://unpkg.com/mailgo@"+V+"/dist/mailgo.min.css",document.head.appendChild(mailgoCSS);var mailgoInit=function(){var e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";var t=document.createElement("div");t.className="mailgo-modal-background",e.appendChild(t);var a=document.createElement("div");a.className="mailgo-modal-content",e.appendChild(a);var o=document.createElement("strong");o.id="mailgo-title",o.className="mailgo-title",a.appendChild(o);var n=document.createElement("div");n.id="mailgo-details",n.className="mailgo-details";var i=document.createElement("p");i.id="mailgo-cc";var l=document.createElement("span");l.className="mailgo-weight-500";var d=document.createTextNode("cc ");l.appendChild(d);var c=document.createElement("span");c.id="mailgo-cc-value",i.appendChild(l),i.appendChild(c),n.appendChild(i);var m=document.createElement("p");m.id="mailgo-bcc";var r=document.createElement("span");r.className="mailgo-weight-500";var s=document.createTextNode("bcc ");r.appendChild(s);var p=document.createElement("span");p.id="mailgo-bcc-value",m.appendChild(r),m.appendChild(p),n.appendChild(m);var g=document.createElement("p");g.id="mailgo-subject";var u=document.createElement("span");u.className="mailgo-weight-500";var h=document.createTextNode("subject");u.appendChild(h);var v=document.createElement("span");v.id="mailgo-subject-value",g.appendChild(u),g.appendChild(v),n.appendChild(g);var C=document.createElement("p");C.id="mailgo-body";var E=document.createElement("span");E.className="mailgo-weight-500";var y=document.createTextNode("body ");E.appendChild(y);var b=document.createElement("span");b.id="mailgo-body-value",C.appendChild(E),C.appendChild(b),n.appendChild(C),a.appendChild(n);var f=document.createElement("a");f.id="mailgo-gmail",f.href="#mailgo-gmail",f.classList.add("mailgo-open"),f.classList.add("mailgo-gmail");var k=document.createTextNode("open in ");f.appendChild(k);var A=document.createElement("span");A.className="mailgo-weight-500";var L=document.createTextNode("Gmail");A.appendChild(L),f.appendChild(A),a.appendChild(f);var w=document.createElement("a");w.id="mailgo-outlook",w.href="#mailgo-outlook",w.classList.add("mailgo-open"),w.classList.add("mailgo-outlook");var x=document.createTextNode("open in ");w.appendChild(x);var N=document.createElement("span");N.className="mailgo-weight-500";var T=document.createTextNode("Outlook");N.appendChild(T),w.appendChild(N),a.appendChild(w);var S=document.createElement("a");S.id="mailgo-open",S.href="#mailgo-open",S.classList.add("mailgo-open"),S.classList.add("mailgo-default");var R=document.createElement("span");R.className="mailgo-weight-500";var I=document.createTextNode("open");R.appendChild(I);var M=document.createTextNode(" default");S.appendChild(R),S.appendChild(M),a.appendChild(S);var O=document.createElement("a");O.id="mailgo-copy",O.href="#mailgo-copy",O.classList.add("mailgo-copy"),O.classList.add("mailgo-weight-500");var j=document.createTextNode("copy");O.appendChild(j),a.appendChild(O);var U=document.createElement("a");U.href="https://mailgo.js.org",U.className="mailgo-by",U.target="_blank",U.rel="noopener noreferrer";var D=document.createTextNode("mailgo.js.org");U.appendChild(D),a.appendChild(U),document.body.appendChild(e),t.addEventListener("click",hideMailgo,!1)},mailgoRender=function(e){var t="",a="",o="",n="",i="",l="",d="";if(e.href&&e.href.toLowerCase().startsWith(MAILTO)){t=decodeURIComponent(e.href.split("?")[0].split(MAILTO)[1].trim()),o=e.href,a=new URL(o);var c=new URLSearchParams(a.search);n=c.get("cc"),i=c.get("bcc"),l=c.get("subject"),d=c.get("body")}else t=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain"),o=MAILTO+encodeURIComponent(t),a=new URL(o),n=e.getAttribute("data-cc-address")+"@"+e.getAttribute("data-cc-domain"),i=e.getAttribute("data-bcc-address")+"@"+e.getAttribute("data-bcc-domain"),l=e.getAttribute("data-subject"),d=e.getAttribute("data-body");if(validateEmail(t)){validateEmail(n)||(n=""),validateEmail(i)||(i="");var m=getE("mailgo-title"),r=(getE("mailgo-details"),getE("mailgo-cc")),s=getE("mailgo-cc-value"),p=getE("mailgo-bcc"),g=getE("mailgo-bcc-value"),u=getE("mailgo-subject"),h=getE("mailgo-subject-value"),v=getE("mailgo-body"),C=getE("mailgo-body-value"),E=getE("mailgo-gmail"),y=getE("mailgo-outlook"),b=getE("mailgo-open"),f=getE("mailgo-copy");m.textContent=t,n?(r.style.display="block",s.textContent=n):r.style.display="none",i?(p.style.display="block",g.textContent=i):p.style.display="none",l?(u.style.display="block",h.textContent=l):u.style.display="none",d?(v.style.display="block",C.textContent=d):v.style.display="none",E.addEventListener("click",function(){openGmailAction(o)},!1),y.addEventListener("click",function(){openOutlookAction(t,a)},!1);var k=encodeEmail(t);b.addEventListener("click",function(){openDefaultAction(k)},!1),f.addEventListener("click",function(e){copyAction(t,f)},!1),showMailgo(),document.body.addEventListener("keydown",function(){mailgoKeydown(t,a,o,k,f)},!1)}},openGmailAction=function(e){window.open("https://mail.google.com/mail?extsrc=mailto&url="+encodeURIComponent(e),"_blank")},openOutlookAction=function(e,t){window.open("https://outlook.office.com/owa/?rru=compose&to="+encodeURIComponent(e)+t.search.replace(/^[$]/,"&"),"_blank")},openDefaultAction=function(e){mailToEncoded(e)},copyAction=function(e,t){copyToClipboard(e),t.textContent="copied";setTimeout(function(){t.textContent="copy"},999)},mailgoCheckRender=function(e){var t=e.target;document.body.contains(getE("mailgo"))&&(t.href&&t.href.toLowerCase().startsWith(MAILTO)&&!t.classList.contains("no-mailgo")||t.href&&"#mailgo"===t.getAttribute("href").toLowerCase()||t.classList.contains("mailgo")||t.getAttribute("mailgo"))&&(e.preventDefault(),mailgoRender(t))},mailgoKeydown=function(e,t,a,o,n){if(!mailgoHidden())switch(event.keyCode){case 27:hideMailgo();break;case 71:openGmailAction(a);break;case 79:openOutlookAction(e,t);break;case 32:case 13:openDefaultAction(o);break;case 67:copyAction(e,n);break;default:return}};document.addEventListener("DOMContentLoaded",mailgoInit,!1),document.body.addEventListener("click",mailgoCheckRender,!1);var validateEmail=function(e){return/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)},copyToClipboard=function(e){var t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);var a=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),a&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(a))},showMailgo=function(){getE("mailgo").style.display="flex"},hideMailgo=function(){getE("mailgo").style.display="none"},mailgoHidden=function(){return"none"===getE("mailgo").style.display},mailToEncoded=function(e){return window.location.href=MAILTO+atob(e)},encodeEmail=function(e){return btoa(e)},getE=function(e){return document.getElementById(e)}; \ No newline at end of file diff --git a/src/mailgo.js b/src/mailgo.js index 4209e72..3ffe8df 100644 --- a/src/mailgo.js +++ b/src/mailgo.js @@ -309,6 +309,15 @@ const mailgoRender = mailgo => { // show the mailgo showMailgo(); + + // listener keyDown + document.body.addEventListener( + "keydown", + () => { + mailgoKeydown(mail, url, mailtoHref, encEmail, copyButton); + }, + false + ); }; // actions @@ -379,7 +388,9 @@ const mailgoCheckRender = event => { * mailgoKeydown * function to manage the keydown event when the modal is showing */ -const mailgoKeydown = event => { +const mailgoKeydown = (mail, url, mailtoHref, encEmail, copyButton) => { + // if mailgo is not showing do nothing + if (mailgoHidden()) return; switch (event.keyCode) { case 27: // Escape @@ -387,20 +398,20 @@ const mailgoKeydown = event => { break; case 71: // g -> open GMail - hideMailgo(); + openGmailAction(mailtoHref); break; case 79: // o -> open Outlook - hideMailgo(); + openOutlookAction(mail, url); break; case 32: case 13: // spacebar or enter -> open default - hideMailgo(); + openDefaultAction(encEmail); break; case 67: // c -> copy - hideMailgo(); + copyAction(mail, copyButton); break; default: return; @@ -444,15 +455,11 @@ const copyToClipboard = str => { // show the modal const showMailgo = () => { getE("mailgo").style.display = "flex"; - // add mailgoKeydown - document.body.addEventListener("keydown", mailgoKeydown, false); }; // hide the modal const hideMailgo = () => { getE("mailgo").style.display = "none"; - // remove mailgoKeydown - document.body.removeEventListener("keydown", mailgoKeydown, false); }; // is the modal hidden?