🧹 some proper clean ups
This commit is contained in:
parent
5008992835
commit
4a3f443f24
File diff suppressed because one or more lines are too long
41
gulpfile.js
41
gulpfile.js
|
@ -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);
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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="#">×</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="#">×</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.');
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue