cleaner build pipe + ES6

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

File diff suppressed because one or more lines are too long

1084
dist/mailymaily.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -2,9 +2,13 @@ const { src, dest, parallel, series, watch } = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const minify = require('gulp-minify');
const cleanCSS = require('gulp-clean-css');
const fs = require('fs');
const del = require('del');
const rename = require('gulp-rename');
const htmlMin = require('gulp-htmlmin');
const sass = require('gulp-sass');
const replace = require('gulp-replace');
//
function html() {
return src('./src/html/component.html')
.pipe(htmlMin({ collapseWhitespace: true }))
@ -19,5 +23,18 @@ function css() {
.pipe(rename('./src/css/component-min.css'))
.pipe(dest('./'));
}
const js = () => src('./src/js/mailymaily.js').pipe(minify({ noSource: true })).pipe(dest('./dist'));
exports.default = series(parallel(html, css), js);
function js() {
const css = fs.readFileSync('./src/css/component-min.css');
const html = fs.readFileSync('./src/html/component-min.html');
return (
src('./src/js/mailymaily.js')
.pipe(replace(/___css_inserter___/g, css))
.pipe(replace(/___html_inserter___/g, html))
// .pipe(minify({ noSource: true }))
.pipe(dest('./dist'))
);
}
function clean() {
return del([ './src/html/component-min.html', './src/css/' ]);
}
exports.default = series(html, css, js, clean);

View File

@ -10,6 +10,6 @@
<body>
<h1>mailymaily-sample</h1>
<a href="mailto:info@odit.services" target="_blank" rel="noopener noreferrer" class="mailymaily">info@odit.services</a>
<script src="./dist/mailymaily-min.js"></script>
<script src="./dist/mailymaily.js"></script>
</body>
</html>

View File

@ -4,18 +4,22 @@
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-htmlmin": "^5.0.1",
"gulp-minify": "^3.1.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.1.0"
},
"scripts": {
"build": "gulp"
},
"browserslist": {
"browsers": [ "last 2 versions" ]
"browsers": [
"last 2 versions"
]
}
}

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)}}

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>

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>

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}`;

View File

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