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

fixed some bugs with translations, new examples folder

Browse Source
This commit is contained in:
Matteo Manzinello 2020-07-02 17:38:15 +02:00
parent 444031b617
commit 7262003bde
12 changed files with 149 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mailgo.dark.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.dark.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

52
examples/index.dark.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>mailgo dark examples</title>
</head>
<body>
<h1>mailto:</h1>
<a href="mailto:matteo@manzinello.dev">matteo@manzinello.dev</a>
<br />
<a href="mailto:matteo@manzinello.dev?cc=matteomanzinello@gmail.com"
><p>matteo@manzinello.dev</p></a
>
<br />
<a href="mailto:matteo@manzinello.dev,matteomanzinello@gmail.com?cc=ciao"
>matteo@manzinello.dev</a
>
<br />
<a href="mailto:matteo@manzinello.dev?subject=ciao">ciao</a>
<br />
<a href="" class="mailgo" data-address="matteo" data-domain="manzinello.dev"
>scrivimi!</a
>
<br />
<a href="#mailgo" data-address="matteo" data-domain="manzinello.dev"
>scrivimi!</a
>
<a
href="#mailgo"
data-address="matteo"
data-domain="manzinello.dev"
data-cc="matteomanzinello@gmail.com,m@m.it"
>more cc</a
>
<br />
<a
href="mailto:matteo@manzinello.dev?cc=matteomanzinello@gmail.com&bcc=test"
>matteo@manzinello.dev</a
>
<h1>tel:</h1>
<a href="#mailgo" data-tel="123456568" data-telegram="telegram">chiamami</a>
<br />
<a href="tel:+39 123-456-78">skype</a>
<br />
<a href="callto:+39 123-456-78">callto</a>
<script src="../dist/mailgo.dark.min.js"></script>
</body>
</html>

2
examples/index.html
View File

@ -2,7 +2,7 @@
<html lang="it"> <html lang="it">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>title</title> <title>mailgo examples</title>
</head> </head>
<body> <body>
<h1>mailto:</h1> <h1>mailto:</h1>

52
examples/index.it.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>mailgo examples</title>
</head>
<body>
<h1>mailto:</h1>
<a href="mailto:matteo@manzinello.dev">matteo@manzinello.dev</a>
<br />
<a href="mailto:matteo@manzinello.dev?cc=matteomanzinello@gmail.com"
><p>matteo@manzinello.dev</p></a
>
<br />
<a href="mailto:matteo@manzinello.dev,matteomanzinello@gmail.com?cc=ciao"
>matteo@manzinello.dev</a
>
<br />
<a href="mailto:matteo@manzinello.dev?subject=ciao">ciao</a>
<br />
<a href="" class="mailgo" data-address="matteo" data-domain="manzinello.dev"
>scrivimi!</a
>
<br />
<a href="#mailgo" data-address="matteo" data-domain="manzinello.dev"
>scrivimi!</a
>
<a
href="#mailgo"
data-address="matteo"
data-domain="manzinello.dev"
data-cc="matteomanzinello@gmail.com,m@m.it"
>more cc</a
>
<br />
<a
href="mailto:matteo@manzinello.dev?cc=matteomanzinello@gmail.com&bcc=test"
>matteo@manzinello.dev</a
>
<h1>tel:</h1>
<a href="#mailgo" data-tel="123456568" data-telegram="telegram">chiamami</a>
<br />
<a href="tel:+39 123-456-78">skype</a>
<br />
<a href="callto:+39 123-456-78">callto</a>
<script src="../dist/mailgo.min.js"></script>
</body>
</html>

8
i18n/i18n.json
View File

