odit
/
mailymaily
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

renamed to mailymaily

This commit is contained in:
Nicolai Ort 2020-08-29 13:59:02 +02:00
parent f35b067076
commit bf9caccd06
10 changed files with 129 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@ -1,29 +1,29 @@
<p align="center"> <p align="center">
<a href="https://mailtoui.com"> <a href="https://mailymaily.com">
<img src="https://mailtoui.com/assets/img/heading.jpg" alt="MailtoUI"> <img src="https://mailymaily.com/assets/img/heading.jpg" alt="mailymaily">
</a> </a>
</p> </p>
<p align="center">A simple way to enhance your mailto links with a convenient user interface.</p> <p align="center">A simple way to enhance your mailto links with a convenient user interface.</p>
<p align="center"> <p align="center">
<a href="https://github.com/mariordev/mailtoui/releases"><img src="https://img.shields.io/npm/v/mailtoui.svg" alt="Latest release"></a> <a href="https://github.com/mariordev/mailymaily/releases"><img src="https://img.shields.io/npm/v/mailymaily.svg" alt="Latest release"></a>
<a href="https://www.npmjs.com/package/mailtoui"><img src="https://img.shields.io/npm/dt/mailtoui.svg" alt="Total downloads"></a> <a href="https://www.npmjs.com/package/mailymaily"><img src="https://img.shields.io/npm/dt/mailymaily.svg" alt="Total downloads"></a>
<a href="https://github.com/mariordev/mailtoui/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mariordev/mailtoui.svg" alt="License"></a> <a href="https://github.com/mariordev/mailymaily/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mariordev/mailymaily.svg" alt="License"></a>
<a href="https://twitter.com/intent/tweet?text=Check%20this%20out!%20&url=https%3A%2F%2Fmailtoui.com"><img src="https://img.shields.io/twitter/url/https/mailtoui.com.svg?style=social" alt="Share on Twitter"></a> <a href="https://twitter.com/intent/tweet?text=Check%20this%20out!%20&url=https%3A%2F%2Fmailymaily.com"><img src="https://img.shields.io/twitter/url/https/mailymaily.com.svg?style=social" alt="Share on Twitter"></a>
</p> </p>
## Introduction ## 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 <strong><i>or</i></strong> 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 <strong><i>or</i></strong> 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 ## Quick Setup
### STEP 1 ### STEP 1
Add MailtoUI via CDN to the bottom of your page, just before the closing `</body>` tag. Add mailymaily via CDN to the bottom of your page, just before the closing `</body>` tag.
IMPORTANT: Be sure to replace `[version]` with the latest version number. 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.
<body> <body>
... ...
... ...
<script src="https://cdn.jsdelivr.net/npm/mailtoui@[version]/dist/mailtoui-min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mailymaily@[version]/dist/mailymaily-min.js"></script>
</body> </body>
``` ```
### STEP 2 ### STEP 2
Attach your mailto link to MailtoUI by adding the class `mailtoui` to the `<a>` tag. Attach your mailto link to mailymaily by adding the class `mailymaily` to the `<a>` tag.
```html ```html
<a class="mailtoui" href="mailto:tony.stark@example.com">Contact Tony</a> <a class="mailymaily" href="mailto:tony.stark@example.com">Contact Tony</a>
``` ```
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 ## Documentation
For full documentation, visit [mailtoui.com](https://mailtoui.com). For full documentation, visit [mailymaily.com](https://mailymaily.com).
## Contributing ## 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 ## License
[MIT](https://github.com/mariordev/mailtoui/blob/master/LICENSE) [MIT](https://github.com/mariordev/mailymaily/blob/master/LICENSE)

6
dist/mailtoui-min.js vendored
View File

File diff suppressed because one or more lines are too long

4
gulpfile.js
View File

@ -60,7 +60,7 @@ function css() {
function js() { function js() {
packageJson = fs.readJsonSync('./package.json'); packageJson = fs.readJsonSync('./package.json');
return src('./src/js/mailtoui.js') return src('./src/js/mailymaily.js')
.pipe(eslint()) .pipe(eslint())
.pipe(eslint.format()) .pipe(eslint.format())
.pipe(minify({ noSource: true })) .pipe(minify({ noSource: true }))
@ -114,7 +114,7 @@ function demoCss() {
function watchFiles() { function watchFiles() {
watch('./src/html/component.html', html); watch('./src/html/component.html', html);
watch('./src/scss/component.scss', css); watch('./src/scss/component.scss', css);
watch(['./src/js/mailtoui.js', './package.json'], series(js, lintDemoJs, processDemoJs)); watch(['./src/js/mailymaily.js', './package.json'], series(js, lintDemoJs, processDemoJs));
watch('./demo/demo.scss', demoCss); watch('./demo/demo.scss', demoCss);
watch('./demo/demo.js', demoJs); watch('./demo/demo.js', demoJs);
} }

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "mailtoui", "name": "mailymaily",
"version": "1.0.3", "version": "1.0.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,

14
package.json
View File

@ -1,14 +1,14 @@
{ {
"name": "mailtoui", "name": "mailymaily",
"description": "A simple way to enhance your mailto links with a convenient user interface.", "description": "A simple way to enhance your mailto links with a convenient user interface.",
"version": "1.0.3", "version": "1.0.3",
"homepage": "https://mailtoui.com", "homepage": "https://mailymaily.com",
"author": { "author": {
"name": "Mario Rodriguez", "name": "Mario Rodriguez",
"url": "https://twitter.com/mariordev" "url": "https://twitter.com/mariordev"
}, },
"keywords": [ "keywords": [
"mailtoui", "mailymaily",
"mailto", "mailto",
"ui", "ui",
"mail", "mail",
@ -17,8 +17,8 @@
"user interface" "user interface"
], ],
"license": "MIT", "license": "MIT",
"repository": "https://github.com/mariordev/mailtoui.git", "repository": "https://github.com/mariordev/mailymaily.git",
"bugs": "https://github.com/mariordev/mailtoui/issues", "bugs": "https://github.com/mariordev/mailymaily/issues",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.5.5", "@babel/core": "^7.5.5",
"@babel/plugin-transform-regenerator": "^7.4.5", "@babel/plugin-transform-regenerator": "^7.4.5",
@ -54,8 +54,8 @@
"files": [ "files": [
"dist/*" "dist/*"
], ],
"jsdelivr": "dist/mailtoui-min.js", "jsdelivr": "dist/mailymaily-min.js",
"scripts": { "scripts": {
"lint": "eslint ./src/js/mailtoui.js" "lint": "eslint ./src/js/mailymaily.js"
} }
} }

2
src/css/component-min.css vendored
View File

@ -1 +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: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)}} .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)}}

