manzinello / mailgo Goto Github PK

View Code? Open in Web Editor NEW

1.0K 11.0 50.0 21.42 MB

💌 mailgo, a new concept of mailto and tel links [deprecated]

Home Page: https://mailgo.dev

License: MIT License

JavaScript 6.99% TypeScript 78.70% SCSS 12.25% HTML 2.06%

javascript mailto npm webpack scss gmail outlook telegram whatsapp skype

mailgo's Introduction

Hi! 👋

I'm Matteo, an italian 🇮🇹 freelance developer 💻 (web/mobile) and a computer engineer.

mailgo's People

Contributors

Stargazers

Watchers

mailgo's Issues

Change the includes method with start-with

Using "includes"... so what about "http://google.com/?mailto:there"? Perhaps would be better if it checked if it started with, like the comment in the preceding line mentions.

https://www.reddit.com/r/javascript/comments/bmlg68/mailgo_a_different_mailto/

Bug with body and subject

Bug of not displaying body and subject in email

Lighthouse audit fail: Uncrawlable Links

I am not able to use mailgo due to lighthouse audit for link crawling failing. Are we able to change the href or use a different html element like a button or maybe use an onclick attribute?

Search engines may use href attributes on links to crawl websites. Ensure that the href attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered. Learn More: https://support.google.com/webmasters/answer/9112205

Uncrawlable Link

open in Gmail<a id="m-gmail" href="javascript:void(0);" class="m-open m-gmail">
open in Outlook<a id="m-outlook" href="javascript:void(0);" class="m-open m-outlook">
open default<a id="m-open" href="javascript:void(0);" class="m-open m-default">
copy<a id="m-copy" href="javascript:void(0);" class="m-copy w-500">
open in Telegram<a id="m-tg" href="javascript:void(0);" class="m-open m-tg" style="display: none;">
open in WhatsApp<a id="m-wa" href="javascript:void(0);" class="m-open m-wa">
open in Skype<a id="m-skype" href="javascript:void(0);" class="m-open m-skype">
call as default<a id="m-call" href="javascript:void(0);" class="m-open m-default">
copy<a id="m-tel-copy" href="javascript:void(0);" class="m-copy w-500">

Remove keyDown event listener

Find the best way (and the best moment) to remove the keyDown event

auto translation ? Fr or fr-FR

If I understand well. the script is based on the attribute lang in the html to choose a language defined in the i18n.json.
and I think it doesn't work in french with WordPress because by default the html tag for french is lang="fr-FR" .. and in the file it's only fr..

I don't know if am right ... any help to translate in french?

In Chrome/Brave and using Gatsby Mail link won't open

I am using most recent Gatsby and Chrome browser. I copy/pasted the demo snippets into my app, as well the config from the docs. Live and Gmail works as expected, but the regular mail, won't.

gatsby-config

    {
      resolve: `gatsby-plugin-mailgo`,
      options: {
        mailgoConfig: {
          dark: true,
        },
      },
    },

in your site put any Mail example from here: https://codepen.io/manzinello/pen/RmeQEr

  <a href="mailto:[email protected]">[email protected]</a>
      <br/><br/>
        Just a <code>tel</code> link (with <strong>mailgo</strong>, just importing the script)
      </p>
      <a href="tel:1234567890" data-telegram="telegram">+39 123456789</a>

(Any popup blocker or similar is deactivated)

You can also try your examples too, they do not work: https://codepen.io/manzinello/pen/RmeQEr

Mailgo accessibility

Hi, would you be interested in making mailgo accessible to people with disabilities? This would involve code changes to support users who only use a keyboard (no mouse) or a screen reader.

The expected keyboard interaction for modals is:

when the modal opens, focus moves to an element inside the modal
you can tab through interactive elements inside the modal, but you can't tab to anything outside the modal
you can close the modal using the escape key
you can close the modal by focusing on a close button and pressing the space bar or enter key
when you close the modal, focus returns to the element that invoked the modal

The expected screen reader interaction for modals is:

the modal container has a role of dialog (which screen readers will announce)
the modal container has aria-modal set to true
the modal has either an aria-labelledby property or an aria-label

FIX CSS z-index

Test the modal with some z-index elements that don't go under the modal-background

Neumorphism

If I want to apply Neumorphism design to mailgo, which changes must be done from a design point of view?

What are the PROs? What are the CONs?

Modificare @latest di unpkg con la versione

close modal after action?

Close the mailgo modal after an action is performed? Like copy

📞 Add phone functionalities

Great tool, thanks !

