Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dvhb/phone-highlight

Automatically adds tel: attribute for phone numbers on your HTML page.
https://github.com/dvhb/phone-highlight

javascript mobile-first phone-number

Last synced: about 1 month ago
JSON representation

Automatically adds tel: attribute for phone numbers on your HTML page.

Host: GitHub
URL: https://github.com/dvhb/phone-highlight
Owner: dvhb
License: mit
Created: 2015-07-27T09:13:32.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2018-03-31T10:13:39.000Z (almost 7 years ago)
Last Synced: 2024-11-07T01:49:54.806Z (2 months ago)
Topics: javascript, mobile-first, phone-number
Language: JavaScript
Homepage: http://dvhb.github.io/phone-highlight
Size: 25.4 KB
Stars: 3
Watchers: 20
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# jQuery Phone highlight

jQuery plugin which helps you replace text phone numbers with `` tag.

It may be useful if you want to add user friendly markup on mobile devices,
but want to keep text phone numbers in desktop version.

This plugin don't have library for detecting mobiles devices as a hard dependency.
You are free to use your favorite one. For example [mobile-detect.js](https://github.com/hgoebl/mobile-detect.js)

Check out [demo](http://dvhb.github.io/phone-highlight/) (open from mobile device or use emulation).

### Basic usage

At first, add `jquery.phone-highlight.js` into your ``.

Then, put following into in you `main.js`:

```javascript
$('p.containing-phones').phoneHighlight();
```

Or with mobile-detect.js

```javascript
var md = new MobileDetect(window.navigator.userAgent);
if (md.mobile()) {
$('.phones').phoneHighlight();
}
```

Plugin will replace text phones with `a` tag.

```HTML
Lorem ipsum dolor +7 (3812) 78-66-44
```

*NOTE!* Do not execute plugin on whole body or other huge/interactive parts of
the page! It may break other scripts or cause perfomance issues.

### Configuring

Plugin have 3 options which can be passed into its call:

```javascript
$('.phone').phoneHighlight({
countrycode: '+7',
citycode: '3812',
minLenWithouCodes: 7
});
```

### How it works

It tooks text content of marked nodes and removes all symbols
excepting digits and leading plus sign.

Then plugin checks format of obtained result. There are 2 possible cases:

1. Current result already starts with plus sign or its length is greater than
`minLenWithouCodes` option value. In this case `countrycode` and `citycode`
won't be added to phone.
2. Otherwise phone will be concatinated with `countrycode` and `citycode`
Note, that default values of `countrycode` and `citycode` options is
empty strings.

You can also override global code options by setting
appropriate `data` attributes:

```HTML
999-44-22
```

### Running tests

At firts, you have to install dependencies by running `npm install`
and `bower install`. Now execute `npm run test` command.

### License