2
src/html/component-min.html
View File

@ -1 +1 @@
<div class="mailtoui-modal-content"><div class="mailtoui-modal-head"><div id="mailtoui-modal-title" class="mailtoui-modal-title">${options.title}</div><a id="mailtoui-modal-close" class="mailtoui-modal-close" href="#">&times</a></div><div class="mailtoui-modal-body"><div class="mailtoui-clients"><a id="mailtoui-button-1" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-1" class="mailtoui-button-icon">${options.buttonIcon1}</span> <span id="mailtoui-button-text-1" class="mailtoui-button-text">${options.buttonText1}</span></div></a><a id="mailtoui-button-2" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-2" class="mailtoui-button-icon">${options.buttonIcon2}</span> <span id="mailtoui-button-text-2" class="mailtoui-button-text">${options.buttonText2}</span></div></a><a id="mailtoui-button-3" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-3" class="mailtoui-button-icon">${options.buttonIcon3}</span> <span id="mailtoui-button-text-3" class="mailtoui-button-text">${options.buttonText3}</span></div></a><a id="mailtoui-button-4" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-4" class="mailtoui-button-icon">${options.buttonIcon4}</span> <span id="mailtoui-button-text-4" class="mailtoui-button-text">${options.buttonText4}</span></div></a></div><div id="mailtoui-copy" class="mailtoui-copy"><div id="mailtoui-email-address" class="mailtoui-email-address"></div><button id="mailtoui-button-copy" class="mailtoui-button-copy" data-copytargetid="mailtoui-email-address"><span id="mailtoui-button-icon-copy" class="mailtoui-button-icon">${options.buttonIconCopy}</span> <span id="mailtoui-button-text-copy" class="mailtoui-button-text">${options.buttonTextCopy}</span></button></div><div class="mailtoui-brand"><a href="https://mailtoui.com?ref=ui" target="_blank">Powered by MailtoUI</a></div></div></div> <div class="mailymaily-modal-content"><div class="mailymaily-modal-head"><div id="mailymaily-modal-title" class="mailymaily-modal-title">${options.title}</div><a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">&times</a></div><div class="mailymaily-modal-body"><div class="mailymaily-clients"><a id="mailymaily-button-1" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${options.buttonIcon1}</span> <span id="mailymaily-button-text-1" class="mailymaily-button-text">${options.buttonText1}</span></div></a><a id="mailymaily-button-2" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${options.buttonIcon2}</span> <span id="mailymaily-button-text-2" class="mailymaily-button-text">${options.buttonText2}</span></div></a><a id="mailymaily-button-3" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${options.buttonIcon3}</span> <span id="mailymaily-button-text-3" class="mailymaily-button-text">${options.buttonText3}</span></div></a><a id="mailymaily-button-4" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${options.buttonIcon4}</span> <span id="mailymaily-button-text-4" class="mailymaily-button-text">${options.buttonText4}</span></div></a></div><div id="mailymaily-copy" class="mailymaily-copy"><div id="mailymaily-email-address" class="mailymaily-email-address"></div><button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address"><span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${options.buttonIconCopy}</span> <span id="mailymaily-button-text-copy" class="mailymaily-button-text">${options.buttonTextCopy}</span></button></div><div class="mailymaily-brand"><a href="https://mailymaily.com?ref=ui" target="_blank">Powered by mailymaily</a></div></div></div>

