cleaner build pipe + ES6

The thing is broken tho
This commit is contained in:
philipp committed 2020-08-29 18:25:14 +02:00
1 parent a46636fb36
commit 3c82430266
10 files changed
+1118 -32

No files matched your search

+1 -1
View File
@@ -1 +1 @@
var mailymailyApp=mailymailyApp||{};!function(t){var e=document.getElementsByTagName("html")[0],i=document.getElementsByTagName("body")[0],o=null,n=null,a='<svg viewBox="0 0 24 24"><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="currentColor" stroke="currentColor"><path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M5.704,2.979 c0.694,0.513,1.257,1.164,1.767,2.02C7.917,5.746,8.908,7.826,8,9c-1.027,1.328-4,1.776-4,3c0,0.921,1.304,1.972,2,3 c1.047,1.546,0.571,3.044,0,4c-0.296,0.496-0.769,0.92-1.293,1.234" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M20.668,5.227 C18.509,6.262,15.542,6.961,15,7c-1.045,0.075-1.2-0.784-2-2c-0.6-0.912-2-2.053-2-3c0-0.371,0.036-0.672,0.131-0.966" stroke-linecap="butt"/> <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="12" cy="12" r="11"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M19.014,12.903 C19.056,15.987,15.042,19.833,13,19c-1.79-0.73-0.527-2.138-0.986-6.097c-0.191-1.646,1.567-3,3.5-3S18.992,11.247,19.014,12.903z" stroke-linecap="butt"/></g></svg>',l='<svg viewBox="0 0 32 32" style="vertical-align:middle"><path d="M 16 3 C 14.742188 3 13.847656 3.890625 13.40625 5 L 6 5 L 6 28 L 26 28 L 26 5 L 18.59375 5 C 18.152344 3.890625 17.257813 3 16 3 Z M 16 5 C 16.554688 5 17 5.445313 17 6 L 17 7 L 20 7 L 20 9 L 12 9 L 12 7 L 15 7 L 15 6 C 15 5.445313 15.445313 5 16 5 Z M 8 7 L 10 7 L 10 11 L 22 11 L 22 7 L 24 7 L 24 26 L 8 26 Z"/></svg>',r=new Object;r.linkClass="mailymaily",r.autoClose=!0,r.disableOnMobile=!0,r.title="Neue E-Mail schreiben mit",r.buttonText1="Gmail",r.buttonText2="Outlook Web",r.buttonText4="Standardanwendung",r.buttonIcon1='<svg viewBox="0 0 48 48" width="48px" height="48px" style="vertical-align:middle"><path fill="#e0e0e0" d="M5.5,40.5h37c1.933,0,3.5-1.567,3.5-3.5V11c0-1.933-1.567-3.5-3.5-3.5h-37C3.567,7.5,2,9.067,2,11v26C2,38.933,3.567,40.5,5.5,40.5z"/><path fill="#d9d9d9" d="M26,40.5h16.5c1.933,0,3.5-1.567,3.5-3.5V11c0-1.933-1.567-3.5-3.5-3.5h-37C3.567,7.5,2,9.067,2,11L26,40.5z"/><path fill="#eee" d="M6.745,40.5H42.5c1.933,0,3.5-1.567,3.5-3.5V11.5L6.745,40.5z"/><path fill="#e0e0e0" d="M25.745,40.5H42.5c1.933,0,3.5-1.567,3.5-3.5V11.5L18.771,31.616L25.745,40.5z"/><path fill="#ca3737" d="M42.5,9.5h-37C3.567,9.5,2,9.067,2,11v26c0,1.933,1.567,3.5,3.5,3.5H7V12h34v28.5h1.5c1.933,0,3.5-1.567,3.5-3.5V11C46,9.067,44.433,9.5,42.5,9.5z"/><path fill="#f5f5f5" d="M42.5,7.5H24H5.5C3.567,7.5,2,9.036,2,11c0,1.206,1.518,2.258,1.518,2.258L24,27.756l20.482-14.497c0,0,1.518-1.053,1.518-2.258C46,9.036,44.433,7.5,42.5,7.5z"/><path fill="#e84f4b" d="M43.246,7.582L24,21L4.754,7.582C3.18,7.919,2,9.297,2,11c0,1.206,1.518,2.258,1.518,2.258L24,27.756l20.482-14.497c0,0,1.518-1.053,1.518-2.258C46,9.297,44.82,7.919,43.246,7.582z"/></svg>',r.buttonIcon2='<svg viewBox="0 0 48 48" width="48px" height="48px" style="vertical-align:middle"><path fill="#03A9F4" d="M21,31c0,1.104,0.896,2,2,2h17c1.104,0,2-0.896,2-2V16c0-1.104-0.896-2-2-2H23c-1.104,0-2,0.896-2,2V31z"/><path fill="#B3E5FC" d="M42,16.975V16c0-0.428-0.137-0.823-0.367-1.148l-11.264,6.932l-7.542-4.656L22.125,19l8.459,5L42,16.975z"/><path fill="#0277BD" d="M27 41.46L6 37.46 6 9.46 27 5.46z"/><path fill="#FFF" d="M21.216,18.311c-1.098-1.275-2.546-1.913-4.328-1.913c-1.892,0-3.408,0.669-4.554,2.003c-1.144,1.337-1.719,3.088-1.719,5.246c0,2.045,0.564,3.714,1.69,4.986c1.126,1.273,2.592,1.91,4.378,1.91c1.84,0,3.331-0.652,4.474-1.975c1.143-1.313,1.712-3.043,1.712-5.199C22.869,21.281,22.318,19.595,21.216,18.311z M19.049,26.735c-0.568,0.769-1.339,1.152-2.313,1.152c-0.939,0-1.699-0.394-2.285-1.187c-0.581-0.785-0.87-1.861-0.87-3.211c0-1.336,0.289-2.414,0.87-3.225c0.586-0.81,1.368-1.211,2.355-1.211c0.962,0,1.718,0.393,2.267,1.178c0.555,0.795,0.833,1.895,0.833,3.31C19.907,24.906,19.618,25.968,19.049,26.735z"/></svg>',r.buttonIcon3=a,r.buttonIcon4='<svg viewBox="0 0 32 32" style="vertical-align:middle"><path d="M 3 8 L 3 26 L 29 26 L 29 8 Z M 7.3125 10 L 24.6875 10 L 16 15.78125 Z M 5 10.875 L 15.4375 17.84375 L 16 18.1875 L 16.5625 17.84375 L 27 10.875 L 27 24 L 5 24 Z"/></svg>',r.buttonIconCopy=l,r.buttonTextCopy="Kopieren",r.buttonTextCopyAction="Kopiert!";var c=0,s="auto";t.buildStyleTag=function(){var e=document.createElement("style"),i=".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}@mLine truncated
var mailymailyApp=mailymailyApp||{};!function(t){var e=document.getElementsByTagName("html")[0],i=document.getElementsByTagName("body")[0],o=null,n=null,a='<svg viewBox="0 0 24 24"><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="currentColor" stroke="currentColor"><path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M5.704,2.979 c0.694,0.513,1.257,1.164,1.767,2.02C7.917,5.746,8.908,7.826,8,9c-1.027,1.328-4,1.776-4,3c0,0.921,1.304,1.972,2,3 c1.047,1.546,0.571,3.044,0,4c-0.296,0.496-0.769,0.92-1.293,1.234" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M20.668,5.227 C18.509,6.262,15.542,6.961,15,7c-1.045,0.075-1.2-0.784-2-2c-0.6-0.912-2-2.053-2-3c0-0.371,0.036-0.672,0.131-0.966" stroke-linecap="butt"/> <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="12" cy="12" r="11"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M19.014,12.903 C19.056,15.987,15.042,19.833,13,19c-1.79-0.73-0.527-2.138-0.986-6.097c-0.191-1.646,1.567-3,3.5-3S18.992,11.247,19.014,12.903z" stroke-linecap="butt"/></g></svg>',l='<svg viewBox="0 0 32 32" style="vertical-align:middle"><path d="M 16 3 C 14.742188 3 13.847656 3.890625 13.40625 5 L 6 5 L 6 28 L 26 28 L 26 5 L 18.59375 5 C 18.152344 3.890625 17.257813 3 16 3 Z M 16 5 C 16.554688 5 17 5.445313 17 6 L 17 7 L 20 7 L 20 9 L 12 9 L 12 7 L 15 7 L 15 6 C 15 5.445313 15.445313 5 16 5 Z M 8 7 L 10 7 L 10 11 L 22 11 L 22 7 L 24 7 L 24 26 L 8 26 Z"/></svg>',r=new Object;r.linkClass="mailymaily",r.autoClose=!0,r.disableOnMobile=!0,r.title="Neue E-Mail schreiben mit",r.buttonText1="Gmail",r.buttonText2="Outlook Web",r.buttonText4="Standardanwendung",r.buttonIcon1='<svg viewBox="0 0 48 48" width="48px" height="48px" style="vertical-align:middle"><path fill="#e0e0e0" d="M5.5,40.5h37c1.933,0,3.5-1.567,3.5-3.5V11c0-1.933-1.567-3.5-3.5-3.5h-37C3.567,7.5,2,9.067,2,11v26C2,38.933,3.567,40.5,5.5,40.5z"/><path fill="#d9d9d9" d="M26,40.5h16.5c1.933,0,3.5-1.567,3.5-3.5V11c0-1.933-1.567-3.5-3.5-3.5h-37C3.567,7.5,2,9.067,2,11L26,40.5z"/><path fill="#eee" d="M6.745,40.5H42.5c1.933,0,3.5-1.567,3.5-3.5V11.5L6.745,40.5z"/><path fill="#e0e0e0" d="M25.745,40.5H42.5c1.933,0,3.5-1.567,3.5-3.5V11.5L18.771,31.616L25.745,40.5z"/><path fill="#ca3737" d="M42.5,9.5h-37C3.567,9.5,2,9.067,2,11v26c0,1.933,1.567,3.5,3.5,3.5H7V12h34v28.5h1.5c1.933,0,3.5-1.567,3.5-3.5V11C46,9.067,44.433,9.5,42.5,9.5z"/><path fill="#f5f5f5" d="M42.5,7.5H24H5.5C3.567,7.5,2,9.036,2,11c0,1.206,1.518,2.258,1.518,2.258L24,27.756l20.482-14.497c0,0,1.518-1.053,1.518-2.258C46,9.036,44.433,7.5,42.5,7.5z"/><path fill="#e84f4b" d="M43.246,7.582L24,21L4.754,7.582C3.18,7.919,2,9.297,2,11c0,1.206,1.518,2.258,1.518,2.258L24,27.756l20.482-14.497c0,0,1.518-1.053,1.518-2.258C46,9.297,44.82,7.919,43.246,7.582z"/></svg>',r.buttonIcon2='<svg viewBox="0 0 48 48" width="48px" height="48px" style="vertical-align:middle"><path fill="#03A9F4" d="M21,31c0,1.104,0.896,2,2,2h17c1.104,0,2-0.896,2-2V16c0-1.104-0.896-2-2-2H23c-1.104,0-2,0.896-2,2V31z"/><path fill="#B3E5FC" d="M42,16.975V16c0-0.428-0.137-0.823-0.367-1.148l-11.264,6.932l-7.542-4.656L22.125,19l8.459,5L42,16.975z"/><path fill="#0277BD" d="M27 41.46L6 37.46 6 9.46 27 5.46z"/><path fill="#FFF" d="M21.216,18.311c-1.098-1.275-2.546-1.913-4.328-1.913c-1.892,0-3.408,0.669-4.554,2.003c-1.144,1.337-1.719,3.088-1.719,5.246c0,2.045,0.564,3.714,1.69,4.986c1.126,1.273,2.592,1.91,4.378,1.91c1.84,0,3.331-0.652,4.474-1.975c1.143-1.313,1.712-3.043,1.712-5.199C22.869,21.281,22.318,19.595,21.216,18.311z M19.049,26.735c-0.568,0.769-1.339,1.152-2.313,1.152c-0.939,0-1.699-0.394-2.285-1.187c-0.581-0.785-0.87-1.861-0.87-3.211c0-1.336,0.289-2.414,0.87-3.225c0.586-0.81,1.368-1.211,2.355-1.211c0.962,0,1.718,0.393,2.267,1.178c0.555,0.795,0.833,1.895,0.833,3.31C19.907,24.906,19.618,25.968,19.049,26.735z"/></svg>',r.buttonIcon3=a,r.buttonIcon4='<svg viewBox="0 0 32 32" style="vertical-align:middle"><path d="M 3 8 L 3 26 L 29 26 L 29 8 Z M 7.3125 10 L 24.6875 10 L 16 15.78125 Z M 5 10.875 L 15.4375 17.84375 L 16 18.1875 L 16.5625 17.84375 L 27 10.875 L 27 24 L 5 24 Z"/></svg>',r.buttonIconCopy=l,r.buttonTextCopy="Kopieren",r.buttonTextCopyAction="Kopiert!";var c=0,s="auto";t.buildStyleTag=function(){var e=document.createElement("style"),i=".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}@mLine truncated
+1084
View File
File diff suppressed because it is too large. Load diff
+19 -2
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);
+1 -1
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>
+5 -1
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"
]
}
}
-1
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
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>
+4 -8
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>
+3 -17
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
View File
@@ -191,6 +191,7 @@ $brand-font-size: 80%;
margin-left: 0px;
position: relative;
top: -2px;
vertical-align: sub;
}
.mailymaily-copy {