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

cleaner build pipe + ES6

Browse Source 
The thing is broken tho
This commit is contained in:
Philipp Dormann
2020-08-29 18:25:14 +02:00
parent a46636fb36
commit 3c82430266
10 changed files with 1118 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1 +0,0 @@
.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;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%;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{align-items:center;background-color:#fff;clear:both;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;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;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;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:0}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:0;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;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:false;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:130px}.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;box-shadow:unset;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;transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailymaily-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}

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

@@ -1 +0,0 @@
<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-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></div>

12
src/html/component.html
View File

@@ -7,22 +7,19 @@
<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>
<span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${options.buttonIcon1}<span id="mailymaily-button-text-1" class="mailymaily-button-text">${options.buttonText1}</span></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>
<span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${options.buttonIcon2}<span id="mailymaily-button-text-2" class="mailymaily-button-text">${options.buttonText2}</span></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>
<span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${options.buttonIcon4}<span id="mailymaily-button-text-4" class="mailymaily-button-text">${options.buttonText4}</span></span>
</div>
</a>
</div>
@@ -30,8 +27,7 @@
<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>
<span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${options.buttonIconCopy}<span id="mailymaily-button-text-copy" class="mailymaily-button-text">${options.buttonTextCopy}</span></span>
</button>
</div>
</div>

20
src/js/mailymaily.js
View File

@@ -105,7 +105,6 @@ var mailymailyApp = mailymailyApp || {};
*/
options.buttonText2 = 'Outlook Web';
/**
* Text for button 4.
* @type {String}
@@ -173,7 +172,7 @@ var mailymailyApp = mailymailyApp || {};
*/
app.buildStyleTag = function() {
var styleTag = document.createElement('style');
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;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%;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{align-items:center;background-color:#fff;clear:both;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;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;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;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:0}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:0;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;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:false;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:130px}.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;box-shadow:unset;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;transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailymaily-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}`;
var css = `___css_inserter___`;
css = css.replace(/mailymaily/g, app.prefix());
styleTag.setAttribute('id', app.prefix('-styles'));
@@ -221,11 +220,8 @@ var mailymailyApp = mailymailyApp || {};
*/
app.buildModal = function() {
var modal = document.createElement('div');
var markup = `<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><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></div>`;
var markup = `___html_inserter___`;
markup = markup.replace(/mailymaily/g, app.prefix());
modal.setAttribute('id', app.prefix('-modal'));
modal.setAttribute('class', app.prefix('-modal'));
modal.setAttribute('style', 'display: none;');
@@ -287,17 +283,7 @@ var mailymailyApp = mailymailyApp || {};
var body = app.getLinkField(link, 'body');
var gmail = document.getElementById(app.prefix('-button-1'));
gmail.href =
'https://mail.google.com/mail/?view=cm&fs=1&to=' +
email +
'&su=' +
subject +
'&cc=' +
cc +
'&bcc=' +
bcc +
'&body=' +
body;
gmail.href = `https://mail.google.com/mail/?view=cm&fs=1&to=${email}&su=${subject}&cc=${cc}&bcc=${bcc}&body=${body}`;
var outlook = document.getElementById(app.prefix('-button-2'));
outlook.href = `https://outlook.office.com/owa/?path=/mail/action/compose&to=${email}&subject=${subject}&body=${body}`;

1
src/scss/component.scss
View File

@@ -191,6 +191,7 @@ $brand-font-size: 80%;
margin-left: 0px;
position: relative;
top: -2px;
vertical-align: sub;
}
.mailymaily-copy {