From 972f7fd3f8ec5f00f53051b634a3f76a3b92d5ab Mon Sep 17 00:00:00 2001 From: Mario Rodriguez Date: Mon, 7 Jan 2019 16:42:40 -0800 Subject: [PATCH] Fix flashing/scrolling issue when Copying in iOS. --- dist/mailtoui-min.js | 4 +- docs/assets/js/mailtoui-docs-min.js | 2 +- package.json | 2 +- src/css/mailtoui-min.css | 1 + src/css/mailtoui-prefixed.css | 198 --------------------- src/css/mailtoui.css | 3 +- src/js/mailtoui.js | 262 +--------------------------- version.js | 2 +- 8 files changed, 16 insertions(+), 458 deletions(-) create mode 100644 src/css/mailtoui-min.css delete mode 100644 src/css/mailtoui-prefixed.css diff --git a/dist/mailtoui-min.js b/dist/mailtoui-min.js index 26910fb..8c33c72 100644 --- a/dist/mailtoui-min.js +++ b/dist/mailtoui-min.js @@ -1,8 +1,8 @@ /** * mailtoui - A convenient drop-in user interface for mailto links. - * @version v0.1.11 + * @version v0.1.12 * @link https://mailtoui.com * @author Mario Rodriguez - https://twitter.com/mariordev * @license MIT */ -var mailtouiApp=mailtouiApp||{};!function(n){var e=null,t=null,o=new Object;o.linkClass="mailtoui",o.autoClose=!0,n.buildStyleTag=function(){var e=window.document.createElement("style"),t="\n .mailtoui-modal {\n background-color: rgb(0,0,0);\n background-color: rgba(0,0,0,0.4);\n bottom: 0;\n color: #303131;\n display: none;\n height: 100%;\n left: 0;\n margin: 0;\n padding: 0;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1000;\n }\n\n .mailtoui-modal-content {\n -webkit-animation: appear 0.4s;\n animation: appear 0.4s;\n background-color: #F1F5F8;\n border-radius: 8px;\n bottom: auto;\n -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n left: 50%;\n max-height: calc(100% - 100px);\n overflow: hidden;\n padding: 0;\n position: fixed;\n right: -45%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n }\n\n .mailtoui-modal-content:hover,\n .mailtoui-modal-content:focus {\n overflow-y: auto;\n }\n\n @media only screen and (min-width : 768px) {\n .mailtoui-modal-content {\n right: auto;\n }\n }\n\n .mailtoui-modal-head {\n background-color: #fff;\n clear: both;\n padding: 20px;\n }\n\n .mailtoui-modal-title {\n font-size: 100%;\n font-weight: bold;\n margin: 0;\n padding: 0;\n }\n\n .mailtoui-modal-close {\n color: #aaa;\n float: right;\n font-size: 38px;\n font-weight: bold;\n position: relative;\n top: -12px;\n }\n\n .mailtoui-modal-close:hover,\n .mailtoui-modal-close:focus {\n color: black;\n cursor: pointer;\n text-decoration: none;\n }\n\n .mailtoui-modal-body {\n height: 100%;\n padding: 20px;\n }\n\n .mailtoui-client {\n color: #333;\n outline: none;\n text-decoration: none;\n }\n\n .mailtoui-client:focus .mailtoui-label {\n background-color: #555;\n color: #fff;\n }\n\n .mailtoui-label {\n background-color: #fff;\n border-radius: 8px;\n -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.18);\n box-shadow: 0px 2px 4px rgba(0,0,0,0.18);\n margin-bottom: 20px;\n padding: 15px 20px;\n }\n\n .mailtoui-label:hover {\n background-color: #555;\n color: #fff;\n }\n\n .mailtoui-client:last-child .mailtoui-label {\n margin-bottom: 0;\n }\n\n .mailtoui-label-icon {\n font-weight: bold;\n position: relative;\n top: 4px;\n }\n\n .mailtoui-label-text {\n margin-left: 5px;\n }\n\n .mailtoui-copy {\n border-radius: 8px;\n margin-top: 20px;\n position: relative;\n -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.18);\n box-shadow: 0px 2px 4px rgba(0,0,0,0.18);\n height: 59px;\n }\n\n .mailtoui-copy-button {\n background-color: #fff;\n border: none;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n bottom: 21px;\n color: #303131;\n font-size: 100%;\n height: 100%;\n outline: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 100px;\n }\n\n .mailtoui-copy-button:hover,\n .mailtoui-copy-button:focus {\n background-color: #555;\n color: #fff;\n cursor: pointer;\n outline: none;\n }\n\n .mailtoui-copy-email-address {\n background-color: #d8dcdf;\n border-radius: 8px;\n border: none;\n -webkit-box-sizing : border-box;\n box-sizing : border-box;\n color: #48494a;\n font-size: 100%;\n height: 100%;\n outline: none;\n padding: 20px 120px 20px 30px;\n width: 100%;\n }\n\n .mailtoui-is-hidden {\n display: none;\n visibility: hidden;\n }\n\n @-webkit-keyframes appear {\n 0% {\n opacity: 0;\n -webkit-transform: translate(-50%, -50%) scale(0,0);\n transform: translate(-50%, -50%) scale(0,0);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translate(-50%, -50%) scale(1,1);\n transform: translate(-50%, -50%) scale(1,1);\n }\n }\n\n @keyframes appear {\n 0% {\n opacity: 0;\n -webkit-transform: translate(-50%, -50%) scale(0,0);\n transform: translate(-50%, -50%) scale(0,0);\n }\n 100% {\n opacity: 1;\n -webkit-transform: translate(-50%, -50%) scale(1,1);\n transform: translate(-50%, -50%) scale(1,1);\n }\n }\n ";return t=t.replace(/mailtoui/g,n.prefix()),e.type="text/css",e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t)),e},n.embedStyleTag=function(){var e=window.document.head.firstChild;window.document.head.insertBefore(n.buildStyleTag(),e)},n.buildModal=function(e){var t=e.id,o=n.getEmail(e),i=n.getLinkSchemeField(e,"subject"),l=n.getLinkSchemeField(e,"cc"),a=n.getLinkSchemeField(e,"bcc"),r=n.getLinkSchemeField(e,"body"),c=window.document.createElement("div"),d=' ',s=`\n
\n
\n ×\n Compose new email with\n
\n
\n
\n \n
\n ${d}\n Gmail in browser\n
\n \n\n \n
\n ${d}\n Outlook in browser\n
\n \n\n \n
\n ${d}\n Yahoo in browser\n
\n \n\n \n
\n \n Default email app\n
\n \n
\n\n
\n \n \n
\n
\n
\n `;return s=s.replace(/mailtoui/g,n.prefix()),c.id=n.prefix("-modal-"+t),c.className=n.prefix("-modal"),c.setAttribute("style","display: none;"),c.setAttribute("aria-hidden",!0),c.innerHTML=s,c},n.embedModal=function(e){var t=n.buildModal(e);window.document.getElementById(n.prefix("-modals")).appendChild(t)},n.embedAllModals=function(){var e=n.getLinks(),t=window.document.createElement("div"),o=window.document.body.firstChild;t.id=n.prefix("-modals"),t.className=n.prefix("-modals"),t.innerHTML="",window.document.body.insertBefore(t,o);for(var i=0;i0&&(t[1]=e.replace(t[0]+"?","").trim()),t},n.getLinkSchemeField=function(e,t){var o=n.splitLinkScheme(e),i="",l=[],a=[];null!==o&&o.length>0&&(i=o[1]),null!==i&&i.length>0&&(l=(i=i.replace("%20&%20","%20%26%20")).split("&"));for(var r=0;r0&&(o=t[0]),decodeURIComponent(o)},n.hideCopyUI=function(e){return null==e||""==e.trim()?n.prefix("-is-hidden"):""},n.setCopyButtonText=function(n){n.innerHTML="Copied!",setTimeout(function(){n.innerHTML="Copy"},600)},n.copy=function(e){e.preventDefault();var t=e.target.getAttribute("data-copytargetid"),o=document.getElementById(t);navigator.userAgent.match(/ipad|iphone/i)?n.iOSCopy(o):n.defaultCopy(o),n.setCopyButtonText(e.target)},n.defaultCopy=function(n){n.select(),document.execCommand("copy")},n.iOSCopy=function(e){var t=[];t.editable=e.contentEditable,t.readOnly=e.readOnly,e.contentEditable=!0,e.readOnly=!1;var o=document.createRange();o.selectNodeContents(e);var i=window.getSelection();i.removeAllRanges(),i.addRange(o),e.setSelectionRange(0,999999),document.execCommand("copy"),n.resetEmailField(e,t),i.removeAllRanges(),n.hideiOSKeyboard()},n.resetEmailField=function(n,e){n.setSelectionRange(0,0),n.contentEditable=e.editable,n.readOnly=e.readOnly},n.hideiOSKeyboard=function(){document.activeElement.blur()},n.setOptions=function(){var n=document.getElementsByTagName("script"),e=n[n.length-1].getAttribute("data-options");if(null!==e&&e.trim().length>0)for(var t in e=JSON.parse(e),o)e.hasOwnProperty(t)&&(o[t]=e[t])},n.prefix=function(n=""){return o.linkClass+n},n.run=function(){n.setOptions(),n.embedAllModals(),n.embedStyleTag(),n.listenForEvents()}}(mailtouiApp),mailtouiApp.run(); \ No newline at end of file +var mailtouiApp=mailtouiApp||{};!function(e){var t=null,o=null,i=new Object;i.linkClass="mailtoui",i.autoClose=!0,e.buildStyleTag=function(){var t=window.document.createElement("style"),o=".mailtoui-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailtoui-modal-content{-webkit-animation:appear .4s;animation:appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:hidden;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailtoui-modal-content:focus,.mailtoui-modal-content:hover{overflow-y:auto}@media only screen and (min-width :768px){.mailtoui-modal-content{right:auto}}.mailtoui-modal-head{background-color:#fff;clear:both;padding:20px}.mailtoui-modal-title{font-size:100%;font-weight:700;margin:0;padding:0}.mailtoui-modal-close{color:#aaa;float:right;font-size:38px;font-weight:700;position:relative;top:-12px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;text-decoration:none}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-client{color:#333;outline:0;text-decoration:none}.mailtoui-client:focus .mailtoui-label{background-color:#555;color:#fff}.mailtoui-label{background-color:#fff;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;padding:15px 20px}.mailtoui-label:hover{background-color:#555;color:#fff}.mailtoui-client:last-child .mailtoui-label{margin-bottom:0}.mailtoui-label-icon{font-weight:700;position:relative;top:4px}.mailtoui-label-text{margin-left:5px}.mailtoui-copy{border-radius:8px;margin-top:20px;position:relative;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px}.mailtoui-copy-button{background-color:#fff;border:none;border-top-right-radius:8px;border-bottom-right-radius:8px;bottom:21px;color:#303131;font-size:100%;height:100%;outline:0;position:absolute;right:0;top:0;width:100px}.mailtoui-copy-button:focus,.mailtoui-copy-button:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-copy-email-address{background-color:#d8dcdf;border-radius:8px;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;outline:0;overflow:hidden;padding:20px 120px 20px 20px;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}";return o=o.replace(/mailtoui/g,e.prefix()),t.type="text/css",t.styleSheet?t.styleSheet.cssText=o:t.appendChild(document.createTextNode(o)),t},e.embedStyleTag=function(){var t=window.document.head.firstChild;window.document.head.insertBefore(e.buildStyleTag(),t)},e.buildModal=function(t){var o=t.id,i=e.getEmail(t),n=e.getLinkSchemeField(t,"subject"),l=e.getLinkSchemeField(t,"cc"),a=e.getLinkSchemeField(t,"bcc"),r=e.getLinkSchemeField(t,"body"),c=window.document.createElement("div"),s=' ',d=`\n
\n
\n ×\n Compose new email with\n
\n
\n
\n \n
\n ${s}\n Gmail in browser\n
\n \n\n \n
\n ${s}\n Outlook in browser\n
\n \n\n \n
\n ${s}\n Yahoo in browser\n
\n \n\n \n
\n \n Default email app\n
\n \n
\n\n
\n
${i}
\n \n
\n
\n
\n `;return d=d.replace(/mailtoui/g,e.prefix()),c.id=e.prefix("-modal-"+o),c.className=e.prefix("-modal"),c.setAttribute("style","display: none;"),c.setAttribute("aria-hidden",!0),c.innerHTML=d,c},e.embedModal=function(t){var o=e.buildModal(t);window.document.getElementById(e.prefix("-modals")).appendChild(o)},e.embedAllModals=function(){var t=e.getLinks(),o=window.document.createElement("div"),i=window.document.body.firstChild;o.id=e.prefix("-modals"),o.className=e.prefix("-modals"),o.innerHTML="",window.document.body.insertBefore(o,i);for(var n=0;n0&&(o[1]=t.replace(o[0]+"?","").trim()),o},e.getLinkSchemeField=function(t,o){var i=e.splitLinkScheme(t),n="",l=[],a=[];null!==i&&i.length>0&&(n=i[1]),null!==n&&n.length>0&&(l=(n=n.replace("%20&%20","%20%26%20")).split("&"));for(var r=0;r0&&(i=o[0]),decodeURIComponent(i)},e.hideCopyUI=function(t){return null==t||""==t.trim()?e.prefix("-is-hidden"):""},e.setCopyButtonText=function(e){e.innerHTML="Copied!",setTimeout(function(){e.innerHTML="Copy"},600)},e.copy=function(t){t.preventDefault();var o=t.target.getAttribute("data-copytargetid"),i=document.getElementById(o),n=document.createRange();n.selectNodeContents(i);var l=window.getSelection();l.removeAllRanges(),l.addRange(n),document.execCommand("copy"),e.setCopyButtonText(t.target)},e.isiOSDevice=function(){return navigator.userAgent.match(/ipad|iphone/i)},e.setOptions=function(){var e=document.getElementsByTagName("script"),t=e[e.length-1].getAttribute("data-options");if(null!==t&&t.trim().length>0)for(var o in t=JSON.parse(t),i)t.hasOwnProperty(o)&&(i[o]=t[o])},e.prefix=function(e=""){return i.linkClass+e},e.run=function(){e.setOptions(),e.embedAllModals(),e.embedStyleTag(),e.listenForEvents()}}(mailtouiApp),mailtouiApp.run(); \ No newline at end of file diff --git a/docs/assets/js/mailtoui-docs-min.js b/docs/assets/js/mailtoui-docs-min.js index e4c4cca..5f1e50e 100644 --- a/docs/assets/js/mailtoui-docs-min.js +++ b/docs/assets/js/mailtoui-docs-min.js @@ -2,6 +2,6 @@ function setDarkTheme(){window.document.getElementById("email-dark").addEventListener("click",function(e){window.document.getElementById("mailtoui-modal-email-dark").classList.add("dark-theme")},!1)}function embedVersion(){var e=require("../../../version.js");window.document.getElementById("version").innerHTML=e}function domReady(e){document.addEventListener("DOMContentLoaded",e),"interactive"!==document.readyState&&"complete"!==document.readyState||e()}domReady(function(){embedVersion(),setDarkTheme()}); },{"../../../version.js":2}],2:[function(require,module,exports){ // generated by genversion -module.exports = '0.1.11' +module.exports = '0.1.12' },{}]},{},[1]) \ No newline at end of file diff --git a/package.json b/package.json index 02763fc..05ff7e6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mailtoui", "description": "A convenient drop-in user interface for mailto links.", - "version": "0.1.11", + "version": "0.1.12", "homepage": "https://mailtoui.com", "author": { "name": "Mario Rodriguez", diff --git a/src/css/mailtoui-min.css b/src/css/mailtoui-min.css new file mode 100644 index 0000000..52de637 --- /dev/null +++ b/src/css/mailtoui-min.css @@ -0,0 +1 @@ +.mailtoui-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailtoui-modal-content{-webkit-animation:appear .4s;animation:appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:hidden;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailtoui-modal-content:focus,.mailtoui-modal-content:hover{overflow-y:auto}@media only screen and (min-width :768px){.mailtoui-modal-content{right:auto}}.mailtoui-modal-head{background-color:#fff;clear:both;padding:20px}.mailtoui-modal-title{font-size:100%;font-weight:700;margin:0;padding:0}.mailtoui-modal-close{color:#aaa;float:right;font-size:38px;font-weight:700;position:relative;top:-12px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;text-decoration:none}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-client{color:#333;outline:0;text-decoration:none}.mailtoui-client:focus .mailtoui-label{background-color:#555;color:#fff}.mailtoui-label{background-color:#fff;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;padding:15px 20px}.mailtoui-label:hover{background-color:#555;color:#fff}.mailtoui-client:last-child .mailtoui-label{margin-bottom:0}.mailtoui-label-icon{font-weight:700;position:relative;top:4px}.mailtoui-label-text{margin-left:5px}.mailtoui-copy{border-radius:8px;margin-top:20px;position:relative;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px}.mailtoui-copy-button{background-color:#fff;border:none;border-top-right-radius:8px;border-bottom-right-radius:8px;bottom:21px;color:#303131;font-size:100%;height:100%;outline:0;position:absolute;right:0;top:0;width:100px}.mailtoui-copy-button:focus,.mailtoui-copy-button:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-copy-email-address{background-color:#d8dcdf;border-radius:8px;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;outline:0;overflow:hidden;padding:20px 120px 20px 20px;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}} \ No newline at end of file diff --git a/src/css/mailtoui-prefixed.css b/src/css/mailtoui-prefixed.css deleted file mode 100644 index e12eb1a..0000000 --- a/src/css/mailtoui-prefixed.css +++ /dev/null @@ -1,198 +0,0 @@ -.mailtoui-modal { - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.4); - bottom: 0; - color: #303131; - display: none; - height: 100%; - left: 0; - margin: 0; - padding: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 1000; -} - -.mailtoui-modal-content { - -webkit-animation: appear 0.4s; - animation: appear 0.4s; - background-color: #F1F5F8; - border-radius: 8px; - bottom: auto; - -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); - left: 50%; - max-height: calc(100% - 100px); - overflow: hidden; - padding: 0; - position: fixed; - right: -45%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -.mailtoui-modal-content:hover, -.mailtoui-modal-content:focus { - overflow-y: auto; -} - -/* Small devices, tablets */ -@media only screen and (min-width : 768px) { - .mailtoui-modal-content { - right: auto; - } -} - -.mailtoui-modal-head { - background-color: #fff; - clear: both; - padding: 20px; -} - -.mailtoui-modal-title { - font-size: 100%; - font-weight: bold; - margin: 0; - padding: 0; -} - -.mailtoui-modal-close { - color: #aaa; - float: right; - font-size: 38px; - font-weight: bold; - position: relative; - top: -12px; -} - -.mailtoui-modal-close:hover, -.mailtoui-modal-close:focus { - color: black; - cursor: pointer; - text-decoration: none; -} - -.mailtoui-modal-body { - height: 100%; - padding: 20px; -} - -.mailtoui-client { - color: #333; - outline: none; - text-decoration: none; -} - -.mailtoui-client:focus .mailtoui-label { - background-color: #555; - color: #fff; -} - -.mailtoui-label { - background-color: #fff; - border-radius: 8px; - -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - margin-bottom: 20px; - padding: 15px 20px; -} - -.mailtoui-label:hover { - background-color: #555; - color: #fff; -} - -.mailtoui-client:last-child .mailtoui-label { - margin-bottom: 0; -} - -.mailtoui-label-icon { - font-weight: bold; - position: relative; - top: 4px; -} - -.mailtoui-label-text { - margin-left: 5px; -} - -.mailtoui-copy { - border-radius: 8px; - margin-top: 20px; - position: relative; - -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - height: 59px; -} - -.mailtoui-copy-button { - background-color: #fff; - border: none; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - bottom: 21px; - color: #303131; - font-size: 100%; - height: 100%; - outline: none; - position: absolute; - right: 0; - top: 0; - width: 100px; -} - -.mailtoui-copy-button:hover, -.mailtoui-copy-button:focus { - background-color: #555; - color: #fff; - cursor: pointer; - outline: none; -} - -.mailtoui-copy-email-address { - background-color: #d8dcdf; - border-radius: 8px; - border: none; - -webkit-box-sizing : border-box; - box-sizing : border-box; - color: #48494a; - font-size: 100%; - height: 100%; - outline: none; - padding: 20px 120px 20px 30px; - width: 100%; -} - -.mailtoui-is-hidden { - display: none; - visibility: hidden; -} - -@-webkit-keyframes appear { - 0% { - opacity: 0; - -webkit-transform: translate(-50%, -50%) scale(0,0); - transform: translate(-50%, -50%) scale(0,0); - } - 100% { - opacity: 1; - -webkit-transform: translate(-50%, -50%) scale(1,1); - transform: translate(-50%, -50%) scale(1,1); - } -} - -@keyframes appear { - 0% { - opacity: 0; - -webkit-transform: translate(-50%, -50%) scale(0,0); - transform: translate(-50%, -50%) scale(0,0); - } - 100% { - opacity: 1; - -webkit-transform: translate(-50%, -50%) scale(1,1); - transform: translate(-50%, -50%) scale(1,1); - } -} diff --git a/src/css/mailtoui.css b/src/css/mailtoui.css index e12eb1a..62816a1 100644 --- a/src/css/mailtoui.css +++ b/src/css/mailtoui.css @@ -162,7 +162,8 @@ font-size: 100%; height: 100%; outline: none; - padding: 20px 120px 20px 30px; + overflow: hidden; + padding: 20px 120px 20px 20px; width: 100%; } diff --git a/src/js/mailtoui.js b/src/js/mailtoui.js index 2d58fac..9bb3ad6 100644 --- a/src/js/mailtoui.js +++ b/src/js/mailtoui.js @@ -54,205 +54,7 @@ var mailtouiApp = mailtouiApp || {}; */ app.buildStyleTag = function() { var styleTag = window.document.createElement('style'); - var css = ` - .mailtoui-modal { - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.4); - bottom: 0; - color: #303131; - display: none; - height: 100%; - left: 0; - margin: 0; - padding: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 1000; - } - - .mailtoui-modal-content { - -webkit-animation: appear 0.4s; - animation: appear 0.4s; - background-color: #F1F5F8; - border-radius: 8px; - bottom: auto; - -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); - left: 50%; - max-height: calc(100% - 100px); - overflow: hidden; - padding: 0; - position: fixed; - right: -45%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - } - - .mailtoui-modal-content:hover, - .mailtoui-modal-content:focus { - overflow-y: auto; - } - - @media only screen and (min-width : 768px) { - .mailtoui-modal-content { - right: auto; - } - } - - .mailtoui-modal-head { - background-color: #fff; - clear: both; - padding: 20px; - } - - .mailtoui-modal-title { - font-size: 100%; - font-weight: bold; - margin: 0; - padding: 0; - } - - .mailtoui-modal-close { - color: #aaa; - float: right; - font-size: 38px; - font-weight: bold; - position: relative; - top: -12px; - } - - .mailtoui-modal-close:hover, - .mailtoui-modal-close:focus { - color: black; - cursor: pointer; - text-decoration: none; - } - - .mailtoui-modal-body { - height: 100%; - padding: 20px; - } - - .mailtoui-client { - color: #333; - outline: none; - text-decoration: none; - } - - .mailtoui-client:focus .mailtoui-label { - background-color: #555; - color: #fff; - } - - .mailtoui-label { - background-color: #fff; - border-radius: 8px; - -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - margin-bottom: 20px; - padding: 15px 20px; - } - - .mailtoui-label:hover { - background-color: #555; - color: #fff; - } - - .mailtoui-client:last-child .mailtoui-label { - margin-bottom: 0; - } - - .mailtoui-label-icon { - font-weight: bold; - position: relative; - top: 4px; - } - - .mailtoui-label-text { - margin-left: 5px; - } - - .mailtoui-copy { - border-radius: 8px; - margin-top: 20px; - position: relative; - -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - box-shadow: 0px 2px 4px rgba(0,0,0,0.18); - height: 59px; - } - - .mailtoui-copy-button { - background-color: #fff; - border: none; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - bottom: 21px; - color: #303131; - font-size: 100%; - height: 100%; - outline: none; - position: absolute; - right: 0; - top: 0; - width: 100px; - } - - .mailtoui-copy-button:hover, - .mailtoui-copy-button:focus { - background-color: #555; - color: #fff; - cursor: pointer; - outline: none; - } - - .mailtoui-copy-email-address { - background-color: #d8dcdf; - border-radius: 8px; - border: none; - -webkit-box-sizing : border-box; - box-sizing : border-box; - color: #48494a; - font-size: 100%; - height: 100%; - outline: none; - padding: 20px 120px 20px 30px; - width: 100%; - } - - .mailtoui-is-hidden { - display: none; - visibility: hidden; - } - - @-webkit-keyframes appear { - 0% { - opacity: 0; - -webkit-transform: translate(-50%, -50%) scale(0,0); - transform: translate(-50%, -50%) scale(0,0); - } - 100% { - opacity: 1; - -webkit-transform: translate(-50%, -50%) scale(1,1); - transform: translate(-50%, -50%) scale(1,1); - } - } - - @keyframes appear { - 0% { - opacity: 0; - -webkit-transform: translate(-50%, -50%) scale(0,0); - transform: translate(-50%, -50%) scale(0,0); - } - 100% { - opacity: 1; - -webkit-transform: translate(-50%, -50%) scale(1,1); - transform: translate(-50%, -50%) scale(1,1); - } - } - `; + var css = `.mailtoui-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailtoui-modal-content{-webkit-animation:appear .4s;animation:appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:hidden;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailtoui-modal-content:focus,.mailtoui-modal-content:hover{overflow-y:auto}@media only screen and (min-width :768px){.mailtoui-modal-content{right:auto}}.mailtoui-modal-head{background-color:#fff;clear:both;padding:20px}.mailtoui-modal-title{font-size:100%;font-weight:700;margin:0;padding:0}.mailtoui-modal-close{color:#aaa;float:right;font-size:38px;font-weight:700;position:relative;top:-12px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;text-decoration:none}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-client{color:#333;outline:0;text-decoration:none}.mailtoui-client:focus .mailtoui-label{background-color:#555;color:#fff}.mailtoui-label{background-color:#fff;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;padding:15px 20px}.mailtoui-label:hover{background-color:#555;color:#fff}.mailtoui-client:last-child .mailtoui-label{margin-bottom:0}.mailtoui-label-icon{font-weight:700;position:relative;top:4px}.mailtoui-label-text{margin-left:5px}.mailtoui-copy{border-radius:8px;margin-top:20px;position:relative;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px}.mailtoui-copy-button{background-color:#fff;border:none;border-top-right-radius:8px;border-bottom-right-radius:8px;bottom:21px;color:#303131;font-size:100%;height:100%;outline:0;position:absolute;right:0;top:0;width:100px}.mailtoui-copy-button:focus,.mailtoui-copy-button:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-copy-email-address{background-color:#d8dcdf;border-radius:8px;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;outline:0;overflow:hidden;padding:20px 120px 20px 20px;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}`; css = css.replace(/mailtoui/g, app.prefix()); @@ -335,7 +137,7 @@ var mailtouiApp = mailtouiApp || {};
- +
${email}
@@ -744,74 +546,26 @@ var mailtouiApp = mailtouiApp || {}; var targetId = event.target.getAttribute('data-copytargetid'); var email = document.getElementById(targetId); - var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i); - - if (isiOSDevice) { - app.iOSCopy(email); - } else { - app.defaultCopy(email); - } - - app.setCopyButtonText(event.target); - }; - - /** - * Copy email address to the clipboard (default way). - * - * @param {Element} email The email address field. - */ - app.defaultCopy = function(email) { - email.select(); - document.execCommand('copy'); - }; - - /** - * Copy email address to the clipboard on iOS devices. - * - * @param {Element} email The email address field. - */ - app.iOSCopy = function(email) { - var oldState = []; - - oldState['editable'] = email.contentEditable; - oldState['readOnly'] = email.readOnly; - - email.contentEditable = true; - email.readOnly = false; - var range = document.createRange(); + range.selectNodeContents(email); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); - email.setSelectionRange(0, 999999); document.execCommand('copy'); - app.resetEmailField(email, oldState); - selection.removeAllRanges(); - - app.hideiOSKeyboard(); + app.setCopyButtonText(event.target); }; /** - * Reset the original state of the email address field. + * Check if device is running iOS. * - * @param {string} email The email field. - * @param {Array} state Array with properties to modify the state of email address field. - */ - app.resetEmailField = function(email, state) { - email.setSelectionRange(0, 0); - email.contentEditable = state['editable']; - email.readOnly = state['readOnly']; - }; - - /** - * Hide iOS keyboard. + * @return {boolean} True if device runs iOS. */ - app.hideiOSKeyboard = function() { - document.activeElement.blur(); + app.isiOSDevice = function() { + return navigator.userAgent.match(/ipad|iphone/i); }; /** diff --git a/version.js b/version.js index 6e0e007..96e83e3 100644 --- a/version.js +++ b/version.js @@ -1,2 +1,2 @@ // generated by genversion -module.exports = '0.1.11' +module.exports = '0.1.12'