58
src/html/component.html
View File

@ -1,49 +1,45 @@
<div class="mailtoui-modal-content"> <div class="mailymaily-modal-content">
<div class="mailtoui-modal-head"> <div class="mailymaily-modal-head">
<div id="mailtoui-modal-title" class="mailtoui-modal-title">${options.title}</div> <div id="mailymaily-modal-title" class="mailymaily-modal-title">${options.title}</div>
<a id="mailtoui-modal-close" class="mailtoui-modal-close" href="#">&times</a> <a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">&times</a>
</div> </div>
<div class="mailtoui-modal-body"> <div class="mailymaily-modal-body">
<div class="mailtoui-clients"> <div class="mailymaily-clients">
<a id="mailtoui-button-1" class="mailtoui-button" href="#"> <a id="mailymaily-button-1" class="mailymaily-button" href="#">
<div class="mailtoui-button-content"> <div class="mailymaily-button-content">
<span id="mailtoui-button-icon-1" class="mailtoui-button-icon">${options.buttonIcon1}</span> <span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${options.buttonIcon1}</span>
<span id="mailtoui-button-text-1" class="mailtoui-button-text">${options.buttonText1}</span> <span id="mailymaily-button-text-1" class="mailymaily-button-text">${options.buttonText1}</span>
</div> </div>
</a> </a>
<a id="mailtoui-button-2" class="mailtoui-button" href="#"> <a id="mailymaily-button-2" class="mailymaily-button" href="#">
<div class="mailtoui-button-content"> <div class="mailymaily-button-content">
<span id="mailtoui-button-icon-2" class="mailtoui-button-icon">${options.buttonIcon2}</span> <span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${options.buttonIcon2}</span>
<span id="mailtoui-button-text-2" class="mailtoui-button-text">${options.buttonText2}</span> <span id="mailymaily-button-text-2" class="mailymaily-button-text">${options.buttonText2}</span>
</div> </div>
</a> </a>
<a id="mailtoui-button-3" class="mailtoui-button" href="#"> <a id="mailymaily-button-3" class="mailymaily-button" href="#">
<div class="mailtoui-button-content"> <div class="mailymaily-button-content">
<span id="mailtoui-button-icon-3" class="mailtoui-button-icon">${options.buttonIcon3}</span> <span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${options.buttonIcon3}</span>
<span id="mailtoui-button-text-3" class="mailtoui-button-text">${options.buttonText3}</span> <span id="mailymaily-button-text-3" class="mailymaily-button-text">${options.buttonText3}</span>
</div> </div>
</a> </a>
<a id="mailtoui-button-4" class="mailtoui-button" href="#"> <a id="mailymaily-button-4" class="mailymaily-button" href="#">
<div class="mailtoui-button-content"> <div class="mailymaily-button-content">
<span id="mailtoui-button-icon-4" class="mailtoui-button-icon">${options.buttonIcon4}</span> <span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${options.buttonIcon4}</span>
<span id="mailtoui-button-text-4" class="mailtoui-button-text">${options.buttonText4}</span> <span id="mailymaily-button-text-4" class="mailymaily-button-text">${options.buttonText4}</span>
</div> </div>
</a> </a>
</div> </div>
<div id="mailtoui-copy" class="mailtoui-copy"> <div id="mailymaily-copy" class="mailymaily-copy">
<div id="mailtoui-email-address" class="mailtoui-email-address"></div> <div id="mailymaily-email-address" class="mailymaily-email-address"></div>
<button id="mailtoui-button-copy" class="mailtoui-button-copy" data-copytargetid="mailtoui-email-address"> <button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address">
<span id="mailtoui-button-icon-copy" class="mailtoui-button-icon">${options.buttonIconCopy}</span> <span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${options.buttonIconCopy}</span>
<span id="mailtoui-button-text-copy" class="mailtoui-button-text">${options.buttonTextCopy}</span> <span id="mailymaily-button-text-copy" class="mailymaily-button-text">${options.buttonTextCopy}</span>
</button> </button>
</div> </div>
<div class="mailtoui-brand">
<a href="https://mailtoui.com?ref=ui" target="_blank">Powered by MailtoUI</a>
</div>
</div> </div>
</div> </div>

58
src/js/mailtoui.js
View File

@ -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 * @author Mario Rodriguez - https://twitter.com/mariordev
* @license MIT * @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 * 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. * browser-based email client or their default local email application.
*/ */
@ -13,7 +13,7 @@
/** /**
* Let's not step on anybody else's toes. * Let's not step on anybody else's toes.
*/ */
var mailtouiApp = mailtouiApp || {}; var mailymailyApp = mailymailyApp || {};
(function(app) { (function(app) {
/** /**
@ -29,7 +29,7 @@ var mailtouiApp = mailtouiApp || {};
var body = document.getElementsByTagName('body')[0]; var body = document.getElementsByTagName('body')[0];
/** /**
* The active MailtoUI modal. * The active mailymaily modal.
* @type {Element} * @type {Element}
*/ */
var modal = null; var modal = null;
@ -66,7 +66,7 @@ var mailtouiApp = mailtouiApp || {};
var clipboardSvg = `<svg viewBox="0 0 24 24"><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="20,4 22,4 22,23 2,23 2,4 4,4 "/> <path fill="none" stroke="currentColor" stroke-miterlimit="10" d="M14,3c0-1.105-0.895-2-2-2 s-2,0.895-2,2H7v4h10V3H14z"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="11" x2="17" y2="11"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="15" x2="17" y2="15"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="19" x2="11" y2="19"/></g></svg>`; var clipboardSvg = `<svg viewBox="0 0 24 24"><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="20,4 22,4 22,23 2,23 2,4 4,4 "/> <path fill="none" stroke="currentColor" stroke-miterlimit="10" d="M14,3c0-1.105-0.895-2-2-2 s-2,0.895-2,2H7v4h10V3H14z"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="11" x2="17" y2="11"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="15" x2="17" y2="15"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="19" x2="11" y2="19"/></g></svg>`;
/** /**
* User options to change MailtoUI's behavior and/or appearance. * User options to change mailymaily's behavior and/or appearance.
* @type {Object} * @type {Object}
*/ */
var options = new Object(); var options = new Object();
@ -75,7 +75,7 @@ var mailtouiApp = mailtouiApp || {};
* Allows for a custom class to namespace css classes. * Allows for a custom class to namespace css classes.
* @type {String} * @type {String}
*/ */
options.linkClass = 'mailtoui'; options.linkClass = 'mailymaily';
/** /**
* When set to true, the modal is closed automatically when email client is clicked. * When set to true, the modal is closed automatically when email client is clicked.
@ -180,8 +180,8 @@ var mailtouiApp = mailtouiApp || {};
*/ */
app.buildStyleTag = function() { app.buildStyleTag = function() {
var styleTag = document.createElement('style'); 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)}}`; 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(/mailtoui/g, app.prefix()); css = css.replace(/mailymaily/g, app.prefix());
styleTag.setAttribute('id', app.prefix('-styles')); styleTag.setAttribute('id', app.prefix('-styles'));
styleTag.setAttribute('type', 'text/css'); styleTag.setAttribute('type', 'text/css');
@ -230,31 +230,31 @@ var mailtouiApp = mailtouiApp || {};
app.buildModal = function() { app.buildModal = function() {
var modal = document.createElement('div'); var modal = document.createElement('div');
var markup = `<div class="mailtoui-modal-content"><div class="mailtoui-modal-head"><div id="mailtoui-modal-title" class="mailtoui-modal-title">${ var markup = `<div class="mailymaily-modal-content"><div class="mailymaily-modal-head"><div id="mailymaily-modal-title" class="mailymaily-modal-title">${
options.title options.title
}</div><a id="mailtoui-modal-close" class="mailtoui-modal-close" href="#">&times</a></div><div class="mailtoui-modal-body"><div class="mailtoui-clients"><a id="mailtoui-button-1" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-1" class="mailtoui-button-icon">${ }</div><a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">&times</a></div><div class="mailymaily-modal-body"><div class="mailymaily-clients"><a id="mailymaily-button-1" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${
options.buttonIcon1 options.buttonIcon1
}</span> <span id="mailtoui-button-text-1" class="mailtoui-button-text">${ }</span> <span id="mailymaily-button-text-1" class="mailymaily-button-text">${
options.buttonText1 options.buttonText1
}</span></div></a><a id="mailtoui-button-2" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-2" class="mailtoui-button-icon">${ }</span></div></a><a id="mailymaily-button-2" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${
options.buttonIcon2 options.buttonIcon2
}</span> <span id="mailtoui-button-text-2" class="mailtoui-button-text">${ }</span> <span id="mailymaily-button-text-2" class="mailymaily-button-text">${
options.buttonText2 options.buttonText2
}</span></div></a><a id="mailtoui-button-3" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-3" class="mailtoui-button-icon">${ }</span></div></a><a id="mailymaily-button-3" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${
options.buttonIcon3 options.buttonIcon3
}</span> <span id="mailtoui-button-text-3" class="mailtoui-button-text">${ }</span> <span id="mailymaily-button-text-3" class="mailymaily-button-text">${
options.buttonText3 options.buttonText3
}</span></div></a><a id="mailtoui-button-4" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-4" class="mailtoui-button-icon">${ }</span></div></a><a id="mailymaily-button-4" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${
options.buttonIcon4 options.buttonIcon4
}</span> <span id="mailtoui-button-text-4" class="mailtoui-button-text">${ }</span> <span id="mailymaily-button-text-4" class="mailymaily-button-text">${
options.buttonText4 options.buttonText4
}</span></div></a></div><div id="mailtoui-copy" class="mailtoui-copy"><div id="mailtoui-email-address" class="mailtoui-email-address"></div><button id="mailtoui-button-copy" class="mailtoui-button-copy" data-copytargetid="mailtoui-email-address"><span id="mailtoui-button-icon-copy" class="mailtoui-button-icon">${ }</span></div></a></div><div id="mailymaily-copy" class="mailymaily-copy"><div id="mailymaily-email-address" class="mailymaily-email-address"></div><button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address"><span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${
options.buttonIconCopy options.buttonIconCopy
}</span> <span id="mailtoui-button-text-copy" class="mailtoui-button-text">${ }</span> <span id="mailymaily-button-text-copy" class="mailymaily-button-text">${
options.buttonTextCopy options.buttonTextCopy
}</span></button></div><div class="mailtoui-brand"><a href="https://mailtoui.com?ref=ui" target="_blank">Powered by MailtoUI</a></div></div></div>`; }</span></button></div><div class="mailymaily-brand"><a href="https://mailymaily.com?ref=ui" target="_blank">Powered by mailymaily</a></div></div></div>`;
markup = markup.replace(/mailtoui/g, app.prefix()); markup = markup.replace(/mailymaily/g, app.prefix());
modal.setAttribute('id', app.prefix('-modal')); modal.setAttribute('id', app.prefix('-modal'));
modal.setAttribute('class', 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() { app.getLinks = function() {
return document.getElementsByClassName(app.prefix()); return document.getElementsByClassName(app.prefix());
@ -1120,19 +1120,19 @@ var mailtouiApp = mailtouiApp || {};
app.listenForEvents(); app.listenForEvents();
}; };
})(mailtouiApp); })(mailymailyApp);
/** /**
* Are we loaded in the browser? If so, run MailtoUI automatically. * Are we loaded in the browser? If so, run mailymaily automatically.
* Otherwise, make MailtoUI available to the outside world so * Otherwise, make mailymaily available to the outside world so
* it can be triggered (run) manually when appropriate. * it can be triggered (run) manually when appropriate.
*/ */
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
// We're not in the browser. // We're not in the browser.
module.exports = { module.exports = {
run: mailtouiApp.run run: mailymailyApp.run
}; };
} else { } else {
// We're in the browser. // We're in the browser.
mailtouiApp.run(); mailymailyApp.run();
} }

84
src/scss/component.scss
View File

@ -49,7 +49,7 @@ $email-margin-top: 20px; //20px
$brand-color: #888; //#888 $brand-color: #888; //#888
$brand-font-size: 80%; //80% $brand-font-size: 80%; //80%
.mailtoui-modal { .mailymaily-modal {
background-color: #000; background-color: #000;
background-color: $overlay-bg-color; background-color: $overlay-bg-color;
bottom: 0; bottom: 0;
@ -66,8 +66,8 @@ $brand-font-size: 80%; //80%
z-index: 1000; z-index: 1000;
} }
.mailtoui-modal-content { .mailymaily-modal-content {
animation: mailtoui-appear $animation-speed; animation: mailymaily-appear $animation-speed;
background-color: $modal-content-bg-color; background-color: $modal-content-bg-color;
border-radius: $modal-border-radius; border-radius: $modal-border-radius;
bottom: auto; bottom: auto;
@ -82,18 +82,18 @@ $brand-font-size: 80%; //80%
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.mailtoui-modal-content:focus, .mailymaily-modal-content:focus,
.mailtoui-modal-content:hover { .mailymaily-modal-content:hover {
overflow-y: auto; overflow-y: auto;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.mailtoui-modal-content { .mailymaily-modal-content {
right: auto; right: auto;
} }
} }
.mailtoui-modal-head { .mailymaily-modal-head {
align-items: center; align-items: center;
background-color: $modal-head-bg-color; background-color: $modal-head-bg-color;
clear: both; clear: both;
@ -102,7 +102,7 @@ $brand-font-size: 80%; //80%
padding: $modal-head-padding-y $modal-head-padding-x; padding: $modal-head-padding-y $modal-head-padding-x;
} }
.mailtoui-modal-title { .mailymaily-modal-title {
color: $modal-title-color; color: $modal-title-color;
flex: 1; flex: 1;
font-family: $modal-title-font-family; font-family: $modal-title-font-family;
@ -115,7 +115,7 @@ $brand-font-size: 80%; //80%
white-space: nowrap; white-space: nowrap;
} }
.mailtoui-modal-close { .mailymaily-modal-close {
color: $modal-close-color-1; color: $modal-close-color-1;
flex: initial; flex: initial;
font-size: $modal-close-font-size; font-size: $modal-close-font-size;
@ -126,34 +126,34 @@ $brand-font-size: 80%; //80%
top: $modal-close-top; top: $modal-close-top;
} }
.mailtoui-modal-close:focus, .mailymaily-modal-close:focus,
.mailtoui-modal-close:hover { .mailymaily-modal-close:hover {
color: $modal-close-color-2; color: $modal-close-color-2;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
outline: 0; outline: 0;
} }
.mailtoui-modal-body { .mailymaily-modal-body {
height: 100%; height: 100%;
padding: $modal-body-padding; padding: $modal-body-padding;
} }
.mailtoui-button { .mailymaily-button {
color: $button-color; color: $button-color;
text-decoration: none; text-decoration: none;
} }
.mailtoui-button:focus { .mailymaily-button:focus {
outline: 0; outline: 0;
} }
.mailtoui-button:focus .mailtoui-button-content { .mailymaily-button:focus .mailymaily-button-content {
background-color: #555; background-color: #555;
color: #fff; color: #fff;
} }
.mailtoui-button-content { .mailymaily-button-content {
background-color: $button-bg-color; background-color: $button-bg-color;
border: $button-border; border: $button-border;
border-radius: $button-border-radius; border-radius: $button-border-radius;
@ -165,35 +165,35 @@ $brand-font-size: 80%; //80%
white-space: nowrap; white-space: nowrap;
} }
.mailtoui-button-content:hover { .mailymaily-button-content:hover {
background-color: $button-hover-bg-color; background-color: $button-hover-bg-color;
color: $button-hover-color; color: $button-hover-color;
} }
.mailtoui-button:last-child .mailtoui-button-content { .mailymaily-button:last-child .mailymaily-button-content {
margin-bottom: 0; margin-bottom: 0;
} }
.mailtoui-button-icon { .mailymaily-button-icon {
display: inline-block; display: inline-block;
font-weight: 700; font-weight: 700;
position: relative; position: relative;
top: $button-icon-top; top: $button-icon-top;
} }
.mailtoui-button-icon svg { .mailymaily-button-icon svg {
height: $button-icon-height; height: $button-icon-height;
width: $button-icon-width; width: $button-icon-width;
} }
.mailtoui-button-text { .mailymaily-button-text {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
.mailtoui-copy { .mailymaily-copy {
border-radius: $button-border-radius; border-radius: $button-border-radius;
box-shadow: $button-box-shadow; box-shadow: $button-box-shadow;
height: 59px; height: 59px;
@ -201,7 +201,7 @@ $brand-font-size: 80%; //80%
position: relative; position: relative;
} }
.mailtoui-button-copy { .mailymaily-button-copy {
background-color: $button-bg-color; background-color: $button-bg-color;
border: $button-copy-border; border: $button-copy-border;
border-bottom-left-radius: $button-border-radius; border-bottom-left-radius: $button-border-radius;
@ -220,36 +220,36 @@ $brand-font-size: 80%; //80%
width: 120px; width: 120px;
} }
.mailtoui-button-copy:focus, .mailymaily-button-copy:focus,
.mailtoui-button-copy:hover { .mailymaily-button-copy:hover {
background-color: $button-hover-bg-color; background-color: $button-hover-bg-color;
color: $button-hover-color; color: $button-hover-color;
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
} }
.mailtoui-button-copy-clicked, .mailymaily-button-copy-clicked,
.mailtoui-button-copy-clicked:focus, .mailymaily-button-copy-clicked:focus,
.mailtoui-button-copy-clicked:hover { .mailymaily-button-copy-clicked:hover {
background-color: $success-bg-color; background-color: $success-bg-color;
color: $success-color; color: $success-color;
} }
.mailtoui-button-copy-clicked .mailtoui-button-icon, .mailymaily-button-copy-clicked .mailymaily-button-icon,
.mailtoui-button-copy-clicked:focus .mailtoui-button-icon, .mailymaily-button-copy-clicked:focus .mailymaily-button-icon,
.mailtoui-button-copy-clicked:hover .mailtoui-button-icon { .mailymaily-button-copy-clicked:hover .mailymaily-button-icon {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.mailtoui-button-copy-clicked .mailtoui-button-text, .mailymaily-button-copy-clicked .mailymaily-button-text,
.mailtoui-button-copy-clicked:focus .mailtoui-button-text, .mailymaily-button-copy-clicked:focus .mailymaily-button-text,
.mailtoui-button-copy-clicked:hover .mailtoui-button-text { .mailymaily-button-copy-clicked:hover .mailymaily-button-text {
color: #fff; color: #fff;
top: 2px; top: 2px;
} }
.mailtoui-email-address { .mailymaily-email-address {
background-color: $email-bg-color; background-color: $email-bg-color;
border: none; border: none;
border-radius: $button-border-radius; border-radius: $button-border-radius;
@ -265,35 +265,35 @@ $brand-font-size: 80%; //80%
width: 100%; width: 100%;
} }
.mailtoui-brand { .mailymaily-brand {
color: $brand-color; color: $brand-color;
font-size: $brand-font-size; font-size: $brand-font-size;
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
} }
.mailtoui-brand a { .mailymaily-brand a {
color: $brand-color; color: $brand-color;
} }
.mailtoui-brand a:focus, .mailymaily-brand a:focus,
.mailtoui-brand a:hover { .mailymaily-brand a:hover {
font-weight: 700; font-weight: 700;
outline: 0; outline: 0;
} }
.mailtoui-no-scroll { .mailymaily-no-scroll {
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
width: 100%; width: 100%;
} }
.mailtoui-is-hidden { .mailymaily-is-hidden {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
@keyframes mailtoui-appear { @keyframes mailymaily-appear {
0% { 0% {
opacity: 0; opacity: 0;
transform: translate(-50%, -50%) scale(0, 0); transform: translate(-50%, -50%) scale(0, 0);