It would be great to have the same principle for phone links.
It could sent to default link, skype, sms: …
And spam protection.

Add a language format style for i18n

Hi! I saw the project on Twitter and immediately fell in love with it :)

Problem

I want to translate i18n strings to my native language (Turkish) but the grammar difference of my language with other latin languages makes it really hard.

Example 1
For English: 'open in Telegram' is coded like this -> open_in_ + telegram
Translation for Turkish should be: "Telegram ile aç". Need to be coded like this. -> telegram + open_in_

Example 2
For English: 'call as default' is coded like this -> call + _as_default
Translation for Turkish should be: "Varsayılan ile ara". Need to be coded like this. -> _as_default + call

Proposal

As you can see from the examples, different languages might need different formatting for proper translations.
In order to fix this problem, I propose 2 different solutions:

1. Add a boolean config value to reverse order

We can add a boolean flag to every language config like this:

// i18n/i18n.json
"en": {
      "open_in_": "open in ",
      "is_reverse_order": false,
      // ...
    },
"tr": {
      "open_in_": "ile aç ",
      "is_reverse_order": true,
      // ...
    },

Then, we can create text nodes conditionally by checking flag like this:

// src/mailgo.ts
    gmail = createElement(aHTMLTag) as HTMLLinkElement;
    let openTextNode = createTextNode(strings.open_in_ || defaultStrings.open_in_);
    let gmailSpan: HTMLElement = createElement(spanHTMLTag);
    gmailSpan.appendChild(
      createTextNode(strings.gmail || defaultStrings.gmail)
    );
    if(strings.is_reverse_order) {
      gmail.append(gmailSpan, openTextNode)
    }
    else {
      gmail.append(openTextNode, gmailSpan)
    }

2.Implement string template feature

We can add a template variable (like template literals) in order to allow every language decide how their strings should look:

// i18n/i18n.json
"en": {
      "open_in_": "open in ",
      "telegram": "telegram",
      "open_in_template": "${open_in_} ${telegram}",
      // ...
    },
"tr": {
      "open_in_": "ile aç ",
      "telegram": "telegram",
      "open_in_template": "${telegram} ${open_in_}",
      // ...
    },

What do you think about the problem and the proposals? I can also help you to implement this feature. Waiting for your answer. Cheers.

Add keyboard commands

When then modal is showing
pressing "g" -> open Gmail
pressing "o" -> open Outlook
pressing Enter -> open
pressing "c" -> copy

Switch back to i18n "copy" after copy action

I also saw it switch back to non i18n"copy" after it was copied

(from another issue)

i18n missing string

When clicking on "copy" button the text switch to "copied" which has no i18n translation.

Copy button larger than the rest

Currently, the padding for the copy button is more than the rest of the buttons, (padding: 16px 10px; vs padding: 10px;). Why?

FIX Edge

Some bugs of modal that doesn't appear on WIN10 + Edge

multiple to, cc and bcc in spam-less

add the possibility to use mailto: with multiple to email address, multiple cc and multiple bcc (at the moment it is not supported) for the mailto links. Think about the use of multiple fields in the no-spam usages

BUG - Problemi di compatibilità su Browser con ES5

Usando il plugin su Browser come safari o IE alcune feature javascript usate non sono supportate.
Bisognerebbe creare una dist con Babel in modo da portare la compatibilità ad ES5.

Telegram linking

At the moment mailgo uses tg://, but it seems not to working very well. I am planning to manage username in data-telegram attribute to add the possibility to contact on telegram

[proposal] Refactor Dom generation

Hi again @manzinello,

First of all, thanks for this lib! I really appreciate the problem you want to solve!👍
after the fork, I've looked the code and I see the DOM generation can be improved in readability 👓

Here an example with a useful lib (dom-chef) that uses JSX for the DOM generation and saves you a lot of verbosities which is currently caused by vanilla JS.

Example:

If you want in my free time I can work in parallel at this feature if u like the idea

Here some pro/cons:

PRO:

legibility
less scary for newcomers

CONS:

a lot of refactoring
introduction of the JSX (not a real cons but dunno if u want to do all in vanilla ;) )

Support to sms:

Add the support to link like

sms://...

allow escape key to close the modal

it would be helpful to add an event listener to mailgo to close the modal when the escape key is pressed. that way it doesn't become a keyboard trap if someone enters the modal but doesn't want any of the options. I tested some code to do this locally and can submit a PR if you like.

Gmail not opens with mailto parameters on iOS

Issue seen on iOS + Safari

A good RegEx for phone numbers

