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

🧹 some proper clean ups

This commit is contained in:
Philipp Dormann 2020-08-29 16:38:25 +02:00
parent 5008992835
commit 4a3f443f24
5 changed files with 802 additions and 893 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mailymaily-min.js vendored
View File

File diff suppressed because one or more lines are too long

41
gulpfile.js
View File

@ -1,56 +1,23 @@
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 cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const fs = require('fs-extra');
const htmlMin = require('gulp-htmlmin');
const sass = require('gulp-sass');
/**
* Process HTML files.
*/
function html() {
return src('./src/html/component.html')
.pipe(htmlMin({ collapseWhitespace: true }))
.pipe(rename('./src/html/component-min.html'))
.pipe(dest('./'));
}
/**
* Process CSS file.
*/
function css() {
return src('./src/scss/component.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(cleanCss())
.pipe(cleanCSS())
.pipe(rename('./src/css/component-min.css'))
.pipe(dest('./'));
}
/**
* Process the JavaScript library file.
*/
function js() {
packageJson = fs.readJsonSync('./package.json');
return src('./src/js/mailymaily.js').pipe(minify({ noSource: true })).pipe(dest('dist'));
}
/**
* The all seeing eye...
*/
function watchFiles() {
watch('./src/html/component.html', html);
watch('./src/scss/component.scss', css);
watch([ './src/js/mailymaily.js', './package.json' ]);
}
const build = series(parallel(html, css), js);
const watching = series(build, watchFiles);
//-----
exports.html = html;
exports.css = css;
exports.js = js;
exports.watch = watching;
exports.default = build;
const js = () => src('./src/js/mailymaily.js').pipe(minify({ noSource: true })).pipe(dest('./dist'));
exports.default = series(parallel(html, css), js);

9
package.json
View File

@ -4,10 +4,6 @@
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-transform-regenerator": "^7.4.5",
"@babel/preset-env": "^7.5.5",
"fs-extra": "^7.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.2.0",
@ -16,11 +12,8 @@
"gulp-minify": "^3.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-util": "^3.0.8",
"gulp-watch": "^5.0.1",
"node-sass": "^4.12.0",
"prettier": "1.15.3",
"vue": "^2.6.10"
"vue": "^2.6.12"
},
"scripts": {
"build": "gulp"

65
src/js/mailymaily.js
View File

@ -1,18 +1,4 @@
/**
* mailymaily - A simple way to enhance your mailto links with a convenient user interface.
*
* @link https://mailymaily.com
* @author Mario Rodriguez - https://twitter.com/mariordev
* @license MIT
*
* mailymaily is a library that enhances your mailto links with a convenient user interface.
* It gives your site visitors the flexibility to compose a new email message using a
* browser-based email client or their default local email application.
*/
/**
* Let's not step on anybody else's toes.
*/
// Let's not step on anybody else's toes.
var mailymailyApp = mailymailyApp || {};
(function(app) {
@ -230,29 +216,7 @@ 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 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></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 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></div>`;
markup = markup.replace(/mailymaily/g, app.prefix());
@ -330,29 +294,13 @@ var mailymailyApp = mailymailyApp || {};
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;
outlook.href = `https://outlook.office.com/owa/?path=/mail/action/compose&to=${email}&subject=${subject}&body=${body}`;
var yahoo = document.getElementById(app.prefix('-button-3'));
yahoo.href =
'https://compose.mail.yahoo.com/?to=' +
email +
'&subject=' +
subject +
'&cc=' +
cc +
'&bcc=' +
bcc +
'&body=' +
body;
yahoo.href = `https://compose.mail.yahoo.com/?to=${email}&subject=${subject}&cc=${cc}&bcc=${bcc}&body=${body}`;
var defaultApp = document.getElementById(app.prefix('-button-4'));
defaultApp.href = 'mailto:' + email + '?subject=' + subject + '&cc=' + cc + '&bcc=' + bcc + '&body=' + body;
defaultApp.href = `mailto:${email}?subject=${subject}&cc=${cc}&bcc=${bcc}&body=${body}`;
var emailField = document.getElementById(app.prefix('-email-address'));
emailField.innerHTML = email;
@ -966,7 +914,8 @@ var mailymailyApp = mailymailyApp || {};
* @param {String} url The url to an svg file.
*/
app.validateSvg = function(name, url) {
app.getSvg(name, url)
app
.getSvg(name, url)
.then(function(promise) {
if (!app.stringIsSvg(promise.responseText)) {
throw new Error(name + ': ' + url + ' is not an SVG file.');

80
src/scss/component.scss
View File

@ -1,53 +1,53 @@
$animation-speed: 0.4s; //0.4s
$overlay-bg-color: rgba(0, 0, 0, 0.4); //rgba(0, 0, 0, 0.4)
$radius: 8px; //8px
$success-bg-color: #1f9d55; //#1f9d55
$success-color: #fff; //#fff
$animation-speed: 0.4s;
$overlay-bg-color: rgba(0, 0, 0, 0.4);
$radius: 8px;
$success-bg-color: #1f9d55;
$success-color: #fff;
$modal-border-radius: $radius; //$radius
$modal-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); //0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
$modal-border-radius: $radius;
$modal-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
$modal-head-bg-color: #fff; //#fff
$modal-head-padding-x: 20px; //20px
$modal-head-padding-y: 10px; //10px
$modal-head-bg-color: #fff;
$modal-head-padding-x: 20px;
$modal-head-padding-y: 10px;
$modal-title-color: #303131; //#303131
$modal-title-font-family: sans-serif; //sans-serif
$modal-title-font-size: 120%; //120%
$modal-title-font-weight: 700; //700
$modal-title-color: #303131;
$modal-title-font-family: sans-serif;
$modal-title-font-size: 120%;
$modal-title-font-weight: 700;
$modal-close-color-1: #aaa; //#aaa
$modal-close-color-2: #000; //#000
$modal-close-font-size: 38px; //38px
$modal-close-top: -4px; //-4px
$modal-close-color-1: #aaa;
$modal-close-color-2: #000;
$modal-close-font-size: 38px;
$modal-close-top: -4px;
$modal-content-bg-color: #f1f5f8; //#f1f5f8
$modal-body-padding: 20px; //20px
$modal-content-bg-color: #f1f5f8;
$modal-body-padding: 20px;
$button-bg-color: #fff; //#fff
$button-border-radius: $radius; //$radius
$button-border: none; //none
$button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); //0 2px 4px rgba(0, 0, 0, 0.18)
$button-color: #333; //#333
$button-margin-bottom: 20px; //20px
$button-hover-bg-color: #555; //#555
$button-hover-color: #fff; //#fff
$button-padding-x: 20px; //20px
$button-padding-y: 15px; //15px
$button-bg-color: #fff;
$button-border-radius: $radius;
$button-border: none;
$button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
$button-color: #333;
$button-margin-bottom: 20px;
$button-hover-bg-color: #555;
$button-hover-color: #fff;
$button-padding-x: 20px;
$button-padding-y: 15px;
$button-icon-height: 24px; //24px
$button-icon-top: 4px; //4px
$button-icon-width: 24px; //24px
$button-icon-height: 24px;
$button-icon-top: 4px;
$button-icon-width: 24px;
$button-copy-border: $button-border; //$button-border
$button-copy-border: $button-border;
$email-bg-color: #d8dcdf; //#d8dcdf
$email-box-shadow: unset; //unset
$email-color: #48494a; //#48494a
$email-margin-top: 20px; //20px
$email-bg-color: #d8dcdf;
$email-box-shadow: unset;
$email-color: #48494a;
$email-margin-top: 20px;
$brand-color: #888; //#888
$brand-font-size: 80%; //80%
$brand-color: #888;
$brand-font-size: 80%;
.mailymaily-modal {
background-color: #000;