@ -20,10 +20,10 @@
}, },
"it": { "it": {
"open_in": "apri con ", "open_in": "apri con ",
"cc": "cc ", "cc_": "cc ",
"bcc": "ccn ", "bcc_": "ccn ",
"subject": "oggetto ", "subject_": "oggetto ",
"body": "testo ", "body_": "testo ",
"gmail": "Gmail", "gmail": "Gmail",
"outlook": "Outlook", "outlook": "Outlook",
"telegram": "Telegram", "telegram": "Telegram",

19
lib/mailgo.js
View File

@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
/* 0 */ /* 0 */
/***/ (function(module) { /***/ (function(module) {
module.exports = JSON.parse("{\"languages\":[\"en\",\"it\"],\"translations\":{\"en\":{\"open_in\":\"open in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"subject \",\"body_\":\"body \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"call\",\"open\":\"open\",\"_default\":\" default\",\"_as_default\":\" as default\",\"copy\":\"copy\"},\"it\":{\"open_in\":\"apri con \",\"cc\":\"cc \",\"bcc\":\"ccn \",\"subject\":\"oggetto \",\"body\":\"testo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"chiama\",\"open\":\"apri\",\"_default\":\" \",\"_as_default\":\" \",\"copy\":\"copia\"}}}"); module.exports = JSON.parse("{\"languages\":[\"en\",\"it\"],\"translations\":{\"en\":{\"open_in\":\"open in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"subject \",\"body_\":\"body \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"call\",\"open\":\"open\",\"_default\":\" default\",\"_as_default\":\" as default\",\"copy\":\"copy\"},\"it\":{\"open_in\":\"apri con \",\"cc_\":\"cc \",\"bcc_\":\"ccn \",\"subject_\":\"oggetto \",\"body_\":\"testo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"chiama\",\"open\":\"apri\",\"_default\":\" \",\"_as_default\":\" \",\"copy\":\"copia\"}}}");
/***/ }), /***/ }),
/* 1 */ /* 1 */
@ -122,7 +122,7 @@ module.exports = JSON.parse("{\"languages\":[\"en\",\"it\"],\"translations\":{\"
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3); var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
exports = ___CSS_LOADER_API_IMPORT___(false); exports = ___CSS_LOADER_API_IMPORT___(false);
// Module // Module
exports.push([module.i, ".m-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal p,.m-modal span,.m-modal strong,.m-modal a{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";text-rendering:optimizeLegibility}.m-modal strong{font-weight:700}.m-modal .m-modal-back{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:#d9d9d9;opacity:0.8}.m-modal .m-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:0.97;border-radius:20px;box-shadow:30px -30px 60px #d9d9d9, -30px 30px 60px #ffffff;color:#4a4a4a;display:flex;flex-direction:column;overflow:auto;padding:24px;transition:0.5s box-shadow}.m-modal .m-modal-content:hover{opacity:1;box-shadow:30px -30px 60px #d9d9d9, -30px 30px 60px #ffffff}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.m-modal .m-modal-content .m-details{margin-bottom:10px}.m-modal .m-modal-content .m-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.m-modal .m-modal-content a{padding:10px;color:#4a4a4a;border-radius:20px;text-decoration:none}.m-modal .m-modal-content a.m-gmail{color:#d44638}.m-modal .m-modal-content a.m-gmail:hover{background-color:rgba(212,70,56,0.08);color:#d44638}.m-modal .m-modal-content a.m-outlook{color:#0072c6}.m-modal .m-modal-content a.m-outlook:hover{background-color:rgba(0,114,198,0.08);color:#0072c6}.m-modal .m-modal-content a.m-tg{color:#08c}.m-modal .m-modal-content a.m-tg:hover{background-color:rgba(0,114,198,0.08);color:#08c}.m-modal .m-modal-content a.m-wa{color:#00bfa5}.m-modal .m-modal-content a.m-wa:hover{background-color:rgba(0,191,165,0.08);color:#00bfa5}.m-modal .m-modal-content a.m-skype{color:#00aff0}.m-modal .m-modal-content a.m-skype:hover{background-color:rgba(0,175,240,0.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-default:hover,.m-modal .m-modal-content a.m-copy:hover{background-color:rgba(0,0,0,0.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:8px;margin-top:0.8rem;padding:5px;color:#4a4a4a;opacity:0.5}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}\n", ""]); exports.push([module.i, ".m-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal p,.m-modal span,.m-modal strong,.m-modal a{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";text-rendering:optimizeLegibility}.m-modal strong{font-weight:700}.m-modal .m-modal-back{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:#c8c8c8;opacity:0.8}.m-modal .m-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:0.95;border-radius:20px;box-shadow:30px -30px 60px #d9d9d9, -30px 30px 60px #ffffff;color:#4a4a4a;display:flex;flex-direction:column;overflow:auto;padding:24px;transition:0.5s box-shadow}.m-modal .m-modal-content:hover{opacity:1}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.m-modal .m-modal-content .m-details{margin-bottom:10px}.m-modal .m-modal-content .m-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.m-modal .m-modal-content a{padding:10px;color:#4a4a4a;border-radius:20px;text-decoration:none}.m-modal .m-modal-content a.m-gmail{color:#d44638}.m-modal .m-modal-content a.m-gmail:hover{background-color:rgba(212,70,56,0.08);color:#d44638}.m-modal .m-modal-content a.m-outlook{color:#0072c6}.m-modal .m-modal-content a.m-outlook:hover{background-color:rgba(0,114,198,0.08);color:#0072c6}.m-modal .m-modal-content a.m-tg{color:#08c}.m-modal .m-modal-content a.m-tg:hover{background-color:rgba(0,114,198,0.08);color:#08c}.m-modal .m-modal-content a.m-wa{color:#00bfa5}.m-modal .m-modal-content a.m-wa:hover{background-color:rgba(0,191,165,0.08);color:#00bfa5}.m-modal .m-modal-content a.m-skype{color:#00aff0}.m-modal .m-modal-content a.m-skype:hover{background-color:rgba(0,175,240,0.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-default:hover,.m-modal .m-modal-content a.m-copy:hover{background-color:rgba(0,0,0,0.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:8px;margin-top:0.8rem;padding:5px;color:#4a4a4a;opacity:0.5}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}.m-modal.m-dark .m-modal-back{background-color:#141414}.m-modal.m-dark .m-modal-content{color:white;box-shadow:30px -30px 60px #262626,-30px 30px 60px #0a0a0a;background-color:#1e1e1e}.m-modal.m-dark .m-modal-content a{color:white}\n", ""]);
// Exports // Exports
module.exports = exports; module.exports = exports;
@ -333,7 +333,7 @@ var mailgoInit = function mailgoInit(mailgoConfig) {
detailCc.id = "m-cc"; detailCc.id = "m-cc";
var ccSpan = createElement(span); var ccSpan = createElement(span);
ccSpan.className = "w-500"; ccSpan.className = "w-500";
ccSpan.appendChild(createTextNode(strings.cc || defaultStrings.cc)); ccSpan.appendChild(createTextNode(strings.cc_ || defaultStrings.cc_));
ccValue = createElement(span); ccValue = createElement(span);
ccValue.id = "m-cc-value"; ccValue.id = "m-cc-value";
detailCc.appendChild(ccSpan); detailCc.appendChild(ccSpan);
@ -343,7 +343,7 @@ var mailgoInit = function mailgoInit(mailgoConfig) {
detailBcc.id = "m-bcc"; detailBcc.id = "m-bcc";
var bccSpan = createElement(span); var bccSpan = createElement(span);
bccSpan.className = "w-500"; bccSpan.className = "w-500";
bccSpan.appendChild(createTextNode(strings.bcc || defaultStrings.bcc)); bccSpan.appendChild(createTextNode(strings.bcc_ || defaultStrings.bcc_));
bccValue = createElement(span); bccValue = createElement(span);
bccValue.id = "m-bcc-value"; bccValue.id = "m-bcc-value";
detailBcc.appendChild(bccSpan); detailBcc.appendChild(bccSpan);
@ -353,7 +353,7 @@ var mailgoInit = function mailgoInit(mailgoConfig) {
detailSubject.id = "m-subject"; detailSubject.id = "m-subject";
var subjectSpan = createElement(span); var subjectSpan = createElement(span);
subjectSpan.className = "w-500"; subjectSpan.className = "w-500";
subjectSpan.appendChild(createTextNode(strings.subject || defaultStrings.subject)); subjectSpan.appendChild(createTextNode(strings.subject_ || defaultStrings.subject_));
subjectValue = createElement(span); subjectValue = createElement(span);
subjectValue.id = "m-subject-value"; subjectValue.id = "m-subject-value";
detailSubject.appendChild(subjectSpan); detailSubject.appendChild(subjectSpan);
@ -363,7 +363,7 @@ var mailgoInit = function mailgoInit(mailgoConfig) {
detailBody.id = "m-body"; detailBody.id = "m-body";
var bodySpan = createElement(span); var bodySpan = createElement(span);
bodySpan.className = "w-500"; bodySpan.className = "w-500";
bodySpan.appendChild(createTextNode(strings.body || defaultStrings.body)); bodySpan.appendChild(createTextNode(strings.body_ || defaultStrings.body_));
bodyValue = createElement(span); bodyValue = createElement(span);
bodyValue.id = "m-body-value"; bodyValue.id = "m-body-value";
detailBody.appendChild(bodySpan); detailBody.appendChild(bodySpan);
@ -428,7 +428,12 @@ var mailgoInit = function mailgoInit(mailgoConfig) {
_modal.style.display = "none"; _modal.style.display = "none";
_modal.id = "mailgo-tel"; _modal.id = "mailgo-tel";
_modal.classList.add("m-modal"); // background _modal.classList.add("m-modal"); // if dark is in config
if (mailgoConfig === null || mailgoConfig === void 0 ? void 0 : mailgoConfig.dark) {
_modal.classList.add("m-dark");
} // background
var _modalBackground = createElement(); var _modalBackground = createElement();

2
lib/mailgo.js.map
View File

File diff suppressed because one or more lines are too long

17
src/mailgo.scss
View File

@ -49,7 +49,7 @@ $default-border-radius: 20px;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgb(217, 217, 217); background-color: rgb(200, 200, 200);
opacity: 0.8; opacity: 0.8;
} }
@ -61,7 +61,7 @@ $default-border-radius: 20px;
min-width: 200px; min-width: 200px;
max-width: 240px; max-width: 240px;
background-color: #fff; background-color: #fff;
opacity: 0.97; opacity: 0.95;
border-radius: $default-border-radius; border-radius: $default-border-radius;
box-shadow: 30px -30px 60px #d9d9d9, -30px 30px 60px #ffffff; box-shadow: 30px -30px 60px #d9d9d9, -30px 30px 60px #ffffff;
color: $default-color; color: $default-color;
@ -73,7 +73,6 @@ $default-border-radius: 20px;
&:hover { &:hover {
opacity: 1; opacity: 1;
box-shadow: 30px -30px 60px #d9d9d9, -30px 30px 60px #ffffff;
} }
.m-title { .m-title {
@ -167,5 +166,17 @@ $default-border-radius: 20px;
} }
&.m-dark { &.m-dark {
.m-modal-back {
background-color: rgb(20, 20, 20);
}
.m-modal-content {
color: white;
box-shadow: 30px -30px 60px rgb(38, 38, 38),
-30px 30px 60px rgb(10, 10, 10);
background-color: rgb(30, 30, 30);
a {
color: white;
}
}
} }
} }

13
src/mailgo.ts
View File

@ -131,7 +131,7 @@ const mailgoInit = (mailgoConfig?: MailgoConfig): void => {
detailCc.id = "m-cc"; detailCc.id = "m-cc";
let ccSpan = createElement(span); let ccSpan = createElement(span);
ccSpan.className = "w-500"; ccSpan.className = "w-500";
ccSpan.appendChild(createTextNode(strings.cc || defaultStrings.cc)); ccSpan.appendChild(createTextNode(strings.cc_ || defaultStrings.cc_));
ccValue = createElement(span); ccValue = createElement(span);
ccValue.id = "m-cc-value"; ccValue.id = "m-cc-value";
detailCc.appendChild(ccSpan); detailCc.appendChild(ccSpan);
@ -142,7 +142,7 @@ const mailgoInit = (mailgoConfig?: MailgoConfig): void => {
detailBcc.id = "m-bcc"; detailBcc.id = "m-bcc";
let bccSpan = createElement(span); let bccSpan = createElement(span);
bccSpan.className = "w-500"; bccSpan.className = "w-500";
bccSpan.appendChild(createTextNode(strings.bcc || defaultStrings.bcc)); bccSpan.appendChild(createTextNode(strings.bcc_ || defaultStrings.bcc_));
bccValue = createElement(span); bccValue = createElement(span);
bccValue.id = "m-bcc-value"; bccValue.id = "m-bcc-value";
detailBcc.appendChild(bccSpan); detailBcc.appendChild(bccSpan);
@ -154,7 +154,7 @@ const mailgoInit = (mailgoConfig?: MailgoConfig): void => {
let subjectSpan = createElement(span); let subjectSpan = createElement(span);
subjectSpan.className = "w-500"; subjectSpan.className = "w-500";
subjectSpan.appendChild( subjectSpan.appendChild(
createTextNode(strings.subject || defaultStrings.subject) createTextNode(strings.subject_ || defaultStrings.subject_)
); );
subjectValue = createElement(span); subjectValue = createElement(span);
subjectValue.id = "m-subject-value"; subjectValue.id = "m-subject-value";
@ -166,7 +166,7 @@ const mailgoInit = (mailgoConfig?: MailgoConfig): void => {
detailBody.id = "m-body"; detailBody.id = "m-body";
let bodySpan = createElement(span); let bodySpan = createElement(span);
bodySpan.className = "w-500"; bodySpan.className = "w-500";
bodySpan.appendChild(createTextNode(strings.body || defaultStrings.body)); bodySpan.appendChild(createTextNode(strings.body_ || defaultStrings.body_));
bodyValue = createElement(span); bodyValue = createElement(span);
bodyValue.id = "m-body-value"; bodyValue.id = "m-body-value";
detailBody.appendChild(bodySpan); detailBody.appendChild(bodySpan);
@ -253,6 +253,11 @@ const mailgoInit = (mailgoConfig?: MailgoConfig): void => {
modal.id = "mailgo-tel"; modal.id = "mailgo-tel";
modal.classList.add("m-modal"); modal.classList.add("m-modal");
// if dark is in config
if (mailgoConfig?.dark) {
modal.classList.add("m-dark");
}
// background // background
let modalBackground = createElement(); let modalBackground = createElement();
modalBackground.className = "m-modal-back"; modalBackground.className = "m-modal-back";