I was working on validateTel, this is the RegEx I have added at the moment:

/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/

https://regexr.com/3c53v

It is good enough? I don't want it too restricted...

FIX z-index on Safari

On Safari the modal in some cases goes under the background!

Deep linking

I really want to open the correct apps on mobile, passing the parameters and not only open a link.

On mailgo it works already for WhatsApp (wa.me), Skype (skype://) and for Telegram (t.me).

Outlook and Gmail are opened through a url and I think that could be awesome to open Outlook and Gmail apps if they are installed on the device!

I found the deep link for Outlook: ms-outlook:// (commit 5999d5c).

I haven't found yet a link to open Gmail.

Which is the best way to implement this feature?
How can we check that the correct app is installed on the device to handle the url?

Unlimited tabs on Chrome OS

Hey, um....on the mailgo website, when I clicked "open" on the mailgo modal, it kept opening unlimited tabs. Is it only me that had that issue?

Using Chrome Version 74.0.3729.125 on Chrome OS.

Load CSS separately

We implemented a drupal-module for this library.
We'd like to allow users not to load module CSS, but also use their own styles. That would be great if your library loaded CSS separately from JavaScript. Thanks.

lang and forceLang

About i18n the behaviour of mailgo is, by default, to use the lang attribute from <html>. If the lang exists in mailgo translations installed it will be the language of the mailgo modal. If the language is not specified or not exists in mailgo translations, then the en will be used, only if a lang is not specified in the configuration. If a lang is specified in mailgo config then it will be the language of the modal. You can force the use of the lang specified with the attribute forceLang, that it is a boolean and by default equal to false.

Really, I don't like this implementation because it is not intuitive and maybe can create confusion, but it is the more flexible and give developers all the possibilities for i18n.

Any type of suggestion is really appreciated!

Add class selector

Add the possibility to apply mailgo not to every mailto: link, but only to the ones that have a certain class (e.g. class='mailgo')

Possibility to exclude actions

Though config

Change url with hash

When Clicking action buttons [open in Gamil,copy ... etc] url hash change

No more DOMContentLoaded

At the moment mailgo works adding a listener on DOMContentLoaded, but it can create some problems with SPAs or content that render elements after the DOMContentLoaded. The new idea is to add a listener on every element mailto in the body (or anyone that respects mailgo-enabled elements) and show the mailgo-modal with the correct parameters. So instead of constructing a div after the mailto: elements (after che DOMContentLoaded) the idea is to create a single mailgo-modal div in the page and intercepting the click on mailgo-enabled elements show it with the correct data.

Problems showing Chinese translation

With Commit 6b6ef09 Chinese Traditional translation has been added to mailgo. I have added index.zh.html in examples (e86d00b) but I have problems showing the characters. Have I to change the <meta charset="UTF-8" /> maybe?
What have I to do to have mailgo in Chinese displaying correctly?

Copy not working

Always getting undefined when copy paste

Expected :
should copy the email address

Note : Even the live demo getting undefined

Doesn't work with icon

so I have an email icon and mailgo doesn't work on it.

<a href="mailto:[email protected]">
   <i class="fa fa-3 fa-sub fa-envelope space-required"></i>
</a>

Doppia possibilità per abilitare mailgo

link mailto
class specifica

MouseEvent.Path not supported in Safari

event.path.forEach on line 283 in 0.4.9 returns:
typeError: undefined is not an object (evaluating 'event.path.forEach')

See:
https://stackoverflow.com/questions/36845515/mouseevent-path-equivalent-in-firefox-safari

for two possible/working solutions.

Open Gmail and Outlook app from mobile

Open Gmail and Outlook app when mailgo is used on mobile device

Suggestion/Discussion of Accessibility & Progressive enhancement improvements

Hey, Matteo!
First of all, great idea, kudos!

Wouldn't it better to have the default behavior of mailto: in the href attribute and parsing the oldschool attributes with preventDefault() instead of using data-attr?

Pros:

Support for noJS users;
100% accessible as it's using default browser functionality.

Cons:

Loosing the spam protection of email partitioning with data-attr

I would love to hear other people opinions on this.
Have a great day!

How to add to Hugo site?

Hi, I'm currently building a static site with Hugo and would like to add mailgo to my site. However, I've been unable to get it functioning. I've followed the examples on the mailgo pages by linking to the script in the head and body, even by downloading the script itself, but nothing seems to work. Has anyone tried this with a Hugo site yet? Am I missing something?

i18n

Add supported browsers

Could you add a list of supported browsers to your Github?