Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fcmam5/telefonilo.js
Make "click to phone-call" links for your mobile users only (accepts encrypted phone numbers)
https://github.com/fcmam5/telefonilo.js
click2call html javascript mobile mobile-web phone-number
Last synced: 25 days ago
JSON representation
Make "click to phone-call" links for your mobile users only (accepts encrypted phone numbers)
- Host: GitHub
- URL: https://github.com/fcmam5/telefonilo.js
- Owner: Fcmam5
- License: gpl-3.0
- Created: 2018-09-03T20:28:38.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2023-03-04T03:27:30.000Z (over 1 year ago)
- Last Synced: 2024-10-21T09:20:11.947Z (27 days ago)
- Topics: click2call, html, javascript, mobile, mobile-web, phone-number
- Language: JavaScript
- Homepage: https://fcmam5.github.io/telefonilo.js/
- Size: 758 KB
- Stars: 25
- Watchers: 3
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# telefonilo.js
[](https://travis-ci.org/Fcmam5/telefonilo.js) [](https://github.com/Fcmam5/telefonilo.js/blob/master/LICENSE)
[](https://www.npmjs.com/package/telefonilo.js)
[](https://www.codetriage.com/fcmam5/telefonilo.js)
Tiny JavaScript library, for making **Phone call links**, for modern mobile web browsers, this library is not needed, phone numbers are automatically detected, but on older ones, it's not, and if you manage to add a `` it may be clickable by non-mobile users and the link will lead to a wrong web page.
The name is from `telefonillo` means `Call him` (in Algerian dialect), and I found that it means `Door Phone` in [Spanish](https://en.wikipedia.org/wiki/Door_phone).
> ***TLDR:** JS library for creating "click to call" links for mobile users.*
### Features
* Replaces a selector containing the phone number with a clickable `` if the visitor is on mobile device.
* Accepts a decryption functions, you can write a crypted phone numbers in your markup to avoid crawlers, then pass your decryption function to Telefonilo contructor so it decrypt the phone number. `Have an issue? A better trick? Open an issue, we'd like to hear from you!`
## Usage
1. Inlude the `telefonilo.js` script in your HTML.
* ``
* Or, using a CDN
```html
```
* Or if you prefere NPM: `npm i telefonilo.js`
2. Instantiate Telefonilo by calling `Telefonilo();`. you can pass a selector of the tags containing phone numbers (ex: `Telefonilo('#my-phone-number')` or `Telefonilo('.phone-numbers')`) By default Telefonilo lookup for `.phone-num` classes.
### Example
```html
If you're on a mobile phone you should click on0123456789
Telefonilo('.phone');
```
### Using an encryption method
To avoid spam and crawlers, you may want to encrypt phone numbers on your web pages. For example, you're using `encryptionFct` to encrypt phone numbers when rendering your page:
```javascript
function encryptionFct(str){
return str.split('').map(n => (n.charCodeAt(0)+5)).join('-')
}
// encryptionFct('0123456789') Will return "53-54-55-56-57-58-59-60-61-62"
```
```html
If you're on a mobile phone you should click on
53-54-55-56-57-58-59-60-61-62
```
Then you can load `Telefonilo` and pass you decryption function, for example
```html
If you're on a mobile phone you should click on
53-54-55-56-57-58-59-60-61-62
var decrypTionFct = function(str) {
return str.split('-').map(n => String.fromCharCode(n-5)).join('');
}
// Initialize Telefonilo inside a captcha-check callback, or after a certain time/event to avoid crawlers
Telefonilo('.phone', true, decrypTionFct);
```
### Try Telephonilo.js
* Open [examples/example.html](https://fcmam5.github.io/telefonilo.js/examples/example.html) in any web browser.
* If you're not on mobile, you should see the phone number as a normal test.
* Press `Ctrl+Shift+M`, you should switch to the mobile view, you should see that the phone number became a clickable.
#### Output
* Desktop users will see the output as you markup should render
>
If you're on a mobile phone you should click on 0123456789
* Mobile users will see a `` link to your phone number
> If you're on a mobile phone you should click on 0123456789
```html
If you're on a mobile phone you should click on 0123456789
```
## Building and testing
### Tests
```bash
# Running unit tests with Jest
$ npm test # Or: npm run watch-tests
# Getting the test coverage, it creates a [./coverage] directory
$ npm run coverage
```
### Build
The file [src/telefonilo.js](./src/telefonilo.js) is not production-ready, it exports the private functions in order to test them. To use Telefonilo, you can find two files (minified and unminified verion) in [dist/](./dist/).
```bash
# Build with Gulp, it generates two files
$ npm run build
```
The generated `dist/telefonilo.js` is a copy of `src/telefonilo.js` without that peice of code that exports the private functions. To verify run:
```bash
$ diff src/telefonilo.js dist/telefonilo.js
```
## TODO
- [ ] Write tests. `Doing...`
- [x] Setup a test API: Export private functions in developement mode, and strip that piece of code when building the minified function for production usage
- [x] Accept phone number decryption functions as parameter for decrypting phone numbers (Might be a anti-crawlers solution).
## License
This project is licensed under the GNU GPL v3.0 License - see the [LICENSE](./LICENSE) file for details