diff --git a/README.md b/README.md index 7eeab11..b1ac95f 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,29 @@

- - MailtoUI + + mailymaily

A simple way to enhance your mailto links with a convenient user interface.

- Latest release - Total downloads - License - Share on Twitter + Latest release + Total downloads + License + Share on Twitter

## Introduction -MailtoUI is a JavaScript library that enhances your mailto links with a convenient user interface. It gives your users the flexibility to compose a new message using a browser-based email client or their default local email app. +mailymaily is a JavaScript library that enhances your mailto links with a convenient user interface. It gives your users the flexibility to compose a new message using a browser-based email client or their default local email app. -MailtoUI is ideal for static sites or any other site where you don't want to spend time setting up a "Contact Us" form solution. +mailymaily is ideal for static sites or any other site where you don't want to spend time setting up a "Contact Us" form solution. ## Quick Setup ### STEP 1 -Add MailtoUI via CDN to the bottom of your page, just before the closing `` tag. +Add mailymaily via CDN to the bottom of your page, just before the closing `` tag. IMPORTANT: Be sure to replace `[version]` with the latest version number. @@ -31,29 +31,29 @@ IMPORTANT: Be sure to replace `[version]` with the latest version number. ... ... - + ``` ### STEP 2 -Attach your mailto link to MailtoUI by adding the class `mailtoui` to the `` tag. +Attach your mailto link to mailymaily by adding the class `mailymaily` to the `` tag. ```html -Contact Tony +Contact Tony ``` -That's it! Your mailto link is now using MailtoUI. Refresh your page and try it out. +That's it! Your mailto link is now using mailymaily. Refresh your page and try it out. ## Documentation -For full documentation, visit [mailtoui.com](https://mailtoui.com). +For full documentation, visit [mailymaily.com](https://mailymaily.com). ## Contributing -If you're interested in contributing to MailtoUI, please follow the directions in the [contributing docs](https://github.com/mariordev/mailtoui/blob/master/.github/CONTRIBUTING.md) **before working on a pull request**. +If you're interested in contributing to mailymaily, please follow the directions in the [contributing docs](https://github.com/mariordev/mailymaily/blob/master/.github/CONTRIBUTING.md) **before working on a pull request**. ## License -[MIT](https://github.com/mariordev/mailtoui/blob/master/LICENSE) +[MIT](https://github.com/mariordev/mailymaily/blob/master/LICENSE) diff --git a/dist/mailtoui-min.js b/dist/mailtoui-min.js index 6c5e6c0..41c0513 100644 --- a/dist/mailtoui-min.js +++ b/dist/mailtoui-min.js @@ -1,8 +1,8 @@ /** - * mailtoui - A simple way to enhance your mailto links with a convenient user interface. + * mailymaily - A simple way to enhance your mailto links with a convenient user interface. * @version v1.0.3 - * @link https://mailtoui.com + * @link https://mailymaily.com * @author Mario Rodriguez - https://twitter.com/mariordev * @license MIT */ -var mailtouiApp=mailtouiApp||{};!function(t){var o=document.getElementsByTagName("html")[0],e=document.getElementsByTagName("body")[0],i=null,n=null,l=' ',a=' ',r=new Object;r.linkClass="mailtoui",r.autoClose=!0,r.disableOnMobile=!0,r.title="Compose new email with",r.buttonText1="Gmail in browser",r.buttonText2="Outlook in browser",r.buttonText3="Yahoo in browser",r.buttonText4="Default email app",r.buttonIcon1=l,r.buttonIcon2=l,r.buttonIcon3=l,r.buttonIcon4=' ',r.buttonIconCopy=a,r.buttonTextCopy="Copy",r.buttonTextCopyAction="Copied!";var c=0,s="auto";t.buildStyleTag=function(){var o=document.createElement("style"),e=".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:mailtoui-appear .4s;animation:mailtoui-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:auto;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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailtoui-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailtoui-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-button{color:#333;text-decoration:none}.mailtoui-button:focus{outline:0}.mailtoui-button:focus .mailtoui-button-content{background-color:#555;color:#fff}.mailtoui-button-content{background-color:#fff;border:none;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;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailtoui-button-content:hover{background-color:#555;color:#fff}.mailtoui-button:last-child .mailtoui-button-content{margin-bottom:0}.mailtoui-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailtoui-button-icon svg{height:24px;width:24px}.mailtoui-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailtoui-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailtoui-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailtoui-button-copy:focus,.mailtoui-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-button-copy-clicked,.mailtoui-button-copy-clicked:focus,.mailtoui-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailtoui-button-copy-clicked .mailtoui-button-icon,.mailtoui-button-copy-clicked:focus .mailtoui-button-icon,.mailtoui-button-copy-clicked:hover .mailtoui-button-icon{display:none;visibility:hidden}.mailtoui-button-copy-clicked .mailtoui-button-text,.mailtoui-button-copy-clicked:focus .mailtoui-button-text,.mailtoui-button-copy-clicked:hover .mailtoui-button-text{color:#fff;top:2px}.mailtoui-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailtoui-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailtoui-brand a{color:#888}.mailtoui-brand a:focus,.mailtoui-brand a:hover{font-weight:700;outline:0}.mailtoui-no-scroll{overflow:hidden;position:fixed;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailtoui-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 mailtoui-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 e=e.replace(/mailtoui/g,t.prefix()),o.setAttribute("id",t.prefix("-styles")),o.setAttribute("type","text/css"),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e)),o},t.embedStyleTag=function(){if(!t.styleTagExists()){var o=document.head.firstChild;document.head.insertBefore(t.buildStyleTag(),o)}},t.styleTagExists=function(){return!!document.getElementById(t.prefix("-styles"))},t.buildModal=function(){var o=document.createElement("div"),e=`
${r.title}
×
${r.buttonIcon1} ${r.buttonText1}
${r.buttonIcon2} ${r.buttonText2}
${r.buttonIcon3} ${r.buttonText3}
${r.buttonIcon4} ${r.buttonText4}
Powered by MailtoUI
`;return e=e.replace(/mailtoui/g,t.prefix()),o.setAttribute("id",t.prefix("-modal")),o.setAttribute("class",t.prefix("-modal")),o.setAttribute("style","display: none;"),o.setAttribute("aria-hidden",!0),o.innerHTML=e,o},t.embedModal=function(){if(!t.modalExists()){var o=t.buildModal(),e=document.body.firstChild;document.body.insertBefore(o,e)}},t.modalExists=function(){return!!document.getElementById(t.prefix("-modal"))},t.getModal=function(o){return t.hydrateModal(o),document.getElementById(t.prefix("-modal"))},t.hydrateModal=function(o){var e=t.getEmail(o),i=t.getLinkField(o,"subject"),n=t.getLinkField(o,"cc"),l=t.getLinkField(o,"bcc"),a=t.getLinkField(o,"body");document.getElementById(t.prefix("-button-1")).href="https://mail.google.com/mail/?view=cm&fs=1&to="+e+"&su="+i+"&cc="+n+"&bcc="+l+"&body="+a,document.getElementById(t.prefix("-button-2")).href="https://outlook.office.com/owa/?path=/mail/action/compose&to="+e+"&subject="+i+"&body="+a,document.getElementById(t.prefix("-button-3")).href="https://compose.mail.yahoo.com/?to="+e+"&subject="+i+"&cc="+n+"&bcc="+l+"&body="+a,document.getElementById(t.prefix("-button-4")).href="mailto:"+e+"?subject="+i+"&cc="+n+"&bcc="+l+"&body="+a,document.getElementById(t.prefix("-email-address")).innerHTML=e,document.getElementById(t.prefix("-button-icon-1")).innerHTML=r.buttonIcon1,document.getElementById(t.prefix("-button-icon-2")).innerHTML=r.buttonIcon2,document.getElementById(t.prefix("-button-icon-3")).innerHTML=r.buttonIcon3,document.getElementById(t.prefix("-button-icon-4")).innerHTML=r.buttonIcon4,document.getElementById(t.prefix("-button-icon-copy")).innerHTML=r.buttonIconCopy,t.toggleHideCopyUi(e)},t.savePageScrollPosition=function(){c=window.pageYOffset,e.style.top=-c+"px"},t.restorePageScrollPosition=function(){window.scrollTo(0,c),e.style.top=0},t.saveScrollBehavior=function(){s=o.style.scrollBehavior,o.style.scrollBehavior="auto"},t.restoreScrollBehavior=function(){o.style.scrollBehavior=s},t.saveLastDocElementFocused=function(){n=document.activeElement},t.openModal=function(o){r.disableOnMobile&&t.isMobileDevice()||(o.preventDefault(),t.saveLastDocElementFocused(),t.savePageScrollPosition(),t.saveScrollBehavior(),t.displayModal(o),t.hideModalFromScreenReader(!1),t.enablePageScrolling(!1),t.modalFocus(),t.triggerEvent(i,"open"))},t.displayModal=function(o){var e=t.getParentElement(o.target,"a");(i=t.getModal(e)).style.display="block"},t.modalFocus=function(){i.focusableChildren=Array.from(i.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')),i.focusableChildren[1].focus()},t.closeModal=function(o){o.preventDefault(),t.hideModal(),t.enablePageScrolling(!0),t.restorePageScrollPosition(),t.restoreScrollBehavior(),t.docRefocus(),t.triggerEvent(i,"close")},t.hideModal=function(){t.hideModalFromScreenReader(!0),t.isDefined(i)&&(i.style.display="none")},t.hideModalFromScreenReader=function(o){t.isDefined(i)&&i.setAttribute("aria-hidden",o)},t.enablePageScrolling=function(i){i?(e.classList.remove(t.prefix("-no-scroll")),o.classList.remove(t.prefix("-no-scroll"))):(e.classList.add(t.prefix("-no-scroll")),o.classList.add(t.prefix("-no-scroll")))},t.docRefocus=function(){n.focus()},t.openClient=function(o,e){var i="_blank";t.isDefaultEmailAppButton(o)&&(i="_self"),window.open(o.href,i),t.triggerEvent(o,"compose"),r.autoClose&&t.closeModal(e)},t.isDefaultEmailAppButton=function(o){return o.id==t.prefix("-button-4")},t.getParentElement=function(t,o){for(;null!==t;){if(t.tagName.toUpperCase()==o.toUpperCase())return t;t=t.parentNode}return null},t.triggerEvent=function(t,o){var e=new Event(o);t.dispatchEvent(e)},t.isMobileDevice=function(){var t,o=!1;return t=navigator.userAgent||navigator.vendor||window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(o=!0),o},t.listenForEvents=function(){t.listenForClickOnLink(),t.listenForClickOnClient(),t.listenForClickOnCopy(),t.listenForClickOnClose(),t.listenForClickOnWindow(),t.listenForKeys()},t.listenForClickOnLink=function(){for(var o=document.getElementsByClassName(t.prefix()),e=0;e0&&(e[1]=o.replace(e[0]+"?","").trim()),e},t.getLinkField=function(o,e){var i=t.splitLink(o),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=e[0]),decodeURIComponent(i)},t.getClassHideCopyUi=function(){return t.prefix("-is-hidden")},t.toggleHideCopyUi=function(o){var e=document.getElementById(t.prefix("-copy"));0==o.length?e.classList.add(t.getClassHideCopyUi()):e.classList.remove(t.getClassHideCopyUi())},t.toggleCopyButton=function(){button=document.getElementById(t.prefix("-button-copy")),buttonText=document.getElementById(t.prefix("-button-text-copy")),buttonText.innerHTML=r.buttonTextCopyAction,button.classList.add(t.prefix("-button-copy-clicked")),setTimeout(function(){buttonText.innerHTML=r.buttonTextCopy,button.classList.remove(t.prefix("-button-copy-clicked"))},600)},t.copy=function(o){o.preventDefault();var e=t.getParentElement(o.target,"button").getAttribute("data-copytargetid"),i=document.getElementById(e),n=document.createRange();n.selectNodeContents(i);var l=window.getSelection();l.removeAllRanges(),l.addRange(n),document.execCommand("copy"),t.triggerEvent(i,"copy"),t.toggleCopyButton()},t.isiOSDevice=function(){return navigator.userAgent.match(/ipad|iphone/i)},t.setOptions=function(o){if(o)var e=JSON.stringify(o);else e=t.getOptionsFromScriptTag();if(e&&e.trim().length>0)for(var i in e=JSON.parse(e),r)e.hasOwnProperty(i)&&(r[i]=t.sanitizeUserOption(i,e[i]))},t.sanitizeUserOption=function(o,e){return t.stringContains(o,"icon")?t.validateSvg(o,e):t.isString(e)?t.stripHtml(e):e},t.validateSvg=function(o,e){t.getSvg(o,e).then(function(i){if(!t.stringIsSvg(i.responseText))throw new Error(o+": "+e+" is not an SVG file.");if(t.stringHasScript(i.responseText))throw new Error(o+": "+e+" is an invalid SVG file.");r[o]=i.responseText}).catch(function(t){r[o]="buttonIconCopy"==o?a:l,console.log(t)})},t.loadSvg=function(t,o){return new Promise((t,e)=>{var i=new XMLHttpRequest;i.open("GET",o,!0),i.onload=function(o){200==i.status?t(i):e(i)},i.send()})},t.getSvg=async function(o,e){return await t.loadSvg(o,e)},t.isString=function(t){return"string"==typeof t},t.stripHtml=function(t){return t.replace(/(<([^>]+)>)/g,"")},t.stringContains=function(t,o){return-1!==t.toLowerCase().indexOf(o.toLowerCase())},t.stringIsSvg=function(t){return t.startsWith(" ',a=' ',r=new Object;r.linkClass="mailymaily",r.autoClose=!0,r.disableOnMobile=!0,r.title="Compose new email with",r.buttonText1="Gmail in browser",r.buttonText2="Outlook in browser",r.buttonText3="Yahoo in browser",r.buttonText4="Default email app",r.buttonIcon1=l,r.buttonIcon2=l,r.buttonIcon3=l,r.buttonIcon4=' ',r.buttonIconCopy=a,r.buttonTextCopy="Copy",r.buttonTextCopyAction="Copied!";var c=0,s="auto";t.buildStyleTag=function(){var o=document.createElement("style"),e=".mailymaily-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}.mailymaily-modal-content{-webkit-animation:mailymaily-appear .4s;animation:mailymaily-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:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailymaily-modal-content:focus,.mailymaily-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailymaily-modal-content{right:auto}}.mailymaily-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailymaily-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailymaily-modal-close:focus,.mailymaily-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailymaily-modal-body{height:100%;padding:20px}.mailymaily-button{color:#333;text-decoration:none}.mailymaily-button:focus{outline:0}.mailymaily-button:focus .mailymaily-button-content{background-color:#555;color:#fff}.mailymaily-button-content{background-color:#fff;border:none;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;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailymaily-button-content:hover{background-color:#555;color:#fff}.mailymaily-button:last-child .mailymaily-button-content{margin-bottom:0}.mailymaily-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailymaily-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailymaily-button-copy:focus,.mailymaily-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailymaily-button-copy-clicked,.mailymaily-button-copy-clicked:focus,.mailymaily-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailymaily-button-copy-clicked .mailymaily-button-icon,.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,.mailymaily-button-copy-clicked:hover .mailymaily-button-icon{display:none;visibility:hidden}.mailymaily-button-copy-clicked .mailymaily-button-text,.mailymaily-button-copy-clicked:focus .mailymaily-button-text,.mailymaily-button-copy-clicked:hover .mailymaily-button-text{color:#fff;top:2px}.mailymaily-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailymaily-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailymaily-brand a{color:#888}.mailymaily-brand a:focus,.mailymaily-brand a:hover{font-weight:700;outline:0}.mailymaily-no-scroll{overflow:hidden;position:fixed;width:100%}.mailymaily-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailymaily-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 mailymaily-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 e=e.replace(/mailymaily/g,t.prefix()),o.setAttribute("id",t.prefix("-styles")),o.setAttribute("type","text/css"),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e)),o},t.embedStyleTag=function(){if(!t.styleTagExists()){var o=document.head.firstChild;document.head.insertBefore(t.buildStyleTag(),o)}},t.styleTagExists=function(){return!!document.getElementById(t.prefix("-styles"))},t.buildModal=function(){var o=document.createElement("div"),e=`
${r.title}
×
${r.buttonIcon1} ${r.buttonText1}
${r.buttonIcon2} ${r.buttonText2}
${r.buttonIcon3} ${r.buttonText3}
${r.buttonIcon4} ${r.buttonText4}
Powered by mailymaily
`;return e=e.replace(/mailymaily/g,t.prefix()),o.setAttribute("id",t.prefix("-modal")),o.setAttribute("class",t.prefix("-modal")),o.setAttribute("style","display: none;"),o.setAttribute("aria-hidden",!0),o.innerHTML=e,o},t.embedModal=function(){if(!t.modalExists()){var o=t.buildModal(),e=document.body.firstChild;document.body.insertBefore(o,e)}},t.modalExists=function(){return!!document.getElementById(t.prefix("-modal"))},t.getModal=function(o){return t.hydrateModal(o),document.getElementById(t.prefix("-modal"))},t.hydrateModal=function(o){var e=t.getEmail(o),i=t.getLinkField(o,"subject"),n=t.getLinkField(o,"cc"),l=t.getLinkField(o,"bcc"),a=t.getLinkField(o,"body");document.getElementById(t.prefix("-button-1")).href="https://mail.google.com/mail/?view=cm&fs=1&to="+e+"&su="+i+"&cc="+n+"&bcc="+l+"&body="+a,document.getElementById(t.prefix("-button-2")).href="https://outlook.office.com/owa/?path=/mail/action/compose&to="+e+"&subject="+i+"&body="+a,document.getElementById(t.prefix("-button-3")).href="https://compose.mail.yahoo.com/?to="+e+"&subject="+i+"&cc="+n+"&bcc="+l+"&body="+a,document.getElementById(t.prefix("-button-4")).href="mailto:"+e+"?subject="+i+"&cc="+n+"&bcc="+l+"&body="+a,document.getElementById(t.prefix("-email-address")).innerHTML=e,document.getElementById(t.prefix("-button-icon-1")).innerHTML=r.buttonIcon1,document.getElementById(t.prefix("-button-icon-2")).innerHTML=r.buttonIcon2,document.getElementById(t.prefix("-button-icon-3")).innerHTML=r.buttonIcon3,document.getElementById(t.prefix("-button-icon-4")).innerHTML=r.buttonIcon4,document.getElementById(t.prefix("-button-icon-copy")).innerHTML=r.buttonIconCopy,t.toggleHideCopyUi(e)},t.savePageScrollPosition=function(){c=window.pageYOffset,e.style.top=-c+"px"},t.restorePageScrollPosition=function(){window.scrollTo(0,c),e.style.top=0},t.saveScrollBehavior=function(){s=o.style.scrollBehavior,o.style.scrollBehavior="auto"},t.restoreScrollBehavior=function(){o.style.scrollBehavior=s},t.saveLastDocElementFocused=function(){n=document.activeElement},t.openModal=function(o){r.disableOnMobile&&t.isMobileDevice()||(o.preventDefault(),t.saveLastDocElementFocused(),t.savePageScrollPosition(),t.saveScrollBehavior(),t.displayModal(o),t.hideModalFromScreenReader(!1),t.enablePageScrolling(!1),t.modalFocus(),t.triggerEvent(i,"open"))},t.displayModal=function(o){var e=t.getParentElement(o.target,"a");(i=t.getModal(e)).style.display="block"},t.modalFocus=function(){i.focusableChildren=Array.from(i.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')),i.focusableChildren[1].focus()},t.closeModal=function(o){o.preventDefault(),t.hideModal(),t.enablePageScrolling(!0),t.restorePageScrollPosition(),t.restoreScrollBehavior(),t.docRefocus(),t.triggerEvent(i,"close")},t.hideModal=function(){t.hideModalFromScreenReader(!0),t.isDefined(i)&&(i.style.display="none")},t.hideModalFromScreenReader=function(o){t.isDefined(i)&&i.setAttribute("aria-hidden",o)},t.enablePageScrolling=function(i){i?(e.classList.remove(t.prefix("-no-scroll")),o.classList.remove(t.prefix("-no-scroll"))):(e.classList.add(t.prefix("-no-scroll")),o.classList.add(t.prefix("-no-scroll")))},t.docRefocus=function(){n.focus()},t.openClient=function(o,e){var i="_blank";t.isDefaultEmailAppButton(o)&&(i="_self"),window.open(o.href,i),t.triggerEvent(o,"compose"),r.autoClose&&t.closeModal(e)},t.isDefaultEmailAppButton=function(o){return o.id==t.prefix("-button-4")},t.getParentElement=function(t,o){for(;null!==t;){if(t.tagName.toUpperCase()==o.toUpperCase())return t;t=t.parentNode}return null},t.triggerEvent=function(t,o){var e=new Event(o);t.dispatchEvent(e)},t.isMobileDevice=function(){var t,o=!1;return t=navigator.userAgent||navigator.vendor||window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(o=!0),o},t.listenForEvents=function(){t.listenForClickOnLink(),t.listenForClickOnClient(),t.listenForClickOnCopy(),t.listenForClickOnClose(),t.listenForClickOnWindow(),t.listenForKeys()},t.listenForClickOnLink=function(){for(var o=document.getElementsByClassName(t.prefix()),e=0;e0&&(e[1]=o.replace(e[0]+"?","").trim()),e},t.getLinkField=function(o,e){var i=t.splitLink(o),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=e[0]),decodeURIComponent(i)},t.getClassHideCopyUi=function(){return t.prefix("-is-hidden")},t.toggleHideCopyUi=function(o){var e=document.getElementById(t.prefix("-copy"));0==o.length?e.classList.add(t.getClassHideCopyUi()):e.classList.remove(t.getClassHideCopyUi())},t.toggleCopyButton=function(){button=document.getElementById(t.prefix("-button-copy")),buttonText=document.getElementById(t.prefix("-button-text-copy")),buttonText.innerHTML=r.buttonTextCopyAction,button.classList.add(t.prefix("-button-copy-clicked")),setTimeout(function(){buttonText.innerHTML=r.buttonTextCopy,button.classList.remove(t.prefix("-button-copy-clicked"))},600)},t.copy=function(o){o.preventDefault();var e=t.getParentElement(o.target,"button").getAttribute("data-copytargetid"),i=document.getElementById(e),n=document.createRange();n.selectNodeContents(i);var l=window.getSelection();l.removeAllRanges(),l.addRange(n),document.execCommand("copy"),t.triggerEvent(i,"copy"),t.toggleCopyButton()},t.isiOSDevice=function(){return navigator.userAgent.match(/ipad|iphone/i)},t.setOptions=function(o){if(o)var e=JSON.stringify(o);else e=t.getOptionsFromScriptTag();if(e&&e.trim().length>0)for(var i in e=JSON.parse(e),r)e.hasOwnProperty(i)&&(r[i]=t.sanitizeUserOption(i,e[i]))},t.sanitizeUserOption=function(o,e){return t.stringContains(o,"icon")?t.validateSvg(o,e):t.isString(e)?t.stripHtml(e):e},t.validateSvg=function(o,e){t.getSvg(o,e).then(function(i){if(!t.stringIsSvg(i.responseText))throw new Error(o+": "+e+" is not an SVG file.");if(t.stringHasScript(i.responseText))throw new Error(o+": "+e+" is an invalid SVG file.");r[o]=i.responseText}).catch(function(t){r[o]="buttonIconCopy"==o?a:l,console.log(t)})},t.loadSvg=function(t,o){return new Promise((t,e)=>{var i=new XMLHttpRequest;i.open("GET",o,!0),i.onload=function(o){200==i.status?t(i):e(i)},i.send()})},t.getSvg=async function(o,e){return await t.loadSvg(o,e)},t.isString=function(t){return"string"==typeof t},t.stripHtml=function(t){return t.replace(/(<([^>]+)>)/g,"")},t.stringContains=function(t,o){return-1!==t.toLowerCase().indexOf(o.toLowerCase())},t.stringIsSvg=function(t){return t.startsWith("
${options.title}
×
${options.buttonIcon1} ${options.buttonText1}
${options.buttonIcon2} ${options.buttonText2}
${options.buttonIcon3} ${options.buttonText3}
${options.buttonIcon4} ${options.buttonText4}
Powered by MailtoUI
\ No newline at end of file +
${options.title}
×
${options.buttonIcon1} ${options.buttonText1}
${options.buttonIcon2} ${options.buttonText2}
${options.buttonIcon3} ${options.buttonText3}
${options.buttonIcon4} ${options.buttonText4}
Powered by mailymaily
\ No newline at end of file diff --git a/src/html/component.html b/src/html/component.html index ca85f08..3065ee1 100644 --- a/src/html/component.html +++ b/src/html/component.html @@ -1,49 +1,45 @@ -
-
-
${options.title}
- × +
+
+
${options.title}
+ ×
-
-
- -
- ${options.buttonIcon1} - ${options.buttonText1} +
+
+ +
+ ${options.buttonIcon1} + ${options.buttonText1}
- -
- ${options.buttonIcon2} - ${options.buttonText2} + +
+ ${options.buttonIcon2} + ${options.buttonText2}
- -
- ${options.buttonIcon3} - ${options.buttonText3} + +
+ ${options.buttonIcon3} + ${options.buttonText3}
- -
- ${options.buttonIcon4} - ${options.buttonText4} + +
+ ${options.buttonIcon4} + ${options.buttonText4}
-
-
-
- -
- Powered by MailtoUI -
diff --git a/src/js/mailtoui.js b/src/js/mailtoui.js index dcd0879..7577e96 100644 --- a/src/js/mailtoui.js +++ b/src/js/mailtoui.js @@ -1,11 +1,11 @@ /** - * MailtoUI - A simple way to enhance your mailto links with a convenient user interface. + * mailymaily - A simple way to enhance your mailto links with a convenient user interface. * - * @link https://mailtoui.com + * @link https://mailymaily.com * @author Mario Rodriguez - https://twitter.com/mariordev * @license MIT * - * MailtoUI is a library that enhances your mailto links with a convenient user interface. + * mailymaily is a library that enhances your mailto links with a convenient user interface. * It gives your site visitors the flexibility to compose a new email message using a * browser-based email client or their default local email application. */ @@ -13,7 +13,7 @@ /** * Let's not step on anybody else's toes. */ -var mailtouiApp = mailtouiApp || {}; +var mailymailyApp = mailymailyApp || {}; (function(app) { /** @@ -29,7 +29,7 @@ var mailtouiApp = mailtouiApp || {}; var body = document.getElementsByTagName('body')[0]; /** - * The active MailtoUI modal. + * The active mailymaily modal. * @type {Element} */ var modal = null; @@ -66,7 +66,7 @@ var mailtouiApp = mailtouiApp || {}; var clipboardSvg = ` `; /** - * User options to change MailtoUI's behavior and/or appearance. + * User options to change mailymaily's behavior and/or appearance. * @type {Object} */ var options = new Object(); @@ -75,7 +75,7 @@ var mailtouiApp = mailtouiApp || {}; * Allows for a custom class to namespace css classes. * @type {String} */ - options.linkClass = 'mailtoui'; + options.linkClass = 'mailymaily'; /** * When set to true, the modal is closed automatically when email client is clicked. @@ -180,8 +180,8 @@ var mailtouiApp = mailtouiApp || {}; */ app.buildStyleTag = function() { var styleTag = document.createElement('style'); - 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:mailtoui-appear .4s;animation:mailtoui-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:auto;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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailtoui-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailtoui-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-button{color:#333;text-decoration:none}.mailtoui-button:focus{outline:0}.mailtoui-button:focus .mailtoui-button-content{background-color:#555;color:#fff}.mailtoui-button-content{background-color:#fff;border:none;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;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailtoui-button-content:hover{background-color:#555;color:#fff}.mailtoui-button:last-child .mailtoui-button-content{margin-bottom:0}.mailtoui-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailtoui-button-icon svg{height:24px;width:24px}.mailtoui-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailtoui-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailtoui-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailtoui-button-copy:focus,.mailtoui-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-button-copy-clicked,.mailtoui-button-copy-clicked:focus,.mailtoui-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailtoui-button-copy-clicked .mailtoui-button-icon,.mailtoui-button-copy-clicked:focus .mailtoui-button-icon,.mailtoui-button-copy-clicked:hover .mailtoui-button-icon{display:none;visibility:hidden}.mailtoui-button-copy-clicked .mailtoui-button-text,.mailtoui-button-copy-clicked:focus .mailtoui-button-text,.mailtoui-button-copy-clicked:hover .mailtoui-button-text{color:#fff;top:2px}.mailtoui-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailtoui-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailtoui-brand a{color:#888}.mailtoui-brand a:focus,.mailtoui-brand a:hover{font-weight:700;outline:0}.mailtoui-no-scroll{overflow:hidden;position:fixed;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailtoui-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 mailtoui-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()); + var css = `.mailymaily-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}.mailymaily-modal-content{-webkit-animation:mailymaily-appear .4s;animation:mailymaily-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:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailymaily-modal-content:focus,.mailymaily-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailymaily-modal-content{right:auto}}.mailymaily-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailymaily-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailymaily-modal-close:focus,.mailymaily-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailymaily-modal-body{height:100%;padding:20px}.mailymaily-button{color:#333;text-decoration:none}.mailymaily-button:focus{outline:0}.mailymaily-button:focus .mailymaily-button-content{background-color:#555;color:#fff}.mailymaily-button-content{background-color:#fff;border:none;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;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailymaily-button-content:hover{background-color:#555;color:#fff}.mailymaily-button:last-child .mailymaily-button-content{margin-bottom:0}.mailymaily-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailymaily-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailymaily-button-copy:focus,.mailymaily-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailymaily-button-copy-clicked,.mailymaily-button-copy-clicked:focus,.mailymaily-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailymaily-button-copy-clicked .mailymaily-button-icon,.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,.mailymaily-button-copy-clicked:hover .mailymaily-button-icon{display:none;visibility:hidden}.mailymaily-button-copy-clicked .mailymaily-button-text,.mailymaily-button-copy-clicked:focus .mailymaily-button-text,.mailymaily-button-copy-clicked:hover .mailymaily-button-text{color:#fff;top:2px}.mailymaily-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailymaily-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailymaily-brand a{color:#888}.mailymaily-brand a:focus,.mailymaily-brand a:hover{font-weight:700;outline:0}.mailymaily-no-scroll{overflow:hidden;position:fixed;width:100%}.mailymaily-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailymaily-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 mailymaily-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(/mailymaily/g, app.prefix()); styleTag.setAttribute('id', app.prefix('-styles')); styleTag.setAttribute('type', 'text/css'); @@ -230,31 +230,31 @@ var mailtouiApp = mailtouiApp || {}; app.buildModal = function() { var modal = document.createElement('div'); - var markup = `
Powered by mailymaily
`; - markup = markup.replace(/mailtoui/g, app.prefix()); + markup = markup.replace(/mailymaily/g, app.prefix()); modal.setAttribute('id', app.prefix('-modal')); modal.setAttribute('class', app.prefix('-modal')); @@ -759,9 +759,9 @@ var mailtouiApp = mailtouiApp || {}; }; /** - * Get all "mailtoui" links on the page. + * Get all "mailymaily" links on the page. * - * @return {HTMLCollection} All links with the class "mailtoui" (default). + * @return {HTMLCollection} All links with the class "mailymaily" (default). */ app.getLinks = function() { return document.getElementsByClassName(app.prefix()); @@ -1120,19 +1120,19 @@ var mailtouiApp = mailtouiApp || {}; app.listenForEvents(); }; -})(mailtouiApp); +})(mailymailyApp); /** - * Are we loaded in the browser? If so, run MailtoUI automatically. - * Otherwise, make MailtoUI available to the outside world so + * Are we loaded in the browser? If so, run mailymaily automatically. + * Otherwise, make mailymaily available to the outside world so * it can be triggered (run) manually when appropriate. */ if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { // We're not in the browser. module.exports = { - run: mailtouiApp.run + run: mailymailyApp.run }; } else { // We're in the browser. - mailtouiApp.run(); + mailymailyApp.run(); } diff --git a/src/scss/component.scss b/src/scss/component.scss index 29061cf..b692681 100644 --- a/src/scss/component.scss +++ b/src/scss/component.scss @@ -49,7 +49,7 @@ $email-margin-top: 20px; //20px $brand-color: #888; //#888 $brand-font-size: 80%; //80% -.mailtoui-modal { +.mailymaily-modal { background-color: #000; background-color: $overlay-bg-color; bottom: 0; @@ -66,8 +66,8 @@ $brand-font-size: 80%; //80% z-index: 1000; } -.mailtoui-modal-content { - animation: mailtoui-appear $animation-speed; +.mailymaily-modal-content { + animation: mailymaily-appear $animation-speed; background-color: $modal-content-bg-color; border-radius: $modal-border-radius; bottom: auto; @@ -82,18 +82,18 @@ $brand-font-size: 80%; //80% transform: translate(-50%, -50%); } -.mailtoui-modal-content:focus, -.mailtoui-modal-content:hover { +.mailymaily-modal-content:focus, +.mailymaily-modal-content:hover { overflow-y: auto; } @media only screen and (min-width: 768px) { - .mailtoui-modal-content { + .mailymaily-modal-content { right: auto; } } -.mailtoui-modal-head { +.mailymaily-modal-head { align-items: center; background-color: $modal-head-bg-color; clear: both; @@ -102,7 +102,7 @@ $brand-font-size: 80%; //80% padding: $modal-head-padding-y $modal-head-padding-x; } -.mailtoui-modal-title { +.mailymaily-modal-title { color: $modal-title-color; flex: 1; font-family: $modal-title-font-family; @@ -115,7 +115,7 @@ $brand-font-size: 80%; //80% white-space: nowrap; } -.mailtoui-modal-close { +.mailymaily-modal-close { color: $modal-close-color-1; flex: initial; font-size: $modal-close-font-size; @@ -126,34 +126,34 @@ $brand-font-size: 80%; //80% top: $modal-close-top; } -.mailtoui-modal-close:focus, -.mailtoui-modal-close:hover { +.mailymaily-modal-close:focus, +.mailymaily-modal-close:hover { color: $modal-close-color-2; cursor: pointer; font-weight: 700; outline: 0; } -.mailtoui-modal-body { +.mailymaily-modal-body { height: 100%; padding: $modal-body-padding; } -.mailtoui-button { +.mailymaily-button { color: $button-color; text-decoration: none; } -.mailtoui-button:focus { +.mailymaily-button:focus { outline: 0; } -.mailtoui-button:focus .mailtoui-button-content { +.mailymaily-button:focus .mailymaily-button-content { background-color: #555; color: #fff; } -.mailtoui-button-content { +.mailymaily-button-content { background-color: $button-bg-color; border: $button-border; border-radius: $button-border-radius; @@ -165,35 +165,35 @@ $brand-font-size: 80%; //80% white-space: nowrap; } -.mailtoui-button-content:hover { +.mailymaily-button-content:hover { background-color: $button-hover-bg-color; color: $button-hover-color; } -.mailtoui-button:last-child .mailtoui-button-content { +.mailymaily-button:last-child .mailymaily-button-content { margin-bottom: 0; } -.mailtoui-button-icon { +.mailymaily-button-icon { display: inline-block; font-weight: 700; position: relative; top: $button-icon-top; } -.mailtoui-button-icon svg { +.mailymaily-button-icon svg { height: $button-icon-height; width: $button-icon-width; } -.mailtoui-button-text { +.mailymaily-button-text { display: inline-block; margin-left: 5px; position: relative; top: -2px; } -.mailtoui-copy { +.mailymaily-copy { border-radius: $button-border-radius; box-shadow: $button-box-shadow; height: 59px; @@ -201,7 +201,7 @@ $brand-font-size: 80%; //80% position: relative; } -.mailtoui-button-copy { +.mailymaily-button-copy { background-color: $button-bg-color; border: $button-copy-border; border-bottom-left-radius: $button-border-radius; @@ -220,36 +220,36 @@ $brand-font-size: 80%; //80% width: 120px; } -.mailtoui-button-copy:focus, -.mailtoui-button-copy:hover { +.mailymaily-button-copy:focus, +.mailymaily-button-copy:hover { background-color: $button-hover-bg-color; color: $button-hover-color; cursor: pointer; outline: 0; } -.mailtoui-button-copy-clicked, -.mailtoui-button-copy-clicked:focus, -.mailtoui-button-copy-clicked:hover { +.mailymaily-button-copy-clicked, +.mailymaily-button-copy-clicked:focus, +.mailymaily-button-copy-clicked:hover { background-color: $success-bg-color; color: $success-color; } -.mailtoui-button-copy-clicked .mailtoui-button-icon, -.mailtoui-button-copy-clicked:focus .mailtoui-button-icon, -.mailtoui-button-copy-clicked:hover .mailtoui-button-icon { +.mailymaily-button-copy-clicked .mailymaily-button-icon, +.mailymaily-button-copy-clicked:focus .mailymaily-button-icon, +.mailymaily-button-copy-clicked:hover .mailymaily-button-icon { display: none; visibility: hidden; } -.mailtoui-button-copy-clicked .mailtoui-button-text, -.mailtoui-button-copy-clicked:focus .mailtoui-button-text, -.mailtoui-button-copy-clicked:hover .mailtoui-button-text { +.mailymaily-button-copy-clicked .mailymaily-button-text, +.mailymaily-button-copy-clicked:focus .mailymaily-button-text, +.mailymaily-button-copy-clicked:hover .mailymaily-button-text { color: #fff; top: 2px; } -.mailtoui-email-address { +.mailymaily-email-address { background-color: $email-bg-color; border: none; border-radius: $button-border-radius; @@ -265,35 +265,35 @@ $brand-font-size: 80%; //80% width: 100%; } -.mailtoui-brand { +.mailymaily-brand { color: $brand-color; font-size: $brand-font-size; margin-top: 20px; text-align: center; } -.mailtoui-brand a { +.mailymaily-brand a { color: $brand-color; } -.mailtoui-brand a:focus, -.mailtoui-brand a:hover { +.mailymaily-brand a:focus, +.mailymaily-brand a:hover { font-weight: 700; outline: 0; } -.mailtoui-no-scroll { +.mailymaily-no-scroll { overflow: hidden; position: fixed; width: 100%; } -.mailtoui-is-hidden { +.mailymaily-is-hidden { display: none; visibility: hidden; } -@keyframes mailtoui-appear { +@keyframes mailymaily-appear { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0, 0);